:root{
  --brand-blue:#1e73e8;
  --brand-dark:#0f172a;
  --brand-text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#ffffff;
  --ring: rgba(30,115,232,.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--brand-text)}
.container{max-width:1120px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;gap:20px}
.nav img{height:42px;width:auto}
.nav .spacer{flex:1}
.nav a.cta{padding:10px 16px;border-radius:10px;background:var(--brand-blue);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 14px -6px var(--ring)}
.nav a.cta:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px var(--ring)}
.hero{padding:48px 24px 8px}
.hero h1{font-size:clamp(28px,4vw,40px);line-height:1.1;margin:12px 0 10px;color:var(--brand-dark)}
.hero p.sub{font-size:clamp(16px,2vw,18px);color:var(--muted);margin:0}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0 8px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px -15px rgba(15,23,42,.25);padding:20px;display:flex;flex-direction:column;gap:14px;transition:transform .15s ease, box-shadow .15s ease;border-top:4px solid transparent}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -18px rgba(15,23,42,.28);border-top-color:var(--brand-blue)}
.card .icon{height:36px;width:36px;color:var(--brand-blue)}
.card h3{margin:0;font-size:20px;color:var(--brand-dark)}
.card p{margin:0;color:var(--muted);font-size:14px}
.card .price{font-weight:700;color:var(--brand-dark);font-size:18px}
.card .actions{margin-top:auto;display:flex;gap:10px;align-items:center}
.button{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:var(--brand-dark);text-decoration:none;font-weight:600}
.button svg{height:18px;width:18px}
.button.primary{background:var(--brand-blue);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px var(--ring)}
.button.primary:hover{transform:translateY(-1px)}
.button.ghost{background:transparent}
.divider{height:1px;background:#e5e7eb;margin:40px 0}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px}
.contact h4{margin:0 0 8px 0}
.footer{padding:28px 24px 48px;color:var(--muted);font-size:14px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--brand-blue);background:rgba(30,115,232,.08);border:1px solid rgba(30,115,232,.18);padding:6px 10px;border-radius:999px;font-weight:600}
@media (max-width:980px){.products{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}}
@media (max-width:640px){.nav img{height:38px}.products{grid-template-columns:1fr}.hero{padding-top:32px}}