/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/796d41cc-3066-4e99-b5d3-54865e256a51.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/f5bfb499-974e-4046-9c07-2bc3dfdf2066.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/65619b95-902e-461a-9749-b43039415d49.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/775a058c-6759-419b-9d2e-b8ca100e01f5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ea88fee6-611c-4be1-b685-b078e4bb219f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/1cb41f8d-fb15-41e8-834d-b08bad259791.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/89e04628-5ead-470f-a99e-6a04e98f8ba7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/d8c8a15d-c26f-4e0f-8c46-c807bdf530dc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/89e04628-5ead-470f-a99e-6a04e98f8ba7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/d8c8a15d-c26f-4e0f-8c46-c807bdf530dc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/89e04628-5ead-470f-a99e-6a04e98f8ba7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/d8c8a15d-c26f-4e0f-8c46-c807bdf530dc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/89e04628-5ead-470f-a99e-6a04e98f8ba7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/d8c8a15d-c26f-4e0f-8c46-c807bdf530dc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/388bfe5a-d3a6-45e3-961a-ad6b924a2a27.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5efb32dd-72c0-47a3-a26f-31b4af769b79.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/7fe9c1be-ba61-4e03-b09f-2e77a0cedad8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/388bfe5a-d3a6-45e3-961a-ad6b924a2a27.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/5efb32dd-72c0-47a3-a26f-31b4af769b79.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/7fe9c1be-ba61-4e03-b09f-2e77a0cedad8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/388bfe5a-d3a6-45e3-961a-ad6b924a2a27.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/5efb32dd-72c0-47a3-a26f-31b4af769b79.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/7fe9c1be-ba61-4e03-b09f-2e77a0cedad8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/388bfe5a-d3a6-45e3-961a-ad6b924a2a27.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/5efb32dd-72c0-47a3-a26f-31b4af769b79.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/7fe9c1be-ba61-4e03-b09f-2e77a0cedad8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0b0d14;
      --bg2: #0f1119;
      --bg3: #131620;
      --panel: #171b28;
      --panel2: #1c2030;
      --text: #e8ecf7;
      --muted: #8892aa;
      --faint: #3e4558;
      --line: rgba(255,255,255,0.07);
      --line2: rgba(255,255,255,0.13);
      --accent: #5b9cf6;
      --accent2: #9b7bf8;
      --accent3: #50e3c2;
      --frame-color: rgba(255,255,255,0.85);
      --font-heading: 'Space Grotesk', sans-serif;
      --font-body: 'DM Sans', sans-serif;
      --font-mono: 'DM Mono', monospace;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--panel2); border-radius: 3px; }

    /* ── PROGRESS ── */
    #progress-bar {
      position: fixed; top: 0; left: 0;
      height: 2px; z-index: 200; width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 0 10px var(--accent);
      transition: width 0.08s linear;
      pointer-events: none;
    }

    /* ── NAV ── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: 58px;
      backdrop-filter: blur(20px) saturate(160%);
      background: rgba(11,13,20,0.8);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner {
      width: min(1400px, calc(100% - 64px));
      margin: 0 auto; height: 58px;
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
    }
    .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
    .brand-mark {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display: grid; place-items: center;
      font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: #fff;
      box-shadow: 0 0 16px rgba(91,156,246,0.3);
    }
    .brand-name {
      font-family: var(--font-heading); font-weight: 700; font-size: 14px;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
    }
    .nav-links { display: flex; align-items: center; gap: 2px; }
    .nav-link {
      padding: 5px 11px; border-radius: 999px;
      font-size: 13px; color: var(--muted);
      cursor: pointer; border: none; background: none;
      font-family: var(--font-body); transition: color 0.2s, background 0.2s;
    }
    .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
    .nav-link.active { color: var(--accent); background: rgba(91,156,246,0.08); }

    /* ── SHELL ── */
    .shell { width: min(1400px, calc(100% - 64px)); margin: 0 auto; }

    /* ── CORNER-CUT IMAGE FRAME ── */
    /* The Prototype 2 style: white outline, top-left and bottom-right corners clipped */
    .frame-wrap {
      position: relative;
      display: block;
    }
    .frame-img {
      display: block;
      width: 100%;
      /* clip-path cuts top-left and bottom-right corners at 22px */
      clip-path: polygon(22px 0%, 100% 0%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0% 100%, 0% 22px);
    }
    /* White outline via an SVG overlay */
    .frame-outline {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .frame-outline svg {
      width: 100%; height: 100%;
      position: absolute; inset: 0;
    }

    /* placeholder version */
    .frame-placeholder {
      display: block;
      width: 100%;
      aspect-ratio: 16/9;
      background:
        linear-gradient(135deg, rgba(91,156,246,0.08), rgba(155,123,248,0.06)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 14px, rgba(255,255,255,0.035) 14px 28px);
      clip-path: polygon(22px 0%, 100% 0%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0% 100%, 0% 22px);
      position: relative;
    }
    .frame-placeholder-inner {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; padding: 20px;
      text-align: center;
    }
    .frame-placeholder-icon { font-size: 32px; opacity: 0.3; }
    .frame-placeholder-label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column; justify-content: center;
      padding: 90px 0 80px;
      position: relative; overflow: hidden;
    }
    .hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
    .hero-orb {
      position: absolute; border-radius: 50%;
      filter: blur(90px); opacity: 0.5;
    }
    .hero-orb-1 {
      width: 800px; height: 800px; top: -250px; left: -200px;
      background: radial-gradient(circle, rgba(91,156,246,0.22), transparent 70%);
      animation: drift1 20s ease-in-out infinite alternate;
    }
    .hero-orb-2 {
      width: 650px; height: 650px; top: -150px; right: -200px;
      background: radial-gradient(circle, rgba(155,123,248,0.18), transparent 70%);
      animation: drift2 24s ease-in-out infinite alternate;
    }
    .hero-grid-bg {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
    }
    @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,50px) scale(1.1); } }
    @keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-50px, 70px) scale(1.06); } }

    .hero-content { position: relative; z-index: 2; }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: 12px;
      color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 22px;
    }
    .eyebrow-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); box-shadow: 0 0 10px var(--accent);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.7);} }

    .hero-title {
      font-family: var(--font-heading);
      font-size: clamp(52px, 6.5vw, 100px);
      font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
      margin-bottom: 28px; color: var(--text);
    }
    .hero-title .grad {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 70%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-title .dim { color: var(--muted); }

    .hero-layout {
      display: grid; grid-template-columns: 1fr 1.1fr;
      gap: 56px; align-items: start;
    }
    .hero-left {}
    .hero-lead {
      font-size: clamp(17px, 1.8vw, 20px); color: var(--muted);
      line-height: 1.7; max-width: 540px; margin-bottom: 32px;
    }
    .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 24px; border-radius: 999px;
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      cursor: pointer; border: none; transition: all 0.2s; text-decoration: none;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; box-shadow: 0 4px 20px rgba(91,156,246,0.3);
    }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(91,156,246,0.45); }
    .btn-ghost {
      background: rgba(255,255,255,0.06); color: var(--text);
      border: 1px solid var(--line2);
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.1); }

    /* hero stats */
    .hero-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
    .stat-cell {
      background: rgba(255,255,255,0.04); border: 1px solid var(--line);
      border-radius: 12px; padding: 14px 16px;
      transition: border-color 0.2s, background 0.2s;
    }
    .stat-cell:hover { border-color: rgba(91,156,246,0.25); background: rgba(91,156,246,0.04); }
    .stat-label { font-family: var(--font-mono); font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
    .stat-value { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text); }

    /* ── VIDEO EMBED ── */
    .video-wrapper {
      position: relative; width: 100%; border-radius: 0;
      overflow: visible;
    }
    .video-inner {
      position: relative; width: 100%; padding-top: 56.25%;
      clip-path: polygon(22px 0%, 100% 0%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0% 100%, 0% 22px);
    }
    .video-inner iframe {
      position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block;
    }
    /* SVG outline over the video */
    .video-outline-svg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 2;
      /* match clip-path polygon corners */
    }

    /* ── SECTION ── */
    .section { padding: 100px 0; }
    .section-head { margin-bottom: 56px; }
    .section-label {
      font-family: var(--font-mono); font-size: 11px; color: var(--accent);
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    }
    .section-label::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
    .section-title {
      font-family: var(--font-heading);
      font-size: clamp(34px, 4vw, 54px); font-weight: 700;
      letter-spacing: -0.03em; line-height: 1.04;
      color: var(--text); margin-bottom: 14px;
    }
    .section-sub { font-size: 17px; color: var(--muted); max-width: 600px; line-height: 1.7; }

    .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line2) 20%, var(--line2) 80%, transparent); }

    /* ── TIMELINE ── */
    .timeline-wrapper {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 2px; background: var(--line); border-radius: 20px; overflow: hidden;
    }
    .timeline-step {
      background: var(--bg2); padding: 28px 26px; cursor: pointer;
      transition: background 0.25s; position: relative;
    }
    .timeline-step:hover { background: var(--bg3); }
    .timeline-step.ts-active {
      background: linear-gradient(160deg, rgba(91,156,246,0.1), rgba(155,123,248,0.05));
    }
    .timeline-step.ts-active::after {
      content: ""; position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2));
    }
    .ts-indicator {
      position: absolute; top: 16px; right: 16px;
      width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--faint);
    }
    .ts-active .ts-indicator { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
    .ts-label { font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
    .ts-active .ts-label { color: var(--accent); }
    .ts-name { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .ts-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }

    /* ── TEAM GRID ── */
    .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
    .team-card {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 18px; padding: 26px;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .team-card:hover { border-color: rgba(91,156,246,0.28); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
    .team-tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 999px;
      font-size: 11px; font-family: var(--font-mono);
      text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px;
    }
    .tag-team { background: rgba(91,156,246,0.1); border: 1px solid rgba(91,156,246,0.22); color: var(--accent); }
    .tag-gameplay { background: rgba(155,123,248,0.1); border: 1px solid rgba(155,123,248,0.22); color: var(--accent2); }
    .tag-network { background: rgba(80,227,194,0.1); border: 1px solid rgba(80,227,194,0.22); color: var(--accent3); }
    .tag-new { background: rgba(91,156,246,0.1); border: 1px solid rgba(91,156,246,0.22); color: var(--accent); }
    .tag-tech { background: rgba(155,123,248,0.1); border: 1px solid rgba(155,123,248,0.22); color: var(--accent2); }
    .tag-testing { background: rgba(80,227,194,0.1); border: 1px solid rgba(80,227,194,0.22); color: var(--accent3); }
    .tag-hub { background: rgba(246,180,91,0.1); border: 1px solid rgba(246,180,91,0.22); color: #f6b45b; }
    .tag-coop { background: rgba(91,156,246,0.1); border: 1px solid rgba(91,156,246,0.22); color: var(--accent); }
    .tag-rep { background: rgba(80,227,194,0.1); border: 1px solid rgba(80,227,194,0.22); color: var(--accent3); }
    .team-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
    .team-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ── ACCORDION ── */
    .accordion-list { display: flex; flex-direction: column; gap: 10px; }
    .accordion-item {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 18px; overflow: hidden; transition: border-color 0.25s;
    }
    .accordion-item.open { border-color: rgba(91,156,246,0.28); }
    .accordion-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 22px 28px; cursor: pointer;
      user-select: none; transition: background 0.2s;
    }
    .accordion-header:hover { background: rgba(255,255,255,0.02); }
    .accordion-item.open .accordion-header { background: rgba(91,156,246,0.04); }
    .accordion-title-row { display: flex; align-items: center; gap: 16px; }
    .accordion-icon {
      width: 40px; height: 40px; border-radius: 11px;
      display: grid; place-items: center; flex-shrink: 0; font-size: 20px;
    }
    .accordion-title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--text); }
    .accordion-chevron {
      width: 30px; height: 30px; border-radius: 999px;
      border: 1px solid var(--line2); display: grid; place-items: center;
      flex-shrink: 0; transition: transform 0.35s, background 0.2s;
      color: var(--muted); font-size: 13px;
    }
    .accordion-item.open .accordion-chevron { transform: rotate(180deg); background: rgba(91,156,246,0.1); color: var(--accent); border-color: rgba(91,156,246,0.3); }

    /* smooth height animation */
    .accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s ease; }
    .accordion-item.open .accordion-body { grid-template-rows: 1fr; }
    .accordion-body-inner { overflow: hidden; }
    .accordion-content { border-top: 1px solid var(--line); padding: 0; }

    /* ── FEATURE LAYOUT inside accordion ── */
    /* Each feature: image left, text right */
    .feature-entry {
      display: grid; grid-template-columns: 340px 1fr;
      gap: 36px; padding: 32px 28px;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }
    .feature-entry:last-child { border-bottom: none; }
    .feature-entry.reverse { grid-template-columns: 1fr 340px; }
    .feature-entry.reverse .feature-img-col { order: 2; }
    .feature-entry.reverse .feature-text-col { order: 1; }

    .feature-img-col { position: relative; }
    .feature-text-col {}

    .feature-title {
      font-family: var(--font-heading); font-size: 20px; font-weight: 600;
      color: var(--text); margin-bottom: 10px;
    }
    .feature-desc {
      font-size: 15px; color: var(--muted); line-height: 1.75;
      margin-bottom: 12px;
    }
    .feature-detail {
      font-size: 14px; color: var(--faint); line-height: 1.7;
      padding-top: 12px; border-top: 1px solid var(--line);
    }

    /* ── FRAME COMPONENT (corner-cut + white outline) ── */
    /* Used for all images and video */
    .img-frame {
      position: relative; display: block; width: 100%;
    }
    .img-frame-inner {
      display: block; width: 100%;
      clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
    }
    .img-frame-inner.placeholder-bg {
      aspect-ratio: 16/9;
      background:
        linear-gradient(160deg, rgba(91,156,246,0.09), rgba(155,123,248,0.07)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 14px, rgba(255,255,255,0.03) 14px 28px);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 10px;
      text-align: center; padding: 20px;
    }
    /* The white outline overlay via absolute SVG */
    .img-frame-border {
      position: absolute; inset: 0; pointer-events: none; z-index: 1;
    }

    /* ── FLOW ── */
    .flow-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }
    .flow-connector {
      position: absolute; top: 46px; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      opacity: 0.25; z-index: 0;
    }
    .flow-step {
      position: relative; z-index: 1; display: flex; flex-direction: column;
      align-items: center; text-align: center; padding: 0 10px;
      cursor: pointer; transition: opacity 0.2s;
    }
    .flow-step:hover { opacity: 0.82; }
    .flow-num {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--panel); border: 1px solid var(--line2);
      display: grid; place-items: center;
      font-family: var(--font-heading); font-weight: 700; font-size: 19px;
      color: var(--muted); margin-bottom: 16px; transition: all 0.3s;
      position: relative; z-index: 2;
    }
    .flow-step.flow-active .flow-num { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; box-shadow: 0 0 22px rgba(91,156,246,0.45); }
    .flow-step.flow-done .flow-num { background: rgba(91,156,246,0.12); border-color: rgba(91,156,246,0.35); color: var(--accent); }
    .flow-label { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .flow-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }
    .flow-detail-panel {
      margin-top: 32px; padding: 28px 32px; border-radius: 18px;
      background: linear-gradient(160deg, rgba(91,156,246,0.07), rgba(155,123,248,0.04));
      border: 1px solid rgba(91,156,246,0.18); transition: all 0.3s;
    }
    .flow-detail-inner { display: grid; grid-template-columns: 1fr 420px; gap: 36px; align-items: start; }
    .flow-detail-title { font-family: var(--font-heading); font-size: 26px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
    .flow-detail-desc { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
    .flow-nav { display: flex; gap: 10px; align-items: center; }
    .flow-nav-btn {
      padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line2);
      background: rgba(255,255,255,0.05); color: var(--muted); font-size: 13px;
      cursor: pointer; transition: all 0.2s; font-family: var(--font-body);
    }
    .flow-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--text); }
    .flow-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .flow-progress-text { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-left: auto; }

    /* ── LEVEL CARDS ── */
    .level-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 32px; }
    .level-card {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 18px; overflow: hidden;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .level-card:hover { border-color: rgba(91,156,246,0.25); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
    .level-card-img { display: block; width: 100%; }
    .level-card-body { padding: 22px 24px; }
    .level-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
    .level-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ── VALIDATION ── */
    .validation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .val-card {
      background: var(--panel); border: 1px solid var(--line);
      border-radius: 18px; padding: 26px; position: relative; overflow: hidden;
      transition: border-color 0.25s, transform 0.25s;
    }
    .val-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.3s; }
    .val-card:hover { border-color: rgba(91,156,246,0.28); transform: translateY(-3px); }
    .val-card:hover::before { opacity: 1; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
    .val-number { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-bottom: 14px; display: block; }
    .val-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .val-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ── CALLOUT ── */
    .callout-block {
      padding: 32px 38px; border-radius: 18px;
      background: linear-gradient(135deg, rgba(91,156,246,0.07), rgba(155,123,248,0.04));
      border: 1px solid rgba(91,156,246,0.18);
      position: relative; overflow: hidden;
    }
    .callout-block::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent2)); }
    .callout-block p { font-size: 16px; color: var(--muted); line-height: 1.75; }
    .callout-block strong { color: var(--accent); }

    /* ── NEXT ── */
    .next-banner {
      padding: 56px 52px; border-radius: 22px;
      background: linear-gradient(135deg, rgba(91,156,246,0.1), rgba(155,123,248,0.07));
      border: 1px solid rgba(91,156,246,0.2); position: relative; overflow: hidden; text-align: center;
    }
    .next-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(91,156,246,0.12), transparent 60%); pointer-events: none; }
    .next-banner h3 { font-family: var(--font-heading); font-size: clamp(28px,3vw,40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; position: relative; }
    .next-banner p { font-size: 17px; color: var(--muted); max-width: 660px; margin: 0 auto 32px; line-height: 1.75; position: relative; }

    /* ── FOOTER ── */
    footer { padding: 40px 0; border-top: 1px solid var(--line); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .footer-text { font-size: 13px; color: var(--faint); font-family: var(--font-mono); }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .hero-layout { grid-template-columns: 1fr; }
      .feature-entry, .feature-entry.reverse { grid-template-columns: 1fr; }
      .feature-entry.reverse .feature-img-col { order: 0; }
      .feature-entry.reverse .feature-text-col { order: 0; }
      .flow-steps { grid-template-columns: 1fr 1fr; }
      .flow-detail-inner { grid-template-columns: 1fr; }
      .flow-connector { display: none; }
    }
    @media (max-width: 768px) {
      .shell { width: calc(100% - 32px); }
      .nav-links { display: none; }
      .team-grid, .validation-grid, .level-grid { grid-template-columns: 1fr; }
      .timeline-wrapper { grid-template-columns: 1fr 1fr; }
      .flow-steps { grid-template-columns: 1fr; }
      .hero-stats { grid-template-columns: 1fr 1fr; }
    }