:root{--ink:#1a1033;--pink:#ff3d8b;--orange:#ff8a00;--teal:#00c2b8;--violet:#6c3cff;--lime:#b6f500;--bg:#fff8f0}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit}
.nav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;background:rgba(26,16,51,.95);color:#fff}
.brand{font-weight:900;text-decoration:none;font-size:1.15rem}
.brand span{background:linear-gradient(90deg,var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:.4rem .65rem;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:600;transition:background .2s}
.nav ul a:hover,.nav ul a[aria-current]{background:rgba(255,255,255,.18)}
.hero{padding:3rem 1.25rem 3.5rem;color:#fff;text-align:center}
.hero h1{font-size:clamp(2rem,9vw,3.6rem);line-height:1.08;margin:.5rem 0 1rem;font-weight:900}
.hero p{font-size:1.1rem;max-width:36rem;margin:0 auto}
.g-home{background:linear-gradient(135deg,var(--violet),var(--pink) 55%,var(--orange))}
.g-free{background:linear-gradient(135deg,var(--teal),#2b8cff 60%,var(--violet))}
.g-paid{background:linear-gradient(135deg,var(--ink),var(--violet) 50%,var(--pink))}
.tag{display:inline-block;font-weight:900;letter-spacing:.08em;font-size:.8rem;padding:.3rem .75rem;border-radius:999px}
.free{background:var(--lime);color:var(--ink)}
.paid{background:var(--orange);color:var(--ink)}
main{max-width:60rem;margin:0 auto;padding:2rem 1.1rem}
.cards{display:grid;gap:1.25rem}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card{display:block;background:#fff;border-radius:1.25rem;padding:1.5rem;text-decoration:none;box-shadow:0 6px 0 var(--ink);border:3px solid var(--ink);transition:transform .18s,box-shadow .18s}
a.card:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--ink)}
.card h2,.card h3{margin:.6rem 0 .4rem}
.card .more{font-weight:800;color:var(--violet)}
.c1{border-top:10px solid var(--teal)}.c2{border-top:10px solid var(--pink)}.c3{border-top:10px solid var(--orange)}.c4{border-top:10px solid var(--violet)}
.btn{display:inline-block;margin-top:1.5rem;padding:1rem 1.6rem;border-radius:999px;font-weight:900;font-size:1.1rem;text-decoration:none;background:var(--lime);color:var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.btn small{display:block;font-size:.75rem;font-weight:700}
.btn.hot{background:var(--orange)}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:.25rem 0 1rem 3rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--pink),var(--orange))}
.band{background:var(--ink);color:#fff;border-radius:1.25rem;padding:1.5rem;margin:2rem 0}
.band h2{margin-top:0}
footer{text-align:center;padding:2rem 1rem;font-size:.9rem;background:var(--ink);color:#d9d2ff}
footer a{color:var(--lime)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}a.card:hover,.btn:hover{transform:none}}