/* Lightweight responsive styles for Netlify deployment */
:root{
  --accent: #7ef9ff;
  --accent-2: #7a5cff;
  --bg: #ffffff;
  --muted: #55607a;
  --maxw: 980px;
  --radius: 12px;
  --font-sans: "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-sans);background:var(--bg);color:#0b1220;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:40px auto;padding:28px}
header{display:flex;align-items:center;gap:18px}
.logo{height:64px;width:auto}
.hero{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px;background:#fbfeff;border-radius:var(--radius);padding:22px;box-shadow:0 6px 24px rgba(10,14,30,0.04)}
.banner{width:100%;height:auto;border-radius:10px;overflow:hidden}
h1{font-size:28px;margin:8px 0}
p.lead{color:var(--muted);margin:8px 0 18px}
.meta{display:flex;gap:12px;flex-wrap:wrap}
.price{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.cta{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid rgba(11,18,32,0.06);text-decoration:none;font-weight:700}
footer{margin-top:28px;color:#868e9c;font-size:13px}
@media(min-width:800px){
  .hero{grid-template-columns:1fr 360px;align-items:center}
}
.features{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
@media(min-width:680px){.features{grid-template-columns:repeat(3,1fr)}}
.card{background:white;border-radius:10px;padding:12px;border:1px solid rgba(11,18,32,0.04)}
code{background:#f7fbff;padding:4px 6px;border-radius:6px;font-size:13px}