*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--gold);color:var(--bg);font-family:var(--font-body);font-weight:600;font-size:16px;border-radius:0 0 12px 12px;z-index:10000;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

:root{
  --bg:#131313;
  --surface:#1c1b1b;
  --surface-high:#2a2a2a;
  --gold:#e9c176;
  --gold-dim:#593f00;
  --text:#e5e2e1;
  --text-muted:#cbc4ce;
  --emerald:#a2d1b5;
  --purple:#d1bfe9;
  --font-head:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6;overflow-x:hidden}

/* particle overlay — matches TV app effect */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:var(--text);will-change:transform,opacity;animation:drift var(--drift-dur,20s) var(--drift-delay,0s) ease-in-out infinite alternate}
.particle.glowing{background:var(--gold);box-shadow:0 0 var(--glow-spread,6px) var(--glow-spread,6px) rgba(233,193,118,.4);animation:drift var(--drift-dur,20s) var(--drift-delay,0s) ease-in-out infinite alternate,glow var(--glow-dur,3s) var(--glow-delay,0s) ease-in-out infinite alternate}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 70% at 50% 30%,rgba(233,193,118,.02),transparent)}

@keyframes drift{
  0%{transform:translate(0,0)}
  25%{transform:translate(var(--dx1,10px),var(--dy1,-15px))}
  50%{transform:translate(var(--dx2,-8px),var(--dy2,12px))}
  75%{transform:translate(var(--dx3,14px),var(--dy3,8px))}
  100%{transform:translate(var(--dx4,-12px),var(--dy4,-10px))}
}

@keyframes glow{
  0%{opacity:var(--glow-lo,.15);box-shadow:0 0 2px 2px rgba(233,193,118,.1)}
  100%{opacity:var(--glow-hi,.7);box-shadow:0 0 var(--glow-spread,6px) var(--glow-spread,6px) rgba(233,193,118,.5)}
}

/* nav */
nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);background:rgba(19,19,19,.8);border-bottom:1px solid var(--surface-high)}
.nav-inner{max-width:960px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:center}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:72px;width:auto}
.nav-link{color:var(--text-muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav-link:hover{color:var(--gold)}

/* hero */
.hero{max-width:960px;margin:0 auto;padding:120px 24px 80px;text-align:center}
.hero-badge{display:inline-block;padding:6px 16px;border-radius:100px;background:var(--gold-dim);color:var(--gold);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:24px}
.hero h1{font-family:var(--font-head);font-size:clamp(40px,8vw,72px);font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:24px}
.hero-sub{max-width:540px;margin:0 auto 40px;font-size:18px;color:var(--text-muted);line-height:1.7}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* buttons */
.btn-primary{display:inline-block;padding:14px 32px;background:var(--gold);color:var(--bg);font-family:var(--font-body);font-size:16px;font-weight:600;border-radius:12px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(233,193,118,.2)}
.btn-secondary{display:inline-block;padding:14px 32px;background:var(--surface-high);color:var(--text);font-family:var(--font-body);font-size:16px;font-weight:600;border-radius:12px;text-decoration:none;transition:transform .15s}
.btn-secondary:hover{transform:translateY(-2px)}

/* how it works */
.how{max-width:960px;margin:0 auto;padding:80px 24px}
.how h2{font-family:var(--font-head);font-size:32px;font-weight:800;text-align:center;margin-bottom:48px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;list-style:none}
.step{background:var(--surface);border:1px solid var(--surface-high);border-radius:16px;padding:32px;text-align:center}
.step-num{width:40px;height:40px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold-dim);color:var(--gold);font-family:var(--font-head);font-weight:800;font-size:18px}
.step h3{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:8px}
.step p{font-size:15px;color:var(--text-muted)}

/* features */
.features{max-width:960px;margin:0 auto;padding:80px 24px}
.features h2{font-family:var(--font-head);font-size:32px;font-weight:800;text-align:center;margin-bottom:48px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.feature{background:var(--surface);border:1px solid var(--surface-high);border-radius:16px;padding:28px;text-align:center}
.feature-icon{font-size:32px;margin-bottom:12px;color:var(--gold)}
.feature h3{font-family:var(--font-head);font-size:18px;font-weight:700;margin-bottom:8px}
.feature p{font-size:14px;color:var(--text-muted);line-height:1.6}

/* cta */
.cta{max-width:960px;margin:0 auto;padding:80px 24px;text-align:center}
.cta h2{font-family:var(--font-head);font-size:32px;font-weight:800;margin-bottom:12px}
.cta p{color:var(--text-muted);font-size:18px;margin-bottom:32px}

/* footer */
footer{max-width:960px;margin:0 auto;padding:40px 24px;border-top:1px solid var(--surface-high);text-align:center;font-size:14px;color:var(--text-muted)}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{text-decoration:underline}