:root {
  --ink: #f7f4ed;
  --muted: #a9a59b;
  --bg: #0d0e0c;
  --panel: #171815;
  --line: #2b2d28;
  --accent: #e5a224;
  --accent-bright: #ffc044;
  --green: #8cd19b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 9; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
a { color: inherit; }
main { overflow: hidden; }
.site-header { height: 84px; max-width: 1240px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); position: relative; z-index: 5; }
.brand { display: inline-flex; gap: 11px; align-items: center; font: 700 17px/1 "Manrope"; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; }
.brand-mark span { display: block; width: 7px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-left: -3px; }
nav { display: flex; align-items: center; gap: 34px; }
nav a { color: #c3c0b7; text-decoration: none; font-size: 14px; transition: color .2s; }
nav a:hover { color: white; }
.nav-cta { color: var(--ink)!important; border: 1px solid #4d4c46; border-radius: 99px; padding: 10px 18px; }

.hero { max-width: 1240px; min-height: 740px; margin: auto; padding: 90px 24px 72px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 72px; position: relative; }
.hero-glow { position: absolute; width: 700px; height: 600px; right: -200px; top: -80px; background: radial-gradient(circle, rgba(229,162,36,.13), transparent 67%); pointer-events: none; }
.eyebrow { color: var(--accent-bright); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.eyebrow span { display: inline-block; width: 19px; height: 1px; background: var(--accent); }
h1, h2, h3 { font-family: "Manrope", sans-serif; letter-spacing: -.045em; margin: 0; }
h1 { font-size: clamp(54px, 6vw, 82px); line-height: 1.01; font-weight: 700; max-width: 680px; }
h1 em { font-style: normal; color: var(--accent-bright); }
.hero-lede { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 540px; margin: 27px 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; border-radius: 5px; border: 0; font: 700 14px/1 "DM Sans"; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, opacity .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #16130d; background: var(--accent-bright); box-shadow: 0 8px 30px rgba(229,162,36,.13); }
.button.primary:hover { background: #ffd06d; }
.button.secondary { color: var(--ink); background: #1c1d1a; border: 1px solid #32342f; }
.play-icon { font-size: 9px; border: 1px solid #555750; border-radius: 50%; height: 22px; width: 22px; display: grid; place-items: center; padding-left: 1px; }
.trust-row { margin-top: 29px; display: flex; flex-wrap: wrap; gap: 22px; color: #777970; font-size: 12px; }
.trust-row i { font-style: normal; color: var(--accent); margin-right: 5px; }

.hero-art { height: 520px; position: relative; perspective: 1000px; }
.poster { position: absolute; width: 245px; height: 360px; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 55px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.11); }
.poster::before, .poster::after { content: ""; position: absolute; inset: 0; }
.poster > div { position: absolute; left: 22px; bottom: 23px; z-index: 2; }
.poster small { font: 700 8px/1.6 "DM Sans"; letter-spacing: .12em; color: rgba(255,255,255,.72); }
.poster strong { display: block; margin-top: 5px; font: 800 29px/.9 "Manrope"; letter-spacing: -.06em; }
.poster-one { left: 1%; top: 83px; transform: rotate(-8deg); background: linear-gradient(150deg,#73876e,#18291f 62%,#0e1210); }
.poster-one::before { background: radial-gradient(ellipse at 50% 18%, rgba(245,208,125,.75), transparent 13%), linear-gradient(160deg,transparent 29%,rgba(9,15,10,.8) 30% 34%,transparent 35%), radial-gradient(ellipse at 50% 42%,#709171 0 10%,transparent 11%); filter: blur(.2px); }
.poster-two { z-index: 2; left: 29%; top: 37px; background: linear-gradient(165deg,#382b5d,#0e1024 58%,#1f0b23); }
.poster-two::before { background: radial-gradient(circle at 62% 28%,#fbba68 0 4%,#ba3461 5%,transparent 24%), linear-gradient(140deg,transparent 48%,rgba(240,68,97,.5) 49%,transparent 50%); }
.poster-two::after { inset: 90px 35px 100px 80px; background: linear-gradient(135deg,transparent 45%,rgba(255,205,151,.42)); clip-path: polygon(47% 0,75% 36%,100% 100%,0 100%,25% 36%); }
.poster-three { right: 0; top: 86px; transform: rotate(7deg); background: linear-gradient(155deg,#bf7745,#41281e 55%,#15100e); }
.poster-three::before { background: radial-gradient(ellipse at 45% 38%,#efc59d 0 10%,transparent 11%), linear-gradient(60deg, transparent 51%, rgba(247,182,101,.35) 52%, transparent 53%); }
.now-playing { position: absolute; z-index: 4; right: 11px; bottom: 50px; width: 310px; height: 76px; padding: 0 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(22,23,20,.88); backdrop-filter: blur(16px); display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 45px rgba(0,0,0,.4); }
.np-icon { width: 35px; height: 35px; border-radius: 50%; background: var(--accent); color: #17130b; display: grid; place-items: center; font-size: 10px; padding-left: 2px; }
.now-playing span:nth-child(2) { flex: 1; }
.now-playing small, .now-playing strong { display: block; }
.now-playing small { color: var(--accent); letter-spacing: .14em; font-size: 8px; }
.now-playing strong { font-size: 12px; margin-top: 5px; }
.sound-bars { display: flex; gap: 2px; align-items: center; }
.sound-bars i { width: 2px; background: var(--accent); display: block; animation: sound 1s ease-in-out infinite alternate; }.sound-bars i:nth-child(1){height:9px}.sound-bars i:nth-child(2){height:17px;animation-delay:.2s}.sound-bars i:nth-child(3){height:12px;animation-delay:.4s}.sound-bars i:nth-child(4){height:6px;animation-delay:.1s}
@keyframes sound { to { transform: scaleY(.4); opacity: .5; } }

.section { max-width: 1240px; margin: auto; padding: 110px 24px; }
.steps { border-top: 1px solid var(--line); }
.section-heading { max-width: 650px; margin-bottom: 54px; }
h2 { font-size: clamp(38px, 4.3vw, 59px); line-height: 1.08; }
.section-heading > p:last-child, .invite-copy > p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 560px; }
.step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; counter-reset: step; }
.step-card { background: linear-gradient(145deg,#191a17,#121310); border: 1px solid var(--line); border-radius: 10px; padding: 20px 20px 28px; position: relative; transition: transform .3s,border-color .3s; }
.step-card:hover { transform: translateY(-5px); border-color: #555248; }
.step-number { position: absolute; right: 20px; top: 18px; color: #474840; font: 700 11px/1 "Manrope"; }
.mini-screen { height: 175px; border-radius: 6px; background: #0d0e0c; border: 1px solid #292a26; margin-bottom: 25px; overflow: hidden; position: relative; }
.account-screen { display: flex; align-items: center; flex-direction: column; padding-top: 27px; }
.mini-logo { font: 700 17px/1 "Manrope"; letter-spacing: .03em; }.mini-logo span{color:var(--accent);font-size:28px;vertical-align:-2px}
.mini-field { width: 115px; height: 9px; border-radius: 2px; background: #252621; margin-top: 13px; }.mini-field.short{margin-top:6px}.mini-button{width:115px;height:14px;background:var(--accent);margin-top:9px;border-radius:2px}
.invite-screen { display: flex; align-items: center; padding: 0 22px; gap: 12px; font-size: 10px; }
.mail-icon { width: 35px;height:35px;border-radius:50%;background:#252621;display:grid;place-items:center;color:var(--accent);font-size:14px}.invite-screen>span{flex:1}.accept-pill{font-size:8px;color:#111;background:var(--accent);padding:6px 10px;border-radius:20px}
.library-screen { display:grid;grid-template-columns:46px 1fr;padding:14px;gap:12px}.mini-sidebar{background:#1d1e1a;border-radius:3px}.mini-posters{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mini-posters i{border-radius:3px;background:linear-gradient(145deg,#63442f,#1e1814)}.mini-posters i:nth-child(2){background:linear-gradient(145deg,#425965,#141a1d)}.mini-posters i:nth-child(3){background:linear-gradient(145deg,#6d3c50,#1f1218)}.mini-posters i:nth-child(4){background:linear-gradient(145deg,#595f32,#191b11)}
.step-card h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -.025em; }.step-card p{color:#92948b;font-size:14px;line-height:1.65;margin:0}.step-card p a{color:var(--accent)}

.invite-section { max-width: none; padding-left: max(24px, calc((100% - 1192px)/2)); padding-right: max(24px, calc((100% - 1192px)/2)); display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;background:radial-gradient(circle at 15% 50%,rgba(229,162,36,.08),transparent 36%),#131411;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.invite-copy h2{margin-bottom:20px}.privacy-note{display:flex;gap:14px;align-items:center;margin-top:30px;color:#9b9c93}.privacy-note>span{width:40px;height:40px;border-radius:50%;border:1px solid #484940;display:grid;place-items:center;color:var(--accent)}.privacy-note p{margin:0;font-size:13px;line-height:1.6}.privacy-note strong{color:#e4e2da}
.invite-card{background:#1b1c18;border:1px solid #383a34;padding:34px;border-radius:10px;box-shadow:0 35px 70px rgba(0,0,0,.3)}
form label{display:block;font:600 13px/1 "DM Sans";margin-bottom:10px}.input-wrap{display:flex;align-items:center;border:1px solid #44463f;background:#11120f;border-radius:5px;height:54px;padding:0 16px;gap:12px}.input-wrap:focus-within{border-color:var(--accent)}.input-wrap span{color:#73756d}.input-wrap input{width:100%;height:100%;background:transparent;border:0;outline:0;color:white;font:500 15px "DM Sans"}.input-wrap input::placeholder{color:#5f6159}.turnstile-wrap{margin:18px 0;min-height:65px}.submit-button{width:100%;font-size:14px}.submit-button:disabled{opacity:.55;cursor:not-allowed;transform:none}.submit-button.loading span{animation:slide .6s infinite alternate}@keyframes slide{to{transform:translateX(5px)}}.form-status{min-height:20px;margin:15px 0 0;text-align:center;font-size:13px}.form-status.success{color:var(--green)}.form-status.error{color:#ef9990}.form-fineprint{color:#6e7068!important;text-align:center;font-size:10px!important;margin:14px 0 0!important}.website-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.devices{text-align:center}.devices .section-heading{margin-left:auto;margin-right:auto}.devices .eyebrow{justify-content:center}.device-stage{height:420px;max-width:850px;margin:0 auto 24px;position:relative}.tv-device,.tablet-device,.phone-device{position:absolute;background:#070806;border:4px solid #292a27;box-shadow:0 24px 50px rgba(0,0,0,.5)}.device-content{width:100%;height:100%;overflow:hidden}.tv-device{width:510px;height:300px;left:50%;top:10px;transform:translateX(-50%);border-radius:7px}.tv-device::after{content:"";position:absolute;width:110px;height:55px;left:50%;bottom:-58px;transform:translateX(-50%);border-bottom:8px solid #2c2d2a;border-left:28px solid transparent;border-right:28px solid transparent}.tv-device .device-content{background:radial-gradient(circle at 50% 15%,#282e28,transparent 50%),#10110f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.tv-device strong{font-size:11px;color:#aaa}.profiles{display:flex;gap:10px}.profiles i{width:46px;height:46px;border-radius:50%;background:#bc7d2e;display:grid;place-items:center;font-style:normal}.profiles i+ i{background:#282a25;color:#777}.tablet-device{width:260px;height:190px;left:0;bottom:0;border-radius:13px;padding:9px}.library-view{background:#11120f;text-align:left;padding:14px}.library-view b{font-size:8px;color:var(--accent)}.library-view>div{height:125px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.library-view i{background:linear-gradient(145deg,#5f4032,#211613);border-radius:3px}.library-view i:nth-child(2){background:linear-gradient(145deg,#364f5b,#121b1f)}.library-view i:nth-child(3){background:linear-gradient(145deg,#5b3751,#1e111b)}.phone-device{width:130px;height:260px;right:20px;bottom:4px;border-width:5px;border-radius:20px;padding:5px}.phone-view{background:#151612;padding:8px;text-align:left;position:relative}.phone-art{height:135px;background:radial-gradient(circle at 55% 30%,#d09c55,transparent 8%),linear-gradient(150deg,#324e53,#13191d 70%);border-radius:6px;margin-bottom:12px}.phone-view small{font-size:5px;letter-spacing:.12em;color:var(--accent)}.phone-view strong{display:block;font-size:9px;margin-top:4px}.phone-view>span{width:25px;height:25px;border-radius:50%;background:var(--accent);color:#111;display:grid;place-items:center;font-size:7px;position:absolute;right:9px;bottom:10px}.platform-row{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:28px 0}.platform-row span{border:1px solid #30322c;border-radius:50px;color:#8d8f86;padding:8px 14px;font-size:11px}.device-actions{display:flex;flex-direction:column;align-items:center;gap:17px}.text-link{font-size:13px;color:#a3a59c;text-underline-offset:4px}
.help{border-top:1px solid var(--line);display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.help ol{list-style:none;padding:0;margin:0;display:grid;gap:12px}.help li{display:flex;align-items:center;gap:15px;background:#151613;border:1px solid #292b26;padding:14px 18px;border-radius:7px}.help li span{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#282922;color:var(--accent);font-size:11px}.help li p{margin:0;color:#a0a198;font-size:14px}
footer{max-width:1192px;margin:auto;border-top:1px solid var(--line);padding:45px 0 50px;display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#777970;font-size:12px}footer>p{text-align:right}.legal{grid-column:1/-1;text-align:left!important;font-size:9px;margin-top:24px;color:#52544e}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.step-card:nth-child(2){transition-delay:.1s}.step-card:nth-child(3){transition-delay:.2s}

@media(max-width:900px){nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:65px;gap:30px}.hero-art{max-width:600px;width:100%;margin:auto}.invite-section{grid-template-columns:1fr;gap:45px}.help{grid-template-columns:1fr;gap:35px}.step-grid{grid-template-columns:1fr}.step-card{display:grid;grid-template-columns:170px 1fr;column-gap:24px}.mini-screen{grid-row:1/4;margin:0}.step-number{display:none}.device-stage{transform:scale(.85);margin-left:-8%;margin-right:-8%}footer{margin:0 24px}}
@media(max-width:620px){.site-header{height:70px}.nav-cta{padding:9px 14px}.hero{min-height:0;padding-top:55px}.hero-actions{flex-direction:column;align-items:stretch}.trust-row{gap:10px 16px}.hero-art{height:390px;transform:scale(.8);transform-origin:top left;width:125%;margin-bottom:-75px}.poster{width:210px;height:310px}.poster-two{left:27%}.now-playing{bottom:32px}.section{padding-top:78px;padding-bottom:78px}.step-card{display:block}.mini-screen{margin-bottom:24px}.invite-card{padding:23px}.device-stage{height:330px;transform:scale(.68);transform-origin:top center;margin-bottom:-90px}.tablet-device{left:-85px}.phone-device{right:-40px}.platform-row{margin-top:0}.help li{align-items:flex-start}.help li p{line-height:1.55}footer{grid-template-columns:1fr;gap:16px}footer>p{text-align:left;margin:0}.legal{margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.sound-bars i{animation:none}.button{transition:none}}