:root {
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #475569;
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --card: #ffffff;
  --border: #e2e8f0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 10% 10%, #eef2ff, transparent 40%), var(--bg);
}
.container { width: min(1080px, 92%); margin: 0 auto; }
.nav { display:flex; justify-content:space-between; align-items:center; padding: 1rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; }
.brand img { width: 92px; height: auto; }
.brand span { display:block; font-size:.78rem; color:var(--muted); text-transform: lowercase; }
.cta-nav { text-decoration:none; color:white; background: var(--primary); padding:.65rem 1rem; border-radius: 999px; font-weight:700; }
.hero-content { padding: 3.5rem 0 5rem; max-width: 780px; }
.pill { display:inline-block; padding:.35rem .75rem; border:1px solid #c7d2fe; color:#3730a3; border-radius:999px; font-weight:600; font-size:.85rem; }
h1 { font-size: clamp(2rem, 6vw, 3.9rem); line-height:1.05; margin:.8rem 0; }
h1 span { color: var(--primary); }
.hero-content p { color: var(--muted); font-size: 1.1rem; }
.hero-actions { display:flex; gap:1rem; margin-top:1.4rem; flex-wrap:wrap; }
.btn { padding:.8rem 1.2rem; border-radius: .8rem; text-decoration:none; font-weight:700; }
.btn.primary { background:var(--primary); color:#fff; }
.btn.ghost { border:1px solid var(--border); color:var(--text); background:#fff; }

.products { padding: 1rem 0 4rem; }
.section-head h2, .how h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom:.25rem; }
.section-head p { color: var(--muted); }
.product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 1rem; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; box-shadow: 0 12px 25px -20px rgba(15,23,42,.45); }
.tag { background:#ecfeff; color:#0e7490; font-size:.72rem; font-weight:700; border-radius:999px; padding:.2rem .6rem; width:max-content; }
.card h3 { margin:.1rem 0; font-size:1.05rem; }
.card p { color:var(--muted); margin:0; font-size:.92rem; }
.card a { margin-top:auto; text-align:center; background:#111827; color:#fff; text-decoration:none; padding:.6rem; border-radius:.6rem; font-weight:700; }

.how { padding-bottom: 4rem; }
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.9rem; }
.steps article { background:#fff; border:1px solid var(--border); border-radius: .8rem; padding:1rem; }
.steps h3 { margin:.2rem 0; }
.steps p { margin:0; color:var(--muted); }

.footer { border-top:1px solid var(--border); background:#fff; }
.footer-content { display:grid; place-items:center; text-align:center; padding:1.2rem 0 1.8rem; gap:.35rem; }
.footer-content img { width: 92px; }
.footer small { color:var(--muted); }