:root{
  --gold:#FCD100; --crimson:#FF3B5C; --bg0:#0b0610; --bg1:#0a0414;
  --card:#171122; --line:rgba(252,209,0,.16); --text:#ECE9F2; --muted:#9b93a8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--text); line-height:1.6; background:
    radial-gradient(120% 60% at 15% 0%, rgba(255,176,48,.10), transparent 45%),
    radial-gradient(130% 70% at 50% 110%, rgba(150,28,84,.34), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  background-attachment:fixed; min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}

/* nav */
.nav{display:flex;align-items:center;gap:12px;padding:20px 0}
.nav img{width:40px;height:40px;border-radius:10px}
.nav .brand{font-weight:800;color:var(--gold);font-size:18px}
.nav .spacer{flex:1}
.nav a{color:var(--text);font-size:14px;font-weight:600;margin-left:18px}

/* hero */
.hero{text-align:center;padding:46px 0 30px}
.hero .logo{width:120px;height:120px;border-radius:28px;box-shadow:0 0 50px rgba(252,209,0,.25);margin-bottom:18px}
.hero h1{font-size:clamp(34px,7vw,58px);font-weight:800;color:var(--gold);letter-spacing:-1px;line-height:1.05}
.hero .tag{font-size:clamp(16px,3.4vw,22px);margin-top:14px;color:var(--text)}
.hero .sub{color:var(--muted);margin-top:8px;max-width:560px;margin-left:auto;margin-right:auto}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--crimson);color:#fff;font-weight:800;
  padding:15px 30px;border-radius:16px;margin-top:26px;font-size:17px;box-shadow:0 12px 34px rgba(255,59,92,.35)}
.cta:hover{text-decoration:none;filter:brightness(1.06)}
.note{color:var(--muted);font-size:13px;margin-top:12px}

/* features */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card .ic{font-size:30px}
.card h3{margin:10px 0 6px;font-size:18px}
.card p{color:var(--muted);font-size:15px}

/* sections */
section{padding:36px 0}
h2{font-size:clamp(24px,4.5vw,34px);font-weight:800;text-align:center;margin-bottom:6px}
.lead{text-align:center;color:var(--muted);margin-bottom:18px}

/* shots */
.shots{display:flex;gap:18px;overflow-x:auto;padding:14px 2px 22px;scroll-snap-type:x mandatory}
.shots img{width:240px;flex:0 0 auto;border-radius:26px;border:3px solid rgba(252,209,0,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.5);scroll-snap-align:center;background:#000}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;
  width:34px;height:34px;background:var(--gold);color:#1a1320;border-radius:50%;display:grid;place-items:center;font-weight:800}
.step h3{margin:8px 0 6px}
.step p{color:var(--muted);font-size:15px}

/* footer */
footer{border-top:1px solid var(--line);margin-top:30px;padding:28px 0 50px;text-align:center;color:var(--muted);font-size:14px}
footer a{margin:0 10px}

/* legal pages */
.doc{max-width:760px;margin:0 auto;padding:30px 0 60px}
.doc h1{color:var(--gold);font-size:32px;margin-bottom:6px}
.doc h2{text-align:left;font-size:21px;margin:26px 0 8px}
.doc p,.doc li{color:#d8d3e0;margin:8px 0}
.doc ul{padding-left:22px}
.back{display:inline-block;margin:18px 0;color:var(--muted)}