:root{
  --bg:#f7fafc;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#0ea5e9;
  --brand-2:#22c55e;
  --line:#e5e7eb;
  --shadow:0 8px 30px rgba(2,8,23,.08);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

.container{width:100%; max-width:1152px; padding:0 20px; margin:0 auto}

header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}

.navbar{
  display:flex; align-items:start; justify-content:space-between; gap:16px;
  padding:14px 0;
}
.brand{display:flex; align-items:start; gap:12px}
.brand img{width:40px; height:40px}
.brand .title{font-weight:700; letter-spacing:.2px}
.brand .subtitle{font-size:12px; color:var(--muted); margin-top:-4px}

.nav{display:flex; gap:20px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a:hover{color:var(--ink); background:#f1f5f9}

.btn{
  display:inline-block; border:none; cursor:pointer;
  padding:12px 18px; border-radius:12px; font-weight:600;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; box-shadow:var(--shadow); text-decoration:none;
}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.small{padding:10px 14px; font-weight:600; border-radius:10px}

.hero{
  background: radial-gradient(1100px 700px at 80% -10%, rgba(34,197,94,.10), transparent 60%),
              radial-gradient(800px 600px at -10% -10%, rgba(14,165,233,.12), transparent 50%);
  padding:36px 0 24px;
}
.hero .panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start;
}
.hero h1{font-size:44px; line-height:1.15; margin:0 0 10px}
.hero p{color:var(--muted); font-size:18px; margin:0 0 18px}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px;
}

.section{padding:40px 0}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}

.feature li{margin:8px 0;}

.badge{display:inline-block; font-size:12px; padding:6px 10px; background:#ecfeff; color:#0369a1; border-radius:999px; border:1px solid #cffafe}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.plan h3{margin:0 0 6px}
.plan .price{font-size:28px; font-weight:800}
.plan small{color:var(--muted)}

ul.clean{list-style:none; padding-left:14px}
ul.clean li{margin:8px 0}

.footer{
  padding:32px 0; border-top:1px solid var(--line); color:var(--muted);
  font-size:14px; background:#fff;
}

.hamburger{display:none; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.hamburger span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0}

#mobileMenu{display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);}
#mobileMenu a{display:block; padding:14px 20px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none}

.form-card input, .form-card textarea, .form-card select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); outline:none;
}
.form-card input:focus, .form-card textarea:focus{border-color:#94a3b8;}

@media (max-width: 960px){
  .hero .panel{grid-template-columns:1fr; padding:22px}
  .grid-3{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .nav{display:none}
  .hamburger{display:block}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}
a{color:var(--ink); text-decoration:none}
a:hover{color:#0b1220}
.card .icon{width:28px; height:28px; margin-right:8px; vertical-align:-6px}
.illustration{display:block; width:100%; height:auto}
/* Keep CTA button styling inside nav */
.nav a.btn, .nav a.btn:hover{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)) !important;
  color:#fff !important;
  border: none;
}

.card ul.clean{padding-left:16px}
ul.clean li{list-style:none}

.plan{display:flex; flex-direction:column; min-height:100%}
.plan .btn{margin-top:auto}

.card ul{list-style:none; padding-left:16px}