:root{
    --primary:#7c3aed;
    --accent:#06b6d4;
    --bg:#ffffff;
    --muted:#6b7280;
    --container:1200px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;color:#0f172a;background:var(--bg);margin:0}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.site-header{padding:1rem 0}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:1.25rem;text-decoration:none;color:inherit}
.nav a{margin:0 0.75rem;text-decoration:none;color:var(--muted)}
.actions{display:flex;align-items:center;gap:0.5rem}
.btn{display:inline-block;padding:0.5rem 1rem;border-radius:8px;text-decoration:none}
.btn.primary{background:var(--primary);color:#fff}
.btn.outline{border:1px solid #e6e6e6}
.mobile-toggle{display:none;background:none;border:0;font-size:1.25rem}
.hero{padding:3.5rem 0}
.grid{display:grid;grid-template-columns:1fr;gap:2rem}
.hero-copy h1{font-size:2.25rem;margin:0}
.lead{color:var(--muted);margin-top:0.75rem}
.hero-art img{width:30%;height:auto;border-radius:16px;background:linear-gradient(135deg,#f5f3ff,#e0f2fe)}
.features{padding:3rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:#fff;border-radius:12px;padding:1rem;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.cta{padding:3rem 0;text-align:center;background:linear-gradient(180deg,#fff,#f8fafc)}
.site-footer{padding:2rem 0;color:var(--muted);border-top:1px solid #eee}
.foot-nav a{margin-left:1rem;color:var(--muted);text-decoration:none}


/* Responsive */
@media(min-width:768px){
    .grid{grid-template-columns:1fr 1fr}
    .mobile-toggle{display:none}
    .nav{display:block}
}
@media(max-width:767px){
    .nav{display:none}
    .mobile-toggle{display:inline-flex}
}