/* ─────────────────────────────────────────────────────────────
Antee Up — landing page (May 2026 premium redesign)
Editorial dark surface. Forest-black, champagne gold,
Playfair Display + DM Sans. Tokens mirror the design system's
web (editorial) palette in /colors_and_type.css.
───────────────────────────────────────────────────────────── */
/* Fonts are loaded via in index.html's (faster than @import here,
which would block the LCP headline behind a CSS round-trip). */
:root {
--green-darkest: #091910;
--green-dark: #0E2219;
--green-primary: #1B3A2D;
--green-mid: #244D3C;
--gold: #C9A84C;
--gold-light: #E2C47A;
--gold-dark: #A8862A;
--text: #F0EBE0;
--text-2: #9DB5A8;
--text-muted: #6B8378; /* AA-legible on the dark bg (~4.6:1) — was #4E6A5C (~2.8:1) */
--live: #5BE584;
--negative: #F0805F;
--card-bg: rgba(255,255,255,0.04);
--card-border: rgba(201,168,76,0.18);
--card-border-hi:rgba(201,168,76,0.40);
--divider: rgba(201,168,76,0.12);
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
/* tweakable */
--glow: 1; /* gold glow intensity multiplier */
--pad-scale: 1; /* density */
--hero-img: url("assets/hero-fairway-1.webp");
--hero-darken: 0.30; /* dusk = darker, twilight = lighter */
--wrap: 1180px;
--section-py: 132px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--green-darkest);
color: var(--text);
font-family: var(--font-body);
font-weight: 300;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
overflow-x: hidden;
}
/* site-wide film grain — what makes it print, not web */
body::before {
content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
opacity: 0.04; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
::selection { background: rgba(201,168,76,0.28); color: var(--text); }
.tabular { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
/* ─── Type atoms ───────────────────────────────────────────── */
.eyebrow {
font: 600 12px/1 var(--font-body);
letter-spacing: 0.34em; text-transform: uppercase;
color: var(--gold);
display: inline-flex; align-items: center; gap: 12px;
}
.section .eyebrow, .clubs-hero .eyebrow { white-space: nowrap; }
.eyebrow .tick { width: 22px; height: 1px; background: rgba(201,168,76,0.55); flex: none; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
box-shadow: 0 0 14px rgba(201,168,76,0.7); }
.eyebrow .dot.live { background: var(--live); box-shadow: 0 0 14px rgba(91,229,132,0.7); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--text); }
em.a, .accent { color: var(--gold); font-style: italic; font-weight: 700; }
.display {
font: 700 clamp(38px, 5.4vw, 72px)/1.04 var(--font-display);
letter-spacing: -1.6px;
text-wrap: pretty;
}
.lead {
font: 300 clamp(17px, 1.5vw, 21px)/1.66 var(--font-body);
color: var(--text-2);
max-width: 620px;
text-wrap: pretty;
}
.lead em { color: var(--gold-light); font-style: italic; }
.mono-note {
font: 500 11px/1.5 var(--font-mono);
letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase;
}
/* money */
.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.money.pos { color: var(--live); }
.money.neg { color: var(--negative); }
.money.zero { color: var(--text-muted); }
/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 9px;
font: 600 14px/1 var(--font-body); letter-spacing: 0.01em;
padding: 16px 26px; border-radius: 999px;
cursor: pointer; border: 1px solid transparent;
text-decoration: none; white-space: nowrap;
transition: background .25s ease, border-color .25s ease, color .25s ease, transform .1s ease;
}
.btn:active { transform: scale(0.97); }
.btn-gold { background: var(--gold); color: #1a2418; box-shadow: 0 10px 34px rgba(201,168,76,0.22); }
.btn-gold:hover { background: var(--gold-light); }
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(201,168,76,0.34); }
.btn-ghost:hover { border-color: var(--card-border-hi); color: var(--gold-light); }
.btn .arr { font-size: 15px; }
/* store badges */
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.stores-soon { width: 100%; text-align: center; margin-top: 12px;
font: 600 10px/1 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase;
color: var(--text-muted); }
.store {
display: inline-flex; align-items: center; gap: 11px;
padding: 11px 18px; border-radius: 14px;
border: 1px solid rgba(201,168,76,0.22); background: rgba(255,255,255,0.03);
text-decoration: none; color: var(--text); transition: border-color .25s, background .25s;
}
.store:hover { border-color: var(--card-border-hi); background: rgba(255,255,255,0.05); }
.store svg { width: 22px; height: 22px; flex: none; }
.store > span { display: flex; flex-direction: column; }
.store .s1 { font: 400 10px/1.1 var(--font-body); color: var(--text-2); letter-spacing: 0.04em; }
.store .s2 { font: 600 15px/1.1 var(--font-body); color: var(--text); }
/* ─── Nav ──────────────────────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
display: flex; align-items: center; justify-content: center;
transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(9,25,16,0.78); backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-bottom-color: var(--divider);
}
.nav-inner {
width: 100%; max-width: var(--wrap); padding: 16px 32px;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand .wm { font: 700 21px/1 var(--font-display); color: var(--text); letter-spacing: -0.4px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
font: 500 14px/1 var(--font-body); color: var(--text-2); text-decoration: none;
letter-spacing: 0.01em; transition: color .2s ease;
}
.nav-links a:hover { color: var(--gold-light); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-signin { font: 500 14px/1 var(--font-body); color: var(--text); text-decoration: none; }
.nav-signin:hover { color: var(--gold-light); }
@media (max-width: 880px) { .nav-links { display: none; } .nav-signin { display: none; } }
/* ─── Hero ─────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 1; opacity: 0; transition: opacity .9s ease; }
.hero-video.playing { opacity: 1; }
.hero-fallback { position: absolute; inset: 0; z-index: 0;
background-image: var(--hero-img); background-size: cover; background-position: center 38%;
transform: scale(1.04); }
.hero-bg {
position: absolute; inset: 0; z-index: 2;
}
.hero-bg.fallback {
background-image: var(--hero-img);
background-size: cover; background-position: center 38%;
transform: scale(1.04);
}
.hero-bg::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(to top, var(--green-darkest) 2%, rgba(9,25,16,0.30) 42%, rgba(9,25,16,calc(0.18 + var(--hero-darken))) 100%),
linear-gradient(to right, rgba(9,25,16,0.72) 0%, rgba(9,25,16,0.12) 55%, transparent 100%);
}
/* gold radial glow */
.hero-glow {
position: absolute; z-index: 2; left: 8%; bottom: 18%;
width: 620px; height: 620px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(201,168,76,0.20) 0%, transparent 64%);
opacity: var(--glow);
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--wrap);
margin: 0 auto; padding: 0 32px 9vh; }
.hero .eyebrow { margin-bottom: 26px; }
.hero h1 { font: 700 clamp(52px, 8.6vw, 116px)/0.94 var(--font-display); letter-spacing: -3px;
margin-bottom: 28px; max-width: 14ch; }
.hero h1 em { display: block; }
.hero-head { display: none; }
.hero-head.on { display: block; }
.hero-sub { font: 300 clamp(17px, 1.6vw, 21px)/1.6 var(--font-body); color: var(--text-2);
max-width: 540px; margin-bottom: 36px; }
.hero-sub em { color: var(--gold-light); font-style: italic; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
z-index: 3; font: 500 11px/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase;
color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-scroll .ln { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); }
/* floating proof chip on hero */
.hero-chip {
position: absolute; z-index: 3; right: max(32px, calc((100vw - var(--wrap))/2 + 32px));
top: 30vh; width: 250px;
background: rgba(11,28,21,0.66); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--card-border); border-radius: 18px; padding: 16px 18px;
box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
@media (max-width: 980px) { .hero-chip { display: none; } }
.hero-chip .row { display: flex; align-items: center; justify-content: space-between; }
.hero-chip .ttl { font: 700 15px/1.2 var(--font-display); color: var(--text); }
.hero-chip .meta { font: 400 11px/1.4 var(--font-body); color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; white-space: nowrap; }
.hero-chip .lines { margin-top: 13px; display: flex; flex-direction: column; gap: 9px; }
.hero-chip .lines .l { display: flex; align-items: center; justify-content: space-between; gap: 12px;
font: 400 13px/1 var(--font-body); color: var(--text-2); white-space: nowrap; }
/* ─── Section frame ────────────────────────────────────────── */
main { display: flex; flex-direction: column; }
.section { position: relative; padding: calc(var(--section-py) * var(--pad-scale)) 0; }
.section.tight { padding: calc(var(--section-py) * 0.66 * var(--pad-scale)) 0; }
.section + .section { }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head .display { margin-bottom: 22px; }
/* reveal on scroll — only hidden once JS confirms it can animate (.js-anim on );
if scripts never run, content stays visible. */
.js-anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* staggered children — each direct child eases in after the last */
.js-anim .reveal-stagger > * { opacity: 0; transform: translateY(20px);
transition: opacity .66s cubic-bezier(.2,.7,.2,1), transform .66s cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .20s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .28s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .36s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .44s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .52s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .60s; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
[data-parallax] { transform: none !important; }
.hero-video, .scrub-vid, .vband-vid { transition: none; }
.game-detail .gd-head, .game-detail .gd-desc, .game-detail .gd-foot { transition: none; }
}
/* ─── The manifesto (editorial statement) ──────────────────── */
.manifesto { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.manifesto .big {
font: 600 clamp(28px, 3.2vw, 44px)/1.28 var(--font-display); letter-spacing: -0.8px;
color: var(--text); text-wrap: balance;
}
.manifesto .big em { color: var(--gold); font-style: italic; }
.manifesto p { margin-top: 26px; }
.manifesto .figure { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5;
border: 1px solid var(--card-border); box-shadow: 0 40px 90px rgba(0,0,0,0.5); }
.manifesto .figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.manifesto .figure .cap { position: absolute; left: 16px; bottom: 14px; }
@media (max-width: 860px) { .manifesto { grid-template-columns: 1fr; gap: 36px; } }
/* ─── Engine: interactive game explorer ────────────────────── */
.games-explorer { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .games-explorer { grid-template-columns: 1fr; gap: 32px; } }
.games { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.game-pill {
font: 500 15px/1 var(--font-body); color: var(--text-2);
padding: 13px 19px; border-radius: 999px;
border: 1px solid var(--card-border); background-color: rgba(255,255,255,0.04);
cursor: pointer; font-family: var(--font-body);
transition: border-color .2s, transform .12s ease;
}
.game-pill:hover { color: var(--gold-light); border-color: var(--card-border-hi); }
.game-pill:active { transform: scale(0.96); }
.game-pill.star { color: var(--text); border-color: rgba(201,168,76,0.34); }
.game-pill.is-active { background-color: var(--gold); color: #1a2418; border-color: var(--gold);
box-shadow: 0 8px 26px rgba(201,168,76,0.24); }
.game-pill:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
/* Keyboard focus rings for every interactive element. */
.btn:focus-visible, .store:focus-visible, .nav-links a:focus-visible,
.nav-signin:focus-visible, .foot-col a:focus-visible, .brand:focus-visible {
outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 6px;
}
/* detail panel */
.game-detail { position: sticky; top: 96px; border: 1px solid var(--card-border);
border-radius: 20px; padding: 28px; background: var(--card-bg); min-height: 220px; }
.game-detail .gd-kicker { font: 600 11px/1 var(--font-body); letter-spacing: 0.24em;
text-transform: uppercase; color: var(--gold); }
.game-detail .gd-name { font: 700 30px/1.1 var(--font-display); color: var(--text); margin-top: 12px; }
.game-detail .gd-desc { font: 300 15px/1.6 var(--font-body); color: var(--text-2); margin-top: 16px;
text-wrap: pretty; min-height: 96px; }
.game-detail .gd-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
padding-top: 20px; border-top: 1px solid var(--divider); }
.game-detail .gd-tag { font: 500 11px/1 var(--font-body); letter-spacing: 0.04em; color: var(--text-2);
padding: 8px 12px; border-radius: 999px; border: 1px solid var(--divider); }
.game-detail .gd-tag-gold { color: var(--gold); border-color: rgba(201,168,76,0.34);
background: rgba(201,168,76,0.06); }
/* fade-swap when content changes */
.game-detail .gd-head, .game-detail .gd-desc, .game-detail .gd-foot { transition: opacity .22s ease; }
.game-detail.swapping .gd-head, .game-detail.swapping .gd-desc, .game-detail.swapping .gd-foot { opacity: 0; }
.games-foot { margin-top: 40px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.games-foot .n { font: 700 clamp(40px,4vw,58px)/1 var(--font-display); color: var(--gold); font-style: italic; }
.games-foot .lbl { font: 300 17px/1.5 var(--font-body); color: var(--text-2); }
/* ─── Generic card ─────────────────────────────────────────── */
.card {
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 20px; padding: 24px;
transition: border-color .25s ease;
}
.card:hover { border-color: var(--card-border-hi); }
.card .ch { font: 600 12px/1 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase;
color: var(--gold); margin-bottom: 16px; }
/* two-column feature layout */
.split { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 76px; align-items: center; }
.split.rev .col-copy { order: 2; }
.split .col-copy { padding-top: 8px; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; gap: 36px; }
.split.rev .col-copy { order: 0; } }
.col-copy .display { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; margin-bottom: 38px; }
/* ─── Settlement "who owes whom" card ──────────────────────── */
.settle { width: 100%; max-width: 440px; }
.settle .top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.settle .course { font: 700 18px/1.2 var(--font-display); color: var(--text); white-space: nowrap; margin-bottom: 5px; }
.settle .when { font: 400 11px/1.3 var(--font-body); color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.16em; margin-top: 4px; }
.settle .badge { font: 600 11px/1 var(--font-body); color: var(--green-darkest);
background: var(--gold); padding: 7px 12px; border-radius: 999px; letter-spacing: 0.04em; }
.settle .ledger { display: flex; flex-direction: column; }
.settle .ledger .l { display: flex; align-items: center; gap: 14px; padding: 13px 0;
border-top: 1px solid var(--divider); }
.settle .ledger .l .av { width: 32px; height: 32px; border-radius: 50%; flex: none;
display: grid; place-items: center; font: 700 12px/1 var(--font-body); color: var(--text);
background: var(--green-mid); border: 1px solid var(--card-border); }
.settle .ledger .l .who { flex: 1; font: 400 14px/1.3 var(--font-body); color: var(--text-2); }
.settle .ledger .l .who b { color: var(--text); font-weight: 600; }
.settle .ledger .l .amt { font: 600 15px/1 var(--font-body); }
.settle .foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider);
display: flex; align-items: center; justify-content: space-between; }
.settle .foot .zs { font: 500 11px/1.4 var(--font-mono); color: var(--text-muted);
letter-spacing: 0.05em; text-transform: uppercase; }
.settle .foot .net { font: 700 15px/1 var(--font-display); color: var(--gold); font-style: italic; }
/* feature bullet list */
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 22px; margin-top: 32px; }
.feat-list li { display: flex; gap: 16px; }
.feat-list .ic { width: 36px; height: 36px; border-radius: 50%; flex: none;
display: grid; place-items: center; border: 1px solid var(--card-border);
background: rgba(201,168,76,0.06); color: var(--gold); }
.feat-list .ic svg { width: 18px; height: 18px; }
.feat-list .ft { font: 600 15px/1.4 var(--font-body); color: var(--text); }
.feat-list .fd { font: 300 14px/1.55 var(--font-body); color: var(--text-2); margin-top: 3px; }
/* ─── Wallet card ──────────────────────────────────────────── */
.wallet { width: 100%; max-width: 400px; }
.wallet .bal { display: flex; gap: 30px; margin-bottom: 22px; }
.wallet .bal .b .k { font: 500 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 9px; }
.wallet .bal .b .v { font: 700 30px/1 var(--font-display); color: var(--text); }
.wallet .bal .b.res .v { color: var(--gold); }
.wallet .txns { display: flex; flex-direction: column; }
.wallet .txns .t { display: flex; align-items: center; justify-content: space-between; padding: 12px 0;
border-top: 1px solid var(--divider); }
.wallet .txns .t .tl { font: 400 14px/1.2 var(--font-body); color: var(--text-2); }
.wallet .txns .t .tm { font: 400 11px/1.2 var(--font-body); color: var(--text-muted); margin-top: 3px; }
/* ─── Side bets diagram ────────────────────────────────────── */
.sides { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.side-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px;
border-radius: 16px; border: 1px solid var(--card-border); background: var(--card-bg); }
.side-row .grp { font: 500 10px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-muted); width: 92px; flex: none; }
.side-row .ppl { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.side-row .chip { display: inline-flex; align-items: center; gap: 7px;
font: 500 13px/1 var(--font-body); color: var(--text); padding: 7px 12px 7px 8px;
border-radius: 999px; background: var(--green-mid); border: 1px solid var(--card-border); }
.side-row .chip .av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
font: 700 9px/1 var(--font-body); background: var(--green-darkest); color: var(--gold); }
.side-row .stake { font: 600 14px/1 var(--font-body); color: var(--gold); flex: none; }
.vs { text-align: center; font: 700 13px/1 var(--font-display); font-style: italic; color: var(--text-muted); }
/* ─── Crew chat card ───────────────────────────────────────── */
.chat { max-width: 440px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 11px; align-items: flex-start; }
.msg .av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
font: 700 11px/1 var(--font-body); color: var(--text); }
.msg .bub { background: var(--card-bg); border: 1px solid var(--divider); border-radius: 4px 14px 14px 14px;
padding: 10px 14px; }
.msg .nm { font: 600 12px/1 var(--font-body); margin-bottom: 5px; }
.msg .tx { font: 300 14px/1.45 var(--font-body); color: var(--text-2); }
.msg.system .card-money { width: 100%; }
.card-money { background: rgba(201,168,76,0.07); border: 1px solid var(--card-border); border-radius: 14px;
padding: 13px 15px; }
.card-money .cm-top { font: 500 10px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold); margin-bottom: 9px; }
.card-money .cm-l { display: flex; align-items: center; justify-content: space-between;
font: 400 13px/1.4 var(--font-body); color: var(--text-2); }
.card-money .cm-l b { color: var(--text); font-weight: 600; }
.card-money .rivalry { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--divider);
font: 500 12px/1.3 var(--font-body); color: var(--text-muted); font-style: italic; }
/* ─── AI section + phone mock ──────────────────────────────── */
.ai-grid { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: center; }
@media (max-width: 900px) { .ai-grid { grid-template-columns: 1fr; justify-items: start; } }
.credits { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
padding: 12px 18px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); }
.credits .bolt { color: var(--gold); }
.credits .meter { width: 130px; height: 6px; border-radius: 999px; background: rgba(201,168,76,0.15); overflow: hidden; }
.credits .meter i { display: block; height: 100%; width: 86%; background: var(--gold); border-radius: 999px; }
.credits .n { font: 600 13px/1 var(--font-body); color: var(--text); }
.credits .n span { color: var(--text-muted); }
/* phone shell */
.phone { width: 300px; aspect-ratio: 300/620; border-radius: 44px; padding: 11px;
background: linear-gradient(160deg, #243a31, #0c1a12); border: 1px solid rgba(201,168,76,0.18);
box-shadow: 0 50px 110px rgba(0,0,0,0.62); position: relative; flex: none; }
.phone.sm { width: 240px; border-radius: 38px; padding: 9px; }
.phone.sm .scr { border-radius: 30px; }
.phone.sm .scr-pad { padding: 36px 14px 14px; }
.phone .scr { width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
background: var(--green-darkest); position: relative; }
.phone .notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); z-index: 5;
width: 96px; height: 24px; border-radius: 999px; background: #060d09; }
.scr-pad { padding: 40px 18px 18px; }
/* mini app masthead used in phones */
.app-eyebrow { font: 600 10px/1 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase;
color: var(--gold); display: flex; align-items: center; gap: 8px; }
.app-eyebrow .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.app-mast { font: 700 26px/1.05 var(--font-display); color: var(--text); margin: 10px 0 2px; }
.app-mast em { color: var(--gold); font-style: italic; }
.app-meta { font: 500 9px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(240,235,224,0.5); }
.app-stat { display: flex; gap: 8px; margin: 16px 0; }
.app-stat .s { flex: 1; border: 1px solid var(--divider); border-radius: 12px; padding: 9px 10px; }
.app-stat .s .k { font: 500 8px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 6px; }
.app-stat .s .v { font: 700 16px/1 var(--font-display); color: var(--text); }
.app-cta { width: 100%; text-align: center; font: 600 12px/1 var(--font-body); color: #1a2418;
background: var(--gold); border-radius: 999px; padding: 12px; margin-top: 4px; }
.app-line { font: 300 12px/1 var(--font-body); color: var(--text-muted); margin: 16px 0 8px;
letter-spacing: 0.04em; }
.app-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--divider); }
.app-row .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
font: 700 10px/1 var(--font-body); flex: none; }
.app-row .nm { flex: 1; font: 600 12px/1.2 var(--font-display); color: var(--text); }
.app-row .mn { font: 600 12px/1 var(--font-body); }
/* AI prompt chip in phone */
.ai-prompt { border: 1px solid var(--card-border); background: rgba(201,168,76,0.06);
border-radius: 16px; padding: 13px 14px; margin-top: 6px; }
.ai-prompt .q { font: 500 13px/1.4 var(--font-body); color: var(--text); }
.ai-prompt .q::before { content: '“'; color: var(--gold); }
.ai-prompt .q::after { content: '”'; color: var(--gold); }
.ai-draft { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.ai-draft .d { display: flex; align-items: center; justify-content: space-between;
font: 500 12px/1 var(--font-body); color: var(--text-2); padding: 9px 11px;
border: 1px solid var(--divider); border-radius: 10px; }
.ai-draft .d b { color: var(--gold); font-weight: 600; }
/* ─── Onboarding steps (open editorial columns) ────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 56px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 40px; } }
.step { padding: 26px 0 0; border: none; border-top: 1px solid var(--divider); border-radius: 0; background: none; }
.step:nth-child(2) { transform: translateY(26px); }
.step:nth-child(3) { transform: translateY(52px); }
@media (max-width: 760px) { .step:nth-child(2), .step:nth-child(3) { transform: none; } }
.step .no { font: 700 15px/1 var(--font-display); font-style: italic; color: var(--gold); margin-bottom: 16px; }
.step h3 { font: 700 21px/1.2 var(--font-display); margin-bottom: 9px; }
.step p { font: 300 14px/1.55 var(--font-body); color: var(--text-2); }
.step .t { font: 600 11px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-muted); margin-top: 16px; }
/* ─── Clubs (B2B) section ──────────────────────────────────── */
#clubs { background:
radial-gradient(130% 90% at 50% 42%, rgba(36,77,60,0.20), transparent 68%); }
.clubs-hero { position: relative; border-radius: 24px; overflow: hidden; min-height: 440px;
display: flex; align-items: flex-end; border: none;
-webkit-mask-image: radial-gradient(135% 120% at 22% 78%, #000 52%, transparent 92%);
mask-image: radial-gradient(135% 120% at 22% 78%, #000 52%, transparent 92%); }
.clubs-hero .img { position: absolute; inset: 0; background-image: url("assets/clubhouse-dusk.webp");
background-size: cover; background-position: center; }
.clubs-hero .img::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(9,25,16,0.92), rgba(9,25,16,0.25) 60%, transparent),
linear-gradient(to right, rgba(9,25,16,0.7) 0%, transparent 52%); }
.clubs-hero .ov { position: relative; z-index: 2; padding: 46px; max-width: 640px; }
.clubs-hero .ov .display { font-size: clamp(30px,3.6vw,50px); margin: 16px 0 16px; }
.club-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 44px; margin-top: 52px;
background: none; border: none; border-radius: 0; overflow: visible; }
@media (max-width: 820px) { .club-feats { grid-template-columns: repeat(2,1fr); gap: 40px; } }
.club-feats .cf { background: none; padding: 22px 0 0; border-top: 1px solid var(--divider); }
.club-feats .cf:nth-child(even) { transform: translateY(28px); }
@media (max-width: 820px) { .club-feats .cf:nth-child(even) { transform: none; } }
.club-feats .cf .k { font: 600 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); margin-bottom: 12px; }
.club-feats .cf .ttl { font: 700 18px/1.2 var(--font-display); color: var(--text); margin-bottom: 7px; }
.club-feats .cf p { font: 300 13px/1.5 var(--font-body); color: var(--text-2); }
/* ─── Phone showcase row ───────────────────────────────────── */
.showcase { display: flex; gap: 26px; justify-content: center; align-items: flex-end;
flex-wrap: wrap; }
.showcase .phone:nth-child(2) { transform: translateY(-26px); }
@media (max-width: 760px) { .showcase .phone:nth-child(2) { transform: none; } }
/* ─── Small phones (≤480px): tighten the gutter and let the fixed-width
phone mockups (300px / 240px) scale down so nothing overflows. ─────── */
/* Don't ship the 5.4MB hero video to phones/tablets — the WebP hero fallback
carries the look and mobile LCP drops from ~11s to the 56KB image. The hero
has a real .hero-fallback background; the below-fold band videos keep their
(preload=none) videos since they don't affect first paint. */
@media (max-width: 820px) {
.hero-video { display: none !important; }
}
@media (max-width: 480px) {
.wrap { padding: 0 18px; }
.phone { width: min(300px, 84vw); }
.phone.sm { width: min(240px, 78vw); }
/* The live-scoring section pairs two phone mockups in an inline flex row;
let them stack instead of overflowing the column on small phones. */
#scoring .split > div:last-child { flex-wrap: wrap; }
.wallet .bal { gap: 18px; }
.vband-stat { gap: 20px 28px; }
}
/* ─── Closing CTA ──────────────────────────────────────────── */
.closing { position: relative; text-align: center; padding: calc(var(--section-py) * 1.1 * var(--pad-scale)) 0; overflow: hidden; }
.closing .glow { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);
width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(201,168,76,0.16) 0%, transparent 64%); opacity: var(--glow); }
.closing .inner { position: relative; z-index: 2; }
.closing h2 { font: 700 clamp(44px,6.6vw,92px)/0.98 var(--font-display); letter-spacing: -2.4px;
margin-bottom: 26px; }
.closing .lead { margin: 0 auto 38px; text-align: center; }
.closing .acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
/* ─── Footer ───────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--divider); padding: 64px 0 48px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { font: 300 14px/1.6 var(--font-body); color: var(--text-2); max-width: 280px; }
.foot-col h4 { font: 600 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); margin-bottom: 18px; }
.foot-col a { display: block; font: 400 14px/1 var(--font-body); color: var(--text-2);
text-decoration: none; margin-bottom: 13px; transition: color .2s; }
.foot-col a:hover { color: var(--gold-light); }
.foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding-top: 28px; border-top: 1px solid var(--divider); flex-wrap: wrap; }
.foot-bot .lgl { font: 400 13px/1.6 var(--font-body); color: var(--text-muted); max-width: 640px; }
.foot-bot .age { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-body);
color: var(--text-2); border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 14px; }
/* ─── Live scoring app screens ─────────────────────────────── */
.sc-head { display: flex; align-items: baseline; justify-content: space-between;
padding-bottom: 12px; border-bottom: 1px solid var(--divider); margin-bottom: 18px; }
.sc-head .hl { font: 700 18px/1 var(--font-display); color: var(--text); white-space: nowrap; }
.sc-head .hl em { color: var(--gold); font-style: italic; }
.sc-head .par { font: 500 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-muted); white-space: nowrap; }
.sc-enter { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px 0 18px; }
.sc-enter .pm { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--card-border); background: var(--card-bg); color: var(--gold);
font: 300 24px/1 var(--font-body); }
.sc-enter .num { font: 700 64px/1 var(--font-display); color: var(--text); min-width: 70px; text-align: center; }
.sc-picks { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 16px; }
.sc-picks .p { text-align: center; font: 600 11px/1 var(--font-body); padding: 10px 0; border-radius: 10px;
border: 1px solid var(--divider); color: var(--text-2); }
.sc-picks .p.on { background: var(--gold); color: #1a2418; border-color: var(--gold); }
/* leaderboard app */
.lb-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.lb-tabs .t { font: 600 10px/1 var(--font-body); padding: 8px 12px; border-radius: 999px;
color: var(--text-2); border: 1px solid var(--divider); }
.lb-tabs .t.on { background: rgba(201,168,76,0.12); color: var(--gold); border-color: var(--card-border); }
.lb-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--divider); }
.lb-row .ps { font: 700 13px/1 var(--font-display); color: var(--text-muted); width: 16px; }
.lb-row .nm { flex: 1; font: 600 13px/1.2 var(--font-display); color: var(--text); }
.lb-row.you .nm { color: var(--gold-light); }
.lb-row .tp { font: 600 13px/1 var(--font-body); color: var(--text); width: 34px; text-align: right; }
.lb-row .th { font: 400 10px/1 var(--font-body); color: var(--text-muted); width: 40px; text-align: right;
letter-spacing: 0.08em; }
/* ─── Cinematic interstitial band ──────────────────────────── */
.band { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden;
border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.band .img { position: absolute; inset: 0; background-size: cover; background-position: center;
transform: scale(1.03); }
.band .img::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(to right, rgba(9,25,16,0.92) 0%, rgba(9,25,16,0.62) 40%, rgba(9,25,16,0.30) 100%),
linear-gradient(to top, var(--green-darkest), transparent 30%); }
.band .inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.band .quote { font: 600 clamp(28px,4.2vw,56px)/1.18 var(--font-display); color: var(--text);
letter-spacing: -1px; max-width: 760px; text-wrap: pretty; }
.band .quote em { color: var(--gold); font-style: italic; }
.band .by { margin-top: 26px; font: 500 12px/1 var(--font-body); letter-spacing: 0.28em;
text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 12px; }
.band .by .tick { width: 26px; height: 1px; background: rgba(201,168,76,0.6); }
/* stat proof strip — clean aligned row with hairline dividers */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4px;
border-top: 1px solid var(--divider); }
.stat-strip .st { padding: 36px 36px 4px; border-left: 1px solid var(--divider); }
.stat-strip .st:first-child { padding-left: 0; border-left: none; }
.stat-strip .st:last-child { padding-right: 0; }
@media (max-width: 720px) {
.stat-strip { grid-template-columns: 1fr 1fr; }
.stat-strip .st { padding: 28px 24px; }
.stat-strip .st:nth-child(odd) { padding-left: 0; border-left: none; }
.stat-strip .st:nth-child(3), .stat-strip .st:nth-child(4) { border-top: 1px solid var(--divider); }
}
.stat-strip .st .n { font: 700 clamp(38px,4vw,56px)/1 var(--font-display); color: var(--gold);
font-style: italic; letter-spacing: -1.5px; white-space: nowrap; }
.stat-strip .st .l { font: 300 13px/1.5 var(--font-body); color: var(--text-2); margin-top: 14px; }
/* closing gets a faint twilight image */
.closing .img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center bottom;
opacity: 0.16; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 60%, black, transparent 78%);
mask-image: radial-gradient(ellipse 70% 80% at 50% 60%, black, transparent 78%); }
/* ─── Scroll-scrubbed cinematic moment ─────────────────────── */
.scrub { position: relative; height: 220vh; background: var(--green-darkest); }
.scrub-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden;
display: flex; align-items: center; }
.scrub-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 1; will-change: transform, opacity; transform: scale(1.06); opacity: 0; transition: opacity .9s ease; }
.scrub-vid.playing { opacity: 1; }
.scrub-fallback { position: absolute; inset: 0; z-index: 0;
background-image: url('assets/golfer-dusk.webp'); background-size: cover; background-position: center; }
.scrub-grad { position: absolute; inset: 0; z-index: 2;
background: linear-gradient(to right, rgba(9,25,16,0.92) 0%, rgba(9,25,16,0.55) 42%, rgba(9,25,16,0.25) 100%),
linear-gradient(to top, var(--green-darkest) 0%, transparent 40%),
linear-gradient(to bottom, var(--green-darkest) 0%, transparent 36%); }
.scrub-copy { position: relative; z-index: 3; width: 100%; max-width: var(--wrap);
margin: 0 auto; padding: 0 32px; }
.scrub-eyebrow { font: 600 12px/1 var(--font-body); letter-spacing: 0.34em; text-transform: uppercase;
color: var(--gold); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.scrub-eyebrow .tick { width: 26px; height: 1px; background: rgba(201,168,76,0.6); }
.scrub-copy .quote { font: 600 clamp(30px,4.6vw,62px)/1.14 var(--font-display); color: var(--text);
letter-spacing: -1.4px; max-width: 800px; }
.scrub-copy .quote em { color: var(--gold); font-style: italic; }
.scrub-copy .sub { margin-top: 22px; font: 300 clamp(16px,1.5vw,20px)/1.6 var(--font-body);
color: var(--text-2); max-width: 520px; }
/* the copy beats fade as the clip scrubs */
.scrub-beat { transition: opacity .5s ease, transform .5s ease; }
.scrub-progress { position: absolute; left: 32px; right: 32px; bottom: 40px; z-index: 3;
height: 2px; background: rgba(201,168,76,0.16); border-radius: 999px; max-width: var(--wrap);
margin: 0 auto; }
.scrub-progress i { display: block; height: 100%; width: 0%; background: var(--gold); border-radius: 999px; }
@media (max-width: 760px) { .scrub { height: 180vh; } }
/* ─── Mid-page full-bleed video band ───────────────────────── */
.vband { position: relative; min-height: 92vh; display: flex; align-items: center;
overflow: hidden; }
.vband-fallback { position: absolute; inset: 0; z-index: 0;
background-image: url('assets/green-twilight.webp'); background-size: cover; background-position: center; }
/* slow Ken-Burns drift for still-backed bands (motion without video) */
.vband-fallback.kenburns { transform: scale(1.06); animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns {
from { transform: scale(1.06) translate3d(0,0,0); }
to { transform: scale(1.16) translate3d(-2.5%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) { .vband-fallback.kenburns { animation: none; } }
.vband-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 1; opacity: 0; transition: opacity 1s ease; will-change: transform; }
.vband-vid.playing { opacity: 1; }
.vband-grad { position: absolute; inset: 0; z-index: 2;
background: linear-gradient(to right, rgba(9,25,16,0.94) 0%, rgba(9,25,16,0.58) 46%, rgba(9,25,16,0.22) 100%),
linear-gradient(to top, var(--green-darkest) 0%, transparent 38%),
linear-gradient(to bottom, var(--green-darkest) 0%, transparent 34%); }
.vband-inner { position: relative; z-index: 3; }
.vband-copy { max-width: 720px; }
.vband-quote { font: 600 clamp(34px,5vw,68px)/1.12 var(--font-display); color: var(--text);
letter-spacing: -1.6px; text-wrap: pretty; }
.vband-quote em { color: var(--gold); font-style: italic; }
.vband-sub { margin-top: 22px; font: 300 clamp(16px,1.5vw,20px)/1.6 var(--font-body);
color: var(--text-2); max-width: 540px; }
.vband-stat { display: flex; gap: 56px; margin-top: 44px; flex-wrap: wrap; }
.vband-stat .vs-n { font: 700 clamp(30px,3.2vw,44px)/1 var(--font-display); color: var(--gold);
font-style: italic; letter-spacing: -1px; white-space: nowrap; }
.vband-stat .vs-l { font: 300 13px/1.5 var(--font-body); color: var(--text-2); margin-top: 10px; max-width: 150px; }
@media (max-width: 700px) { .vband-stat { gap: 32px; } }
/* organic depth — faint off-center gold glows break the flat grid */
.section .wrap { position: relative; z-index: 1; }
#engine::before, #ai::before, #clubs::before, #sidebets::before {
content: ''; position: absolute; pointer-events: none; z-index: 0;
width: 720px; height: 720px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,168,76,0.06), transparent 64%);
}
#engine::before { top: -160px; right: -180px; }
#sidebets::before { top: 10%; left: -240px; }
#ai::before { bottom: -180px; right: -160px; }
#clubs::before { top: -120px; left: 30%; }
/* tweak-driven visibility / order */
[data-ai="off"] #ai { display: none; }
[data-crews="off"] #crews { display: none; }
[data-audience="clubs"] #clubs { order: -1; border-top: none; }
[data-audience="clubs"] #clubs + .section { border-top: 1px solid var(--divider); }