/* ============================================================
   МОЙ БИЗНЕС ФОРУМ 2026 — Foundations: Color + Type
   Forum for SME • 9–10 Sept 2026 • Expoforum, St. Petersburg
   Product family: site, KOD2050 app, program, map, networking.
   ============================================================ */

/* ---- Brand fonts (local) ----
   Montserrat = logo + display · Rubik = interface · Noto Sans = body/reading.
   url() resolves relative to assets/css/landing.css in the repo-owned VIP bundle.
   Keep font files under assets/fonts/. */
/* Montserrat — variable font (weight 100–900), self-hosted from uploaded files */
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:italic;font-display:swap}

/* Rubik — variable font (weight 300–900), self-hosted from uploaded files */
@font-face{font-family:'Rubik';src:url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype-variations');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Rubik';src:url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype-variations');font-weight:300 900;font-style:italic;font-display:swap}

/* Noto Sans — variable font (weight 100–900, width 62.5–100%), self-hosted */
@font-face{font-family:'Noto Sans';src:url('../fonts/NotoSans-VariableFont_wdth_wght.ttf') format('truetype-variations');font-weight:100 900;font-stretch:62.5% 100%;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('../fonts/NotoSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');font-weight:100 900;font-stretch:62.5% 100%;font-style:italic;font-display:swap}

:root {
  /* ---------- BRAND CORE ---------- */
  --brand-cyan:        #25B9D0;  /* PRIMARY — logo diamond, key actions   */
  --brand-orange:      #FF9000;  /* ACCENT  — highlights, "live" markers   */
  --brand-ink:         #0B1014;  /* near-black brand surface / text        */

  /* ---------- TEAL / CYAN RAMP (the "orbit" family) ---------- */
  --teal-950: #06222A;
  --teal-900: #0B3D49;
  --teal-800: #13738A;   /* deep teal  */
  --teal-700: #008AA4;
  --teal-600: #009ECF;   /* azure cyan */
  --teal-500: #25B9D0;   /* PRIMARY    */
  --teal-400: #5AFCFB;   /* bright aqua (glow) */
  --teal-300: #9BF2FF;
  --teal-200: #C7FFF2;   /* mint wash  */
  --teal-100: #E6FBFF;   /* lightest wash */

  /* ---------- ORANGE RAMP ---------- */
  --orange-700: #B85F00;
  --orange-600: #E07B00;
  --orange-500: #FF9000;  /* ACCENT */
  --orange-300: #FFB54D;
  --orange-100: #FFE7C2;

  /* ---------- NEUTRALS (light) ---------- */
  --paper:      #FFFFFF;
  --paper-2:    #F4F7F9;   /* page wash */
  --paper-3:    #EAEFF2;   /* sunken    */
  --line:       #E0E7EB;   /* hairline borders */
  --line-2:     #CDD7DD;
  --ink:        #0B1014;   /* primary text  */
  --ink-2:      #46555E;   /* secondary text */
  --ink-3:      #7C8B93;   /* tertiary / captions */
  --ink-4:      #A9B5BB;   /* disabled */

  /* ---------- NEUTRALS (dark / "space" — app + hero) ---------- */
  --space-950: #05080A;
  --space-900: #070B0E;
  --space-800: #0B1014;   /* base dark surface */
  --space-700: #121A20;   /* raised card       */
  --space-600: #1B262E;   /* hover / stroke     */
  --space-500: #2A3942;   /* divider on dark    */
  --on-dark:   #EAF2F5;   /* text on dark       */
  --on-dark-2: #9DAFB8;   /* secondary on dark  */

  /* ---------- SEMANTIC ---------- */
  --color-primary:        var(--brand-cyan);
  --color-primary-press:  var(--teal-700);
  --color-primary-soft:   var(--teal-100);
  --color-accent:         var(--brand-orange);
  --color-bg:             var(--paper-2);
  --color-surface:        var(--paper);
  --color-text:           var(--ink);
  --color-text-soft:      var(--ink-2);
  --color-border:         var(--line);

  --success: #1F9F62;
  --warning: #E8A310;
  --danger:  #E5484D;
  --info:    var(--teal-600);

  /* ---------- TYPE FAMILIES ----------
     Montserrat = logotype + display (heavy weights echo the wordmark)
     Rubik      = interface (headings, buttons, labels, UI chrome)
     Noto Sans  = body / long-form reading (strong Cyrillic)
     Three families only — NO monospace anywhere in the system. */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  /* legacy alias — points at Rubik so any stray reference stays on-brand */
  --font-mono:    'Rubik', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE (fluid where useful) ---------- */
  --fs-hero:    clamp(48px, 6.5vw, 104px); /* @kind font */
  --fs-display: clamp(36px, 4.4vw, 64px); /* @kind font */
  --fs-h1:      44px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-lg:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-overline:12px;

  --lh-tight:   1.02;  /* @kind font */
  --lh-snug:    1.16;  /* @kind font */
  --lh-normal:  1.5;   /* @kind font */

  --tracking-hero:   -0.02em;
  --tracking-tight:  -0.01em;
  --tracking-over:    0.14em;  /* overlines / labels */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(11,16,20,.06), 0 1px 1px rgba(11,16,20,.04);
  --shadow-md: 0 4px 14px rgba(11,16,20,.08), 0 2px 4px rgba(11,16,20,.04);
  --shadow-lg: 0 18px 48px rgba(11,16,20,.14), 0 6px 16px rgba(11,16,20,.06);
  --glow-cyan: 0 0 0 1px rgba(37,185,208,.35), 0 8px 30px rgba(37,185,208,.35);
  --glow-orange: 0 8px 30px rgba(255,144,0,.35);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --ease-out: cubic-bezier(.22,.61,.36,1);    /* @kind other */
  --ease-in-out: cubic-bezier(.65,.05,.36,1); /* @kind other */
  --dur: 180ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-hero {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-hero); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero); text-transform: uppercase;
}
.t-display {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.t-h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--tracking-tight); }
.t-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }
.t-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; }
.t-lg   { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-lg); line-height: 1.5; }
.t-body { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-sm   { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-sm); line-height: 1.45; }
.t-caption { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }
.t-overline {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-overline); line-height: 1; text-transform: uppercase;
  letter-spacing: var(--tracking-over); color: var(--teal-700);
}
.t-label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); letter-spacing: -0.01em; }

/* Base element defaults (optional reset helpers) */
.ds-base { font-family: var(--font-body); color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

/* ---- Landing runtime styles ---- */
:root {
      --vip-bg: #05080A;
      --vip-panel: rgba(18, 26, 32, .72);
      --vip-line: rgba(234, 242, 245, .14);
      --vip-line-strong: rgba(37, 185, 208, .42);
      --vip-text: #F7FBFC;
      --vip-muted: #9DAFB8;
      --vip-glass: rgba(234, 242, 245, .08);
      --max: 1200px;
      --header: 76px;
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      background: var(--vip-bg);
      overflow-x: clip;
    }
    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--vip-text);
      background:
        radial-gradient(circle at 12% 8%, rgba(37, 185, 208, .20), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(255, 144, 0, .12), transparent 24rem),
        linear-gradient(180deg, #05080A 0%, #071016 48%, #05080A 100%);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 50;
      opacity: .32;
      background:
        radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 20%), rgba(90, 252, 251, .18), transparent 16rem),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: auto, 64px 64px, 64px 64px;
      mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 58%, transparent 100%);
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 51;
      pointer-events: none;
      opacity: .12;
      background-image: url("../img/accent-glow-teal.png");
      background-repeat: no-repeat;
      background-size: 860px 860px;
      background-position: calc(100% + 240px) -210px;
      mix-blend-mode: screen;
    }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    img { max-width: 100%; display: block; }
    ::selection { background: rgba(37, 185, 208, .35); color: #fff; }
    :focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 4px; }

    .page-shell { position: relative; z-index: 1; }
    .container {
      width: min(var(--max), calc(100% - 48px));
      margin: 0 auto;
    }
    .section {
      position: relative;
      padding: 152px 0;
      overflow: clip;
      contain: paint;
    }
    .section.compact { padding: 120px 0; }
    .section.light {
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 4%, rgba(37, 185, 208, .16), transparent 26rem),
        linear-gradient(180deg, #F8FBFC 0%, #EFF5F7 100%);
    }
    .section.dark {
      background:
        radial-gradient(circle at 88% 16%, rgba(37, 185, 208, .17), transparent 28rem),
        linear-gradient(180deg, rgba(11, 16, 20, .52), rgba(5, 8, 10, .96));
    }
    .section.photo-band {
      min-height: 820px;
      display: grid;
      align-items: end;
      isolation: isolate;
    }
    .photo-bg {
      position: absolute;
      inset: -8% 0;
      z-index: -3;
      pointer-events: none;
      transform: translate3d(0, calc(var(--scroll, 0) * -34px), 0) scale(1.04);
    }
    .photo-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.08) contrast(1.08) brightness(.72);
    }
    .photo-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5,8,10,.94) 0%, rgba(5,8,10,.68) 45%, rgba(5,8,10,.35) 100%),
        linear-gradient(180deg, rgba(5,8,10,.82) 0%, transparent 38%, rgba(5,8,10,.96) 100%);
    }
    .noise {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      background-image:
        linear-gradient(115deg, transparent 0 47%, rgba(90,252,251,.16) 48%, transparent 49% 100%),
        linear-gradient(65deg, transparent 0 52%, rgba(255,144,0,.11) 53%, transparent 54% 100%);
      background-size: 420px 420px, 620px 620px;
      animation: energySweep 19s linear infinite;
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 30;
      height: var(--header);
      border-bottom: 1px solid rgba(234, 242, 245, .10);
      background: rgba(5, 8, 10, .55);
      backdrop-filter: blur(18px) saturate(1.2);
    }
    .site-header .container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .brand img { height: 38px; width: auto; }
    .brand-line {
      width: 1px;
      height: 34px;
      background: rgba(234, 242, 245, .16);
    }
    .brand-meta {
      display: grid;
      gap: 2px;
      font-size: 11px;
      line-height: 1.1;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--teal-300);
      white-space: nowrap;
    }
    .nav {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--on-dark-2);
      font-size: 13px;
      font-weight: 600;
    }
    .nav a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      transition: color .2s var(--ease-out), background .2s var(--ease-out);
    }
    .nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
    .nav a.is-active { color: var(--brand-cyan); background: rgba(37,185,208,.10); }

    .btn {
      --btn-bg: var(--brand-cyan);
      --btn-color: #031F26;
      --btn-border: transparent;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 13px 22px;
      border: 1px solid var(--btn-border);
      border-radius: 999px;
      background: var(--btn-bg);
      color: var(--btn-color);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
      box-shadow: 0 0 0 1px rgba(37,185,208,.10), 0 18px 50px rgba(37,185,208,.18);
      transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);
    }
    .btn::before {
      content: "";
      position: absolute;
      inset: -80% auto -80% -55%;
      width: 45%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
      opacity: .65;
      animation: btnSheen 4.8s var(--ease-out) infinite;
    }
    .btn > span, .btn > i { position: relative; z-index: 1; }
    .btn:hover {
      transform: translateY(-2px);
      background: var(--teal-400);
      box-shadow: 0 0 0 1px rgba(90,252,251,.28), 0 26px 70px rgba(37,185,208,.28);
    }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn.ghost {
      --btn-bg: rgba(255,255,255,.03);
      --btn-color: var(--on-dark);
      --btn-border: rgba(234,242,245,.20);
      box-shadow: none;
      backdrop-filter: blur(14px);
    }
    .btn.ghost:hover {
      color: var(--teal-300);
      border-color: rgba(90,252,251,.48);
      background: rgba(37,185,208,.08);
      box-shadow: 0 18px 54px rgba(0,0,0,.24);
    }
    .btn.dark {
      --btn-bg: #0B1014;
      --btn-color: #fff;
      --btn-border: rgba(37,185,208,.32);
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
    }
    .btn.light {
      --btn-bg: #fff;
      --btn-color: var(--ink);
      --btn-border: var(--line);
      box-shadow: var(--shadow-md);
    }
    .btn.small {
      min-height: 40px;
      padding: 10px 16px;
      font-size: 13px;
      box-shadow: none;
    }
    .diamond {
      display: inline-block;
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      border-radius: 2px;
      background: currentColor;
      transform: rotate(45deg);
      box-shadow: 0 0 18px currentColor;
    }
    .diamond.cyan { color: var(--brand-cyan); }
    .diamond.orange { color: var(--brand-orange); }

    .overline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--teal-300);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .light .overline { color: var(--teal-800); }
    .headline {
      margin: 0;
      font-family: var(--font-display);
      font-size: 58px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .headline .accent { color: var(--brand-cyan); }
    .headline.soft { color: #fff; }
    .lead {
      margin: 22px 0 0;
      max-width: 720px;
      color: var(--vip-muted);
      font-family: var(--font-text);
      font-size: 19px;
      line-height: 1.6;
    }
    .light .lead { color: var(--ink-2); }
    .copy {
      font-family: var(--font-text);
      color: var(--vip-muted);
      line-height: 1.65;
      font-size: 16px;
    }
    .light .copy { color: var(--ink-2); }

    .hero {
      min-height: 92vh;
      padding: calc(var(--header) + 26px) 0 30px;
      display: grid;
      align-items: end;
      isolation: isolate;
      overflow: hidden;
      contain: paint;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -5;
      background:
        linear-gradient(90deg, rgba(5,8,10,.98) 0%, rgba(5,8,10,.74) 42%, rgba(5,8,10,.30) 100%),
        linear-gradient(180deg, rgba(5,8,10,.42) 0%, rgba(5,8,10,.72) 75%, #05080A 100%),
        url("../img/photo-0152.jpg") center / cover no-repeat;
      transform: translate3d(0, calc(var(--scroll, 0) * -26px), 0) scale(1.04);
      filter: saturate(1.08) contrast(1.08);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      align-items: end;
    }
    .hero-kicker {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin: 0 0 20px;
      color: var(--teal-300);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .hero h1 {
      margin: 0;
      max-width: 920px;
      font-family: var(--font-display);
      font-size: 78px;
      line-height: 1.02;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .hero h1 span {
      display: block;
      margin-top: 12px;
      max-width: 820px;
      font-size: 60px;
      line-height: 1.08;
      color: transparent;
      -webkit-text-stroke: 1px rgba(234,242,245,.72);
      text-shadow: 0 0 34px rgba(37,185,208,.18);
    }
    .hero-copy {
      margin: 22px 0 0;
      max-width: 720px;
      font-family: var(--font-text);
      font-size: 18px;
      line-height: 1.55;
      color: rgba(234,242,245,.78);
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin: 26px 0 0;
    }
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 26px;
      max-width: 720px;
      border: 1px solid rgba(234,242,245,.12);
      background: rgba(234,242,245,.10);
      border-radius: 20px;
      overflow: hidden;
      backdrop-filter: blur(18px);
    }
    .stat {
      padding: 17px 20px;
      background: rgba(5,8,10,.42);
    }
    .stat strong {
      display: block;
      font-family: var(--font-display);
      font-size: 36px;
      line-height: 1;
      color: #fff;
      font-weight: 900;
    }
    .stat span {
      display: block;
      margin-top: 8px;
      color: var(--on-dark-2);
      font-size: 13px;
      line-height: 1.35;
    }
    .vip-pass {
      position: relative;
      min-height: 440px;
      padding: 32px;
      border: 1px solid rgba(234,242,245,.16);
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.035) 38%, rgba(37,185,208,.10)),
        rgba(7, 11, 14, .70);
      box-shadow: 0 34px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.18);
      overflow: hidden;
      backdrop-filter: blur(20px);
      transform-style: preserve-3d;
      animation: passFloat 7s ease-in-out infinite;
    }
    .vip-pass::before {
      content: "";
      position: absolute;
      inset: -70% -20%;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.23), transparent 65%);
      transform: translateX(-30%) rotate(8deg);
      animation: passSheen 7.4s ease-in-out infinite;
    }
    .vip-pass::after {
      content: "";
      position: absolute;
      inset: auto -120px -180px auto;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37,185,208,.55), transparent 67%);
      filter: blur(3px);
    }
    .pass-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }
    .pass-top img { width: 132px; height: auto; }
    .pass-code {
      color: var(--teal-300);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-align: right;
      text-transform: uppercase;
    }
    .pass-main {
      position: relative;
      z-index: 1;
      margin-top: 64px;
    }
    .pass-main b {
      display: block;
      font-family: var(--font-display);
      font-size: 76px;
      line-height: .86;
      font-weight: 900;
      letter-spacing: 0;
      color: #fff;
      text-transform: uppercase;
    }
    .pass-main span {
      display: block;
      margin-top: 16px;
      max-width: 280px;
      color: var(--on-dark-2);
      font-family: var(--font-text);
      line-height: 1.55;
    }
    .pass-bottom {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 32px;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: end;
      color: var(--on-dark-2);
      font-size: 12px;
      line-height: 1.45;
    }
    .pass-price {
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1;
      color: var(--brand-orange);
      font-weight: 900;
      white-space: nowrap;
    }

    .orbit-stage {
      position: absolute;
      inset: auto -360px -200px auto;
      width: 680px;
      height: 680px;
      pointer-events: none;
      opacity: .72;
      z-index: -1;
    }
    .orbit-ring {
      position: absolute;
      inset: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(37,185,208,.36);
      animation: orbitSpin 42s linear infinite;
    }
    .orbit-ring:nth-child(1) { width: 360px; height: 260px; border-color: rgba(37,185,208,.46); }
    .orbit-ring:nth-child(2) { width: 540px; height: 410px; border-style: dashed; border-color: rgba(234,242,245,.25); animation-duration: 68s; animation-direction: reverse; }
    .orbit-ring:nth-child(3) { width: 720px; height: 560px; border-color: rgba(255,144,0,.25); animation-duration: 96s; }
    .node {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle, #E6FFFF, var(--brand-cyan));
      box-shadow: 0 0 28px rgba(90,252,251,.82);
    }
    .node.n1 { left: 22%; top: 41%; animation: nodePulse 2.8s ease-in-out infinite; }
    .node.n2 { right: 15%; bottom: 34%; background: radial-gradient(circle, #FFE7C2, var(--brand-orange)); box-shadow: 0 0 22px rgba(255,144,0,.74); animation: nodePulse 3.8s ease-in-out infinite; }

    .ticker {
      border-top: 1px solid rgba(234,242,245,.10);
      border-bottom: 1px solid rgba(234,242,245,.10);
      background: rgba(5,8,10,.58);
      overflow: hidden;
      contain: paint;
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 32s linear infinite;
    }
    .ticker span {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 18px 28px;
      color: rgba(234,242,245,.68);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(320px, .7fr);
      gap: 96px;
      align-items: center;
    }
    .split.reverse { grid-template-columns: minmax(320px, .72fr) minmax(0, .92fr); }
    #route {
      overflow: visible;
      contain: none;
    }
    #route .split.reverse {
      align-items: start;
    }
    .route-summary-column {
      position: relative;
      align-self: stretch;
      margin-top: 68px;
      min-height: 100%;
    }
    .route-summary {
      position: sticky;
      top: calc(var(--header) + 80px);
      max-width: 620px;
      z-index: 3;
    }
    .panel {
      position: relative;
      border: 1px solid var(--vip-line);
      border-radius: 24px;
      background: var(--vip-panel);
      backdrop-filter: blur(18px);
      box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
      overflow: hidden;
    }
    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 38%, rgba(37,185,208,.14));
      opacity: .8;
    }
    .glass-copy {
      position: relative;
      padding: 48px;
    }
    .stage-photo {
      position: relative;
      min-height: 600px;
      border-radius: 28px;
      overflow: hidden;
      background: #0B1014;
      box-shadow: 0 32px 100px rgba(0,0,0,.36);
    }
    .stage-photo img {
      width: 100%;
      height: 100%;
      min-height: 600px;
      object-fit: cover;
      filter: saturate(1.08) contrast(1.08) brightness(.82);
      transform: scale(1.05);
      transition: transform 1.4s var(--ease-out);
    }
    .stage-photo.is-inview img { transform: scale(1); }
    .stage-photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent 0%, rgba(5,8,10,.30) 64%, rgba(5,8,10,.84) 100%),
        radial-gradient(circle at 82% 16%, rgba(90,252,251,.20), transparent 22rem);
    }
    .photo-caption {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 22px;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: end;
      color: var(--on-dark);
      z-index: 1;
    }
    .photo-caption b {
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1.08;
      text-transform: uppercase;
    }
    .photo-caption span {
      color: var(--on-dark-2);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
      margin-top: 64px;
      border: 1px solid rgba(234,242,245,.11);
      border-radius: 24px;
      background: transparent;
      overflow: hidden;
    }
    .value-cell {
      min-height: 280px;
      padding: 34px;
      border: 1px solid rgba(234,242,245,.10);
      border-radius: 22px;
      background: rgba(18,26,32,.62);
      transition: transform .35s var(--ease-out), background .35s var(--ease-out);
    }
    .value-cell:hover {
      transform: translateY(-4px);
      background: rgba(18,26,32,.86);
    }
    .value-cell .diamond { margin-bottom: 22px; }
    .value-cell h3 {
      margin: 0 0 18px;
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1.05;
      text-transform: uppercase;
    }
    .value-cell p {
      margin: 0;
      color: var(--on-dark-2);
      font-family: var(--font-text);
      font-size: 14px;
      line-height: 1.55;
    }

    .route {
      position: relative;
      margin-top: 68px;
    }
    .route::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 28px;
      bottom: 28px;
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--brand-cyan), rgba(255,144,0,.65), transparent);
      transform-origin: top;
      transform: scaleY(var(--line-scale, .18));
    }
    .route-item {
      position: relative;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 28px;
      margin-top: 30px;
      align-items: start;
    }
    .route-mark {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(37,185,208,.42);
      background: rgba(255,255,255,.78);
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 8px rgba(37,185,208,.08);
      z-index: 1;
    }
    .route-mark i {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      background: var(--brand-cyan);
      transform: rotate(45deg);
    }
    .route-card {
      padding: 34px 38px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255,255,255,.86);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(10px);
    }
    .route-card h3 {
      margin: 0 0 14px;
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1.1;
      text-transform: uppercase;
    }
    .route-card p { margin: 0; color: var(--ink-2); font-family: var(--font-text); line-height: 1.6; }

    .benefits {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 26px;
      margin-top: 68px;
    }
    .benefit {
      position: relative;
      min-height: 460px;
      padding: 36px;
      border: 1px solid rgba(234,242,245,.12);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(18,26,32,.68);
      overflow: hidden;
      transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
    }
    .benefit::after {
      content: "";
      position: absolute;
      inset: auto -80px -120px auto;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37,185,208,.26), transparent 66%);
      opacity: .72;
      transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
    }
    .benefit:hover {
      transform: translateY(-6px);
      border-color: rgba(90,252,251,.38);
      box-shadow: 0 28px 84px rgba(0,0,0,.28);
    }
    .benefit:hover::after { opacity: 1; transform: scale(1.1); }
    .benefit h3 {
      position: relative;
      z-index: 1;
      margin: 34px 0 26px;
      font-family: var(--font-display);
      font-size: 27px;
      line-height: 1;
      text-transform: uppercase;
    }
    .benefit ul {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--on-dark-2);
      font-family: var(--font-text);
      font-size: 14px;
      line-height: 1.45;
    }
    .benefit li {
      position: relative;
      padding-left: 18px;
    }
    .benefit li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .65em;
      width: 7px;
      height: 7px;
      border-radius: 1px;
      background: var(--brand-cyan);
      transform: translateY(-50%) rotate(45deg);
    }

    .lounge-layout {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
      gap: 42px;
      align-items: stretch;
      margin-top: 68px;
    }
    .lounge-card {
      min-height: 560px;
      padding: 46px;
      border: 1px solid rgba(234,242,245,.14);
      border-radius: 26px;
      background: rgba(18,26,32,.70);
      backdrop-filter: blur(18px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
    }
    .lounge-card::after {
      content: "";
      position: absolute;
      inset: auto auto -110px -90px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,144,0,.20), transparent 65%);
    }
    .lounge-map {
      position: relative;
      min-height: 560px;
      border: 1px solid rgba(234,242,245,.14);
      border-radius: 26px;
      background:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(circle at 72% 22%, rgba(37,185,208,.18), transparent 20rem),
        rgba(7,11,14,.76);
      background-size: 42px 42px, 42px 42px, auto, auto;
      overflow: hidden;
    }
    .map-zone {
      position: absolute;
      border: 1px solid rgba(90,252,251,.32);
      border-radius: 18px;
      background: rgba(37,185,208,.08);
      box-shadow: inset 0 0 32px rgba(37,185,208,.08);
    }
    .zone-main { left: 12%; top: 18%; width: 48%; height: 34%; }
    .zone-talk { right: 12%; top: 34%; width: 31%; height: 42%; border-color: rgba(255,144,0,.34); background: rgba(255,144,0,.07); }
    .zone-photo { left: 20%; bottom: 13%; width: 42%; height: 20%; }
    .pin {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(5,8,10,.74);
      border: 1px solid rgba(234,242,245,.16);
      color: var(--on-dark);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      backdrop-filter: blur(12px);
      animation: pinFloat 4.6s ease-in-out infinite;
    }
    .pin i {
      width: 8px;
      height: 8px;
      border-radius: 1px;
      background: var(--brand-cyan);
      transform: rotate(45deg);
      box-shadow: 0 0 16px var(--brand-cyan);
    }
    .pin.p1 { left: 18%; top: 22%; }
    .pin.p2 { right: 16%; top: 40%; animation-delay: .7s; }
    .pin.p3 { left: 27%; bottom: 17%; animation-delay: 1.2s; }

    .app-frame {
      position: relative;
      width: min(360px, 100%);
      min-height: 700px;
      margin: 0 auto;
      border: 1px solid rgba(234,242,245,.14);
      border-radius: 34px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
        #071016;
      box-shadow: 0 34px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18);
      overflow: hidden;
    }
    .app-frame::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 12px;
      width: 118px;
      height: 24px;
      border-radius: 999px;
      background: #05080A;
      transform: translateX(-50%);
      z-index: 2;
    }
    .app-screen {
      position: absolute;
      inset: 12px;
      border-radius: 26px;
      padding: 48px 18px 20px;
      background:
        radial-gradient(circle at 90% 8%, rgba(37,185,208,.28), transparent 14rem),
        linear-gradient(180deg, #0B1014, #071016);
      overflow: hidden;
    }
    .app-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-family: var(--font-display);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 22px;
      line-height: 1;
    }
    .app-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 18px 0 16px;
      padding: 8px 10px;
      border: 1px solid rgba(37,185,208,.34);
      border-radius: 999px;
      color: var(--teal-300);
      background: rgba(37,185,208,.08);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .person {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      margin-top: 10px;
      border: 1px solid rgba(234,242,245,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.055);
      transform: translateX(18px);
      opacity: 0;
      animation: appItem .72s var(--ease-out) forwards;
    }
    .person:nth-child(4) { animation-delay: .18s; }
    .person:nth-child(5) { animation-delay: .36s; }
    .person:nth-child(6) { animation-delay: .54s; }
    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--brand-cyan), var(--teal-800));
      position: relative;
      overflow: hidden;
    }
    .avatar::after {
      content: "";
      position: absolute;
      inset: 9px;
      border-radius: 50%;
      background: rgba(255,255,255,.42);
    }
    .person b {
      display: block;
      color: #fff;
      font-size: 14px;
      line-height: 1.2;
    }
    .person span {
      display: block;
      margin-top: 3px;
      color: var(--on-dark-2);
      font-size: 12px;
    }
    .meet {
      padding: 8px 10px;
      border-radius: 999px;
      background: var(--brand-cyan);
      color: #052029;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .audience {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      margin-top: 68px;
    }
    .audience span {
      position: relative;
      display: flex;
      min-height: 112px;
      align-items: center;
      gap: 14px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,.72);
      color: var(--ink);
      font-weight: 700;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      isolation: isolate;
      transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
    }
    .audience span::after {
      content: "";
      position: absolute;
      inset: auto -70px -90px auto;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37,185,208,.25), transparent 66%);
      opacity: 0;
      transform: scale(.72);
      transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
    }
    .audience span:hover {
      transform: translateY(-3px);
      border-color: rgba(37,185,208,.42);
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow-md);
    }
    .audience span:hover::after,
    .audience span:focus-visible::after {
      opacity: 1;
      transform: scale(1);
    }
    .audience i {
      position: relative;
      z-index: 1;
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
      border-radius: 2px;
      background: var(--brand-cyan);
      transform: rotate(45deg);
      box-shadow: 0 0 16px rgba(37,185,208,.5);
    }
    .audience-label {
      position: relative;
      z-index: 1;
      max-width: calc(100% - 96px);
    }
    .audience-percent {
      position: absolute;
      right: 24px;
      bottom: 18px;
      z-index: 1;
      font-family: var(--font-display);
      font-size: 46px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      color: var(--brand-cyan);
      text-shadow: 0 0 26px rgba(37,185,208,.35);
      opacity: 0;
      transform: translateY(12px) scale(.92);
      transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
      pointer-events: none;
    }
    .audience span:hover .audience-percent,
    .audience span:focus-visible .audience-percent {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .comparison {
      margin-top: 68px;
      border: 1px solid rgba(234,242,245,.12);
      border-radius: 26px;
      overflow: hidden;
      background: rgba(234,242,245,.08);
      backdrop-filter: blur(16px);
    }
    .compare-row {
      display: grid;
      grid-template-columns: 1.3fr .7fr .7fr;
      gap: 1px;
      background: rgba(234,242,245,.10);
    }
    .compare-row > div {
      min-height: 76px;
      padding: 24px 28px;
      background: rgba(18,26,32,.72);
      display: flex;
      align-items: center;
      color: var(--on-dark-2);
      font-family: var(--font-text);
      line-height: 1.35;
    }
    .compare-row.header > div {
      min-height: 82px;
      background: rgba(5,8,10,.80);
      color: #fff;
      font-family: var(--font-body);
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-size: 12px;
    }
    .compare-row .yes,
    .compare-row .no {
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 900;
      text-transform: uppercase;
      color: #fff;
    }
    .compare-row .yes.vip {
      color: #051F27;
      background:
        linear-gradient(135deg, rgba(90,252,251,.90), rgba(37,185,208,.90)),
        var(--brand-cyan);
    }
    .compare-row .no { color: rgba(234,242,245,.38); }

    .ticket {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(340px, .62fr);
      gap: 48px;
      align-items: stretch;
      margin-top: 68px;
    }
    .ticket-main {
      padding: 54px;
      border: 1px solid rgba(234,242,245,.14);
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 10%, rgba(255,144,0,.16), transparent 20rem),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
        rgba(18,26,32,.78);
      overflow: hidden;
      position: relative;
    }
    .ticket-main::after {
      content: "";
      position: absolute;
      inset: -50% -20% auto auto;
      width: 45%;
      height: 160%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
      transform: rotate(18deg);
      animation: ticketSheen 6.6s ease-in-out infinite;
    }
    .ticket-price {
      margin: 44px 0 0;
      font-family: var(--font-display);
      font-size: 74px;
      line-height: 1;
      font-weight: 900;
      color: var(--brand-orange);
      text-transform: uppercase;
    }
    .ticket-aside {
      padding: 44px;
      border: 1px solid rgba(37,185,208,.26);
      border-radius: 28px;
      background: rgba(37,185,208,.08);
      backdrop-filter: blur(16px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
    }
    .circle-meter {
      position: relative;
      width: 210px;
      height: 210px;
      margin: 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background:
        conic-gradient(var(--brand-orange) 0 36deg, rgba(234,242,245,.10) 36deg 360deg);
      animation: meterGlow 3s ease-in-out infinite;
    }
    .circle-meter::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      background: #071016;
    }
    .circle-meter strong {
      position: relative;
      z-index: 1;
      font-family: var(--font-display);
      font-size: 58px;
      line-height: 1;
      color: #fff;
      font-weight: 900;
    }
    .circle-meter span {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 6px;
      color: var(--on-dark-2);
      font-size: 12px;
      letter-spacing: .12em;
      text-align: center;
      text-transform: uppercase;
    }

    .closing {
      position: relative;
      min-height: 86vh;
      padding-top: calc(var(--header) + 84px);
      display: grid;
      align-items: center;
      isolation: isolate;
      overflow: clip;
      contain: paint;
    }
    .closing .photo-bg img { object-position: center; }
    .closing-card {
      max-width: 760px;
      padding: 56px;
      border: 1px solid rgba(234,242,245,.14);
      border-radius: 30px;
      background: rgba(5,8,10,.62);
      backdrop-filter: blur(18px);
      box-shadow: 0 38px 120px rgba(0,0,0,.42);
    }
    .closing-card .headline { font-size: 66px; }
    .closing-details {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 42px 0 0;
    }
    .closing-details span {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 13px;
      border: 1px solid rgba(234,242,245,.14);
      border-radius: 999px;
      color: var(--on-dark-2);
      background: rgba(255,255,255,.04);
      font-size: 13px;
      font-weight: 700;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(5,8,10,.76);
      backdrop-filter: blur(16px);
    }
    .modal.is-open { display: flex; }
    .modal-card {
      width: min(760px, 100%);
      max-height: min(760px, calc(100vh - 48px));
      overflow: auto;
      border: 1px solid rgba(234,242,245,.16);
      border-radius: 28px;
      background:
        radial-gradient(circle at 94% 10%, rgba(37,185,208,.20), transparent 18rem),
        #0B1014;
      box-shadow: 0 46px 140px rgba(0,0,0,.56);
      transform: translateY(16px) scale(.98);
      opacity: 0;
      transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
    }
    .modal.is-open .modal-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
    .modal-head {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 24px 28px;
      border-bottom: 1px solid rgba(234,242,245,.12);
      background: rgba(11,16,20,.86);
      backdrop-filter: blur(16px);
    }
    .modal-head h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1;
      text-transform: uppercase;
    }
    .close {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(234,242,245,.16);
      background: rgba(255,255,255,.05);
      color: #fff;
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
    }
    .modal-body {
      padding: 38px;
    }
    .modal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
    .modal-grid div {
      padding: 26px;
      border: 1px solid rgba(234,242,245,.12);
      border-radius: 18px;
      background: rgba(255,255,255,.045);
      color: var(--on-dark-2);
      font-family: var(--font-text);
      line-height: 1.5;
    }
    .modal-grid b {
      display: block;
      margin-bottom: 8px;
      color: #fff;
      font-family: var(--font-display);
      text-transform: uppercase;
    }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
      transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
      transition-delay: var(--delay, 0ms);
    }
    .reveal.is-inview {
      opacity: 1;
      transform: translateY(0);
    }
    .clip-reveal {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.1s var(--ease-out);
    }
    .clip-reveal.is-inview { clip-path: inset(0 0 0 0); }

    @keyframes orbitSpin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes nodePulse {
      0%, 100% { transform: scale(1); opacity: .72; }
      50% { transform: scale(1.42); opacity: 1; }
    }
    @keyframes passFloat {
      0%, 100% { transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg); }
      50% { transform: translate3d(0,-12px,0) rotateX(1.2deg) rotateY(-1.4deg); }
    }
    @keyframes passSheen {
      0%, 38% { transform: translateX(-58%) rotate(8deg); opacity: 0; }
      50% { opacity: .8; }
      72%, 100% { transform: translateX(72%) rotate(8deg); opacity: 0; }
    }
    @keyframes btnSheen {
      0%, 44% { transform: translateX(-30%) rotate(18deg); opacity: 0; }
      56% { opacity: .65; }
      72%, 100% { transform: translateX(430%) rotate(18deg); opacity: 0; }
    }
    @keyframes ticker {
      to { transform: translateX(-50%); }
    }
    @keyframes energySweep {
      to { background-position: 420px 0, -620px 0; }
    }
    @keyframes pinFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes appItem {
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes ticketSheen {
      0%, 35% { transform: translateX(-180%) rotate(18deg); opacity: 0; }
      48% { opacity: 1; }
      66%, 100% { transform: translateX(220%) rotate(18deg); opacity: 0; }
    }
    @keyframes meterGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255,144,0,.24), 0 0 42px rgba(255,144,0,.18); }
      50% { box-shadow: 0 0 0 1px rgba(255,181,77,.42), 0 0 72px rgba(255,144,0,.30); }
    }

    @media (max-width: 1080px) {
      .nav { display: none; }
      .hero h1 { font-size: 74px; }
      .headline { font-size: 46px; }
      .hero-grid,
      .split,
      .split.reverse,
      .ticket,
      .lounge-layout {
        grid-template-columns: 1fr;
      }
      .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .vip-pass { max-width: 520px; }
      .route-summary-column {
        margin-top: 0;
        min-height: auto;
      }
      .route-summary {
        position: static;
        max-width: none;
      }
    }
    @media (max-width: 760px) {
      :root { --header: 68px; }
      .container { width: min(100% - 28px, var(--max)); }
      .section { padding: 76px 0; }
      .site-header .container { gap: 12px; }
      .brand img { height: 30px; }
      .brand-line, .brand-meta { display: none; }
      .site-header .btn { display: none; }
      .hero { min-height: 94vh; padding: calc(var(--header) + 22px) 0 24px; }
      .hero-grid { gap: 0; }
      .hero h1 { max-width: 100%; font-size: 52px; }
      .hero h1 span { max-width: 100%; font-size: 36px; line-height: 1.12; }
      .hero-copy { margin-top: 16px; font-size: 15.5px; line-height: 1.52; }
      .hero-actions { margin-top: 20px; gap: 10px; }
      .hero-actions .btn { width: 100%; }
      .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-radius: 16px; }
      .stat { padding: 11px 9px; }
      .stat strong { font-size: 24px; }
      .stat span { font-size: 10.5px; }
      .vip-pass { display: none; }
      .lead { font-size: 17px; }
      .headline, .closing-card .headline { font-size: 38px; }
      .pass-main { margin-top: 64px; }
      .pass-main b { font-size: 62px; }
      .value-grid, .benefits, .audience, .modal-grid { grid-template-columns: 1fr; }
      .compare-row { grid-template-columns: 1fr .48fr .48fr; }
      .compare-row > div { padding: 14px 12px; font-size: 13px; }
      .route-item { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
      .route::before { left: 22px; }
      .ticket-price { font-size: 52px; }
      .closing-card { padding: 28px; }
      .photo-caption { align-items: start; flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
      .reveal { opacity: 1; transform: none; }
      .clip-reveal { clip-path: none; }
    }