@layer reset, base, components, sections, utilities, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, blockquote, figure { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }
  button, input { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img, video, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    color-scheme: dark;
    --bg: #090b08;
    --bg-2: #0e110d;
    --surface: #11150f;
    --surface-2: #171c14;
    --surface-3: #20261c;
    --ink: #f2eee3;
    --muted: #a9ad9f;
    --faint: #747a6d;
    --line: rgba(242, 238, 227, 0.13);
    --line-strong: rgba(242, 238, 227, 0.25);
    --acid: #caff3d;
    --acid-soft: #e5ffa0;
    --acid-ink: #111506;
    --accent-text: #caff3d;
    --accent-line: #caff3d;
    --green: #25d366;
    --success-text: #45e681;
    --orange: #ff7043;
    --red: #ff5c50;
    --paper: #f3efe4;
    --paper-ink: #12150e;
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
    --radius-s: 12px;
    --radius-m: 22px;
    --radius-l: 34px;
    --shell: min(1280px, calc(100vw - 64px));
    --header-h: 78px;
    --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
    --font-body: "Manrope", Arial, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
  }

  html[data-theme="light"] {
    color-scheme: light;
    --bg: #f2ede1;
    --bg-2: #e9e3d5;
    --surface: #fbf8f0;
    --surface-2: #e8e2d4;
    --surface-3: #d7d0c0;
    --ink: #171a12;
    --muted: #51574a;
    --faint: #62685c;
    --line: rgba(23, 26, 18, 0.18);
    --line-strong: rgba(23, 26, 18, 0.34);
    --acid: #b9ed2c;
    --acid-soft: #d8fb78;
    --acid-ink: #111506;
    --accent-text: #557000;
    --accent-line: #729500;
    --green: #19a952;
    --success-text: #0d7138;
    --paper: #fbf8f0;
    --paper-ink: #171a12;
    --shadow: 0 26px 70px rgba(62, 55, 36, 0.16);
  }

  html { background: var(--bg); }
  body {
    min-width: 320px;
    overflow-x: clip;
    background:
      linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,.018) 100%) 0 0 / 72px 72px,
      var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  button { color: inherit; }
  ::selection { background: var(--acid); color: var(--acid-ink); }
  :focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
  .shell { width: var(--shell); margin-inline: auto; }
  .section { position: relative; padding-block: clamp(110px, 11vw, 180px); }

  .skip-link {
    position: fixed;
    z-index: 999;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--acid);
    color: var(--acid-ink);
    transform: translateY(-160%);
    transition: transform .2s ease;
  }
  .skip-link:focus { transform: translateY(0); }

  .page-progress {
    position: fixed;
    z-index: 120;
    inset: 0 0 auto;
    height: 2px;
    pointer-events: none;
  }
  .page-progress span { display: block; width: 0; height: 100%; background: var(--acid); }

  .ambient {
    position: fixed;
    z-index: -1;
    width: 36vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(130px);
    opacity: .075;
    pointer-events: none;
  }
  .ambient-one { top: 6vh; right: -18vw; background: var(--acid); }
  .ambient-two { bottom: -20vh; left: -22vw; background: var(--green); }
  .pointer-glow {
    position: fixed;
    z-index: 0;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--acid) 8%, transparent), transparent 67%);
    translate: -50% -50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .pointer-glow.is-visible { opacity: 1; }

  .svg-library { position: absolute; overflow: hidden; }
}

@layer components {
  .brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
  .brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  }
  .brand-mark::before,
  .brand-mark::after,
  .brand-mark i {
    position: absolute;
    content: "";
    border: 1.6px solid var(--acid-ink);
    border-radius: 50%;
  }
  .brand-mark::before { width: 35px; height: 35px; left: -21px; }
  .brand-mark::after { width: 35px; height: 35px; right: -21px; }
  .brand-mark i { width: 5px; height: 5px; background: var(--acid-ink); border: 0; }
  .brand-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.045em;
  }
  .brand-name b { color: var(--accent-text); font-size: .62em; vertical-align: super; letter-spacing: 0; }

  .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 20px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .button::before {
    position: absolute;
    content: "";
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.4), transparent 70%);
    transform: translateX(-120%);
    transition: transform .65s ease;
  }
  .button:hover::before { transform: translateX(120%); }
  .button:hover { transform: translateY(-2px); }
  .button svg, .button span { position: relative; z-index: 1; }
  .button-solid { background: var(--acid); color: var(--acid-ink); box-shadow: 0 10px 30px color-mix(in srgb, var(--acid) 16%, transparent); }
  .button-solid:hover { background: var(--acid-soft); box-shadow: 0 14px 40px color-mix(in srgb, var(--acid) 26%, transparent); }
  .button-quiet { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 78%, transparent); }
  .button-quiet:hover { border-color: var(--ink); }
  .button-outline { border-color: var(--line-strong); background: transparent; }
  .button-outline:hover { border-color: var(--accent-line); color: var(--accent-text); }
  .button-large { min-height: 58px; padding-inline: 26px; }
  .button-small { min-height: 43px; padding: 9px 17px; font-size: 14px; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
  }
  .text-link svg { transition: transform .2s ease; }
  .text-link:hover { border-color: var(--accent-line); color: var(--accent-text); }
  .text-link:hover svg { transform: translateX(4px); }

  .section-index {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .13em;
  }
  .section-index::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .55; }
  .section-intro { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr); gap: clamp(60px, 10vw, 150px); align-items: end; }
  .display-title {
    max-width: 900px;
    font-family: var(--font-display);
    font-size: clamp(48px, 6.2vw, 90px);
    font-weight: 650;
    line-height: .93;
    letter-spacing: -.068em;
  }
  .display-title em { color: var(--accent-text); font-style: normal; }
  .section-copy { max-width: 510px; color: var(--muted); font-size: 16px; }
  .section-copy p + p { margin-top: 15px; }

  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  [data-tilt] {
    --rx: 0deg;
    --ry: 0deg;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .25s ease;
    transform-style: preserve-3d;
  }
  [data-tilt].is-visible { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); }
}

@layer sections {
  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    width: 100%;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .site-header.is-scrolled {
    border-color: var(--line);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
  .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
  .nav-links a { color: var(--muted); font-size: 13px; font-weight: 650; transition: color .2s ease; }
  .nav-links a:hover { color: var(--ink); }
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  .theme-toggle, .nav-menu {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    cursor: pointer;
  }
  html[data-theme="dark"] .theme-sun,
  html[data-theme="light"] .theme-moon { display: none; }
  .nav-menu { display: none; position: relative; }
  .nav-menu span { position: absolute; width: 17px; height: 1.5px; background: currentColor; transition: transform .2s ease; }
  .nav-menu span:first-child { transform: translateY(-3px); }
  .nav-menu span:last-child { transform: translateY(3px); }
  .nav-menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .nav-menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr);
    gap: clamp(38px, 5vw, 88px);
    align-items: center;
    min-height: min(970px, 100svh);
    padding-top: calc(var(--header-h) + 62px);
    padding-bottom: 72px;
  }
  .hero-copy { position: relative; z-index: 2; }
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .12em;
  }
  .status-pulse, .live-chip i, .live-label i, .media-proof i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 12%, transparent);
    animation: pulse 2.4s ease infinite;
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(72px, 8.5vw, 132px);
    font-weight: 680;
    line-height: .79;
    letter-spacing: -.084em;
  }
  .hero-title span { display: block; }
  .hero-title-accent { color: var(--accent-text); }
  .hero-lede { max-width: 660px; margin-top: 36px; color: var(--muted); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
  .hero-lede strong { color: var(--ink); font-weight: 600; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .hero-proof { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-top: 34px; color: var(--faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; }
  .hero-proof span { display: flex; align-items: center; gap: 7px; }
  .hero-proof i { color: var(--accent-text); font-style: normal; }

  .hero-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
  }
  .float-card { position: absolute; z-index: 4; width: 190px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--paper-ink) 8%, transparent); border-radius: 14px; background: var(--paper); color: var(--card-ink, var(--paper-ink)); box-shadow: 0 24px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .45); opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)); transition: opacity .45s ease, transform .45s ease; pointer-events: none; --card-ink: var(--paper-ink); }
  .hero-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
  .hero-link { fill: none; stroke: var(--accent-line); stroke-width: 1.6; stroke-dasharray: 6 8; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; transition: opacity .3s ease; animation: link-roll 2.8s linear infinite; }
  .hero-links.is-burst .hero-link { opacity: .95; animation-duration: .65s; }
  .float-card.is-active { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
  .float-left { left: 0; top: 13%; --rot: -4deg; }
  .float-right { right: 0; bottom: 13%; --rot: 3deg; }
  .float-kicker { display: flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--card-ink) 55%, transparent); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; }
  .float-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .float-big { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 27px; line-height: 1; letter-spacing: -.04em; }
  .float-mono { font-family: var(--font-mono); font-size: 21px; letter-spacing: .1em; }
  .float-sub { display: block; margin-top: 7px; color: color-mix(in srgb, var(--card-ink) 58%, transparent); font-size: 10px; }
  .float-compare { margin-top: 12px; }
  .float-compare div { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--card-ink) 12%, transparent); }
  .float-compare div:last-child { border-bottom: 0; }
  .float-compare span { color: color-mix(in srgb, var(--card-ink) 55%, transparent); font-family: var(--font-mono); font-size: 8px; }
  .float-compare strong { font-family: var(--font-display); font-size: 17px; }
  .float-compare strong.up { color: var(--green); }
  .float-gauge { display: grid; gap: 10px; margin-top: 12px; }
  .float-gauge div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px; }
  .float-gauge span { color: color-mix(in srgb, var(--card-ink) 55%, transparent); font-family: var(--font-mono); font-size: 7px; }
  .float-gauge strong { font-family: var(--font-display); font-size: 15px; }
  .float-gauge i { grid-column: 1 / -1; position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--card-ink) 14%, transparent); }
  .float-gauge i::before { position: absolute; content: ""; inset: 0 auto 0 0; width: var(--value); background: var(--green); }
  .float-progress { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--card-ink) 14%, transparent); }
  .float-progress i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--green); }
  .float-verdict { display: inline-block; margin-top: 12px; padding: 6px 9px; border-radius: 7px; background: var(--green); color: #06301a; font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }
  .float-verdict.down { background: var(--red); color: #fff; }
  .demo-phone {
    position: relative;
    z-index: 3;
    justify-self: center;
    width: min(336px, 100%);
    aspect-ratio: 336 / 672;
    padding: 11px;
    border: 1px solid var(--line-strong);
    border-radius: 46px;
    background: linear-gradient(160deg, #1b211a, #0c100a);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .demo-phone::after {
    position: absolute;
    content: "";
    top: 21px;
    left: 50%;
    z-index: 4;
    width: 96px;
    height: 22px;
    border-radius: 99px;
    background: #000;
    transform: translateX(-50%);
  }
  .demo-phone-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 36px;
    background: #111510;
    color: #f3efe4;
  }
  .demo-phone .demo-topbar { padding-top: 36px; }
  .demo-topbar { display: flex; align-items: center; gap: 8px; min-height: 70px; padding: 13px 12px; background: #202c33; color: #e9edef; }
  .wa-ic { width: 19px; height: 19px; flex: none; }
  .demo-topbar > .wa-ic { color: #aebac1; }
  .demo-avatar { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--acid); }
  .demo-avatar::before, .demo-avatar::after, .demo-avatar span, .demo-avatar i { position: absolute; content: ""; border: 1.4px solid #111506; border-radius: 50%; }
  .demo-avatar::before { width: 36px; height: 36px; left: -24px; }
  .demo-avatar::after { width: 36px; height: 36px; right: -24px; }
  .demo-avatar span, .demo-avatar i { width: 5px; height: 5px; background: #111506; border: 0; }
  .demo-topbar > div:nth-child(3), .funding-chat-head > div { display: flex; flex-direction: column; line-height: 1.2; }
  .demo-topbar strong { font-size: 13px; font-weight: 600; }
  .demo-topbar div > span { margin-top: 3px; color: #8696a0; font-size: 9px; }
  .demo-wa-actions { display: flex; align-items: center; gap: 15px; margin-left: auto; padding-right: 5px; color: #aebac1; }
  .demo-wa-actions .wa-ic { width: 18px; height: 18px; }
  .demo-context { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.06); background: #111b21; color: #8696a0; font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
  .demo-dots { display: flex; gap: 5px; }
  .demo-dots button { width: 18px; height: 3px; padding: 0; border: 0; border-radius: 8px; background: #2a3942; cursor: pointer; transition: background .2s ease, width .2s ease; }
  .demo-dots button.is-active { width: 27px; background: #00a884; }
  .demo-thread { flex: 1; overflow: hidden; padding: 16px 12px; background: #0b141a; }
  .demo-message { display: flex; margin-bottom: 7px; opacity: 0; transform: translateY(9px); animation: message-in .4s ease forwards; }
  .demo-message.is-user { justify-content: flex-end; }
  .demo-bubble { max-width: 84%; padding: 8px 9px 7px; border-radius: 2px 8px 8px 8px; background: #202c33; color: #e9edef; font-size: 11px; line-height: 1.42; box-shadow: 0 1px 1px rgba(0,0,0,.35); }
  .is-user .demo-bubble { border-radius: 8px 2px 8px 8px; background: #005c4b; }
  .demo-bubble strong { color: #fff; }
  .demo-bubble small { display: block; margin-top: 5px; color: #8696a0; font-size: 8px; }
  .demo-meta { display: inline-flex; align-items: center; gap: 3px; float: right; margin: 8px -2px -2px 10px; color: #8696a0; font-size: 7px; }
  .demo-meta b { color: #53bdeb; font-weight: 600; font-size: 8px; letter-spacing: -1px; }
  .demo-choice { display: block; width: 100%; margin-top: 7px; padding: 8px 9px; border: 1px solid rgba(0,168,132,.45); border-radius: 8px; color: #00a884; font-size: 9px; text-align: left; }
  .demo-price-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 7px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); }
  .demo-price-row span { color: #aebac1; }
  .demo-price-row b { font-family: var(--font-mono); font-size: 10px; color: #e9edef; }
  .demo-price-row em { color: #00a884; font-size: 8px; font-style: normal; grid-column: 1 / -1; }
  .demo-input { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 12px; padding: 11px 14px; border: 0; border-radius: 999px; background: #202c33; color: #8696a0; font-size: 10px; }
  .demo-input .wa-ic { width: 18px; height: 18px; color: #8696a0; }

  .bookmaker-rail { position: relative; overflow: hidden; padding-block: 24px 30px; border-block: 1px solid var(--line); background: linear-gradient(112deg, color-mix(in srgb, var(--acid) 5%, var(--surface)) 0%, var(--bg-2) 48%, color-mix(in srgb, var(--green) 4%, var(--surface)) 100%); }
  .bookmaker-rail::before { position: absolute; content: ""; inset: 0; background: linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), color-mix(in srgb, var(--ink) 4%, transparent) 100%) 0 0 / 72px 72px; pointer-events: none; }
  .bookmaker-rail-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding-bottom: 20px; }
  .bookmaker-rail-kicker { display: flex; align-items: center; gap: 9px; color: var(--accent-text); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .13em; white-space: nowrap; }
  .bookmaker-rail-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acid) 12%, transparent), 0 0 18px color-mix(in srgb, var(--acid) 55%, transparent); animation: pulse 2.5s ease-in-out infinite; }
  .bookmaker-rail-head p { color: var(--muted); font-size: 12px; line-height: 1.45; }
  .bookmaker-rail-head p strong { margin-right: 5px; color: var(--ink); font-family: var(--font-display); font-size: 15px; letter-spacing: -.025em; }
  .bookmaker-rail-state { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); color: var(--faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; white-space: nowrap; }
  .bookmaker-marquee { position: relative; z-index: 1; width: 100%; overflow: hidden; }
  .bookmaker-marquee::before, .bookmaker-marquee::after { position: absolute; z-index: 2; content: ""; top: 0; bottom: 0; width: max(30px, calc((100vw - var(--shell)) / 2)); pointer-events: none; }
  .bookmaker-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
  .bookmaker-marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-2), transparent); }
  .bookmaker-track { display: flex; width: max-content; gap: 14px; padding-inline: 7px; animation: bookmaker-ticker 48s linear infinite; will-change: transform; }
  .bookmaker-marquee:hover .bookmaker-track { animation-play-state: paused; }
  .bookmaker-list { display: flex; gap: 14px; }
  .bookmaker-chip { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; flex: none; width: 205px; min-height: 72px; padding: 11px 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
  .bookmaker-chip:hover { border-color: color-mix(in srgb, var(--acid) 45%, var(--line)); background: var(--surface-2); transform: translateY(-2px); }
  .bookmaker-chip > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--acid) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--acid) 9%, var(--surface-2)); color: var(--accent-text); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: -.04em; }
  .bookmaker-chip strong { align-self: end; color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 1; letter-spacing: -.045em; }
  .bookmaker-chip small { align-self: start; display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--faint); font-family: var(--font-mono); font-size: 6px; font-weight: 700; letter-spacing: .12em; }
  .bookmaker-chip small i { width: 4px; height: 4px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px color-mix(in srgb, var(--acid) 70%, transparent); }

  .system { padding-top: clamp(130px, 13vw, 200px); }
  .system-carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 72px; }
  .system-carousel-label { display: flex; align-items: center; gap: 10px; color: var(--accent-text); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
  .system-carousel-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acid) 10%, transparent); }
  .system-carousel-status { display: flex; align-items: center; gap: 9px; }
  .system-carousel-status > span { min-width: 82px; color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-align: center; }
  .system-carousel-status button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease; }
  .system-carousel-status button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--acid); color: var(--acid-ink); }
  .system-carousel-status button:disabled { cursor: default; opacity: .3; }
  .system-carousel-meter { position: relative; width: 120px; height: 2px; overflow: hidden; background: var(--line-strong); }
  .system-carousel-meter span { position: absolute; top: 0; left: 0; width: 80%; height: 100%; background: var(--acid); transition: left .55s cubic-bezier(.2,.7,.2,1), width .35s ease; }
  .system-carousel { margin-top: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
  .system-carousel::-webkit-scrollbar { display: none; }
  .system-carousel:active { cursor: grabbing; }
  .system-grid { display: flex; width: 100%; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .system-card { position: relative; flex: 0 0 25%; min-width: 0; min-height: 430px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 68%, transparent); scroll-snap-align: start; }
  .system-card::after { position: absolute; content: ""; inset: 0; background: linear-gradient(145deg, transparent 50%, color-mix(in srgb, var(--acid) 6%, transparent)); opacity: 0; transition: opacity .3s ease; }
  .system-card:hover::after { opacity: 1; }
  .system-card-accent { background: var(--acid); color: var(--acid-ink); }
  .system-card-accent::after { display: none; }
  .system-card-ifa { background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--acid) 13%, transparent), transparent 38%), color-mix(in srgb, var(--surface-2) 86%, var(--bg)); box-shadow: inset 0 2px 0 var(--accent-line); }
  .system-card-ifa::after { background: linear-gradient(145deg, transparent 36%, color-mix(in srgb, var(--acid) 11%, transparent)); }
  .system-card-ifa h3 { color: var(--accent-text); }
  .card-number { color: var(--faint); font-family: var(--font-mono); font-size: 10px; }
  .system-card-accent .card-number { color: rgba(17,21,6,.5); }
  .system-icon { position: relative; height: 105px; margin-top: 35px; }
  .live-chip { position: absolute; top: 28px; right: 28px; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
  .system-card-accent .live-chip i { background: var(--acid-ink); box-shadow: 0 0 0 5px rgba(17,21,6,.1); }
  .icon-conversation i { position: absolute; width: 68px; height: 44px; border: 1px solid var(--line-strong); border-radius: 20px 20px 20px 4px; }
  .icon-conversation i:nth-child(2) { top: 22px; left: 35px; border-radius: 20px 20px 4px; }
  .icon-conversation i:nth-child(3) { top: 44px; left: 8px; width: 52px; }
  .icon-punter span { position: absolute; inset: 2px auto auto 5px; width: 88px; height: 88px; border: 1px solid rgba(17,21,6,.45); border-radius: 50%; }
  .icon-punter span::before, .icon-punter span::after { position: absolute; content: ""; inset: 21px; border: 1px solid rgba(17,21,6,.45); border-radius: 50%; }
  .icon-punter span::after { inset: 39px; background: var(--acid-ink); }
  .icon-slipops { display: flex; align-items: center; gap: 7px; }
  .icon-slipops b { width: 29px; height: 70px; border: 1px solid var(--line-strong); border-radius: 6px; transform: skewY(-11deg); }
  .icon-slipops b:nth-child(2) { height: 88px; background: color-mix(in srgb, var(--acid) 12%, transparent); }
  .icon-ifa svg { width: 118px; height: 90px; overflow: visible; }
  .icon-ifa .ifa-loop { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 5 6; }
  .icon-ifa .ifa-path { fill: none; stroke: var(--accent-line); stroke-width: 2; stroke-linecap: round; }
  .icon-ifa circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; }
  .icon-ifa rect { fill: var(--acid); stroke: var(--accent-line); stroke-width: 1.2; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--acid) 42%, transparent)); }
  .icon-rails i { position: absolute; top: 10px; left: 4px; width: 105px; height: 66px; border: 1px solid var(--line-strong); border-radius: 12px; }
  .icon-rails i::before { position: absolute; content: ""; inset: 13px -10px auto 22px; height: 38px; border: 1px solid var(--acid); border-radius: 7px; background: var(--surface); }
  .icon-rails i::after { position: absolute; content: ""; right: 4px; top: 29px; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); }
  .system-card h3 { position: relative; z-index: 1; margin-top: 13px; font-family: var(--font-display); font-size: 30px; letter-spacing: -.05em; }
  .system-card p { position: relative; z-index: 1; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
  .system-card-accent p { color: rgba(17,21,6,.7); }
  .system-card small { position: absolute; z-index: 1; right: 28px; bottom: 24px; left: 28px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
  .system-card-accent small { border-color: rgba(17,21,6,.16); color: rgba(17,21,6,.58); }

  .punter { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
  .read-stage { display: grid; grid-template-columns: 300px 1fr; max-width: 1120px; margin: 80px auto 0; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg); box-shadow: var(--shadow); }
  .read-selector { display: flex; flex-direction: column; padding: 15px; border-right: 1px solid var(--line); }
  .read-tab { display: grid; grid-template-columns: 26px 1fr; gap: 2px 9px; padding: 19px 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
  .read-tab:last-child { border-bottom: 0; }
  .read-tab span { grid-row: 1 / 3; color: var(--faint); font-family: var(--font-mono); font-size: 9px; }
  .read-tab strong { color: var(--ink); font-family: var(--font-display); font-size: 16px; }
  .read-tab small { font-size: 10px; }
  .read-tab.is-active { border-radius: 10px; background: var(--acid); color: rgba(17,21,6,.64); }
  .read-tab.is-active span, .read-tab.is-active strong { color: var(--acid-ink); }
  .read-panel { min-height: 530px; padding: 27px 32px 30px; }
  .read-panel-head { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .09em; }
  .read-panel-head span:last-child { display: flex; align-items: center; gap: 7px; }
  .read-panel-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); }
  .fixture-title { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; }
  .fixture-title small { color: var(--accent-text); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
  .fixture-title h3 { margin-top: 4px; font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 46px); letter-spacing: -.055em; line-height: 1; }
  .fixture-title h3 span { color: var(--faint); font-size: .48em; font-weight: 500; }
  .fixture-time { padding-left: 26px; border-left: 1px solid var(--line); color: var(--faint); font-family: var(--font-mono); font-size: 8px; line-height: 1.5; text-align: right; }
  .fixture-time strong { color: var(--ink); font-size: 13px; }
  .read-analysis { max-width: 750px; margin-top: 19px; color: var(--muted); font-size: 13px; }
  .probability-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 29px; }
  .probability-compare div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px; }
  .probability-compare span { color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
  .probability-compare strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -.05em; }
  .probability-compare i { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
  .probability-compare i::before { position: absolute; content: ""; inset: 0 auto 0 0; width: var(--value); border-radius: inherit; background: var(--acid); transition: width .5s ease; }
  .read-verdict { display: grid; grid-template-columns: 1.6fr .8fr .8fr; gap: 16px; margin-top: 26px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .read-verdict > div + div { padding-left: 17px; border-left: 1px solid var(--line); }
  .read-verdict small { display: block; color: var(--faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .09em; }
  .read-verdict strong { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 15px; }
  .read-verdict .edge strong { color: var(--accent-text); }
  .read-actions { display: flex; gap: 8px; margin-top: 17px; }
  .read-actions button { flex: 1; min-height: 39px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
  .read-actions button:first-child { border-color: var(--acid); background: var(--acid); color: var(--acid-ink); font-weight: 700; }
  .punter-principles { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 58px; border-top: 1px solid var(--line); }
  .punter-principles > div { padding: 25px 25px 0 0; }
  .punter-principles > div + div { padding-left: 25px; border-left: 1px solid var(--line); }
  .punter-principles span { color: var(--accent-text); font-family: var(--font-mono); font-size: 9px; }
  .punter-principles strong { display: block; margin-top: 26px; font-family: var(--font-display); font-size: 17px; }
  .punter-principles p { margin-top: 8px; color: var(--muted); font-size: 12px; }

  .code-console { max-width: 1120px; margin: 80px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: #0d110c; color: #eef0e9; box-shadow: var(--shadow); }
  .console-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 49px; padding-inline: 18px; border-bottom: 1px solid rgba(255,255,255,.1); color: #7f8778; font-family: var(--font-mono); font-size: 8px; }
  .console-head small { justify-self: end; }
  .console-lights { display: flex; gap: 6px; }
  .console-lights i { width: 7px; height: 7px; border-radius: 50%; background: #3a4035; }
  .console-lights i:nth-child(2) { background: var(--orange); }
  .console-lights i:nth-child(3) { background: var(--acid); }
  .console-body { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 380px; }
  .console-input-wrap { display: flex; flex-direction: column; padding: 32px; border-right: 1px solid rgba(255,255,255,.1); }
  .console-input-wrap label { color: #777f71; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
  .console-input { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; background: #151a13; }
  .console-input span { font-family: var(--font-mono); font-size: 18px; letter-spacing: .08em; }
  .console-input button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--acid); color: var(--acid-ink); cursor: pointer; }
  .console-books { display: flex; gap: 8px; margin-top: 13px; }
  .console-books span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; color: #8f9789; font-size: 9px; }
  .console-books i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .console-result { padding: 32px; }
  .result-kicker { color: var(--acid); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
  .result-title { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
  .result-title h3 { font-family: var(--font-display); font-size: 27px; letter-spacing: -.045em; }
  .result-title span { padding: 5px 8px; border-radius: 5px; background: rgba(37,211,102,.1); color: var(--green); font-family: var(--font-mono); font-size: 8px; }
  .leg-list { margin-top: 23px; border-top: 1px solid rgba(255,255,255,.1); }
  .leg { display: grid; grid-template-columns: 25px 1fr auto; gap: 11px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .leg > span { color: #697063; font-family: var(--font-mono); font-size: 8px; }
  .leg div { display: flex; flex-direction: column; line-height: 1.35; }
  .leg strong { font-size: 11px; }
  .leg small { color: #868e80; font-size: 9px; }
  .leg em { color: var(--acid); font-family: var(--font-mono); font-size: 9px; font-style: normal; }
  .result-summary { display: flex; justify-content: space-between; margin-top: 17px; color: #8b9384; font-family: var(--font-mono); font-size: 8px; }
  .result-summary strong { color: #fff; font-size: 11px; }
  .result-note { margin-top: 22px; padding: 16px; border-left: 2px solid var(--acid); background: rgba(202,255,61,.06); color: #bac0b5; font-size: 11px; }
  .result-note strong { color: var(--acid); }
  .minted-code { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding: 22px; border: 1px solid rgba(202,255,61,.25); border-radius: 10px; background: rgba(202,255,61,.05); }
  .minted-code div { display: flex; flex-direction: column; }
  .minted-code span { color: #7d8578; font-family: var(--font-mono); font-size: 8px; }
  .minted-code strong { margin-top: 4px; color: var(--acid); font-family: var(--font-mono); font-size: 23px; letter-spacing: .1em; }
  .minted-code i { color: var(--green); font-family: var(--font-mono); font-size: 8px; font-style: normal; }
  .console-tools { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
  .console-tool { min-height: 65px; padding: 12px 9px; border: 0; border-right: 1px solid rgba(255,255,255,.1); background: transparent; color: #8a9183; cursor: pointer; font-size: 10px; }
  .console-tool:last-child { border-right: 0; }
  .console-tool span { display: block; margin-bottom: 4px; color: #5d6457; font-family: var(--font-mono); font-size: 7px; }
  .console-tool.is-active { background: var(--acid); color: var(--acid-ink); font-weight: 700; }
  .console-tool.is-active span { color: rgba(17,21,6,.55); }

  .funding { border-block: 1px solid var(--line); background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--acid) 7%, transparent), transparent 30%), linear-gradient(180deg, var(--bg-2), #0b0e0a); color: var(--ink); }
  .funding .section-index, .funding .display-title em { color: var(--accent-text); }
  .funding .display-title { color: var(--ink); }
  .funding .section-copy { color: var(--muted); }
  .funding-stage { display: grid; grid-template-columns: .9fr 1.1fr; max-width: 1110px; margin: 80px auto 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: #11150f; color: #f3efe4; box-shadow: 0 30px 90px rgba(0,0,0,.36); }
  .funding-chat { min-height: 550px; border-right: 1px solid rgba(255,255,255,.1); background: #0d110c; }
  .funding-chat-head { display: flex; align-items: center; gap: 11px; padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .funding-chat-head strong { font-size: 13px; }
  .funding-chat-head small { color: #9aa292; font-size: 9px; }
  .funding-thread { min-height: 385px; padding: 22px 17px; overflow: hidden; }
  .funding-message { display: flex; margin-bottom: 10px; opacity: 0; transform: translateY(10px); animation: message-in .4s ease forwards; }
  .funding-message.is-user { justify-content: flex-end; }
  .funding-bubble { max-width: 87%; padding: 10px 12px; border-radius: 7px 14px 14px 14px; background: #20261d; color: #dfe2da; font-size: 11px; line-height: 1.5; }
  .is-user .funding-bubble { border-radius: 14px 7px 14px 14px; background: #1d4b34; }
  .funding-bubble b { color: #fff; }
  .funding-confirm { margin-top: 8px; padding: 8px; border: 1px solid rgba(202,255,61,.25); border-radius: 6px; color: var(--acid); font-size: 9px; }
  .funding-progress { height: 2px; margin-inline: 18px; background: #282e24; }
  .funding-progress span { display: block; width: 0; height: 100%; background: var(--acid); transition: width .55s ease; }
  .funding-replay { display: block; margin: 14px auto 0; border: 0; background: none; color: #9aa292; cursor: pointer; font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
  .funding-proof { padding: 38px; background: #151a13; }
  .funding-proof-head { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); color: #9aa292; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
  .funding-proof-head i { color: var(--green); font-style: normal; }
  .funding-state { display: grid; grid-template-columns: 26px 1fr 27px; gap: 12px; align-items: center; min-height: 84px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .funding-state > span { color: #8b9485; font-family: var(--font-mono); font-size: 8px; }
  .funding-state div { display: flex; flex-direction: column; }
  .funding-state strong { font-family: var(--font-display); font-size: 15px; }
  .funding-state small { margin-top: 3px; color: #a2aa9c; font-size: 9px; }
  .funding-state > i { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #7f8778; }
  .funding-state.is-complete > i { border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.1); color: var(--green); }
  .funding-state.is-active > i { border-color: var(--acid); background: var(--acid); color: var(--acid-ink); box-shadow: 0 0 0 7px rgba(202,255,61,.08); }
  .funding-rule { margin-top: 28px; padding: 17px; border: 1px solid rgba(202,255,61,.2); border-radius: 9px; background: rgba(202,255,61,.05); }
  .funding-rule span { color: var(--acid); font-family: var(--font-mono); font-size: 8px; }
  .funding-rule p { margin-top: 6px; color: #b0b6aa; font-size: 11px; }

  .ifa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(80px, 10vw, 160px); align-items: center; }
  .ifa-copy > p { max-width: 590px; margin-top: 30px; color: var(--muted); font-size: 17px; }
  .ifa-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 590px; margin: 34px 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .ifa-features div { display: flex; gap: 13px; min-height: 96px; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ifa-features span { color: var(--accent-text); font-family: var(--font-mono); font-size: 8px; }
  .ifa-features p { color: var(--muted); font-size: 11px; }
  .ifa-features strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 14px; }
  .ifa-media { position: relative; min-height: 700px; }
  .goal-orbit { position: absolute; inset: 8% -4% 8% 4%; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-17deg); }
  .goal-orbit::before, .goal-orbit::after { position: absolute; content: ""; inset: 11%; border: 1px solid var(--line); border-radius: 50%; }
  .goal-orbit::after { inset: 27%; }
  .goal-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acid) 10%, transparent); }
  .goal-orbit i:nth-child(1) { top: 12%; left: 28%; }
  .goal-orbit i:nth-child(2) { top: 56%; right: -4px; }
  .goal-orbit i:nth-child(3) { bottom: 9%; left: 31%; }
  .video-phone { position: absolute; z-index: 2; top: 35px; left: 50%; width: min(335px, 69%); height: 620px; overflow: hidden; border: 7px solid #20251d; border-radius: 45px; background: #0f130e; box-shadow: var(--shadow); transform: translateX(-50%) rotate(3deg); }
  .video-phone::before { position: absolute; z-index: 3; content: ""; top: 8px; left: 50%; width: 75px; height: 19px; border-radius: 20px; background: #20251d; transform: translateX(-50%); }
  .video-phone video { width: 100%; height: 100%; object-fit: cover; }
  .video-toggle { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; width: 66px; height: 66px; margin: auto; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(8,10,7,.65); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .video-phone.is-playing .video-toggle { opacity: 0; }
  .video-phone:hover .video-toggle { opacity: 1; }
  .goal-stat { position: absolute; z-index: 3; min-width: 125px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 15px 35px rgba(0,0,0,.15); }
  .goal-stat span { display: block; color: var(--faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .09em; }
  .goal-stat strong { font-family: var(--font-display); font-size: 17px; }
  .goal-stat-one { top: 20%; left: 0; transform: rotate(-5deg); }
  .goal-stat-two { top: 42%; right: -2%; transform: rotate(4deg); }
  .goal-stat-three { bottom: 15%; left: -2%; transform: rotate(3deg); }
  .media-proof { position: absolute; z-index: 3; right: 4%; bottom: 2%; display: flex; align-items: center; gap: 8px; color: var(--faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .09em; }

  .receipts { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
  .receipts .section-copy .button { margin-top: 28px; }

  .record-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 68px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .record-stats > div, .record-stats > a { padding: 26px 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); }
  .record-stats strong { display: block; font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 66px); line-height: .95; letter-spacing: -.055em; }
  .record-stats div:first-child strong { color: var(--accent-text); }
  .record-stats span { display: block; margin-top: 12px; color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
  .record-stats > a { transition: background .2s ease; }
  .record-stats > a:hover { background: var(--acid); }
  .record-stats > a:hover strong, .record-stats > a:hover span { color: var(--acid-ink); }

  .record-feature { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(40px, 6vw, 90px); align-items: center; margin-top: 76px; }
  .record-kicker { color: var(--accent-text); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
  .record-big { margin-top: 22px; font-family: var(--font-display); font-size: clamp(58px, 6.6vw, 108px); font-weight: 680; line-height: .88; letter-spacing: -.07em; }
  .record-big em { color: var(--accent-text); font-style: normal; }
  .record-story { max-width: 520px; margin-top: 26px; color: var(--muted); font-size: 15px; }
  .record-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
  .record-meta span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }

  .record-fan-wrap { min-width: 0; }
  .record-fan { display: flex; align-items: flex-end; justify-content: center; padding-top: 34px; }
  .record-fan-card { position: relative; display: block; flex: none; width: 44%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: #0e120d; cursor: zoom-in; box-shadow: var(--shadow); transform: rotate(var(--tilt, 0deg)); transform-origin: bottom center; transition: transform .35s ease, border-color .3s ease; }
  .record-fan-card + .record-fan-card { margin-left: -16%; }
  .record-fan-card[hidden] { display: none; }
  .record-fan-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .record-fan-card[data-slot="0"] { --tilt: -6deg; z-index: 1; }
  .record-fan-card[data-slot="1"] { --tilt: 0deg; z-index: 5; transform: translateY(-16px) rotate(0deg) scale(1.1); border-color: color-mix(in srgb, var(--acid) 45%, var(--line)); box-shadow: 0 34px 90px rgba(0, 0, 0, .5); }
  .record-fan-card[data-slot="2"] { --tilt: 6deg; z-index: 1; }
  .record-fan-card:hover { z-index: 8; transform: translateY(-22px) rotate(0deg); border-color: color-mix(in srgb, var(--acid) 55%, var(--line)); }
  .record-fan-card[data-slot="1"]:hover { transform: translateY(-26px) rotate(0deg) scale(1.1); }
  .record-fan-odds { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(9, 11, 8, .85); color: var(--acid); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
  .record-fan-controls { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px; }
  .record-fan-controls > span { min-width: 62px; color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-align: center; }
  .record-fan-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease; }
  .record-fan-controls button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--acid); color: var(--acid-ink); }
  .record-fan-controls button:disabled { cursor: default; opacity: .3; }

  .record-footnote { max-width: 660px; margin-top: 48px; color: var(--faint); font-size: 12px; }
  .record-footnote strong { color: var(--orange); }

  .principles { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
  .principles-head { display: grid; grid-template-columns: 1.1fr .6fr; gap: 90px; align-items: end; }
  .principles-head p { max-width: 440px; color: var(--muted); }
  .penalty-board { margin-top: 75px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg); }
  .penalty-field { position: relative; height: 450px; overflow: hidden; background: radial-gradient(circle at 50% 105%, color-mix(in srgb, var(--acid) 9%, transparent), transparent 52%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 1.8%, transparent) 0 92px, transparent 92px 184px); }
  .penalty-field::before { position: absolute; content: ""; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 45px 45px; opacity: .15; mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35)); }
  .panenka-scene { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .field-geometry path, .field-geometry circle, .goal-frame *, .chip-trajectory, .ground-projection, .trajectory-apex *, .keeper-arms, .keeper-legs, .player-arms, .player-plant-leg, .player-kick-leg { vector-effect: non-scaling-stroke; }
  .field-geometry path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
  .field-geometry .goal-line { stroke-width: 1.6; }
  .field-geometry .penalty-mark { fill: var(--ink); stroke: none; }
  .goal-mouth { fill: color-mix(in srgb, var(--surface) 76%, transparent); stroke: var(--ink); stroke-width: 2.8; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--bg) 60%, transparent)); }
  .goal-net { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: .72; }
  .goal-centre-target { fill: color-mix(in srgb, var(--acid) 12%, transparent); stroke: var(--accent-line); stroke-width: 1.4; stroke-dasharray: 3 4; }
  .ground-projection { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 7; opacity: .5; }
  .chip-trajectory { fill: none; stroke: var(--accent-line); stroke-width: 2.35; stroke-dasharray: 8 9; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-line) 24%, transparent)); }
  .trajectory-apex circle { fill: var(--surface); stroke: var(--accent-line); stroke-width: 1.2; stroke-dasharray: 3 4; }
  .trajectory-apex path { fill: none; stroke: var(--accent-line); stroke-width: 1; stroke-linecap: round; }

  .keeper-shadow { fill: var(--ink); opacity: .13; filter: blur(1.5px); }
  .keeper-head { fill: var(--ink); }
  .keeper-jersey { fill: var(--orange); stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .keeper-arms { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; }
  .keeper-glove { fill: var(--ink); stroke: var(--orange); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .keeper-shorts { fill: var(--ink); }
  .keeper-legs { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }

  .player-shadow { fill: var(--ink); opacity: .13; filter: blur(1.3px); }
  .player-head { fill: var(--ink); }
  .player-jersey { fill: var(--acid); stroke: var(--acid-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .player-arms, .player-plant-leg, .player-kick-leg { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
  .player-shorts { fill: var(--ink); }
  .player-boot { fill: var(--acid); stroke: var(--acid-ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

  .ball-ground-shadow { fill: var(--ink); filter: blur(1.2px); }
  .panenka-ball { filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--accent-line) 28%, transparent)); }
  .ball-shell { fill: var(--acid); stroke: var(--acid-ink); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
  .ball-panel { fill: var(--acid-ink); }
  .field-label { position: absolute; z-index: 3; padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); color: var(--faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; opacity: .55; transition: opacity .2s ease; }
  .field-label b { margin-right: 5px; color: var(--accent-text); font-weight: 600; }
  .label-mark { top: 64%; left: calc(50% + 38px); }
  .label-commit { top: 24%; left: 12%; }
  .label-centre { top: 14%; right: 10%; }
  .principle-cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
  .principle-cards article { position: relative; min-height: 225px; padding: 28px; }
  .principle-cards article + article { border-left: 1px solid var(--line); }
  .principle-cards span { color: var(--accent-text); font-family: var(--font-mono); font-size: 9px; }
  .principle-cards h3 { margin-top: 30px; font-family: var(--font-display); font-size: 28px; letter-spacing: -.04em; }
  .principle-cards p { max-width: 310px; margin-top: 10px; color: var(--muted); font-size: 12px; }

  .control-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(70px, 11vw, 170px); align-items: center; }
  .control-copy > p { max-width: 560px; margin-top: 29px; color: var(--muted); }
  .control-list { max-width: 590px; margin-top: 36px; border-top: 1px solid var(--line); }
  .control-list div { display: grid; grid-template-columns: 35px 1fr; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
  .control-list i { color: var(--accent-text); font-family: var(--font-mono); font-size: 8px; font-style: normal; }
  .control-list strong { color: var(--ink); }
  .control-stack { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow); }
  .stack-node { padding: 16px 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
  .stack-node span { display: block; color: var(--accent-text); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; }
  .stack-node strong { display: block; margin-top: 5px; font-family: var(--font-display); font-size: 14px; }
  .stack-node em { display: block; margin-top: 4px; color: var(--faint); font-family: var(--font-mono); font-size: 7px; font-style: normal; }
  .stack-user { background: var(--acid); color: var(--acid-ink); }
  .stack-user span { color: rgba(17,21,6,.55); }
  .stack-ai { border-color: color-mix(in srgb, var(--accent-line) 48%, var(--line)); }
  .stack-result { background: var(--paper); color: var(--paper-ink); }
  .stack-result span { color: var(--accent-text); }
  .stack-result em { color: color-mix(in srgb, var(--paper-ink) 57%, transparent); }
  .stack-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .stack-arrow { display: flex; flex-direction: column; align-items: center; height: 45px; color: var(--faint); }
  .stack-arrow i { width: 1px; height: 23px; background: var(--line-strong); }
  .stack-arrow small { font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }

  .books { border-top: 1px solid var(--line); }
  .books-head { display: grid; grid-template-columns: 1.25fr .55fr; gap: 100px; align-items: end; }
  .books-head > p { max-width: 440px; color: var(--muted); }
  .book-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .book-card { min-height: 380px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 62%, transparent); }
  .book-card-top { display: flex; justify-content: space-between; color: var(--faint); font-family: var(--font-mono); font-size: 8px; }
  .live-label, .compare-label { display: flex; align-items: center; gap: 8px; color: var(--green); }
  .live-label { color: var(--success-text); }
  .compare-label { color: var(--accent-text); }
  .book-card h3 { margin-top: 88px; font-family: var(--font-display); font-size: clamp(38px, 4vw, 58px); letter-spacing: -.075em; }
  .book-card h3 b { color: var(--accent-text); }
  .book-card ul { margin-top: 32px; border-top: 1px solid var(--line); }
  .book-card li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
  .book-card-compare { background: var(--acid); color: var(--acid-ink); }
  .book-card-compare .compare-label { color: var(--acid-ink); }
  .mini-compare { margin-top: 65px; }
  .mini-compare div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(17,21,6,.16); }
  .mini-compare span { font-family: var(--font-mono); font-size: 9px; }
  .mini-compare strong { font-family: var(--font-display); font-size: 24px; }
  .mini-compare i { padding: 3px 5px; border-radius: 4px; background: var(--acid-ink); color: var(--acid); font-family: var(--font-mono); font-size: 6px; font-style: normal; }
  .book-card-compare p { margin-top: 25px; color: rgba(17,21,6,.68); font-size: 12px; }
  .book-expansion { margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-m); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--acid) 9%, transparent), transparent 31%), var(--surface); }
  .book-expansion-head { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(300px, .8fr) auto; gap: 45px; align-items: end; padding: 30px; border-bottom: 1px solid var(--line); }
  .book-expansion-kicker { display: flex; align-items: center; gap: 9px; color: var(--accent-text); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
  .book-expansion-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--acid) 10%, transparent); }
  .book-expansion-head h3 { margin-top: 13px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.055em; }
  .book-expansion-head > p { max-width: 470px; color: var(--muted); font-size: 12px; }
  .book-expansion-head > a { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--line-strong); color: var(--ink); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; white-space: nowrap; }
  .book-expansion-head > a span { color: var(--accent-text); }
  .upcoming-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px; background: var(--line); }
  .upcoming-book { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; min-height: 92px; padding: 15px 18px; background: var(--bg-2); transition: background .2s ease; }
  .upcoming-book:hover { background: var(--surface-2); }
  .upcoming-book > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--acid) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--acid) 8%, var(--surface)); color: var(--accent-text); font-family: var(--font-mono); font-size: 9px; font-weight: 800; }
  .upcoming-book > div { display: flex; min-width: 0; flex-direction: column; }
  .upcoming-book strong { overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 1; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
  .upcoming-book small { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--faint); font-family: var(--font-mono); font-size: 6px; font-weight: 700; letter-spacing: .1em; }
  .upcoming-book small i { width: 4px; height: 4px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 7px color-mix(in srgb, var(--acid) 65%, transparent); }

  .founder { padding-top: 20px; }
  .founder-card { display: grid; grid-template-columns: minmax(300px, .7fr) 1.3fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
  .founder-image { position: relative; min-height: 570px; overflow: hidden; }
  .founder-image picture, .founder-image img { width: 100%; height: 100%; }
  .founder-image img { object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .founder-image::after { position: absolute; content: ""; inset: 0; background: linear-gradient(to top, rgba(9,11,8,.72), transparent 45%); }
  .founder-image > span { position: absolute; z-index: 2; bottom: 20px; left: 23px; color: #fff; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
  .founder-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(45px, 7vw, 100px); }
  .founder-kicker { color: var(--accent-text); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
  .founder-copy blockquote { margin-top: 30px; font-family: var(--font-display); font-size: clamp(33px, 4vw, 58px); font-weight: 550; line-height: 1.03; letter-spacing: -.055em; }
  .founder-copy > p { max-width: 650px; margin-top: 30px; color: var(--muted); }

  .faq { border-top: 1px solid var(--line); }
  .faq-head { display: grid; grid-template-columns: 1.25fr .55fr; gap: 100px; align-items: end; }
  .faq-head > p { color: var(--muted); }
  .faq-list { max-width: 1050px; margin: 65px auto 0; border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 25px 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
  .faq-item button span { padding-right: 30px; font-family: var(--font-display); font-size: clamp(18px, 2vw, 25px); font-weight: 600; letter-spacing: -.03em; }
  .faq-item button i { display: grid; place-items: center; flex: none; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; font-style: normal; transition: transform .25s ease, background .25s ease; }
  .faq-item.is-open button i { background: var(--acid); color: var(--acid-ink); transform: rotate(45deg); }
  .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .faq-answer p { max-width: 780px; overflow: hidden; color: var(--muted); font-size: 14px; }
  .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
  .faq-item.is-open .faq-answer p { padding-bottom: 27px; }

  .closing { padding-top: 20px; }
  .closing-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 610px; overflow: hidden; border-radius: var(--radius-l); background: var(--acid); color: var(--acid-ink); text-align: center; }
  .closing-kicker { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
  .closing-card h2 { position: relative; z-index: 2; margin-top: 30px; font-family: var(--font-display); font-size: clamp(76px, 10vw, 150px); font-weight: 680; line-height: .75; letter-spacing: -.08em; }
  .closing-card h2 em { font-style: normal; color: #fff; text-shadow: 0 2px 0 rgba(17,21,6,.1); }
  .closing-card p { position: relative; z-index: 2; margin-top: 33px; color: rgba(17,21,6,.65); }
  .closing-card .button { position: relative; z-index: 2; margin-top: 22px; background: var(--acid-ink); color: var(--acid); box-shadow: 0 13px 35px rgba(17,21,6,.2); }
  .closing-orbit { position: absolute; width: 760px; aspect-ratio: 1; border: 1px solid rgba(17,21,6,.16); border-radius: 50%; animation: spin 35s linear infinite; }
  .closing-orbit::before, .closing-orbit::after { position: absolute; content: ""; inset: 13%; border: 1px solid rgba(17,21,6,.16); border-radius: 50%; }
  .closing-orbit::after { inset: 31%; }
  .closing-orbit i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--acid-ink); }
  .closing-orbit i:nth-child(1) { top: 13%; left: 27%; }
  .closing-orbit i:nth-child(2) { top: 60%; right: -5px; }
  .closing-orbit i:nth-child(3) { bottom: 10%; left: 28%; }

  .footer { margin-top: clamp(80px, 10vw, 150px); border-top: 1px solid var(--line); }
  .footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 70px; }
  .footer-brand p { max-width: 300px; margin-top: 20px; color: var(--muted); font-size: 13px; }
  .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .footer-links div { display: flex; flex-direction: column; gap: 8px; }
  .footer-links span { margin-bottom: 8px; color: var(--faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
  .footer-links a { color: var(--muted); font-size: 12px; }
  .footer-links a:hover { color: var(--accent-text); }
  .footer-bottom { display: flex; justify-content: space-between; gap: 40px; padding-block: 24px 40px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; }
  .footer-bottom span { color: var(--orange); font-weight: 700; }
  .footer-bottom a { text-decoration: underline; }

  .video-modal[hidden] { display: none; }
  .video-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 30px; }
  .video-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(3,5,3,.84); cursor: pointer; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
  .video-modal-card { position: relative; width: min(100%, 1050px); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: #0e120d; color: #f3efe4; box-shadow: 0 35px 100px rgba(0,0,0,.65); animation: modal-in .3s ease; }
  .video-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; }
  .video-modal-head span { color: var(--acid); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
  .video-modal-head h2 { margin-top: 2px; font-family: var(--font-display); font-size: 22px; letter-spacing: -.04em; }
  .video-modal-head button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: none; color: #fff; cursor: pointer; font-size: 24px; }
  .video-modal-card video { width: 100%; max-height: 72vh; background: #000; object-fit: contain; }

  .receipt-modal[hidden] { display: none; }
  .receipt-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 30px; }
  .receipt-modal-card { position: relative; width: min(100%, 720px); max-height: calc(100vh - 48px); overflow-y: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: #0e120d; color: #f3efe4; box-shadow: 0 35px 100px rgba(0,0,0,.65); animation: modal-in .3s ease; }
  .receipt-modal-card .video-modal-head { position: sticky; top: 0; z-index: 2; background: #0e120d; }
  .receipt-modal-card > img { display: block; width: 100%; height: auto; }

  @keyframes pulse { 50% { opacity: .55; box-shadow: 0 0 0 8px transparent; } }
  @keyframes bookmaker-ticker { to { transform: translateX(-50%); } }
  @keyframes message-in { to { opacity: 1; transform: translateY(0); } }
  @keyframes link-roll { to { stroke-dashoffset: -28; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
}

@layer utilities {
  html[data-theme="light"] body {
    background:
      linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(23, 26, 18, .028) 100%) 0 0 / 72px 72px,
      var(--bg);
  }

  html[data-theme="light"] .pointer-glow {
    background: radial-gradient(circle, rgba(85, 112, 0, .08), transparent 67%);
  }

  html[data-theme="light"] .site-header.is-scrolled {
    background: rgba(242, 237, 225, .91);
    border-color: rgba(23, 26, 18, .16);
    box-shadow: 0 9px 28px rgba(62, 55, 36, .08);
  }

  html[data-theme="light"] .theme-toggle,
  html[data-theme="light"] .nav-menu {
    border-color: rgba(23, 26, 18, .22);
    background: rgba(251, 248, 240, .92);
  }

  html[data-theme="light"] .nav-links a {
    color: #4d5347;
  }

  html[data-theme="light"] .nav-links a:hover {
    color: #171a12;
  }

  html[data-theme="light"] .button-quiet {
    border-color: rgba(23, 26, 18, .3);
    background: rgba(251, 248, 240, .72);
  }

  html[data-theme="light"] .button-quiet:hover {
    border-color: #171a12;
    background: #fffdf7;
  }

  html[data-theme="light"] .status-pill {
    border-color: rgba(23, 26, 18, .2);
    background: rgba(251, 248, 240, .68);
    color: #51574a;
  }

  html[data-theme="light"] .float-card {
    border-color: rgba(255, 255, 255, .08);
    background: #171a12;
    box-shadow: 0 20px 50px rgba(62, 55, 36, .3);
    --card-ink: #f3efe4;
  }

  html[data-theme="light"] .demo-phone { background: linear-gradient(160deg, #e8ece8, #cfd6cf); border-color: rgba(23, 26, 18, .22); }
  html[data-theme="light"] .demo-phone-screen { border-color: rgba(23, 26, 18, .12); background: #efeae2; color: #111b21; }
  html[data-theme="light"] .demo-topbar { background: #f0f2f5; color: #111b21; }
  html[data-theme="light"] .demo-topbar > .wa-ic, html[data-theme="light"] .demo-wa-actions { color: #54656f; }
  html[data-theme="light"] .demo-topbar div > span { color: #667781; }
  html[data-theme="light"] .demo-context { border-color: rgba(23, 26, 18, .08); background: #f0f2f5; color: #667781; }
  html[data-theme="light"] .demo-dots button { background: #c3ccd2; }
  html[data-theme="light"] .demo-dots button.is-active { background: #008069; }
  html[data-theme="light"] .demo-thread { background: #efeae2; }
  html[data-theme="light"] .demo-bubble { background: #ffffff; color: #111b21; box-shadow: 0 1px 1px rgba(23, 26, 18, .12); }
  html[data-theme="light"] .is-user .demo-bubble { background: #d9fdd3; }
  html[data-theme="light"] .demo-bubble strong { color: #111b21; }
  html[data-theme="light"] .demo-bubble small { color: #667781; }
  html[data-theme="light"] .demo-choice { border-color: rgba(0, 128, 105, .4); color: #008069; }
  html[data-theme="light"] .demo-price-row { border-color: rgba(23, 26, 18, .1); }
  html[data-theme="light"] .demo-price-row span { color: #54656f; }
  html[data-theme="light"] .demo-price-row b { color: #111b21; }
  html[data-theme="light"] .demo-price-row em { color: #008069; }
  html[data-theme="light"] .demo-meta { color: #667781; }
  html[data-theme="light"] .demo-input { background: #ffffff; color: #54656f; }
  html[data-theme="light"] .demo-input .wa-ic { color: #54656f; }

  html[data-theme="light"] .bookmaker-rail {
    border-color: rgba(23, 26, 18, .18);
    background: linear-gradient(112deg, #e5e8d8 0%, #e9e3d5 48%, #e1e7d8 100%);
  }

  html[data-theme="light"] .bookmaker-rail::before {
    background: linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(23, 26, 18, .035) 100%) 0 0 / 72px 72px;
  }

  html[data-theme="light"] .bookmaker-rail-state {
    border-color: rgba(23, 26, 18, .18);
    background: rgba(251, 248, 240, .72);
    color: #555c4f;
  }

  html[data-theme="light"] .bookmaker-marquee::before {
    background: linear-gradient(90deg, #e7e4d6, transparent);
  }

  html[data-theme="light"] .bookmaker-marquee::after {
    background: linear-gradient(-90deg, #e3e4d6, transparent);
  }

  html[data-theme="light"] .bookmaker-chip {
    border-color: rgba(23, 26, 18, .17);
    background: rgba(251, 248, 240, .94);
    box-shadow: 0 8px 24px rgba(62, 55, 36, .07), inset 0 1px 0 rgba(255, 255, 255, .75);
  }

  html[data-theme="light"] .bookmaker-chip:hover {
    border-color: rgba(85, 112, 0, .42);
    background: #fffdf8;
  }

  html[data-theme="light"] .bookmaker-chip > span {
    border-color: rgba(85, 112, 0, .28);
    background: #e7efcb;
    color: #557000;
  }

  html[data-theme="light"] .system-card:not(.system-card-accent) {
    background: #fbf8f0;
  }

  html[data-theme="light"] .system-card:not(.system-card-accent):hover {
    background: #fffdf8;
    box-shadow: inset 0 0 0 1px rgba(85, 112, 0, .12);
  }

  html[data-theme="light"] .system-card-ifa:not(.system-card-accent),
  html[data-theme="light"] .system-card-ifa:not(.system-card-accent):hover {
    background: radial-gradient(circle at 90% 10%, rgba(85, 112, 0, .11), transparent 40%), #f6f4e8;
    box-shadow: inset 0 2px 0 #729500;
  }

  html[data-theme="light"] .system-card::after {
    background: linear-gradient(145deg, transparent 45%, rgba(85, 112, 0, .06));
  }

  html[data-theme="light"] .icon-rails i::before {
    border-color: var(--accent-line);
    background: #fbf8f0;
  }

  html[data-theme="light"] .punter {
    border-color: rgba(23, 26, 18, .18);
    background: #e9e3d5;
  }

  html[data-theme="light"] .read-stage {
    border-color: rgba(23, 26, 18, .22);
    background: #fbf8f0;
    box-shadow: 0 25px 65px rgba(62, 55, 36, .14);
  }

  html[data-theme="light"] .read-selector {
    background: #eee8da;
  }

  html[data-theme="light"] .read-tab:not(.is-active):hover {
    border-radius: 10px;
    background: rgba(255, 253, 248, .68);
  }

  html[data-theme="light"] .read-panel {
    background: #fbf8f0;
  }

  html[data-theme="light"] .read-verdict {
    background: #f0eadc;
  }

  html[data-theme="light"] .read-actions button:not(:first-child) {
    border-color: rgba(23, 26, 18, .25);
    background: rgba(255, 255, 255, .34);
    color: #43493e;
  }

  html[data-theme="light"] .code-console {
    border-color: rgba(23, 26, 18, .26);
    box-shadow: 0 28px 70px rgba(39, 35, 23, .22);
  }

  html[data-theme="light"] .funding {
    border-color: rgba(23, 26, 18, .18);
    background: #fbf8f0;
    color: #171a12;
  }

  html[data-theme="light"] .funding .display-title {
    color: #171a12;
  }

  html[data-theme="light"] .funding .section-copy {
    color: #51574a;
  }

  html[data-theme="light"] .funding-stage {
    border-color: rgba(23, 26, 18, .28);
    box-shadow: 0 30px 72px rgba(39, 35, 23, .22);
  }

  html[data-theme="light"] .ifa-features div {
    background: rgba(251, 248, 240, .52);
  }

  html[data-theme="light"] .goal-stat {
    border-color: rgba(23, 26, 18, .21);
    background: rgba(251, 248, 240, .94);
    box-shadow: 0 14px 32px rgba(62, 55, 36, .13);
  }

  html[data-theme="light"] .principles {
    border-color: rgba(23, 26, 18, .18);
    background: #e9e3d5;
  }

  html[data-theme="light"] .penalty-board {
    border-color: rgba(23, 26, 18, .22);
    background: #f8f4ea;
    box-shadow: 0 24px 58px rgba(62, 55, 36, .1);
  }

  html[data-theme="light"] .penalty-field {
    background:
      linear-gradient(90deg, transparent 49.9%, rgba(23, 26, 18, .18) 50%, transparent 50.1%),
      radial-gradient(circle at 50% 115%, rgba(85, 112, 0, .08), transparent 52%),
      repeating-linear-gradient(90deg, rgba(23, 26, 18, .025) 0 92px, transparent 92px 184px);
  }

  html[data-theme="light"] .penalty-field::before {
    opacity: .34;
  }

  html[data-theme="light"] .field-label {
    background: #dcd5c5;
    color: #4c5346;
  }

  html[data-theme="light"] .principle-cards article {
    background: rgba(251, 248, 240, .34);
  }

  html[data-theme="light"] .control-stack {
    border-color: rgba(23, 26, 18, .21);
    background: #e8e2d4;
    box-shadow: 0 25px 62px rgba(62, 55, 36, .14);
  }

  html[data-theme="light"] .stack-node {
    border-color: rgba(23, 26, 18, .2);
    background: #fbf8f0;
  }

  html[data-theme="light"] .stack-result {
    border-color: #171a12;
    background: #171a12;
    color: #f3efe4;
  }

  html[data-theme="light"] .stack-result span {
    color: #caff3d;
  }

  html[data-theme="light"] .stack-result em {
    color: #aeb4a7;
  }

  html[data-theme="light"] .book-card:not(.book-card-compare) {
    background: #fbf8f0;
  }

  html[data-theme="light"] .book-card:not(.book-card-compare):hover {
    background: #fffdf8;
  }

  html[data-theme="light"] .book-expansion {
    border-color: rgba(23, 26, 18, .18);
    background: radial-gradient(circle at 8% 0%, rgba(85, 112, 0, .09), transparent 32%), #e9e3d5;
    box-shadow: 0 20px 50px rgba(62, 55, 36, .09);
  }

  html[data-theme="light"] .book-expansion-head {
    border-color: rgba(23, 26, 18, .17);
  }

  html[data-theme="light"] .upcoming-books {
    background: rgba(23, 26, 18, .13);
  }

  html[data-theme="light"] .upcoming-book {
    background: #fbf8f0;
  }

  html[data-theme="light"] .upcoming-book:hover {
    background: #fffdf8;
  }

  html[data-theme="light"] .upcoming-book > span {
    border-color: rgba(85, 112, 0, .26);
    background: #e7efcb;
    color: #557000;
  }

  html[data-theme="light"] .founder-card {
    border-color: rgba(23, 26, 18, .2);
    background: #fbf8f0;
    box-shadow: 0 24px 62px rgba(62, 55, 36, .1);
  }

  html[data-theme="light"] .faq-item button i {
    border-color: rgba(23, 26, 18, .24);
    background: rgba(251, 248, 240, .5);
  }

  html[data-theme="light"] .faq-item.is-open button i {
    border-color: var(--acid);
    background: var(--acid);
  }

  html[data-theme="light"] .closing-card h2 em {
    color: #315000;
    text-shadow: none;
  }

  html[data-theme="light"] .footer {
    background: #e8e2d4;
  }
}

@layer responsive {
  @media (max-width: 1120px) {
    :root { --shell: min(100% - 44px, 1050px); }
    .nav-links { display: none; }
    .nav-menu { display: grid; }
    .nav-links.is-open { position: fixed; top: calc(var(--header-h) - 1px); right: 22px; left: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
    .nav-links.is-open a { padding: 13px 14px; border-bottom: 1px solid var(--line); }
    .nav-links.is-open a:last-child { border-bottom: 0; }
    .hero { grid-template-columns: .9fr 1.1fr; gap: 30px; }
    .float-card { width: 172px; }
    .system-card { flex-basis: 50%; }
    .punter-principles { grid-template-columns: 1fr 1fr; }
    .punter-principles > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .ifa-grid { gap: 60px; }
  }

  @media (max-width: 880px) {
    :root { --shell: min(100% - 36px, 760px); }
    .section { padding-block: 105px; }
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 145px; }
    .hero-copy { max-width: 720px; }
    .hero-title { font-size: clamp(73px, 16vw, 118px); }
    .hero-stage { min-height: 620px; margin-top: 24px; }
    .float-card { width: 168px; }
    .demo-phone { width: min(336px, 92%); }
    .bookmaker-rail-head { grid-template-columns: 1fr auto; gap: 10px 24px; }
    .bookmaker-rail-head p { grid-column: 1 / -1; grid-row: 2; }
    .bookmaker-rail-state { grid-column: 2; grid-row: 1; }
    .section-intro, .principles-head, .books-head, .faq-head { grid-template-columns: 1fr; gap: 32px; }
    .section-copy { max-width: 620px; }
    .read-stage { grid-template-columns: 1fr; }
    .read-selector { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 0; border-bottom: 1px solid var(--line); }
    .read-tab { grid-template-columns: 1fr; border-right: 1px solid var(--line); border-bottom: 0; }
    .read-tab span { grid-row: auto; }
    .read-tab small { display: none; }
    .console-body { grid-template-columns: 1fr; }
    .console-input-wrap { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .console-tools { grid-template-columns: repeat(3, 1fr); }
    .console-tool:nth-child(3) { border-right: 0; }
    .console-tool:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.1); }
    .funding-stage { grid-template-columns: 1fr; }
    .funding-chat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .ifa-grid, .control-grid { grid-template-columns: 1fr; }
    .ifa-media { min-height: 700px; max-width: 600px; width: 100%; margin-inline: auto; }
    .book-grid { grid-template-columns: 1fr 1fr; }
    .book-card-compare { grid-column: 1 / -1; min-height: 320px; }
    .book-expansion-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .book-expansion-head > a { width: max-content; }
    .mini-compare { margin-top: 40px; }
    .founder-card { grid-template-columns: 1fr; }
    .founder-image { min-height: 580px; max-height: 720px; }
    .record-stats { grid-template-columns: 1fr 1fr; }
    .record-feature { grid-template-columns: 1fr; }
  }

  @media (max-width: 620px) {
    :root { --shell: calc(100% - 28px); --header-h: 68px; }
    .section { padding-block: 88px; }
    .nav-cta { display: none; }
    .brand-name { font-size: 17px; }
    .hero { padding-top: 120px; padding-bottom: 55px; }
    .status-pill { margin-bottom: 26px; }
    .hero-title { font-size: clamp(65px, 21vw, 93px); line-height: .8; }
    .hero-lede { margin-top: 28px; font-size: 16px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .hero-proof { gap: 10px; }
    .hero-proof span { width: 100%; }
    .hero-stage { min-height: 540px; margin-top: 20px; }
    .demo-phone { width: min(310px, 96%); }
    .float-card { width: 145px; padding: 12px; }
    .float-big { font-size: 21px; }
    .bookmaker-rail { padding-block: 20px 24px; }
    .bookmaker-rail-head { gap: 9px 14px; padding-bottom: 17px; }
    .bookmaker-rail-head p strong { display: block; margin: 0 0 2px; font-size: 14px; }
    .bookmaker-rail-state { padding: 6px 8px; font-size: 6px; }
    .bookmaker-track, .bookmaker-list { gap: 10px; }
    .bookmaker-track { padding-inline: 5px; }
    .bookmaker-chip { width: 184px; min-height: 66px; grid-template-columns: 37px 1fr; column-gap: 10px; padding: 10px 12px; }
    .bookmaker-chip > span { width: 37px; height: 37px; border-radius: 9px; }
    .bookmaker-chip strong { font-size: 16px; }
    .display-title { font-size: clamp(48px, 15.5vw, 70px); }
    .section-index { margin-bottom: 25px; }
    .system-carousel-bar { margin-top: 55px; }
    .system-carousel-bar { gap: 12px; }
    .system-carousel-label span { display: none; }
    .system-carousel-status { gap: 7px; }
    .system-carousel-meter { width: 60px; }
    .system-carousel-status > span { min-width: 62px; }
    .system-carousel-status button { width: 34px; height: 34px; }
    .system-card { flex-basis: 100%; min-height: 360px; }
    .read-stage, .code-console, .funding-stage, .penalty-board { margin-top: 55px; }
    .read-selector { grid-template-columns: 1fr; }
    .read-tab { grid-template-columns: 25px 1fr; border-right: 0; border-bottom: 1px solid var(--line); }
    .read-tab span { grid-row: 1 / 3; }
    .read-tab small { display: block; }
    .read-panel { min-height: 560px; padding: 22px 18px; }
    .read-panel-head span:last-child { display: none; }
    .fixture-title { flex-direction: column; }
    .fixture-time { align-self: flex-start; padding: 0; border: 0; text-align: left; }
    .probability-compare { gap: 14px; }
    .read-verdict { grid-template-columns: 1fr 1fr; }
    .read-verdict > div + div { padding-left: 10px; }
    .read-verdict .edge { grid-column: 1 / -1; padding: 10px 0 0 !important; border-top: 1px solid var(--line); border-left: 0 !important; }
    .read-actions { flex-direction: column; }
    .punter-principles { grid-template-columns: 1fr; }
    .punter-principles > div, .punter-principles > div + div { padding: 23px 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .punter-principles strong { margin-top: 12px; }
    .console-head { grid-template-columns: 1fr auto; }
    .console-head > span { display: none; }
    .console-input-wrap, .console-result { padding: 24px 18px; }
    .result-title { align-items: flex-start; gap: 10px; }
    .result-title h3 { font-size: 23px; }
    .console-tools { grid-template-columns: 1fr 1fr; }
    .console-tool:nth-child(2n) { border-right: 0; }
    .console-tool:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.1); }
    .funding-chat { min-height: 525px; }
    .funding-proof { padding: 25px 18px; }
    .funding-state { grid-template-columns: 23px 1fr 25px; }
    .ifa-features { grid-template-columns: 1fr; }
    .ifa-media { min-height: 630px; }
    .video-phone { width: 70%; height: 560px; }
    .goal-stat { min-width: 110px; padding: 10px; }
    .goal-stat-two { right: 0; }
    .penalty-field { height: clamp(250px, 62vw, 310px); }
    .label-commit { top: 21%; left: 4%; }
    .label-centre { top: 12%; right: 4%; }
    .label-mark { top: 66%; left: calc(50% + 22px); }
    .principle-cards { grid-template-columns: 1fr; }
    .principle-cards article { min-height: 190px; }
    .principle-cards article + article { border-top: 1px solid var(--line); border-left: 0; }
    .stack-row { grid-template-columns: 1fr; }
    .control-stack { padding: 18px; }
    .book-grid { grid-template-columns: 1fr; }
    .book-card, .book-card-compare { grid-column: auto; min-height: 320px; }
    .book-card h3 { margin-top: 58px; }
    .founder-image { min-height: 470px; }
    .founder-copy { padding: 38px 25px 45px; }
    .record-stats > div, .record-stats > a { padding: 20px 18px; }
    .record-feature { margin-top: 55px; }
    .record-story { font-size: 14px; }
    .record-fan { margin-top: 30px; }
    .record-fan-odds { font-size: 7px; }
    .closing-card { min-height: 530px; padding: 30px 18px; border-radius: 24px; }
    .closing-card h2 { font-size: clamp(65px, 20vw, 96px); }
    .footer-main { grid-template-columns: 1fr; gap: 50px; }
    .footer-links { gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .video-modal { padding: 12px; }
    .video-modal-head { padding: 16px; }
    .video-modal-head h2 { font-size: 17px; }
  }

  @media (hover: none), (pointer: coarse) {
    .pointer-glow { display: none; }
    [data-tilt], [data-tilt].is-visible { transform: none !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .penalty-keeper, .penalty-player { opacity: 1 !important; transform: none !important; animation: none !important; }
    .player-kicking-limb { transform: rotate(8deg) !important; animation: none !important; }
    .field-label { opacity: .75 !important; animation: none !important; }
    .bookmaker-marquee { overflow-x: auto; scrollbar-width: thin; }
    .bookmaker-track { animation: none !important; transform: none !important; }
    .bookmaker-list[aria-hidden="true"] { display: none; }
  }
}