:root { --qs-primary:#3A7AFE; --qs-dark:#0b1220; --qs-accent:#22c55e; --qs-muted:#738197; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans"; color:#0f172a; display:flex; min-height:100vh; flex-direction:column; }
html { scroll-behavior: smooth; }

/* Nav */
.navbar { backdrop-filter: saturate(180%) blur(8px); }
.navbar.bg-glass { background: rgba(255,255,255,0.8)!important; border-bottom: 1px solid rgba(0,0,0,.06); }

/* Buttons */
.btn-primary { background: var(--qs-primary); border: 0; }
.btn-outline-primary { border-color: var(--qs-primary); color: var(--qs-primary); }
.btn-outline-primary:hover{ background: var(--qs-primary); color:#fff; }

/* Hero */
.hero {
  background: radial-gradient(1200px 800px at 80% -10%, rgba(58,122,254,.25), transparent 60%),
              radial-gradient(800px 600px at -10% 10%, rgba(34,197,94,.18), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  position: relative; overflow: hidden;
}
.hero .glow { position:absolute; inset:-40vh -10vw auto auto; width:60vw; height:60vh; filter: blur(60px);
  background: radial-gradient(circle at 30% 30%, rgba(58,122,254,.2), transparent 60%); pointer-events:none; }

/* Utilities */
.section-title { font-weight:800; letter-spacing:-.02em; }
.lead-xl { font-size: 1.25rem; color: #334155; }
.badge-soft { background: rgba(58,122,254,.1); color: var(--qs-primary); }
.feature-icon { width:3rem; height:3rem; display:grid; place-items:center; border-radius: .75rem; background: #eef2ff; color: var(--qs-primary); }
.img-mask { border-radius: 1rem; box-shadow: 0 24px 60px rgba(2,6,23,.15); }
.card { border: 1px solid rgba(15,23,42,.06); box-shadow: 0 10px 30px rgba(2,6,23,.06); }
.screenshot-slot { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px); border: 2px dashed #cbd5e1; border-radius: .75rem; height: 220px; display:flex; align-items:center; justify-content:center; color:#64748b; font-weight:600; }
.bg-faint { background:#f8fafc; }
.footer-link { color:#64748b; text-decoration:none; }
.footer-link:hover { color:#111827; }
.pricing-badge { position:absolute; top:-12px; right:1rem; }
.gradient-text { background: linear-gradient(90deg, var(--qs-primary), #7c3aed, #06b6d4); -webkit-background-clip:text; background-clip:text; color:transparent; }