:root {
  --paper:#FAF7F2; --ink:#16140F; --signal:#FF4D1C;
  --night:#0B0A0F; --glow:#FF2E88; --violet:#7B2EFF;
  --display:'Space Grotesk',sans-serif; --body:'Instrument Sans',system-ui,sans-serif;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.d{font-family:var(--display)}

/* mockup ribbon */
.ribbon{position:fixed;top:14px;right:-44px;z-index:999;transform:rotate(35deg);
 background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
 padding:6px 50px;opacity:.85;pointer-events:none}

/* topbar */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
 padding:22px var(--pad);mix-blend-mode:difference;color:#fff}
.top .wm{font-family:var(--display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em}
.top .wm em{font-style:normal;color:var(--signal)}
.top span{font-size:10px;letter-spacing:.25em;text-transform:uppercase;font-weight:600;opacity:.8}

/* grain */
.grain{position:fixed;inset:-100%;width:300%;height:300%;z-index:9998;pointer-events:none;opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}30%{transform:translate(3%,-12%)}60%{transform:translate(-6%,6%)}}

/* ============ HERO (DAY) ============ */
.hero{position:relative;min-height:100svh;padding:calc(72px + 4vh) var(--pad) 0;overflow:hidden;
 background:linear-gradient(175deg, #FFF6EC 0%, var(--paper) 46%, #FFE7D6 100%)}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
 font-size:clamp(3rem,10vw,8.5rem);line-height:.92;letter-spacing:-.015em;position:relative;z-index:3}
.hero h1 .o{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero h1 .sig{color:var(--signal)}
.hero .sub{margin-top:22px;max-width:44ch;font-size:clamp(.95rem,1.2vw,1.15rem);font-weight:500;position:relative;z-index:3}
.ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;position:relative;z-index:3}
.pill{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;padding:18px 32px;border-radius:100px;
 transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pill:hover{transform:scale(1.05) rotate(-1.5deg)}
.pill.a{background:var(--signal);color:#fff;box-shadow:0 8px 30px rgba(255,77,28,.35)}
.pill.b{border:2px solid var(--ink)}
/* floating day cards */
.fc{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(22,20,15,.25);z-index:2}
.fc img,.fc video{width:100%;height:100%;object-fit:cover}
.fc .tag{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);font-size:9px;font-weight:700;
 letter-spacing:.15em;text-transform:uppercase;padding:6px 12px;border-radius:100px}
.fc1{width:min(30vw,360px);aspect-ratio:3/4;right:4%;top:14%;transform:rotate(3deg)}
.fc2{width:min(24vw,280px);aspect-ratio:3/4;right:30%;top:48%;transform:rotate(-4deg)}
.fc3{width:min(34vw,420px);aspect-ratio:16/10;right:8%;top:66%;transform:rotate(2deg)}
@media(max-width:820px){.fc1{width:44vw;top:52%}.fc2{display:none}.fc3{width:56vw;top:74%;right:2%}}
.hero .marq{position:absolute;bottom:0;left:0;right:0;border-top:1.5px solid rgba(22,20,15,.25);
 padding:12px 0;white-space:nowrap;overflow:hidden;background:rgba(250,247,242,.6);backdrop-filter:blur(4px);z-index:4}
.marq .in{display:inline-block;animation:mq 24s linear infinite;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700}
.marq .in span{margin:0 16px}.marq .in .s{color:var(--signal)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sparkles */
.spark{position:absolute;color:#F5C97B;pointer-events:none;animation:tw 2.6s ease-in-out infinite;text-shadow:0 0 14px rgba(245,201,123,.8);z-index:2}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.8) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}}

/* ============ ANY TALENT ============ */
.any{position:relative;background:linear-gradient(180deg,#FFE7D6 0%, #FFD9C4 55%, #3A1626 100%);padding:16vh var(--pad) 14vh;overflow:hidden}
.any .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--signal)}
.any h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,6.5vw,5.4rem);line-height:.98;margin-top:14px;max-width:16ch}
.any h2 .g{background:linear-gradient(90deg,var(--signal),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.any .lead{margin-top:20px;max-width:52ch;font-size:clamp(.95rem,1.15vw,1.1rem);font-weight:500}
.tmarq{margin-top:7vh;display:grid;gap:14px}
.tmarq .row{white-space:nowrap;overflow:hidden}
.tmarq .row .in{display:inline-block;animation:mq 30s linear infinite}
.tmarq .row:nth-child(2) .in{animation-duration:38s;animation-direction:reverse}
.tmarq .row:nth-child(3) .in{animation-duration:26s}
.tpill{display:inline-block;margin:0 8px;padding:12px 22px;border-radius:100px;font-family:var(--display);font-weight:600;font-size:clamp(.9rem,1.4vw,1.2rem);border:1.5px solid rgba(22,20,15,.5)}
.tpill.hot{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tpill.wild{background:linear-gradient(90deg,var(--signal),var(--glow));color:#fff;border:none;box-shadow:0 6px 24px rgba(255,46,136,.35)}
.any .foot-line{margin-top:7vh;text-align:center;color:var(--paper);font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.6rem)}

/* ============ HOW IT WORKS ============ */
.how{background:var(--night);color:var(--paper);padding:14vh var(--pad)}
.how .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--glow)}
.how h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5vw,4rem);margin-top:12px}
.steps{display:grid;gap:16px;margin-top:6vh;counter-reset:st}
@media(min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{border:1px solid rgba(250,247,242,.16);border-radius:18px;padding:22px;position:relative;counter-increment:st;
 background:linear-gradient(160deg,rgba(255,46,136,.06),rgba(255,77,28,.03))}
.step::before{content:"0" counter(st);font-family:var(--display);font-weight:700;font-size:1.9rem;
 background:linear-gradient(90deg,var(--signal),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-top:10px}
.step p{font-size:.84rem;opacity:.8;margin-top:6px;line-height:1.55}
.how .brands{margin-top:9vh;border-top:1px solid rgba(250,247,242,.16);padding-top:7vh;display:grid;gap:28px}
@media(min-width:900px){.how .brands{grid-template-columns:1.1fr .9fr}}
.how .brands p.bigp{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.3}
.how .brands p.bigp .g{background:linear-gradient(90deg,var(--signal),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.how .brands ul{list-style:none;display:grid;gap:12px;font-size:.95rem}
.how .brands ul li::before{content:"✦ ";color:#F5C97B}
.impact{margin-top:6vh;border-radius:18px;padding:24px 28px;background:rgba(245,201,123,.08);border:1px solid rgba(245,201,123,.3);font-size:.95rem}
.impact b{color:#F5C97B}

/* ============ STUDIO PERKS ============ */
.perks{background:linear-gradient(180deg,var(--night) 0%, #14100B 100%);color:var(--paper);padding:14vh var(--pad)}
.perks h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5vw,4rem)}
.perks h2 .g{background:linear-gradient(90deg,var(--signal),#F5C97B);-webkit-background-clip:text;background-clip:text;color:transparent}
.perks .lead{margin-top:16px;max-width:54ch;color:rgba(250,247,242,.85)}
.pgrid{display:grid;gap:14px;margin-top:6vh;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcell{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:3/4}
.pcell img,.pcell video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.pcell:hover img,.pcell:hover video{transform:scale(1.05)}
.pcell .cap{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.perkline{margin-top:5vh;display:flex;flex-wrap:wrap;gap:10px}
.perkline span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
 border:1px solid rgba(245,201,123,.45);color:#F5C97B;border-radius:100px;padding:10px 18px}

/* ============ FORK ============ */
.fork{display:grid;min-height:70vh;background:linear-gradient(180deg,#FFE7D6 0%, #2A1420 100%)}
@media(min-width:820px){.fork{grid-template-columns:1fr 1fr}}
.fork a{padding:14vh var(--pad);display:flex;flex-direction:column;justify-content:center;gap:14px;
 transition:background .5s}
.fork a:hover{background:rgba(255,77,28,.12)}
.fork .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--signal)}
.fork h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1}
.fork p{max-width:36ch;font-size:.95rem}
.fork a:first-child{color:var(--ink)}
.fork a:last-child{color:var(--paper)}

/* ============ DOME ============ */
.dome{position:relative;height:480vh;background:var(--night)}
.dome .stage{position:sticky;top:0;height:100svh;overflow:hidden}
#stars{position:absolute;inset:0;width:100%;height:100%}
.tunnel{position:absolute;inset:0;perspective:900px;perspective-origin:50% 46%}
.tcard{position:absolute;left:50%;top:44%;width:min(38vw,300px);will-change:transform,opacity;
 transform-style:preserve-3d;text-align:center}
.tcard .ph{border-radius:18px;overflow:hidden;aspect-ratio:3/4;
 box-shadow:0 0 60px rgba(255,46,136,.28), 0 0 120px rgba(255,77,28,.18);
 border:1px solid rgba(255,255,255,.14)}
.tcard .ph img{width:100%;height:100%;object-fit:cover}
.tcard .meta{margin-top:12px;color:var(--paper)}
.tcard .meta .h{font-family:var(--display);font-weight:700;font-size:1rem}
.tcard .meta .s{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.tcard .meta .s b{color:var(--glow)}
.dome-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
 pointer-events:none;color:var(--paper)}
.dome-copy .line{position:absolute;opacity:0;transform:translateY(24px);max-width:16ch;
 font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,6vw,4.6rem);line-height:1.05}
.dome-copy .line .g{background:linear-gradient(90deg,var(--signal),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.dome-cta{position:absolute;bottom:8vh;left:0;right:0;text-align:center;opacity:0;transform:translateY(20px)}
.dome-cta a{pointer-events:auto;display:inline-block;background:linear-gradient(90deg,var(--signal),var(--glow));
 color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
 padding:20px 44px;border-radius:100px;box-shadow:0 10px 40px rgba(255,46,136,.4)}

/* ============ DEAL ============ */
.deal{background:linear-gradient(180deg,var(--night) 0%, #1C0F14 42%, var(--paper) 100%);padding:16vh var(--pad) 10vh}
.deal .big{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--paper);
 font-size:clamp(2.6rem,8vw,7rem);line-height:.95}
.deal .big .g{background:linear-gradient(90deg,var(--signal),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.deal .note{color:rgba(250,247,242,.85);margin-top:16px;max-width:44ch}
.tiers{display:grid;gap:22px;margin-top:7vh}
@media(min-width:820px){.tiers{grid-template-columns:1fr 1fr}}
.tier{border-radius:22px;padding:clamp(24px,3vw,40px);position:relative;overflow:hidden}
.tier.ne{background:#FFF6EC;color:var(--ink)}
.tier.ex{background:linear-gradient(150deg,#231018,#0B0A0F);color:var(--paper);border:1px solid rgba(255,46,136,.35)}
.tier .lab{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:700}
.tier.ne .lab{color:var(--signal)} .tier.ex .lab{color:var(--glow)}
.tier .pct{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,7vw,6rem);line-height:1;margin-top:8px}
.tier .pd{font-size:.85rem;opacity:.8;margin-top:-6px}
.tier ul{list-style:none;margin-top:22px;display:grid;gap:10px;font-size:.92rem;font-weight:500}
.tier ul li::before{content:"— "}
.tier .join{display:inline-block;margin-top:26px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
 padding:14px 26px;border-radius:100px}
.tier.ne .join{background:var(--ink);color:var(--paper)}
.tier.ex .join{background:linear-gradient(90deg,var(--signal),var(--glow));color:#fff}
.bridge{margin-top:10vh;text-align:center;color:var(--ink)}
.bridge p{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem)}
.bridge a{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
 border-bottom:2px solid var(--signal);padding-bottom:3px}
.foot{padding:20px var(--pad);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;
 text-transform:uppercase;color:rgba(22,20,15,.6);background:var(--paper)}
.rv{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion: reduce){
 .rv{opacity:1!important;transform:none!important}
 .dome{height:auto}.dome .stage{position:static;height:auto;padding:10vh 0}
 .tunnel{position:static;perspective:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:0 var(--pad)}
 .tcard{position:static;width:100%;transform:none!important;opacity:1!important}
 .dome-copy,.grain{display:none}.dome-cta{opacity:1;position:static;margin-top:30px}}