:root{
  --bg:#F2F5FA;           /* muted, soft background (not white) */
  --surface:#FFFFFF;      /* cards */
  --surface-alt:#F8FAFD;  /* subtle alt panels */
  --ink:#0B1220;          /* main text */
  --muted:#5A6575;        /* secondary text */
  --primary:#2563EB;      /* blue */
  --teal:#06B6D4;         /* cyan accent */
  --accent:#10B981;       /* green accent */
  --amber:#F59E0B;        /* highlight */
  --border:#E1E7EE;       /* light borders */
  --shadow:0 6px 16px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;scroll-behavior:smooth}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;background:var(--bg);color:var(--ink);line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{width:42px;height:42px}
.brand-name{font-weight:800;letter-spacing:.3px;color:#334155}
.navlinks{display:flex;gap:.8rem;flex-wrap:wrap}
.navlinks a{padding:.5rem .75rem;border-radius:999px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow)}
.navlinks a.active{border-color:var(--primary);color:var(--primary)}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow);background:#fff;color:var(--ink)}
.btn.primary{background:linear-gradient(135deg,#3B82F6,#06B6D4);border:none;color:#fff}
.hero{background:
  radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.10), transparent 60%),
  radial-gradient(800px 400px at 110% 10%, rgba(6,182,212,.10), transparent 55%);
  padding:4rem 0 2.5rem;border-bottom:1px solid var(--border)
}
.hero h1{font-size:2.35rem;line-height:1.2;margin:.3rem 0 .6rem}
.hero p{color:var(--muted)}
.section{padding:2.75rem 0}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow)}
.grid{display:grid;gap:1.1rem}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .5rem}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.badge{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--border);border-radius:999px;padding:.4rem .65rem;box-shadow:var(--shadow);color:var(--muted)}
.badge img{width:18px;height:18px}
.icon{width:56px;height:56px;flex:0 0 auto}         /* ensure icons never overpower */
.card img.icon{margin-bottom:.5rem}
.notice{color:var(--muted);display:flex;align-items:center;gap:.5rem}
.pricing{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.price-card .price{font-size:2rem;font-weight:800}
.process{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
.step b{color:var(--primary)}
.t-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.form-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.input, input, select, textarea{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.7rem 1rem;color:var(--ink);width:100%;box-shadow:var(--shadow)}
footer{padding:2rem 0;border-top:1px solid var(--border);color:var(--muted)}
/* Responsive: prevent overlap/messiness on small screens */
@media (max-width: 1024px){
  .cols-3{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .cols-3, .cols-2{grid-template-columns:1fr}
  .navlinks{gap:.5rem}
  .brand img{width:36px;height:36px}
  .icon{width:48px;height:48px}
}