:root{
      --kiwi:#86f23a;
      --kiwi-2:#b8ff68;
      --ocean:#2aa8ff;
      --ember:#ff6a2a;
      --basalt:#070a0f;
      --basalt-2:#0b1220;
      --ink:#0e1726;
      --alpine:#f3f7ff;
      --mist:rgba(255,255,255,.06);
      --rule:rgba(255,255,255,.14);
      --rule-2:rgba(134,242,58,.35);
      --shadow: 0 18px 55px rgba(0,0,0,.55);
      --shadow-2: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-sm: 12px;
      --max: 1180px;
      --track: .12em;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --cond: ui-sans-serif, system-ui, -apple-system, "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: var(--font);
      color: rgba(243,247,255,.92);
      background:
        radial-gradient(1200px 700px at 10% 10%, rgba(42,168,255,.14), transparent 60%),
        radial-gradient(900px 550px at 90% 0%, rgba(255,106,42,.12), transparent 55%),
        radial-gradient(900px 700px at 30% 85%, rgba(134,242,58,.10), transparent 60%),
        linear-gradient(180deg, #06080d 0%, #05060a 45%, #04050a 100%);
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
      outline: 2px solid var(--kiwi);
      outline-offset: 3px;
      border-radius: 10px;
    }

    /* Topo + carbon weave layer */
    body::before{
      content:"";
      position: fixed;
      inset:0;
      pointer-events:none;
      background:
        /* topo contour */
        repeating-radial-gradient(circle at 20% 30%,
          rgba(255,255,255,.03) 0 2px,
          transparent 2px 18px),
        repeating-radial-gradient(circle at 75% 40%,
          rgba(255,255,255,.02) 0 2px,
          transparent 2px 22px),
        /* carbon weave */
        linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 10px),
        linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 10px);
      mix-blend-mode: overlay;
      opacity:.45;
      filter: contrast(1.05);
    }

    /* Layout helpers */
    .wrap{ width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }
    .grid{ display:grid; gap: 1rem; }

    /* Header */
    header{
      position: sticky;
      top:0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background:
        linear-gradient(180deg, rgba(7,10,15,.85) 0%, rgba(7,10,15,.55) 100%);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: .9rem 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      min-width: 220px;
    }
    .mark{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background:
        radial-gradient(12px 12px at 30% 35%, rgba(255,255,255,.25), transparent 60%),
        linear-gradient(135deg, rgba(134,242,58,.95), rgba(42,168,255,.65));
      box-shadow: 0 12px 30px rgba(134,242,58,.12), inset 0 0 0 1px rgba(255,255,255,.14);
      position: relative;
    }
    .mark::after{
      content:"";
      position:absolute; inset:9px 10px 10px 9px;
      border-radius: 12px;
      border:1px dashed rgba(255,255,255,.22);
      transform: skewX(-10deg);
      opacity:.9;
    }
    .brand h2{
      margin:0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 850;
      font-size: 1rem;
      line-height: 1.05;
    }
    .brand small{
      display:block;
      color: rgba(243,247,255,.70);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top:.15rem;
      font-size: .72rem;
    }

    /* Required nav structure: nav > ul > li > a only */
    nav ul{
      list-style:none;
      padding:0; margin:0;
      display:flex;
      align-items:center;
      gap:.2rem;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      background: rgba(11,18,32,.45);
      box-shadow: inset 0 0 0 1px rgba(134,242,58,.10);
      overflow:hidden;
    }
    nav li{ margin:0; }
    nav a{
      display:block;
      padding: .72rem .95rem;
      font-weight: 750;
      font-family: var(--cond);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .86rem;
      color: rgba(243,247,255,.88);
      position: relative;
      transition: background .35s ease, color .35s ease, transform .35s ease;
    }
    nav a::after{
      content:"";
      position:absolute;
      left: .9rem; right: .9rem; bottom: .55rem;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(134,242,58,.65), transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .35s ease;
      opacity:.9;
    }
    nav a:hover{
      background: rgba(134,242,58,.08);
      color: rgba(243,247,255,.96);
    }
    nav a:hover::after{ transform: scaleX(1); }

    .actions{
      display:flex;
      align-items:center;
      gap:.7rem;
      justify-content:flex-end;
      min-width: 220px;
    }
    .chip{
      display:none;
      padding:.55rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.35);
      color: rgba(243,247,255,.80);
      font-weight: 700;
      letter-spacing: .06em;
      font-size:.78rem;
      text-transform: uppercase;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius: 999px;
      padding: .75rem 1rem;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(134,242,58,.18), rgba(134,242,58,.08));
      color: rgba(243,247,255,.96);
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 850;
      font-size:.86rem;
      box-shadow: 0 10px 22px rgba(134,242,58,.08);
      transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(134,242,58,.55);
      box-shadow: 0 18px 40px rgba(134,242,58,.16);
      background: linear-gradient(180deg, rgba(134,242,58,.28), rgba(42,168,255,.08));
    }
    .btn.secondary{
      background: linear-gradient(180deg, rgba(42,168,255,.16), rgba(42,168,255,.06));
      box-shadow: 0 10px 22px rgba(42,168,255,.08);
    }
    .btn.secondary:hover{
      border-color: rgba(42,168,255,.55);
      box-shadow: 0 18px 40px rgba(42,168,255,.16);
    }
    .btn .chev{
      width: .62rem; height: .62rem;
      border-right: 2px solid rgba(243,247,255,.92);
      border-bottom: 2px solid rgba(243,247,255,.92);
      transform: rotate(-45deg) skewX(-8deg);
      margin-top: .05rem;
    }

    /* Burger menu: CSS-only using details */
    details.burger{
      width:100%;
      border-top: 1px dashed rgba(255,255,255,.16);
      display:none;
    }
    details.burger summary{
      list-style:none;
      cursor:pointer;
      padding: .75rem 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      color: rgba(243,247,255,.86);
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 850;
      user-select:none;
    }
    details.burger summary::-webkit-details-marker{ display:none; }
    .burgerIcon{
      width: 44px; height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(11,18,32,.35);
      display:grid;
      place-items:center;
      box-shadow: inset 0 0 0 1px rgba(134,242,58,.10);
    }
    .burgerIcon i{
      display:block; width:18px; height:2px; background: rgba(243,247,255,.84);
      position:relative;
      border-radius: 99px;
    }
    .burgerIcon i::before, .burgerIcon i::after{
      content:""; position:absolute; left:0; width:18px; height:2px; background: rgba(243,247,255,.84);
      border-radius: 99px;
      transition: transform .35s ease, top .35s ease, opacity .35s ease;
    }
    .burgerIcon i::before{ top:-6px; }
    .burgerIcon i::after{ top:6px; }
    details[open] .burgerIcon i{ background: transparent; }
    details[open] .burgerIcon i::before{ top:0; transform: rotate(45deg); }
    details[open] .burgerIcon i::after{ top:0; transform: rotate(-45deg); }

    .mobileNav{
      padding: .8rem 0 1rem;
      display:grid;
      gap:.65rem;
    }
    .mobileNav a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: .8rem .95rem;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.30);
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 850;
      transition: transform .35s ease, border-color .35s ease, background .35s ease;
    }
    .mobileNav a:hover{
      transform: translateY(-1px);
      border-color: rgba(134,242,58,.45);
      background: rgba(134,242,58,.07);
    }

    /* HERO */
    .hero{
      position:relative;
      padding: 2.2rem 0 1.6rem;
      overflow:hidden;
    }
    .hero .lane{
      display:grid;
      gap: 1.25rem;
      align-items: stretch;
    }

    .heroCard{
      border-radius: calc(var(--radius) + 6px);
      background:
        linear-gradient(180deg, rgba(11,18,32,.75), rgba(7,10,15,.70)),
        radial-gradient(900px 300px at 20% 0%, rgba(42,168,255,.12), transparent 60%),
        radial-gradient(900px 300px at 80% 0%, rgba(134,242,58,.10), transparent 62%);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow);
      position: relative;
      overflow:hidden;
    }
    .heroCard::before{
      content:"";
      position:absolute; inset:-1px;
      background:
        /* route line */
        linear-gradient(90deg, transparent 0 14%, rgba(134,242,58,.65) 14% 14.5%, transparent 14.5% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 16px);
      opacity:.35;
      pointer-events:none;
      mix-blend-mode: overlay;
    }
    .heroInner{
      position:relative;
      padding: 1.25rem;
      display:grid;
      gap: 1rem;
    }
    .kicker{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding: .42rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      font-weight: 850;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size: .78rem;
      color: rgba(243,247,255,.86);
    }
    .dot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: var(--kiwi);
      box-shadow: 0 0 0 4px rgba(134,242,58,.16);
    }

    .hero h1{
      margin:0;
      font-family: var(--cond);
      font-size: clamp(2.1rem, 4.2vw, 3.35rem);
      line-height: 1.03;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 900;
    }
    .hero p{
      margin:0;
      color: rgba(243,247,255,.78);
      line-height: 1.65;
      max-width: 70ch;
      font-size: 1rem;
    }

    .heroMeta{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem;
      margin-top:.25rem;
    }
    .metric{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
      padding: .85rem .9rem;
      position:relative;
      overflow:hidden;
    }
    .metric::after{
      content:"";
      position:absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(134,242,58,.22), transparent 55%);
      opacity:.25;
      transform: translateX(-55%);
      transition: transform .5s ease;
    }
    .heroCard:hover .metric::after{ transform: translateX(0%); }
    .metric strong{
      display:block;
      font-family: var(--cond);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 900;
      font-size: .74rem;
      color: rgba(243,247,255,.70);
    }
    .metric span{
      display:block;
      font-family: var(--cond);
      font-weight: 950;
      letter-spacing: .05em;
      font-size: 1.2rem;
      margin-top:.35rem;
    }
    .metric em{
      font-style:normal;
      color: rgba(243,247,255,.72);
      font-size:.9rem;
    }

    .heroCtas{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      align-items:center;
      margin-top:.1rem;
    }
    .link{
      display:inline-block;
      font-weight: 800;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(243,247,255,.84);
      position:relative;
      padding: .5rem .1rem;
      transition: color .35s ease;
    }
    .link::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:.35rem;
      height:1px;
      background: linear-gradient(90deg, rgba(42,168,255,.0), rgba(42,168,255,.8), rgba(42,168,255,.0));
      transform: scaleX(.65);
      transform-origin:center;
      transition: transform .35s ease, background .35s ease;
      opacity:.95;
    }
    .link:hover{ color: rgba(243,247,255,.96); }
    .link:hover::after{
      transform: scaleX(1);
      background: linear-gradient(90deg, rgba(134,242,58,.0), rgba(134,242,58,.85), rgba(134,242,58,.0));
    }

    /* Simple CSS slider (no JS). Max height 600px */
    .slider{
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.35);
      overflow:hidden;
      box-shadow: var(--shadow-2);
      max-height: 600px;
      height: min(56vw, 520px);
      position:relative;
      isolation:isolate;
    }
    .slides{
      height:100%;
      width:300%;
      display:flex;
      animation: ride 18s infinite;
    }
    .slide{
      width: calc(100% / 3);
      height:100%;
      position:relative;
    }
    .slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter: contrast(1.08) saturate(1.05) brightness(.95);
      transform: scale(1.03);
    }
    .slide::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(7,10,15,.20), rgba(7,10,15,.88)),
        radial-gradient(700px 260px at 20% 30%, rgba(42,168,255,.18), transparent 60%),
        radial-gradient(700px 260px at 70% 20%, rgba(134,242,58,.14), transparent 62%);
      pointer-events:none;
    }
    .caption{
      position:absolute;
      left: 1rem;
      right: 1rem;
      bottom: 1rem;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 1rem;
    }
    .capTitle{
      max-width: 62ch;
    }
    .capTitle strong{
      display:block;
      font-family: var(--cond);
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 1.05rem;
    }
    .capTitle span{
      display:block;
      margin-top:.25rem;
      color: rgba(243,247,255,.76);
      line-height:1.5;
      font-size:.95rem;
    }
    .capPills{
      display:flex;
      gap:.45rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill{
      padding:.35rem .55rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.045);
      font-weight: 850;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size:.72rem;
      color: rgba(243,247,255,.82);
    }
    .pill.kiwi{ border-color: rgba(134,242,58,.45); box-shadow: inset 0 0 0 1px rgba(134,242,58,.08); }
    .pill.ocean{ border-color: rgba(42,168,255,.45); }

    .slider .progress{
      position:absolute;
      left:0; right:0; top:0;
      height: 3px;
      background: rgba(255,255,255,.10);
      overflow:hidden;
    }
    .slider .progress::after{
      content:"";
      display:block;
      height:100%;
      width: 33.333%;
      background: linear-gradient(90deg, var(--kiwi), rgba(42,168,255,.95));
      animation: prog 6s infinite;
    }

    @keyframes ride{
      0%, 28%{ transform: translateX(0); }
      33%, 61%{ transform: translateX(-33.333%); }
      66%, 94%{ transform: translateX(-66.666%); }
      100%{ transform: translateX(0); }
    }
    @keyframes prog{
      0%{ transform: translateX(-100%); }
      40%{ transform: translateX(0%); }
      100%{ transform: translateX(200%); }
    }

    /* Main sections */
    main{ padding: 1.1rem 0 2.2rem; }
    section{
      padding: 1.6rem 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom: 1rem;
    }
    .sectionHead h2{
      margin:0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.25rem;
    }
    .sectionHead p{
      margin:0;
      color: rgba(243,247,255,.72);
      max-width: 65ch;
      line-height:1.6;
      font-size:.98rem;
    }
    .ruleline{
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.18), rgba(134,242,58,.25), rgba(255,255,255,.0));
      margin-top: .75rem;
    }

    .cards{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    article.card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(11,18,32,.35);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
      transition: transform .45s ease, border-color .45s ease, background .45s ease, box-shadow .45s ease;
      position:relative;
    }
    article.card:hover{
      transform: translateY(-3px);
      border-color: rgba(134,242,58,.35);
      box-shadow: 0 18px 44px rgba(0,0,0,.48);
    }
    .thumb{
      aspect-ratio: 16 / 9;
      position:relative;
      overflow:hidden;
      background: rgba(255,255,255,.03);
    }
    .thumb img{
      width:100%; height:100%;
      object-fit: cover;
      filter: contrast(1.1) saturate(1.06) brightness(.95);
      transform: scale(1.04);
      transition: transform .6s ease;
    }
    article.card:hover .thumb img{ transform: scale(1.10); }
    .thumb::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(180deg, rgba(7,10,15,.05), rgba(7,10,15,.88)),
        radial-gradient(420px 180px at 20% 30%, rgba(42,168,255,.18), transparent 60%);
      pointer-events:none;
    }

    .cardBody{
      padding: 1rem 1rem 1.05rem;
      display:grid;
      gap:.7rem;
    }
    .cardTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding: .32rem .55rem;
      border-radius: 999px;
      border: 1px dashed rgba(255,255,255,.18);
      background: rgba(255,255,255,.03);
      font-family: var(--cond);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 900;
      font-size:.72rem;
      color: rgba(243,247,255,.78);
    }
    .tag i{
      width:.55rem; height:.55rem;
      border-radius: 2px;
      background: rgba(134,242,58,.85);
      box-shadow: 0 0 0 4px rgba(134,242,58,.12);
      display:inline-block;
      transform: skewX(-12deg);
    }
    .meta{
      color: rgba(243,247,255,.62);
      font-weight: 700;
      font-size:.85rem;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .cardBody h3{
      margin:0;
      font-family: var(--cond);
      letter-spacing: .07em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.05rem;
      line-height: 1.12;
    }
    .cardBody p{
      margin:0;
      color: rgba(243,247,255,.72);
      line-height: 1.6;
      font-size: .96rem;
    }
    .cardBottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .8rem;
      margin-top: .1rem;
      padding-top: .75rem;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .stats{
      display:flex; gap:.75rem; flex-wrap:wrap;
      color: rgba(243,247,255,.72);
      font-weight: 800;
      font-size:.85rem;
    }
    .stat{
      display:flex; align-items:center; gap:.4rem;
    }
    .icon{
      width: 18px; height: 18px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      position:relative;
      overflow:hidden;
    }
    .icon::after{
      content:"";
      position:absolute;
      inset: 3px;
      border: 1px solid rgba(134,242,58,.55);
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(-45deg);
      border-radius: 4px;
      opacity:.9;
    }

    .ghost{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding: .6rem .8rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.02);
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 900;
      font-size:.82rem;
      transition: transform .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
    }
    .ghost:hover{
      transform: translateY(-1px);
      border-color: rgba(42,168,255,.55);
      box-shadow: 0 0 0 4px rgba(42,168,255,.10);
    }

    /* Section individuality */
    .sec-1{
      background:
        linear-gradient(180deg, rgba(42,168,255,.04), transparent 65%);
    }
    .sec-1 article.card:hover{ border-color: rgba(42,168,255,.42); }
    .sec-1 .tag i{ background: rgba(42,168,255,.85); box-shadow: 0 0 0 4px rgba(42,168,255,.12); }
    .sec-1 .thumb::after{ background:
      linear-gradient(180deg, rgba(7,10,15,.04), rgba(7,10,15,.88)),
      radial-gradient(420px 180px at 70% 35%, rgba(42,168,255,.22), transparent 60%);
    }

    .sec-2{
      background:
        linear-gradient(180deg, rgba(134,242,58,.04), transparent 65%);
    }
    .sec-2 article.card{
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(11,18,32,.28));
    }
    .sec-2 article.card:hover{
      border-color: rgba(134,242,58,.48);
      transform: translateY(-4px) skewX(-.15deg);
    }
    .sec-2 .ghost:hover{ border-color: rgba(134,242,58,.55); box-shadow: 0 0 0 4px rgba(134,242,58,.10); }
    .sec-2 .thumb::after{ background:
      linear-gradient(180deg, rgba(7,10,15,.04), rgba(7,10,15,.88)),
      radial-gradient(520px 200px at 25% 30%, rgba(134,242,58,.18), transparent 62%);
    }

    .sec-3{
      background:
        linear-gradient(180deg, rgba(255,106,42,.035), transparent 70%);
      position:relative;
    }
    .sec-3 .cards{ gap: 1.05rem; }
    .sec-3 article.card{
      border-style: solid;
      background:
        linear-gradient(180deg, rgba(255,106,42,.04), rgba(11,18,32,.30));
    }
    .sec-3 article.card:hover{
      border-color: rgba(255,106,42,.50);
      box-shadow: 0 22px 60px rgba(0,0,0,.55);
    }
    .sec-3 .tag i{ background: rgba(255,106,42,.85); box-shadow: 0 0 0 4px rgba(255,106,42,.12); }

    /* Blog list */
    .block{
      padding: 1.8rem 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .block h2{
      margin:0 0 .9rem 0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.25rem;
    }
    .blogList{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap: 1rem;
    }
    .blogList li{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.30);
      overflow:hidden;
      transition: transform .45s ease, border-color .45s ease, background .45s ease;
    }
    .blogList li:hover{
      transform: translateY(-2px);
      border-color: rgba(134,242,58,.40);
      background: rgba(11,18,32,.38);
    }
    .blogCard{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap: .9rem;
      align-items:stretch;
    }
    .blogCard img{
      width:100%;
      height:100%;
      object-fit: cover;
      filter: contrast(1.08) saturate(1.02) brightness(.95);
    }
    .blogCard a{
      display:block;
      padding: .9rem .95rem .95rem 0;
    }
    .blogCard h3{
      margin:.1rem 0 .35rem;
      font-family: var(--cond);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.02rem;
      line-height:1.15;
    }
    .blogCard p{
      margin:0;
      color: rgba(243,247,255,.72);
      line-height:1.55;
      font-size:.95rem;
    }

    /* Content center block */
    .contentCenter{
      padding: 2rem 0 1.2rem;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .contentWrap{
      width:min(900px, calc(100% - 2rem));
      margin-inline:auto;
    }
    .media{
      border-radius: calc(var(--radius) + 8px);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(11,18,32,.30);
      box-shadow: var(--shadow-2);
    }
    .media img{
      width:100%;
      height: auto;
      display:block;
      aspect-ratio: 16/9;
      object-fit: cover;
      filter: contrast(1.10) brightness(.95) saturate(1.04);
    }
    .rating{
      margin-top: .8rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: .85rem .95rem;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(90deg, rgba(134,242,58,.10), rgba(42,168,255,.06), rgba(255,106,42,.06));
    }
    .rating strong{
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
    }
    .rating .meter{
      flex: 1;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      min-width: 120px;
      max-width: 320px;
    }
    .rating .meter span{
      display:block; height:100%;
      width: 86%;
      background: linear-gradient(90deg, var(--kiwi), var(--ocean));
      filter: saturate(1.1);
    }
    .divider{
      margin: 1.2rem 0 1.2rem;
      height: 1px;
      background:
        linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
      position:relative;
    }
    .divider::after{
      content:"";
      position:absolute;
      left: 50%;
      top: -5px;
      transform: translateX(-50%);
      width: 10px; height: 10px;
      border-radius: 999px;
      background: var(--kiwi);
      box-shadow: 0 0 0 6px rgba(134,242,58,.14);
    }

    .contentArticle{
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(11,18,32,.26));
      padding: 1.2rem 1.1rem;
      box-shadow: 0 14px 38px rgba(0,0,0,.40);
    }
    .contentArticle h1{
      margin: 0 0 .6rem 0;
      font-family: var(--cond);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 950;
      line-height:1.06;
      font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    }
    .byline{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem 1rem;
      align-items:center;
      color: rgba(243,247,255,.70);
      font-weight: 750;
      font-size:.95rem;
      padding-bottom: .9rem;
      border-bottom: 1px dashed rgba(255,255,255,.16);
      margin-bottom: 1rem;
    }
    .byline span{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
    }
    .pin{
      width: 14px; height: 14px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,.16);
      position:relative;
      background: rgba(255,255,255,.03);
    }
    .pin::after{
      content:"";
      position:absolute; inset:3px;
      background: linear-gradient(135deg, rgba(134,242,58,.95), rgba(42,168,255,.75));
      border-radius: 3px;
      transform: skewX(-12deg);
      opacity:.9;
    }
    .contentArticle .body{
      color: rgba(243,247,255,.78);
      line-height: 1.75;
      font-size: 1.02rem;
    }
    .contentArticle .body p{ margin: 0 0 1rem 0; }
    .contentArticle .body ul{
      margin: 0 0 1rem 1.1rem;
      padding:0;
    }
    .contentArticle .body li{ margin: .3rem 0; }

    .prevNext{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap: .9rem;
      margin-top: 1.1rem;
    }
    .prevNext a{
      flex: 1;
      min-width: 220px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.28);
      padding: .9rem .95rem;
      transition: transform .35s ease, border-color .35s ease, background .35s ease;
    }
    .prevNext a:hover{
      transform: translateY(-2px);
      border-color: rgba(134,242,58,.42);
      background: rgba(11,18,32,.36);
    }
    .prevNext a strong{
      display:block;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size:.8rem;
      color: rgba(243,247,255,.70);
    }
    .prevNext a span{
      display:block;
      margin-top:.35rem;
      font-weight: 850;
      letter-spacing:.02em;
      color: rgba(243,247,255,.88);
    }

    .commentsBlock{
      margin-top: 1.4rem;
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.26);
      padding: 1rem 1.05rem;
    }
    .commentsBlock h2{
      margin:0 0 .75rem 0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.1rem;
    }
    .emptyComments{
      border-radius: 16px;
      border: 1px dashed rgba(255,255,255,.16);
      padding: 1rem;
      color: rgba(243,247,255,.68);
      background: rgba(255,255,255,.02);
      min-height: 88px;
    }
    form.commentForm{
      margin-top: .9rem;
      display:grid;
      gap:.75rem;
    }
    .fieldRow{
      display:grid;
      gap:.75rem;
      grid-template-columns: 1fr;
    }
    label{
      display:block;
      font-weight: 850;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size:.78rem;
      color: rgba(243,247,255,.78);
      margin-bottom:.35rem;
    }
    input, textarea{
      width:100%;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,10,15,.40);
      color: rgba(243,247,255,.92);
      padding: .85rem .9rem;
      font-size: 1rem;
      transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
    }
    textarea{ min-height: 120px; resize: vertical; }
    input:focus-visible, textarea:focus-visible{
      border-color: rgba(134,242,58,.55);
      box-shadow: 0 0 0 4px rgba(134,242,58,.12);
    }

    /* Related */
    .related{
      margin-top: 1.4rem;
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(42,168,255,.05), rgba(11,18,32,.22));
      padding: 1rem 1.05rem 1.05rem;
    }
    .related h2{
      margin:0 0 .85rem 0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.1rem;
    }
    .relatedGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: .85rem;
    }
    .relItem{
      display:grid;
      grid-template-columns: 110px 1fr;
      gap: .85rem;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.28);
      overflow:hidden;
      transition: transform .35s ease, border-color .35s ease;
    }
    .relItem:hover{
      transform: translateY(-2px);
      border-color: rgba(42,168,255,.50);
    }
    .relItem img{
      width:100%;
      height:100%;
      object-fit: cover;
      filter: contrast(1.08) brightness(.95) saturate(1.03);
    }
    .relItem a{
      display:block;
      padding: .8rem .85rem;
    }
    .relItem strong{
      display:block;
      font-family: var(--cond);
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 950;
      line-height:1.15;
    }
    .relItem span{
      display:block;
      margin-top:.35rem;
      color: rgba(243,247,255,.72);
      line-height:1.5;
      font-size:.95rem;
    }

    /* Contacts */
    .contacts{
      padding: 2rem 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .contactsGrid{
      display:grid;
      gap: 1rem;
      grid-template-columns: 1fr;
      align-items:start;
    }
    .panel{
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(11,18,32,.30);
      padding: 1rem 1.05rem;
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
      position:relative;
      overflow:hidden;
    }
    .panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(134,242,58,.10), transparent 55%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px);
      opacity:.35;
      pointer-events:none;
    }
    .panel > *{ position:relative; }
    .panel h2{
      margin:0 0 .7rem 0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.15rem;
    }
    address{
      font-style: normal;
      color: rgba(243,247,255,.76);
      line-height:1.65;
      border-left: 3px solid rgba(134,242,58,.60);
      padding-left: .8rem;
      margin: 0 0 .8rem 0;
    }
    .mapFrame{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(7,10,15,.35);
      aspect-ratio: 16/10;
      box-shadow: inset 0 0 0 1px rgba(42,168,255,.10);
    }
    .mapFrame iframe{
      width:100%;
      height:100%;
      border:0;
      filter: contrast(1.1) saturate(.95) brightness(.9);
    }

    /* Aside promos + modal form (pure CSS) */
    aside{
      padding: 1.7rem 0 2.1rem;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .promos{
      display:grid;
      grid-template-columns: 1fr;
      gap: .9rem;
    }
    .promoLink{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      padding: 1rem 1.05rem;
      border-radius: calc(var(--radius) + 2px);
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(11,18,32,.26));
      transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
      position:relative;
      overflow:hidden;
    }
    .promoLink::after{
      content:"";
      position:absolute;
      right:-40px;
      top:-40px;
      width: 140px;
      height: 140px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(134,242,58,.18), transparent 60%);
      opacity:.9;
      transition: transform .6s ease;
    }
    .promoLink:hover{
      transform: translateY(-2px);
      border-color: rgba(134,242,58,.42);
      box-shadow: 0 18px 44px rgba(0,0,0,.50);
    }
    .promoLink:hover::after{ transform: scale(1.15); }
    .promoLink strong{
      display:block;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      line-height:1.15;
    }
    .promoLink span{
      display:block;
      margin-top:.25rem;
      color: rgba(243,247,255,.72);
      line-height:1.5;
      font-size:.95rem;
    }
    .promoLink .arr{
      width: 44px; height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      box-shadow: inset 0 0 0 1px rgba(134,242,58,.10);
    }
    .promoLink .arr i{
      width: 10px; height: 10px;
      border-right: 2px solid rgba(243,247,255,.92);
      border-bottom: 2px solid rgba(243,247,255,.92);
      transform: rotate(-45deg) skewX(-10deg);
    }

    /* Modal via :target */
    .modal{
      position: fixed;
      inset:0;
      display:none;
      place-items:center;
      padding: 1rem;
      background: rgba(0,0,0,.65);
      z-index: 80;
    }
    .modal:target{ display:grid; }
    .modalCard{
      width: min(560px, 100%);
      border-radius: calc(var(--radius) + 8px);
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(180deg, rgba(11,18,32,.88), rgba(7,10,15,.88));
      box-shadow: 0 30px 90px rgba(0,0,0,.70);
      overflow:hidden;
      position:relative;
    }
    .modalCard::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(600px 220px at 20% 0%, rgba(134,242,58,.14), transparent 60%),
        radial-gradient(600px 220px at 80% 0%, rgba(42,168,255,.14), transparent 60%);
      opacity:.9;
      pointer-events:none;
    }
    .modalHead{
      position:relative;
      padding: 1rem 1.05rem;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .modalHead h2{
      margin:0;
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.05rem;
    }
    .close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px; height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      transition: transform .35s ease, border-color .35s ease;
      position:relative;
    }
    .close:hover{
      transform: translateY(-1px);
      border-color: rgba(255,106,42,.55);
    }
    .close::before, .close::after{
      content:"";
      position:absolute;
      width: 16px; height: 2px;
      background: rgba(243,247,255,.88);
      border-radius: 99px;
    }
    .close::before{ transform: rotate(45deg); }
    .close::after{ transform: rotate(-45deg); }

    .modalBody{
      position:relative;
      padding: 1rem 1.05rem 1.1rem;
      display:grid;
      gap:.8rem;
    }
    .modalBody p{
      margin:0;
      color: rgba(243,247,255,.72);
      line-height:1.6;
    }

    /* Footer */
    footer{
      padding: 2rem 0;
      background:
        linear-gradient(180deg, rgba(7,10,15,.35), rgba(7,10,15,.92)),
        radial-gradient(900px 240px at 20% 0%, rgba(134,242,58,.10), transparent 60%),
        radial-gradient(900px 240px at 80% 0%, rgba(42,168,255,.10), transparent 60%);
      border-top: 1px solid rgba(255,255,255,.10);
      position:relative;
      overflow:hidden;
    }
    footer::before{
      content:"";
      position:absolute; inset:0;
      background:
        repeating-radial-gradient(circle at 30% 50%, rgba(255,255,255,.03) 0 2px, transparent 2px 20px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 16px);
      opacity:.35;
      pointer-events:none;
      mix-blend-mode: overlay;
    }
    .foot{
      position:relative;
      display:grid;
      gap: 1rem;
    }
    .slogan{
      font-family: var(--cond);
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 950;
      font-size: 1.05rem;
      margin:0;
    }
    .about{
      margin:0;
      color: rgba(243,247,255,.70);
      line-height:1.7;
      max-width: 80ch;
    }
    .social{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
    }
    .social a{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding: .65rem .85rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      font-family: var(--cond);
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 900;
      font-size:.82rem;
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    }
    .social a:hover{
      transform: translateY(-1px);
      border-color: rgba(134,242,58,.45);
      box-shadow: 0 0 0 4px rgba(134,242,58,.10);
    }
    .copyright{
      margin:0;
      color: rgba(243,247,255,.62);
      font-weight: 700;
      font-size:.92rem;
      border-top: 1px solid rgba(255,255,255,.10);
      padding-top: 1rem;
    }

    /* Responsive */
    @media (min-width: 768px){
      .hero .lane{
        grid-template-columns: 1.05fr .95fr;
        gap: 1.25rem;
      }
      .heroInner{ padding: 1.35rem; }
      .cards{ grid-template-columns: repeat(2, 1fr); }
      .heroMeta{ grid-template-columns: repeat(4, 1fr); }
      .blogCard{ grid-template-columns: 170px 1fr; }
      .fieldRow{ grid-template-columns: 1fr 1fr; }
      .relatedGrid{ grid-template-columns: 1fr 1fr; }
      .contactsGrid{ grid-template-columns: 1.1fr .9fr; }
      .promos{ grid-template-columns: 1fr 1fr; }
      .chip{ display:inline-flex; }
    }

    @media (min-width: 1200px){
      .cards{ grid-template-columns: repeat(3, 1fr); }
    }

    /* Burger activation rules */
    @media (max-width: 1199.98px){
      nav ul{ display:none; }
      details.burger{ display:block; }
      .actions{ min-width: unset; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
    }