/* Vaquero public landing (welcome.html). Standalone sheet.
Tokens follow .ops/redesign_260808/DESIGN_V1.md §4 and the values the site actually computes (light = paper
white #FFFFFF, dark = #0A0A0B). This page never loads vq.css, so nothing here can reach the app shell and
nothing in the app can restyle this page — which also means these values are a COPY: if vq.css moves, move
them here too (same rule the worker shells carry).
2026-08-11 rebuild: the page is now CAPTURE-LED. The prose blocks are gone, so the Read grammar went with
them; what is left is a hero, a strip of real screens, the two specs, and the ask. The decoration is
geometry, not colour — a fine grid, outline display type, mono labels, HUD brackets on every frame — so the
brand stays gold-on-black while the page reads harder than a document.
Motion budget (every animated thing on this page, deliberately small):
· one transform marquee (compositor only)
· one background-position pan on ONE heading, desktop only
· scroll reveal via IntersectionObserver, one-shot, transform+opacity
· scroll progress + parallax through native scroll/view timelines (no JS, no scroll listener)
· a pointer spotlight bound only on (hover:hover) and (pointer:fine)
All of it is switched off under prefers-reduced-motion, and the animated ones need the .anim class that JS
adds, so a no-JS reader gets a fully static page.
Korean text is served by a subset built from THIS page's own glyph set (assets/welcome-kr-*.woff2);
rebuild it whenever the copy changes (procedure in .ops/night_260808/LANDING.md §9). */
/* ---- fonts ---------------------------------------------------------------- */
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/welcome-kr-400.woff2") format("woff2")}
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/welcome-kr-600.woff2") format("woff2")}
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/welcome-kr-700.woff2") format("woff2")}
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/welcome-kr-800.woff2") format("woff2")}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600 700;font-display:swap;
src:url("/brand/fonts/CormorantGaramond-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'VQ Mono';font-style:normal;font-weight:400 700;font-display:swap;
src:url("/brand/fonts/JetBrainsMono-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}
/* ---- tokens --------------------------------------------------------------- */
:root,:root[data-theme="dark"]{
--bg:#0A0A0B; --sunken:#0E0E10; --float:#16161A;
--hair:#1C1C1F; --hair-str:#26262A;
--ink:#F2F2EF; --ink-2:#A5A59F; --ink-3:#6C6C66;
--gold:#D4AF37; --gold-2:#E3C66A; --gold-ink:#14100A;
--shot-edge:#26262A;
--grid:rgba(212,175,55,.055); /* the HUD grid: gold at a whisper, never a colour you can name */
--ghost:rgba(212,175,55,.17); /* outline display type behind content */
--glow:rgba(212,175,55,.10);
--pane:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
--drop:0 30px 80px rgba(0,0,0,.58);
--drop-hi:0 38px 96px rgba(0,0,0,.66);
}
:root[data-theme="light"]{
--bg:#FFFFFF; --sunken:#F5F5F3; --float:#FFFFFF;
--hair:#E7E7E3; --hair-str:#D6D6D1;
--ink:#15150F; --ink-2:#56564F; --ink-3:#8A8A82;
--gold:#9A7A1E; --gold-2:#B08F2A; --gold-ink:#FFFFFF;
--shot-edge:#D6D6D1;
--grid:rgba(21,21,15,.045);
--ghost:rgba(154,122,30,.20);
--glow:rgba(154,122,30,.07);
--pane:linear-gradient(180deg,rgba(21,21,15,.035),rgba(21,21,15,.008));
--drop:0 24px 60px rgba(21,21,15,.14);
--drop-hi:0 30px 74px rgba(21,21,15,.18);
}
:root{
--kr:'VQ Sans',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
--brand:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--mono:'VQ Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--pad:32px; --hd:56px; --wrap:1216px; --read:760px;
--dur-tap:120ms; --dur-move:200ms;
--ease:cubic-bezier(.2,0,0,1);
--out:cubic-bezier(.16,1,.3,1);
}
/* ---- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
/* the door script (welcome.html head) hides the page for the one network round trip it needs to revive a
member's expired session, so a member never reads a preview meant for a stranger. The watchdog in that
script always clears this, and a reader with no stored session never gets the class at all. */
html.vqhold body{visibility:hidden}
/* keep-all stops Korean breaking mid-word (the default breaks anywhere and shreds 어절);
break-word is the escape hatch for a long latin token that would otherwise widen the layout */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--kr);font-size:16px;line-height:1.65;
word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,dl,dd,dt,blockquote,figure{margin:0}
ul{padding:0;list-style:none}
b{font-weight:700;color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:color-mix(in srgb,var(--gold) 28%,transparent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap.narrow{max-width:calc(var(--read) + var(--pad) * 2)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--float);color:var(--ink);padding:12px 18px;border:1px solid var(--hair)}
.skip:focus{left:12px;top:12px}
.gd{color:var(--gold-2)}
/* ---- ambient ground -------------------------------------------------------
One fixed, non-interactive layer: a 72px HUD grid, two gold glows, and a fractal-noise grain. Static
paint, no animation, no blend mode — it costs one composited layer and nothing per frame. The grid is
masked so it dies out toward the bottom instead of tiling the whole document. ---- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.fx::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(0deg,var(--grid) 1px,transparent 1px);
background-size:72px 72px;
-webkit-mask-image:radial-gradient(120% 78% at 78% 0%,#000 0%,rgba(0,0,0,.55) 42%,transparent 78%);
mask-image:radial-gradient(120% 78% at 78% 0%,#000 0%,rgba(0,0,0,.55) 42%,transparent 78%)}
.fx::after{content:"";position:absolute;inset:0;opacity:.028;
background-image:url("data:image/svg+xml;utf8,")}
.fx-glow{position:absolute;border-radius:50%;filter:blur(90px)}
.fx-glow.a{top:-16vh;right:-8vw;width:52vw;height:52vw;background:radial-gradient(circle,var(--glow),transparent 68%)}
.fx-glow.b{top:120vh;left:-14vw;width:46vw;height:46vw;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.7}
body>*{position:relative;z-index:1}
body>.fx{z-index:0}
/* scroll progress. Native scroll timeline where it exists; where it does not the bar simply stays at 0
width, which is why there is no JS scroll listener anywhere on this page. */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none;
transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
@supports (animation-timeline:scroll()){
.anim .prog{animation:prog linear both;animation-timeline:scroll(root block)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* ---- header --------------------------------------------------------------- */
.hd{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid transparent;
transition:background var(--dur-move) var(--ease),border-color var(--dur-move) var(--ease)}
.hd.stuck{background:color-mix(in srgb,var(--float) 90%,transparent);border-bottom-color:var(--hair);
-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.hd-in{display:flex;align-items:center;gap:20px;height:var(--hd);
width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wm{display:inline-flex;align-items:center;gap:10px;font-family:var(--brand);font-weight:700;font-size:22px;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap;line-height:1}
.wm img{width:26px;height:26px;object-fit:contain}
.wm-sm{font-size:18px}
.wm-sm img{width:22px;height:22px}
.hd-nav{display:flex;gap:2px;margin-left:8px}
.hd-nav a{font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:8px;
transition:color var(--dur-tap) var(--ease)}
.hd-nav a:hover{color:var(--ink)}
.hd-cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.lang,.seg{display:inline-flex;border:1px solid var(--hair);border-radius:8px;overflow:hidden}
.lang button,.seg button{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);
padding:6px 10px;min-height:30px;transition:color var(--dur-tap) var(--ease),background var(--dur-tap) var(--ease)}
.lang button+button,.seg button+button{border-left:1px solid var(--hair)}
.lang button.on,.seg button.on{color:var(--gold-2);background:var(--sunken)}
.lang button:hover,.seg button:hover{color:var(--ink)}
/* ---- buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;
font-size:14px;font-weight:700;white-space:nowrap;
transition:border-color var(--dur-tap) var(--ease),color var(--dur-tap) var(--ease),
background var(--dur-tap) var(--ease),transform var(--dur-tap) var(--ease)}
.btn-lg{height:50px;padding:0 26px;font-size:15px}
.btn-gold{background:var(--gold);color:var(--gold-ink);border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-1px)}
.btn-line{border:1px solid var(--hair-str);color:var(--ink)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-2)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
/* ---- type ----------------------------------------------------------------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);
display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
h1{font-family:var(--brand);font-weight:700;line-height:.98;letter-spacing:-.01em}
.sec-h{font-size:clamp(26px,3.6vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.16;margin-bottom:14px}
.sec-lede{max-width:34em;font-size:16px;line-height:1.78;color:var(--ink-2)}
.kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-2);margin-bottom:12px;display:flex;align-items:center;gap:10px}
/* outline display type. Decoration only (aria-hidden), so a browser without text-stroke simply shows nothing. */
.ghost{font-family:var(--brand);font-weight:700;color:transparent;-webkit-text-stroke:1px var(--ghost);
line-height:.78;letter-spacing:.01em;pointer-events:none;-webkit-user-select:none;user-select:none}
/* ---- frames (every capture on the page sits in one) -----------------------
A thin pane, a hairline, HUD corner brackets, and a deep drop shadow, tilted a degree and a half so the
page reads as objects on a desk rather than images in a document. Hovering the row straightens it: one
transform transition, the cheapest interaction there is. ---- */
.frame{position:relative;padding:8px;border-radius:16px;background:var(--pane);
border:1px solid var(--hair-str);box-shadow:var(--drop);
transition:transform .5s var(--out),box-shadow .5s var(--out)}
.frame::before,.frame::after{content:"";position:absolute;width:20px;height:20px;border:1px solid var(--gold);opacity:.5;
transition:opacity .4s var(--out)}
.frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
.frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 16px 0}
.frame img{width:100%;border-radius:9px;background:var(--sunken)}
.tilt{transform:rotate(-1.5deg)}
.tilt-r{transform:rotate(1.5deg)}
.frame:hover,.cap:hover .frame,.hero-vis:hover .frame{transform:rotate(0) translateY(-2px);box-shadow:var(--drop-hi)}
.frame:hover::before,.frame:hover::after,.cap:hover .frame::before,.cap:hover .frame::after{opacity:1}
.cap-note,.shot-note{margin-top:12px;font-size:12px;letter-spacing:.01em;color:var(--ink-3)}
/* ---- hero ----------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:clip;padding:72px 0 56px;border-bottom:1px solid var(--hair)}
/* pointer spotlight. Bound by JS only on a fine-pointer device, so touch never pays for it. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
transition:opacity .5s var(--out);
background:radial-gradient(460px circle at var(--mx,72%) var(--my,18%),color-mix(in srgb,var(--gold) 11%,transparent),transparent 70%)}
.hero.lit::before{opacity:1}
.hero-in{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:52px;align-items:center}
.hero-copy{position:relative;z-index:2}
h1.hero-h{font-family:var(--kr);font-size:clamp(38px,5.6vw,78px);font-weight:800;line-height:1.08;letter-spacing:-.035em}
.hero-h .ln{display:block;width:max-content;max-width:100%}
.hero-h .ln2{margin-left:.42em}
/* gold foil fill. One heading, one background-position pan, desktop only (a phone gets the static gradient). */
.hl{color:transparent;background-image:linear-gradient(100deg,#8A6B12 0%,var(--gold-2) 16%,#FFF6D0 32%,var(--gold) 50%,#8A6B12 70%,var(--gold-2) 100%);
background-size:260% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .hl{background-image:linear-gradient(100deg,#6E5410 0%,#9A7A1E 18%,#C9A73C 34%,#7C6014 52%,#9A7A1E 78%,#6E5410 100%)}
@media(min-width:641px){.anim .hl{animation:foil 15s ease-in-out infinite alternate}}
@keyframes foil{to{background-position:100% 50%}}
.hero-ghost{position:absolute;z-index:-1;left:-.05em;top:-.42em;font-size:clamp(84px,15vw,208px);white-space:nowrap;opacity:.8}
.hero-sub{margin-top:26px;max-width:30em;font-size:17px;line-height:1.76;color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta-note{margin-top:14px;font-size:13px;color:var(--ink-3)}
.hero-vis{position:relative;z-index:1}
.hero-vis .frame{margin-left:8px}
.hero-vis picture{display:block}
/* stat strip. Mono numerals, counted up once on reveal. */
.stat{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:34px;padding-top:22px;border-top:1px solid var(--hair)}
.stat div{min-width:0}
.stat-n{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.stat-l{margin-top:7px;font-size:12.5px;color:var(--ink-3)}
.stat-as{width:100%;font-size:12px;letter-spacing:.01em;color:var(--ink-3)}
/* ---- marquee -------------------------------------------------------------- */
.mq{position:relative;height:112px;overflow:clip;border-bottom:1px solid var(--hair)}
.mq-band{position:absolute;top:24px;left:-3vw;width:106vw;height:60px;display:flex;align-items:center;overflow:hidden;
transform:rotate(-1.5deg);background:var(--sunken);border-top:1px solid var(--hair-str);border-bottom:1px solid var(--hair-str);
box-shadow:0 14px 40px rgba(0,0,0,.28)}
.mq-track{display:flex;width:max-content;align-items:center}
.anim .mq-track{animation:mq 42s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-g{display:flex;align-items:center;flex:0 0 auto}
.mq-item{flex:0 0 auto;padding:0 20px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;white-space:nowrap;color:var(--ink-2)}
.mq-item.kr{font-family:var(--kr);font-weight:600;letter-spacing:.02em;color:var(--ink)}
/* a rotated square, not a dingbat glyph (charter 4a bans ✦ ★ and friends as UI marks) */
.mq-sep{flex:0 0 auto;width:5px;height:5px;transform:rotate(45deg);background:var(--gold);opacity:.75}
/* ---- sections ------------------------------------------------------------- */
.band{position:relative;padding:76px 0;border-bottom:1px solid var(--hair)}
.sec-top{position:relative;max-width:44em}
/* ---- capture rows (the body of the page) ---------------------------------- */
.cap{position:relative;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:52px;align-items:center;
margin-top:64px}
.cap-rev{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
.cap-rev .cap-t{order:2}
.cap-t{position:relative;z-index:1}
.cap-t h3{font-size:clamp(21px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.28;margin-bottom:12px}
.cap-t p{font-size:15px;line-height:1.78;color:var(--ink-2)}
/* a row that carries two captures instead of one: copy on top, the pair side by side underneath. Used where
two boards belong to the same sentence, which keeps the page shorter than giving each one its own row. */
.cap-2up{grid-template-columns:1fr;gap:34px}
.cap-2up .cap-t{max-width:44em}
.cap-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
/* the index numeral, set huge in outline and parked behind its own row */
.cap-n{position:absolute;z-index:0;top:-.46em;left:-.06em;font-size:clamp(88px,11vw,158px);
font-family:var(--mono);font-weight:700;color:transparent;-webkit-text-stroke:1px var(--ghost);line-height:1;
pointer-events:none;-webkit-user-select:none;user-select:none}
.cap-rev .cap-n{left:auto;right:-.06em}
/* ---- phones --------------------------------------------------------------- */
/* three real phone captures, the middle one lifted — always three across, even at 390px, which is what keeps
this section 300px tall instead of the 2300px a stacked column used to cost. */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,22px);margin-top:40px;max-width:760px;
align-items:center}
.ph{position:relative}
.ph img{width:100%;border-radius:clamp(6px,1.4vw,14px);border:1px solid var(--shot-edge);box-shadow:var(--drop)}
.ph.l{transform:rotate(-3.5deg) translateY(10px)}
.ph.r{transform:rotate(3.5deg) translateY(10px)}
.ph.c{transform:scale(1.08);z-index:2}
/* ---- team ----------------------------------------------------------------- */
.tm{position:relative;border-top:1px solid var(--hair);padding-top:26px;margin-top:34px}
.tm-name{font-size:22px;font-weight:700;letter-spacing:-.015em;display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.tm-name .en{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);font-weight:600}
.tm-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);margin:18px 0 9px}
.tm-spec li{position:relative;padding-left:16px;margin-bottom:8px;font-size:14px;line-height:1.72;color:var(--ink-2)}
.tm-spec li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:1px;background:var(--gold)}
/* ---- final cta ------------------------------------------------------------ */
.fin{position:relative;padding:88px 0;border-bottom:1px solid var(--hair);background:var(--sunken);overflow:clip}
.fin-in{position:relative}
.fin-in h2{font-size:clamp(28px,4.2vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.14;margin-bottom:18px}
.fin-ghost{position:absolute;z-index:0;right:-.04em;bottom:-.3em;font-size:clamp(90px,14vw,200px);white-space:nowrap}
.pull{margin:0 0 22px;padding:2px 0 2px 20px;border-left:2px solid var(--gold)}
.pull p{font-size:17px;line-height:1.6;color:var(--ink);font-weight:600}
/* ---- disclaimer + footer -------------------------------------------------- */
.disc{display:block;padding-top:40px;padding-bottom:40px;font-size:13px;line-height:1.8;color:var(--ink-3)}
.ft{border-top:1px solid var(--hair)}
.ft-in{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;padding-top:28px;padding-bottom:40px}
.ft-nav{display:flex;flex-wrap:wrap;gap:18px}
.ft-nav a{font-size:13px;color:var(--ink-2)}
.ft-nav a:hover{color:var(--gold-2)}
.ft-set{margin-left:auto}
.ft-c{font-family:var(--mono);font-size:13px;color:var(--ink-3);width:100%}
/* 사업자 정보. 각주 크기의 흐린 잉크로 조용히 깔린다. 주소·이메일은 잘리지 않고 접히고(overflow-wrap),
항목 이름과 값은 굵기로만 구분한다. 줄임표도 가로 스크롤도 만들지 않는다. */
.ft-biz{width:100%;display:flex;flex-direction:column;gap:2px}
.ft-biz p{margin:0;display:flex;flex-wrap:wrap;gap:2px 18px;font-size:13px;line-height:1.75;color:var(--ink-3);overflow-wrap:anywhere}
.ft-f{display:inline-flex;flex-wrap:wrap;gap:0 6px;min-width:0}
.ft-f b{font-weight:600}
.ft-f a{color:var(--ink-3)}
.ft-f a:hover{color:var(--gold-2)}
/* the floating notice covers the last strip of the page, so the footer gets room while it is up */
body.bta-on .ft-in{padding-bottom:150px}
/* ---- beta notice ---------------------------------------------------------
A card that FLOATS: fixed to the bottom corner, fully rounded, a gold ring drawn as a 1px gradient
frame, a deep drop shadow and a slow glow behind it so it reads as an object above the page rather than
a strip welded into the layout. It arrives a beat after the page settles (transform+opacity, one
transition) and closes to a session flag, so a reader who dismisses it is left alone for that sitting.
The wording carries only what the ledger actually pays: 10 credits at signup, 50 more when a referral
code comes with it, and 50 to the member who referred. No dates, no outcome claims. ---- */
.bta{position:fixed;z-index:70;right:22px;bottom:22px;width:min(430px,calc(100vw - 32px));
padding:1px;border-radius:22px;
background:linear-gradient(150deg,var(--gold) 0%,color-mix(in srgb,var(--gold) 22%,transparent) 34%,
color-mix(in srgb,var(--gold) 10%,transparent) 62%,var(--gold-2) 100%);
box-shadow:0 28px 74px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.4);
opacity:0;transform:translateY(22px) scale(.97);
transition:opacity .55s var(--out),transform .55s var(--out)}
:root[data-theme="light"] .bta{box-shadow:0 26px 60px rgba(21,21,15,.22),0 2px 8px rgba(21,21,15,.1)}
.bta.up{opacity:1;transform:none}
.bta::after{content:"";position:absolute;z-index:-1;inset:-18px;border-radius:38px;pointer-events:none;
background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--gold) 26%,transparent),transparent 72%);
filter:blur(18px);opacity:.5}
.anim .bta.up::after{animation:btaGlow 4.2s ease-in-out infinite alternate}
@keyframes btaGlow{from{opacity:.32}to{opacity:.72}}
.bta-in{position:relative;border-radius:21px;background:var(--float);padding:16px 18px 17px;overflow:hidden}
.bta-in::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 62%)}
.bta-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bta-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;font-weight:700;
letter-spacing:.16em;color:var(--gold-ink);background:var(--gold);border-radius:999px;padding:4px 11px}
.bta-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-ink);opacity:.85}
.anim .bta-dot{animation:btaDot 1.9s ease-in-out infinite}
@keyframes btaDot{0%,100%{opacity:.25}50%{opacity:1}}
.bta-h{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.bta-p{font-size:14px;line-height:1.66;color:var(--ink-2)}
.bta-p b{color:var(--gold-2);font-weight:700}
.bta-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:14px;
border-radius:12px;background:var(--gold);color:var(--gold-ink);font-weight:700;font-size:14.5px;
transition:background var(--dur-tap) var(--ease),transform var(--dur-tap) var(--ease)}
.bta-go:hover{background:var(--gold-2);transform:translateY(-1px)}
.bta-go svg{width:16px;height:16px}
.bta-x{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:9px;color:var(--ink-3);z-index:2}
.bta-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.bta-x svg{width:17px;height:17px}
@media(max-width:640px){
.bta{left:12px;right:12px;bottom:12px;width:auto;border-radius:18px}
.bta-in{border-radius:17px;padding:14px 15px 15px}
.bta-h{font-size:15px}
.bta-p{font-size:13.5px}
body.bta-on .ft-in{padding-bottom:210px}
}
/* ---- reveal --------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px)}
.anim .rv{transition:opacity .72s var(--out),transform .72s var(--out);transition-delay:calc(var(--i,0) * 80ms)}
.rv.on{opacity:1;transform:none}
/* ---- scroll-linked parallax (native timelines only, so it never touches JS) ---- */
@supports (animation-timeline:view()){
.anim .plx{animation:plx linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes plx{from{transform:translateY(30px)}to{transform:translateY(-30px)}}
}
/* ---- responsive ----------------------------------------------------------- */
@media(max-width:1080px){
.hero-in{grid-template-columns:1fr;gap:34px}
.hero-vis .frame{margin-left:0}
.cap,.cap-rev{grid-template-columns:1fr;gap:26px}
.cap-rev .cap-t{order:0}
}
@media(max-width:860px){
:root{--pad:20px}
.hd-nav{display:none}
.hero{padding:46px 0 44px}
.band{padding:56px 0}
.fin{padding:64px 0}
.cap{margin-top:48px}
.ft-set{margin-left:0}
.mq{height:96px}
.mq-band{top:20px;height:52px}
.mq-item{padding:0 15px;font-size:12px}
}
@media(max-width:640px){
.cap-pair{grid-template-columns:1fr;gap:18px}
}
/* Below ~360px the wordmark and the header button no longer fit side by side. The wordmark is nowrap, so
flex shrinks its BOX and the letters spill under the button (seen at 320px: the final O sat behind it).
Shrinking the two of them is the only thing that has to change — the rest of the page already fits. */
@media(max-width:359px){
.hd-in{gap:10px;padding:0 14px} /* header only: the page keeps its own --pad */
.wm{font-size:clamp(15px,5.2vw,18px);letter-spacing:.14em} /* scales down to the 280px fold cover screen */
.wm img{width:22px;height:22px}
.hd-cta .btn{height:36px;padding:0 12px;font-size:13px}
}
@media(max-width:560px){
.lang{display:none}
.cta .btn{width:100%}
.stat{gap:14px 26px}
.stat-n{font-size:22px}
.hero-h .ln2{margin-left:.3em}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.rv{opacity:1;transform:none}
.tilt,.tilt-r,.ph.l,.ph.r,.ph.c{transform:none}
}