:root{
  --bg:#1a1033; --bg2:#2a1a4f; --card:#241544; --accent:#b388ff; --accent2:#ff9edb;
  --gold:#ffd98a; --text:#f3eefc; --muted:#b9a9d6; --line:#3a2a5f;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 50% -10%,var(--bg2),var(--bg));
  color:var(--text);line-height:1.65}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
header.site{background:rgba(26,16,51,.72);border-bottom:1px solid var(--line);
  position:sticky;top:0;backdrop-filter:blur(10px);z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-weight:700;font-size:1.15rem;color:#fff;text-decoration:none;
  text-shadow:0 0 18px rgba(179,136,255,.5)}
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:.92rem}
nav a:hover{color:#fff}
.hero{padding:54px 0 36px;text-align:center;position:relative}
.hero-img{margin:0 auto 8px}
.hero-img img{border-radius:24px;box-shadow:0 20px 70px rgba(179,136,255,.35);
  max-width:440px;width:100%;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero h1{font-size:2.7rem;margin:10px 0 14px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(255,158,219,.25)}
.lead{max-width:620px;margin:0 auto 26px;color:var(--muted);font-size:1.12rem}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{padding:13px 28px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;
  transition:transform .15s ease,box-shadow .15s ease}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#1a1033;
  box-shadow:0 10px 30px rgba(179,136,255,.45)}
.btn.ghost{border:1px solid var(--line);color:var(--text)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,158,219,.4)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:28px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(179,136,255,.3)}
.card .ico{font-size:2rem;margin-bottom:8px}
.card h3{margin:0 0 10px;color:#fff}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card a{color:var(--gold);text-decoration:none}
.how{padding:28px 0 50px}
.how h2{color:#fff;text-align:center}
.how ol{color:var(--muted);max-width:640px;margin:0 auto;padding-left:20px}
.how li{margin-bottom:10px}
.how strong{color:#fff}
.sparkles{text-align:center;font-size:1.4rem;color:var(--gold);letter-spacing:.6em;
  margin:10px 0 40px;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:1}}
footer.site{background:rgba(26,16,51,.72);border-top:1px solid var(--line);padding:26px 0;margin-top:30px}
footer.site p{margin:4px 0;color:var(--muted);text-align:center}
footer.site .small a{color:var(--accent)}
@media(max-width:560px){.hero h1{font-size:2rem}.lead{font-size:1rem}}