:root{
      --bg0:#070818;
      --bg1:#0b1030;
      --ink:#eef0ff;
      --muted:#c7c9ef;
      --dim:#a6a8d4;

      --indigo:#1b1a4f;
      --indigo2:#0f1a55;

      --teal:#23f0d1;
      --teal2:#10c9c0;

      --coral:#ff5a7c;
      --lav:#c9b6ff;
      --gold:#f6c663;

      --glass: rgba(255,255,255,.08);
      --glass2: rgba(255,255,255,.12);
      --stroke: rgba(255,255,255,.16);
      --stroke2: rgba(255,255,255,.10);

      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --shadowSoft: 0 14px 40px rgba(0,0,0,.35);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;

      --focus: 0 0 0 3px rgba(35,240,209,.35), 0 0 0 1px rgba(255,255,255,.18) inset;

      --max: 1200px;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    *{ box-sizing:border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: var(--sans);
      color: var(--ink);
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(35,240,209,.18), transparent 60%),
        radial-gradient(900px 600px at 85% 18%, rgba(255,90,124,.16), transparent 58%),
        radial-gradient(1000px 780px at 60% 85%, rgba(201,182,255,.14), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    /* subtle grain */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        url("https://placehold.co/2x2/png?text=%20");
      opacity:.06;
      mix-blend-mode: overlay;
      filter: contrast(120%);
      transform: translateZ(0);
    }

    a{
      color: var(--ink);
      text-decoration: underline;
      text-decoration-thickness: .08em;
      text-underline-offset: .22em;
      text-decoration-color: rgba(35,240,209,.55);
      transition: color .35s var(--ease), text-decoration-color .35s var(--ease), background-size .35s var(--ease);
    }
    a:hover{
      color: #ffffff;
      text-decoration-color: rgba(255,90,124,.8);
    }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
      outline: none;
      box-shadow: var(--focus);
      border-color: rgba(35,240,209,.55) !important;
    }

    .wrap{
      width:min(var(--max), calc(100% - 40px));
      margin-inline:auto;
    }

    /* Header / Nav */
    header{
      position: sticky;
      top:0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(7,8,24,.78), rgba(7,8,24,.36));
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding: 14px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 220px;
    }
    .mark{
      width:42px; height:42px;
      border-radius: 14px;
      background:
        radial-gradient(circle at 30% 30%, rgba(35,240,209,.85), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(255,90,124,.75), transparent 58%),
        linear-gradient(135deg, rgba(201,182,255,.25), rgba(255,255,255,.06));
      border:1px solid rgba(255,255,255,.16);
      box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 22px rgba(35,240,209,.18);
      position:relative;
      overflow:hidden;
    }
    .mark::after{
      content:"";
      position:absolute;
      inset:-40%;
      background:
        conic-gradient(from 150deg,
          rgba(35,240,209,.0),
          rgba(35,240,209,.35),
          rgba(255,90,124,.20),
          rgba(246,198,99,.25),
          rgba(201,182,255,.18),
          rgba(35,240,209,.0));
      filter: blur(8px);
      opacity:.75;
      animation: spin 10s linear infinite;
    }
    @keyframes spin{ to{ transform: rotate(360deg); } }

    .brand h2{
      margin:0;
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 800;
      line-height:1.15;
    }
    .brand p{
      margin:2px 0 0;
      font-size: 12px;
      color: var(--muted);
      letter-spacing:.03em;
    }

    /* nav rules: only ul/li/a inside nav */
    nav ul{
      list-style:none;
      display:flex;
      gap:18px;
      padding:0;
      margin:0;
      align-items:center;
    }
    nav a{
      display:inline-block;
      padding: 10px 12px;
      border-radius: 999px;
      text-decoration: none;
      position:relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
      transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
      white-space: nowrap;
    }
    nav a::after{
      content:"";
      position:absolute;
      left:12px; right:12px; bottom:7px;
      height:2px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(35,240,209,.0), rgba(35,240,209,.9), rgba(255,90,124,.8), rgba(35,240,209,.0));
      opacity:.0;
      transform: translateY(4px);
      transition: opacity .45s var(--ease), transform .45s var(--ease);
      filter: blur(.1px);
    }
    nav a:hover{
      transform: translateY(-1px);
      border-color: rgba(35,240,209,.30);
      background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    }
    nav a:hover::after{ opacity:.9; transform: translateY(0); }

    /* Burger (pure CSS) */
    .navShell{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .burger{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      box-shadow: 0 10px 26px rgba(0,0,0,.22);
      cursor:pointer;
      transition: transform .45s var(--ease), border-color .45s var(--ease);
      user-select:none;
    }
    .burger:hover{ transform: translateY(-1px); border-color: rgba(255,90,124,.25); }
    .burgerLines{
      width: 18px; height: 12px;
      position:relative;
    }
    .burgerLines span{
      position:absolute; left:0; right:0;
      height:2px; border-radius: 2px;
      background: linear-gradient(90deg, rgba(35,240,209,.95), rgba(201,182,255,.85));
      box-shadow: 0 0 18px rgba(35,240,209,.22);
      transition: transform .45s var(--ease), top .45s var(--ease), opacity .35s var(--ease);
    }
    .burgerLines span:nth-child(1){ top:0; }
    .burgerLines span:nth-child(2){ top:5px; }
    .burgerLines span:nth-child(3){ top:10px; }

    #menuToggle{
      position:absolute;
      left:-9999px;
    }

    .navPanel{
      display:none;
      margin: 10px 0 16px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadowSoft);
    }
    .navPanel nav ul{
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .navPanel nav a{
      width:100%;
      text-align:center;
    }

    /* Desktop/tablet nav always visible; on <1200 show burger */
    .navInline{ display:none; }

    #menuToggle:checked ~ .navPanel{ display:block; }
    #menuToggle:checked + label .burgerLines span:nth-child(1){ top:5px; transform: rotate(45deg); }
    #menuToggle:checked + label .burgerLines span:nth-child(2){ opacity:0; }
    #menuToggle:checked + label .burgerLines span:nth-child(3){ top:5px; transform: rotate(-45deg); }

    .actions{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      min-width: 210px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      color: var(--ink);
      text-decoration:none;
      box-shadow: 0 12px 26px rgba(0,0,0,.25);
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease), filter .45s var(--ease);
      cursor:pointer;
      font-weight: 650;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .btn--primary{
      background:
        radial-gradient(120% 180% at 30% 10%, rgba(35,240,209,.28), rgba(255,255,255,.06) 52%, rgba(255,90,124,.12) 100%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border-color: rgba(35,240,209,.22);
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(246,198,99,.30);
      box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 0 26px rgba(35,240,209,.12);
      filter: saturate(1.1);
    }

    /* Modal (pure CSS) */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 22px;
      background: rgba(5,6,18,.62);
      backdrop-filter: blur(10px);
      z-index: 70;
    }
    .modal:target{ display:flex; }
    .modal__panel{
      width:min(720px, 100%);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(1200px 500px at 20% 0%, rgba(35,240,209,.12), transparent 58%),
        radial-gradient(900px 520px at 90% 15%, rgba(255,90,124,.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .modal__panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(600px 220px at 30% 30%, rgba(201,182,255,.10), transparent 60%),
        radial-gradient(700px 260px at 70% 60%, rgba(246,198,99,.10), transparent 58%);
      pointer-events:none;
      mix-blend-mode: screen;
    }
    .modal__head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding: 18px 18px 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      position:relative;
      z-index:1;
    }
    .modal__head h3{
      margin:0;
      font-size: 16px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .modal__head p{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
      max-width: 52ch;
    }
    .modal__close{
      flex:0 0 auto;
      display:inline-flex;
      width:40px; height:40px;
      border-radius: 14px;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      text-decoration:none;
      color: var(--ink);
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
      transition: transform .45s var(--ease), border-color .45s var(--ease);
    }
    .modal__close:hover{ transform: translateY(-1px); border-color: rgba(255,90,124,.30); }

    .modal__body{
      padding: 16px 18px 18px;
      position:relative;
      z-index:1;
    }
    .formGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    label{
      display:block;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
    input, textarea, select{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,8,24,.35);
      color: var(--ink);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
      transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
    }
    textarea{ min-height: 110px; resize: vertical; }
    .formActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 8px;
    }

    /* HERO */
    .hero{
      padding: 26px 0 18px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: stretch;
    }
    .heroCard{
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.14);
      background:
        radial-gradient(1400px 500px at 10% 10%, rgba(35,240,209,.14), transparent 60%),
        radial-gradient(900px 500px at 90% 25%, rgba(255,90,124,.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      box-shadow: var(--shadowSoft);
      overflow:hidden;
      position:relative;
    }
    .heroCard::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 300px at 50% 115%, rgba(201,182,255,.10), transparent 60%);
      pointer-events:none;
      mix-blend-mode: screen;
    }

    .heroInner{
      position:relative;
      z-index:1;
      padding: 22px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items:start;
    }

    .kicker{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      font-family: var(--mono);
      color: rgba(199,201,239,.95);
      font-size: 12px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      box-shadow: 0 10px 26px rgba(0,0,0,.18);
    }
    .dot{
      width:8px; height:8px; border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 18px rgba(35,240,209,.35);
    }
    .dot--coral{ background: var(--coral); box-shadow: 0 0 18px rgba(255,90,124,.30); }
    .dot--gold{ background: var(--gold); box-shadow: 0 0 18px rgba(246,198,99,.28); }

    h1{
      margin: 6px 0 0;
      font-size: clamp(30px, 4.6vw, 52px);
      line-height: 1.05;
      letter-spacing: .02em;
    }
    .heroLead{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: clamp(14px, 1.6vw, 18px);
      line-height: 1.6;
      max-width: 62ch;
    }

    .heroMeta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 10px;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(7,8,24,.22);
      box-shadow: 0 12px 26px rgba(0,0,0,.22);
      min-width: 190px;
    }
    .badge strong{
      display:block;
      font-size: 13px;
      letter-spacing:.08em;
      text-transform: uppercase;
    }
    .badge span{
      display:block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 2px;
    }

    /* simple CSS slider */
    .slider{
      max-height: 600px;
      height: min(52vh, 600px);
      border-radius: calc(var(--radius-xl) - 6px);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      position:relative;
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      background: rgba(255,255,255,.03);
    }
    .slides{
      height:100%;
      width:400%;
      display:flex;
      animation: slide 18s var(--ease) infinite;
    }
    .slide{
      width:25%;
      height:100%;
      position:relative;
      background-size: cover;
      background-position: center;
      filter: saturate(1.12) contrast(1.06);
    }
    .slide::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(7,8,24,.62), rgba(7,8,24,.20)),
        radial-gradient(800px 400px at 80% 20%, rgba(35,240,209,.22), transparent 60%),
        radial-gradient(900px 500px at 20% 80%, rgba(255,90,124,.18), transparent 62%);
      mix-blend-mode: multiply;
    }
    .slide::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00) 40%, rgba(7,8,24,.20));
      pointer-events:none;
    }
    .slideCaption{
      position:absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      padding: 12px 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,8,24,.42);
      backdrop-filter: blur(8px);
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      display:flex;
      gap:12px;
      align-items:flex-start;
      justify-content:space-between;
    }
    .slideCaption h3{
      margin:0;
      font-size: 14px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .slideCaption p{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .slideTag{
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(255,255,255,.92);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      white-space:nowrap;
    }

    @keyframes slide{
      0%, 20%{ transform: translateX(0%); }
      25%, 45%{ transform: translateX(-25%); }
      50%, 70%{ transform: translateX(-50%); }
      75%, 95%{ transform: translateX(-75%); }
      100%{ transform: translateX(0%); }
    }

    /* Sections */
    main{
      padding: 14px 0 28px;
    }
    section{
      margin: 18px 0;
    }
    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 12px;
    }
    .sectionHead h2{
      margin:0;
      font-size: clamp(18px, 2.2vw, 26px);
      letter-spacing:.08em;
      text-transform: uppercase;
    }
    .sectionHead p{
      margin:0;
      color: var(--muted);
      max-width: 62ch;
      line-height: 1.55;
      font-size: 14px;
    }
    .sectionPanel{
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      box-shadow: var(--shadowSoft);
      position:relative;
    }
    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 14px;
    }

    article.card{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      overflow:hidden;
      box-shadow: 0 14px 40px rgba(0,0,0,.28);
      transition: transform .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease), box-shadow .55s var(--ease);
      position:relative;
      min-height: 100%;
    }
    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(35,240,209,.26);
      box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 28px rgba(35,240,209,.10);
    }
    .cardTop{
      position:relative;
      aspect-ratio: 16/9;
      overflow:hidden;
      background: rgba(255,255,255,.05);
    }
    .cardTop img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter: saturate(1.18) contrast(1.05);
      transform: scale(1.02);
      transition: transform .8s var(--ease), filter .8s var(--ease);
    }
    .card:hover .cardTop img{ transform: scale(1.06); filter: saturate(1.25) contrast(1.08); }
    .cardTop::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(900px 350px at 18% 15%, rgba(35,240,209,.22), transparent 58%),
        radial-gradient(900px 350px at 80% 80%, rgba(255,90,124,.16), transparent 60%),
        linear-gradient(180deg, rgba(7,8,24,.12), rgba(7,8,24,.55));
      mix-blend-mode:multiply;
      pointer-events:none;
    }
    .tabRow{
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 12px 0;
    }
    .tab{
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing:.10em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,8,24,.28);
      color: rgba(255,255,255,.92);
      box-shadow: 0 10px 22px rgba(0,0,0,.22);
    }
    .tab.teal{ border-color: rgba(35,240,209,.24); }
    .tab.coral{ border-color: rgba(255,90,124,.22); }
    .tab.gold{ border-color: rgba(246,198,99,.22); }

    .cardBody{
      padding: 12px;
    }
    .cardBody h3{
      margin: 6px 0 6px;
      font-size: 16px;
      line-height: 1.25;
      letter-spacing:.02em;
    }
    .cardBody p{
      margin:0;
      color: var(--muted);
      line-height: 1.6;
      font-size: 14px;
    }
    .cardFoot{
      padding: 10px 12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      color: var(--dim);
      font-size: 12px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .stamp{
      font-family: var(--mono);
      letter-spacing:.06em;
    }
    .more{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      transition: transform .45s var(--ease), border-color .45s var(--ease);
      white-space:nowrap;
    }
    .more:hover{ transform: translateY(-1px); border-color: rgba(201,182,255,.26); }
    .more span{ font-family: var(--mono); }

    /* Section individuality */
    .panelA{
      background:
        radial-gradient(900px 420px at 15% 10%, rgba(35,240,209,.12), transparent 60%),
        radial-gradient(900px 420px at 90% 70%, rgba(201,182,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    }
    .panelA .card:hover{ border-color: rgba(35,240,209,.30); }

    .panelB{
      background:
        radial-gradient(1000px 420px at 85% 12%, rgba(255,90,124,.12), transparent 60%),
        radial-gradient(1000px 420px at 10% 85%, rgba(246,198,99,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    }
    .panelB .card:hover{ border-color: rgba(255,90,124,.28); box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 30px rgba(255,90,124,.10); }

    .panelC{
      background:
        radial-gradient(900px 420px at 15% 20%, rgba(201,182,255,.12), transparent 60%),
        radial-gradient(900px 420px at 85% 85%, rgba(35,240,209,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    }
    .panelC .card{
      background: rgba(255,255,255,.05);
    }
    .panelC .card:hover{ border-color: rgba(201,182,255,.26); box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 30px rgba(201,182,255,.10); }

    /* Blog list */
    .blogBlock{
      margin: 20px 0 10px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(1000px 420px at 75% 25%, rgba(35,240,209,.10), transparent 60%),
        radial-gradient(900px 420px at 15% 80%, rgba(255,90,124,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      box-shadow: var(--shadowSoft);
      overflow:hidden;
    }
    .blogHead{
      padding: 16px 16px 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
    }
    .blogHead h2{
      margin:0;
      font-size: 18px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .blogHead p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height:1.55;
      max-width: 70ch;
    }
    .blogList{
      list-style:none;
      margin:0;
      padding: 12px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .blogList li{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      overflow:hidden;
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
      transition: transform .55s var(--ease), border-color .55s var(--ease);
    }
    .blogList li:hover{ transform: translateY(-2px); border-color: rgba(35,240,209,.22); }
    .blogItem{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap: 12px;
      align-items:center;
      padding: 10px;
    }
    .blogItem img{
      width:100%;
      height:86px;
      object-fit:cover;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      filter: saturate(1.15) contrast(1.04);
    }
    .blogItem a{
      text-decoration:none;
      border-radius: 16px;
      display:block;
      padding: 8px 8px;
      background:
        radial-gradient(600px 220px at 10% 0%, rgba(35,240,209,.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08);
      transition: transform .45s var(--ease), border-color .45s var(--ease);
    }
    .blogItem a:hover{ transform: translateY(-1px); border-color: rgba(255,90,124,.20); }
    .blogItem h3{
      margin:0 0 6px;
      font-size: 15px;
      letter-spacing:.02em;
    }
    .blogItem p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .blogMeta{
      margin-top:8px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing:.08em;
      text-transform: uppercase;
      color: rgba(199,201,239,.95);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    /* Content / Article block */
    .contentWrap{
      margin: 18px 0;
      display:flex;
      justify-content:center;
    }
    .contentPanel{
      width:min(var(--max), 100%);
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(1100px 500px at 20% 15%, rgba(201,182,255,.10), transparent 60%),
        radial-gradient(1000px 520px at 85% 10%, rgba(35,240,209,.10), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .contentInner{
      padding: 16px;
    }
    .centerMedia{
      display:flex;
      justify-content:center;
    }
    .mediaCard{
      width:min(880px, 100%);
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(255,255,255,.04);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }
    .mediaCard img{
      width:100%;
      height:auto;
      display:block;
      aspect-ratio: 16/9;
      object-fit: cover;
      filter: saturate(1.14) contrast(1.05);
    }
    .rating{
      width:min(880px, 100%);
      margin: 12px auto 0;
      padding: 10px 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,8,24,.30);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      box-shadow: 0 14px 40px rgba(0,0,0,.26);
    }
    .rating strong{
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,.92);
      font-family: var(--mono);
    }
    .rating span{
      color: var(--muted);
      font-size: 13px;
    }
    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(35,240,209,.45), rgba(255,90,124,.35), transparent);
      margin: 16px auto;
      width:min(920px, 100%);
      opacity:.9;
    }

    article[itemscope]{
      width:min(920px, 100%);
      margin: 0 auto;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      box-shadow: 0 18px 60px rgba(0,0,0,.28);
      overflow:hidden;
    }
    .articleHeader{
      padding: 16px 16px 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(900px 220px at 20% 0%, rgba(35,240,209,.10), transparent 60%),
        radial-gradient(900px 220px at 80% 20%, rgba(255,90,124,.08), transparent 62%);
    }
    .articleHeader h1{
      margin:0;
      font-size: clamp(22px, 3.2vw, 34px);
      letter-spacing: .02em;
    }
    .byline{
      display:flex;
      flex-wrap:wrap;
      gap: 10px 14px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
      align-items:center;
    }
    .byline .chip{
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing:.08em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(7,8,24,.22);
    }
    .articleBody{
      padding: 14px 16px 18px;
      line-height: 1.75;
      color: rgba(238,240,255,.92);
      font-size: 15px;
    }
    .articleBody p{ margin: 0 0 12px; color: rgba(238,240,255,.90); }
    .callout{
      margin: 14px 0;
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(700px 240px at 20% 10%, rgba(246,198,99,.12), transparent 60%),
        radial-gradient(700px 240px at 80% 90%, rgba(35,240,209,.10), transparent 62%),
        rgba(255,255,255,.05);
      box-shadow: 0 16px 50px rgba(0,0,0,.24);
      position:relative;
      overflow:hidden;
    }
    .callout::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width: 6px;
      background: linear-gradient(180deg, rgba(35,240,209,.9), rgba(255,90,124,.85));
      opacity:.85;
    }
    .callout h4{
      margin: 0 0 6px;
      letter-spacing:.10em;
      text-transform: uppercase;
      font-size: 13px;
    }
    .callout p{ margin:0; color: var(--muted); }

    .prevNext{
      width:min(920px, 100%);
      margin: 12px auto 0;
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      justify-content:space-between;
    }

    /* Comments */
    .commentsBlock{
      width:min(920px, 100%);
      margin: 18px auto 0;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      box-shadow: 0 18px 60px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .commentsHead{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      background:
        radial-gradient(900px 240px at 12% 0%, rgba(201,182,255,.10), transparent 60%),
        rgba(255,255,255,.03);
    }
    .commentsHead h3{
      margin:0;
      letter-spacing:.12em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .commentsEmpty{
      padding: 16px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }
    .commentForm{
      padding: 0 16px 16px;
    }

    /* Related */
    .related{
      width:min(920px, 100%);
      margin: 18px auto 0;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(950px 320px at 80% 10%, rgba(35,240,209,.10), transparent 60%),
        radial-gradient(900px 340px at 10% 85%, rgba(255,90,124,.10), transparent 60%),
        rgba(255,255,255,.04);
      box-shadow: 0 18px 60px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .relatedHead{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
    }
    .relatedHead h3{
      margin:0;
      letter-spacing:.12em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .relatedGrid{
      padding: 12px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .relCard{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap: 12px;
      align-items:center;
      padding: 10px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
      transition: transform .55s var(--ease), border-color .55s var(--ease);
    }
    .relCard:hover{ transform: translateY(-2px); border-color: rgba(246,198,99,.22); }
    .relCard img{
      width:100%;
      height:86px;
      object-fit:cover;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
    }
    .relCard a{
      text-decoration:none;
      display:block;
      padding: 6px 6px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(7,8,24,.20);
    }
    .relCard h4{ margin:0 0 6px; font-size: 15px; }
    .relCard p{ margin:0; color: var(--muted); font-size: 13px; line-height:1.55; }

    /* Contacts */
    .contacts{
      margin: 18px 0;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(1000px 420px at 15% 20%, rgba(246,198,99,.10), transparent 60%),
        radial-gradient(900px 420px at 85% 70%, rgba(201,182,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      box-shadow: var(--shadowSoft);
      overflow:hidden;
    }
    .contactsInner{
      padding: 16px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items:start;
    }
    .contactCard{
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
      padding: 14px;
    }
    .contactCard h3{
      margin:0 0 8px;
      letter-spacing:.10em;
      text-transform: uppercase;
      font-size: 14px;
    }
    .contactCard p, .contactCard address{
      margin:0;
      color: var(--muted);
      line-height:1.7;
      font-size: 14px;
    }
    address{ font-style: normal; }
    .map{
      width:100%;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(255,255,255,.04);
      box-shadow: 0 18px 60px rgba(0,0,0,.26);
      min-height: 240px;
    }
    .map iframe{
      width:100%;
      height: 260px;
      border:0;
      display:block;
      filter: saturate(1.05) contrast(1.05);
    }

    /* Aside promo */
    aside{
      margin: 18px 0 10px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(900px 360px at 12% 20%, rgba(35,240,209,.10), transparent 60%),
        radial-gradient(900px 360px at 80% 85%, rgba(255,90,124,.10), transparent 60%),
        rgba(255,255,255,.04);
      box-shadow: var(--shadowSoft);
      overflow:hidden;
    }
    .asideInner{
      padding: 14px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .promo{
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      padding: 14px;
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
      transition: transform .55s var(--ease), border-color .55s var(--ease);
    }
    .promo:hover{ transform: translateY(-2px); border-color: rgba(35,240,209,.22); }
    .promo h3{
      margin:0 0 6px;
      font-size: 14px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .promo p{
      margin:0;
      color: var(--muted);
      line-height:1.65;
      font-size: 14px;
    }

    /* Footer */
    footer{
      margin-top: 18px;
      padding: 22px 0 26px;
      background:
        radial-gradient(1200px 520px at 30% 0%, rgba(35,240,209,.10), transparent 60%),
        radial-gradient(900px 520px at 85% 30%, rgba(255,90,124,.08), transparent 62%),
        linear-gradient(180deg, rgba(7,8,24,.25), rgba(7,8,24,.88));
      border-top: 1px solid rgba(255,255,255,.10);
      position:relative;
      overflow:hidden;
    }
    footer::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.35), transparent 55%),
        radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,.25), transparent 55%),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.28), transparent 55%),
        radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.22), transparent 55%),
        radial-gradient(1px 1px at 52% 78%, rgba(255,255,255,.18), transparent 55%);
      opacity:.55;
      pointer-events:none;
    }
    .footerGrid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      align-items:start;
    }
    .footerSlogan{
      margin:0;
      font-size: 18px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .footerAbout{
      margin:0;
      color: var(--muted);
      line-height:1.7;
      font-size: 14px;
      max-width: 72ch;
    }
    .social{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .copyright{
      margin:0;
      color: rgba(199,201,239,.85);
      font-family: var(--mono);
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: 11px;
    }

    /* Tablet */
    @media (min-width: 768px){
      .heroInner{ padding: 24px; }
      .grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px; }
      .blogList{ grid-template-columns: repeat(2, 1fr); }
      .relatedGrid{ grid-template-columns: repeat(2, 1fr); }
      .contactsInner{ grid-template-columns: 1.1fr .9fr; }
      .asideInner{ grid-template-columns: repeat(2, 1fr); }
      .formGrid{ grid-template-columns: 1fr 1fr; }
      .formGrid .full{ grid-column: 1 / -1; }
      .map iframe{ height: 320px; }
    }

    /* Desktop */
    @media (min-width: 1200px){
      .navInline{ display:block; }
      .burger{ display:none; }
      .navPanel{ display:none !important; }
      .heroGrid{ grid-template-columns: 1.15fr .85fr; }
      .heroInner{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: repeat(3, 1fr); }
      .blogList{ grid-template-columns: repeat(3, 1fr); }
      .relatedGrid{ grid-template-columns: repeat(3, 1fr); }
      .asideInner{ grid-template-columns: repeat(4, 1fr); }
      .footerGrid{ grid-template-columns: 1.2fr .8fr; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior:auto !important; }
      .slides{ animation:none; }
      .mark::after{ animation:none; }
      .card, .btn, nav a, .more, .blogList li, .relCard, .promo{ transition:none; }
    }