@font-face { font-family:'Sora'; font-weight:300; font-style:normal; font-display:swap; src:url('assets/fonts/sora-300.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/sora-400.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-weight:500; font-style:normal; font-display:swap; src:url('assets/fonts/sora-500.ttf') format('truetype'); }
@font-face { font-family:'Sora'; font-weight:600; font-style:normal; font-display:swap; src:url('assets/fonts/sora-600.ttf') format('truetype'); }

:root {
  --duo-night: #170C24; --duo-surface: #241334; --duo-surface2: #2F1A42; --duo-surface3: #3D2255;
  --duo-blackberry: #6E1B55; --duo-gold: #FFC24B; --duo-purple: #A95CFF; --duo-magenta: #FF4D8D;
  --duo-lilac: #E6A8E0; --duo-ink: #F1E7FA; --duo-muted: #A98FC2;
  --duo-ink-outline: rgba(241,231,250,.20); --duo-ink-outline-strong: rgba(241,231,250,.30);
  --duo-purple-glow: rgba(169,92,255,.08); --duo-gold-wash: rgba(255,194,75,.10); --duo-magenta-wash: rgba(255,77,141,.10);
  --duo-heat-1: #E9C8FF; --duo-heat-2: #C79BFF; --duo-heat-3: #AE6BFF; --duo-heat-4: #FF4D8D; --duo-heat-5: #6E1B55;
  --font-family: 'Sora', system-ui, sans-serif;
  --shadow-card: 0 4px 16px rgba(0,0,0,.3);
  --easing: cubic-bezier(.4,0,.2,1);
}

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes glow { 0%,100%{opacity:.3} 50%{opacity:.6} }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--duo-night); color:var(--duo-ink); font-family:var(--font-family); overflow-x:hidden; }
a { color: var(--duo-purple); }
a:hover { color: var(--duo-lilac); }
h1,h2,h3,p { margin:0; }
.section { padding:80px 48px; max-width:1100px; margin:0 auto; }
.eyebrow { display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; }
.center { text-align:center; margin-bottom:48px; }
h2 { font-weight:300; font-size:clamp(26px,4vw,40px); line-height:1.2; letter-spacing:-.5px; }
h2 span { color:var(--duo-lilac); }

/* nav */
.nav { position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; background:rgba(23,12,36,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--duo-ink-outline); }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:-.3px; }
.brand img { width:32px; height:32px; border-radius:8px; }
.nav-links { display:flex; gap:24px; }
.nav-links a { font-size:13px; color:var(--duo-muted); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--duo-ink); }

/* hero */
.hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px;
  padding:80px 48px 48px; max-width:1100px; margin:0 auto; position:relative; }
.glow { position:absolute; pointer-events:none; border-radius:50%; }
.glow.a { top:-10%; left:30%; width:600px; height:600px; background:radial-gradient(circle,rgba(169,92,255,.12),transparent 65%); animation:glow 6s ease-in-out infinite; }
.glow.b { bottom:10%; right:0; width:350px; height:350px; background:radial-gradient(circle,rgba(255,77,141,.08),transparent 60%); }
.hero-text { position:relative; animation:fadeUp .8s ease-out both; }
.hero-text .eyebrow { color:var(--duo-gold); letter-spacing:2px; margin-bottom:16px; }
.hero h1 { font-weight:300; font-size:clamp(36px,5vw,60px); line-height:1.08; letter-spacing:-1.5px; margin-bottom:20px; }
.hero h1 b { font-weight:600; color:var(--duo-lilac); }
.hero h1 i { font-style:normal; color:var(--duo-muted); }
.hero p { font-size:clamp(15px,2vw,18px); line-height:1.6; color:var(--duo-muted); max-width:420px; margin-bottom:32px; }
.spark { display:block; margin-bottom:24px; }
.btn { text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--duo-purple),var(--duo-surface3)); border-radius:14px; color:var(--duo-ink) !important;
  font:600 15px var(--font-family); transition:all .3s; box-shadow:0 0 32px rgba(169,92,255,.3); }
.btn:hover { transform:translateY(-2px); box-shadow:0 0 48px rgba(169,92,255,.5); }

.deck-wrap { display:flex; justify-content:center; animation:fadeUp .8s ease-out .2s both; }
.deck { width:280px; animation:float 6s ease-in-out infinite; position:relative; }
.deck .card { aspect-ratio:3/4; border-radius:28px; padding:40px 28px; text-align:center; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(160deg,var(--duo-surface3),var(--duo-surface)); border:1px solid var(--duo-ink-outline-strong);
  box-shadow:0 20px 50px rgba(169,92,255,.3); position:relative; z-index:2; }
.deck::before,.deck::after { content:""; position:absolute; inset:0; border-radius:28px; border:1px solid var(--duo-ink-outline); background:var(--duo-surface2); }
.deck::before { transform:rotate(-6deg) translate(-10px,6px); opacity:.7; }
.deck::after { transform:rotate(5deg) translate(10px,4px); opacity:.5; }
.deck .card small { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--duo-lilac); margin-bottom:12px; }
.deck .card p { font-weight:300; font-size:19px; line-height:1.4; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step { background:var(--duo-surface); border:1px solid var(--duo-ink-outline); border-radius:20px; padding:28px 24px; transition:border-color .3s; }
.step:hover { border-color:var(--duo-ink-outline-strong); }
.num { width:40px; height:40px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; margin-bottom:16px; }
.step h3 { font-weight:600; font-size:16px; margin-bottom:8px; letter-spacing:-.3px; }
.step p { font-size:13px; line-height:1.6; color:var(--duo-muted); }

/* app mockups */
.phones { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.phone { border-radius:20px; border:1px solid var(--duo-ink-outline); box-shadow:var(--shadow-card); aspect-ratio:9/17; padding:20px 14px;
  background:radial-gradient(120% 60% at 50% 0%,var(--duo-surface3) 0%,var(--duo-surface) 38%,var(--duo-night) 78%);
  display:flex; flex-direction:column; gap:10px; font-size:11px; transition:transform .4s var(--easing); }
.phone:nth-child(even) { margin-top:24px; }
.phone:hover { transform:translateY(-6px); }
.phone .tag { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--duo-lilac); }
.phone h4 { margin:0; font-weight:300; font-size:15px; line-height:1.3; }
.opt { padding:9px 10px; border-radius:10px; border:1px solid var(--duo-ink-outline); background:var(--duo-surface2); }
.opt.on { border-color:var(--duo-purple); background:var(--duo-purple-glow); }
.trail { display:flex; flex-direction:column; gap:18px; align-items:center; margin-top:8px; }
.node { width:34px; height:34px; border-radius:50%; background:var(--duo-surface3); border:1px solid var(--duo-ink-outline); }
.node.done { background:var(--duo-gold); border-color:var(--duo-gold); }
.node.cur { box-shadow:0 0 18px var(--duo-magenta); background:var(--duo-magenta); width:42px; height:42px; }
.node:nth-child(even) { transform:translateX(24px); } .node:nth-child(odd) { transform:translateX(-12px); }
.ans { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ans div { padding:10px; border-radius:10px; background:var(--duo-surface2); border:1px solid var(--duo-ink-outline); }
.ans span { display:block; color:var(--duo-muted); font-size:9px; margin-bottom:4px; }
.world { padding:10px; border-radius:10px; display:flex; justify-content:space-between; color:#170C24; font-weight:500; }

/* 18+ */
.adult { background:var(--duo-surface); border:1px solid var(--duo-ink-outline); border-radius:24px; padding:52px 40px; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.adult::before { content:""; position:absolute; top:-60px; right:-60px; width:300px; height:300px; background:radial-gradient(circle,rgba(110,27,85,.25),transparent 70%); }
.adult > * { position:relative; }
.pill { display:inline-block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--duo-heat-4); background:rgba(110,27,85,.3); padding:3px 10px; border-radius:9999px; margin-bottom:16px; }
.adult h3 { font-weight:300; font-size:clamp(24px,3vw,32px); line-height:1.3; margin-bottom:12px; letter-spacing:-.3px; }
.adult h3 span { color:var(--duo-magenta); }
.adult p { font-size:14px; line-height:1.7; color:var(--duo-muted); }
.adult p strong { color:var(--duo-ink); font-weight:500; }
.heat { display:flex; gap:8px; width:100%; margin:16px 0 8px; }
.heat i { flex:1; height:6px; border-radius:3px; }
.heat-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--duo-muted); }
.small { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--duo-muted); }

/* faq */
.faq { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:900px; margin:0 auto; align-items:start; }
details { background:var(--duo-surface); border:1px solid var(--duo-ink-outline); border-radius:14px; overflow:hidden; }
summary { padding:16px 20px; font-weight:500; font-size:14px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--duo-muted); font-size:18px; }
details[open] summary::after { content:"−"; }
details div { padding:0 20px 16px; font-size:13px; line-height:1.6; color:var(--duo-muted); }

/* notify */
.notify { padding:64px 24px 80px; text-align:center; }
.notify-inner { max-width:500px; margin:0 auto; position:relative; }
.notify-inner::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; height:400px; background:radial-gradient(circle,rgba(169,92,255,.1),transparent 60%); pointer-events:none; }
.notify-inner > * { position:relative; }
.notify h2 { margin:20px 0 12px; font-size:clamp(26px,4vw,36px); }
.notify p { font-size:14px; line-height:1.6; color:var(--duo-muted); margin-bottom:24px; }
.form { display:flex; gap:10px; max-width:400px; margin:0 auto; }
.form input { flex:1; min-width:0; padding:12px 18px; background:var(--duo-surface2); border:1px solid var(--duo-ink-outline); border-radius:14px;
  color:var(--duo-ink); font:400 14px var(--font-family); outline:none; transition:border-color .3s; }
.form input:focus { border-color:var(--duo-purple); }
.form .btn { padding:12px 24px; font-size:14px; white-space:nowrap; }
.msg { margin-top:14px; font-size:13px; color:var(--duo-gold); min-height:18px; }

footer { padding:24px; border-top:1px solid var(--duo-ink-outline); display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--duo-muted); }
footer .brand { font-size:13px; gap:8px; color:var(--duo-ink); } footer .brand img { width:20px; height:20px; border-radius:4px; }

@media (max-width:860px) {
  .nav { padding:12px 16px; } .nav-links { gap:14px; }
  .hero,.section { padding-left:20px; padding-right:20px; }
  .hero { grid-template-columns:1fr; padding-top:96px; gap:40px; text-align:left; }
  .steps,.adult,.faq { grid-template-columns:1fr; }
  .phones { grid-template-columns:repeat(2,1fr); }
  .adult { padding:36px 24px; }
  .form { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }