:root{--p:#6d28d9;--pd:#4c1d95;--a:#ffc107;--ink:#1e1b3a;--mut:#5b5880;--bg:#f6f3ff;--w:#fff}
*{box-sizing:border-box}body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--p)}img{max-width:100%;height:auto}.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header{background:var(--w);border-bottom:1px solid #e6e0fb;position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--pd);text-decoration:none}.brand img{width:40px;height:40px;border-radius:10px}
nav a{margin-left:16px;text-decoration:none;font-weight:600;color:var(--ink);font-size:15px}nav a:hover,nav a.on{color:var(--p)}
.hero{background:linear-gradient(135deg,#8b6cf7,#5b2fd6);color:#fff;padding:48px 0}.hero .wrap{display:grid;gap:24px;grid-template-columns:1.2fr 1fr;align-items:center}
.hero h1{font-size:38px;line-height:1.2;margin:0 0 12px}.hero p{font-size:18px;margin:0 0 20px;opacity:.95}
.btn{display:inline-block;background:var(--a);color:#3a2600;font-weight:800;padding:13px 24px;border-radius:999px;text-decoration:none}
.btn.alt{background:var(--p);color:#fff}.note{font-size:13px;opacity:.9;margin-top:10px}
section{padding:36px 0}h2{font-size:27px;margin:0 0 6px;color:var(--pd)}.sub{color:var(--mut);margin:0 0 20px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--w);border-radius:18px;padding:18px;box-shadow:0 2px 10px rgba(80,50,160,.07)}.card h3{margin:0 0 6px;font-size:18px}.card p{margin:0;color:var(--mut)}
.shots{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.shots img{width:210px;border-radius:18px;box-shadow:0 4px 16px rgba(60,30,140,.18)}
.steps{counter-reset:s;padding:0;list-style:none;display:grid;gap:12px}.steps li{background:var(--w);border-radius:14px;padding:14px 16px 14px 56px;position:relative}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--p);color:#fff;text-align:center;line-height:30px;font-weight:800}
.page{background:var(--w);border-radius:18px;padding:26px;margin:28px 0}.page h1{margin-top:0;color:var(--pd)}.page h2{font-size:21px;margin-top:26px}
.page li{margin:4px 0}details{background:var(--w);border-radius:12px;padding:12px 16px;margin-bottom:10px}summary{font-weight:700;cursor:pointer}
footer{background:var(--pd);color:#e9e2ff;padding:26px 0;font-size:14px;margin-top:20px}footer a{color:#fff;margin-right:14px}
@media(max-width:720px){.hero .wrap{grid-template-columns:1fr}.hero h1{font-size:30px}nav a{margin:0 12px 0 0}}