:root{
  --color-primary: #7728bd;
  --color-secondary: #d147cc;
  --color-accent: #263ed8;
  --color-bg: #f9f8fa;
  --color-text: #222222;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}
a{color:var(--color-primary);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:fixed;top:0;left:0;right:0;height:68px;background:rgba(255,255,255,0.98);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,0.04);display:flex;align-items:center;z-index:50}
.header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:44}
.nav{display:flex;gap:18px;align-items:center}
.cta-btn{background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));color:white;padding:10px 16px;border-radius:8px;border:0;cursor:pointer}
.hero{padding-top:120px;padding-bottom:60px;display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:32px 0}
.card{background:white;border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.footer{padding:40px 0;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);margin-top:40px}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;}
  .nav{display:none}
}