:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --primary:#111827;
  --accent:#2563eb;      /* blue */
  --accent-2:#0ea5e9;    /* sky */
  --accent-3:#f43f5e;    /* rose */
  --ring:#e5e7eb;
  --hero-bg:linear-gradient(180deg, rgba(37,99,235,0.06), rgba(255,255,255,0));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:14px 22px;border-radius:14px;border:1px solid var(--ring);font-weight:600;transition:.2s transform ease,.2s box-shadow ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,0.12)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.ghost{background:#fff;color:var(--accent);border-color:rgba(37,99,235,0.4)}
.header{position:sticky;top:0;background:rgba(255,255,255,0.8);backdrop-filter:saturate(180%) blur(8px);z-index:50;border-bottom:1px solid #f1f5f9}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px}
.hero{padding:96px 0 48px;border-bottom:1px solid #f1f5f9;background:var(--hero-bg)}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 16px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 28px}
.badge{display:inline-block;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.25);color:#0369a1;padding:6px 10px;border-radius:999px;font-size:12px}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;opacity:.9}
.section{padding:72px 0;border-bottom:1px solid #f1f5f9}
.section h2{font-size:34px;margin:0 0 10px}
.section p.lead{color:var(--muted);margin:0 0 28px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{border:1px solid #e5e7eb;border-radius:18px;padding:24px;background:#fff}
.card h3{margin:0 0 10px}
.badge.alt{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.25);color:#9f1239}
.check{margin-right:8px}
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.price{font-size:42px;font-weight:800;margin:10px 0;color:var(--accent)}
.features li{display:flex;align-items:flex-start;gap:8px;margin:8px 0;color:#334155}
.cta{padding:60px;border:2px dashed #e2e8f0;border-radius:20px;text-align:center;background:linear-gradient(180deg, rgba(14,165,233,.06),rgba(255,255,255,0))}
.faq{max-width:880px;margin:0 auto}
.faq details{border:1px solid #e5e7eb;border-radius:14px;padding:16px 18px;margin:10px 0;background:#fff}
.footer{padding:36px 0;color:#64748b;background:linear-gradient(180deg, rgba(37,99,235,.05), rgba(255,255,255,0))}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.small{font-size:12px;color:#94a3b8}
@media (max-width: 960px){
  .grid-3,.pricing,.logos,.footer .cols{grid-template-columns:1fr}
  .hero{padding:64px 0 32px}
  .hero h1{font-size:36px}
}

/* ---- Mobile polish ---- */
@media (max-width: 640px){
  .container{padding:0 14px}
  .hero{padding:48px 0 24px}
  .hero h1{font-size:28px; line-height:1.15}
  .hero p{font-size:15px}
  .btn{width:100%; text-align:center; padding:12px 16px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .section{padding:48px 0}
  .grid-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .card{padding:18px; border-radius:16px}
  img{max-width:100%; height:auto}
  .nav{height:auto; padding:10px 0}
  .brand{font-size:16px}
  .mobile-only{display:block !important}
  .desktop-only{display:none !important}
}
/* default hidden */
.mobile-only{display:none}


/* ===== New header style (inspired by reference) ===== */
.header--custom{background:#fff;border-bottom:1px solid #f1f5f9}
.header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:80px}
.brand-left{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-mark{width:22px;height:22px;border:2px solid #111827;border-radius:6px;display:inline-block}
.brand-text{font-size:18px}
.center-nav{display:flex;gap:34px;align-items:center;justify-content:center;position:relative}
.center-nav .nav-link{font-weight:700}
.center-nav .nav-link:hover{opacity:.7}
.center-nav .nav-indicator{position:absolute;left:calc(50% - 4px);bottom:-8px;color:#111827;font-size:20px}
.header-right{display:flex;justify-content:flex-end}
.toggle{width:44px;height:26px;border-radius:22px;border:2px solid #111827;background:#fff;display:flex;align-items:center;justify-content:flex-start;padding:2px}
.toggle .toggle-dot{width:18px;height:18px;border-radius:50%;background:#111827;display:block;transition:transform .2s ease}
.toggle.active .toggle-dot{transform:translateX(18px)}
/* Mobile */
@media (max-width: 960px){
  .header-row{grid-template-columns:1fr auto;grid-auto-rows:auto;height:auto;padding:10px 0}
  .center-nav{display:none}
  .toggle{width:40px;height:24px}
}


/* --- Screenshot-accurate header tweaks --- */
.center-nav{gap:40px}
.center-nav .nav-link{font-weight:800;font-size:20px}
.center-nav .nav-link.active{position:relative}
.center-nav.center-nav--dot .nav-sep{
  display:inline-block;
  font-size:28px;
  transform:translateY(6px);
  margin:0 8px;
}
.brand-text{font-size:20px;font-weight:800}
.header-row{height:88px}
@media (max-width: 960px){
  .center-nav{display:none}
}


@media (max-width: 960px){
  .hero .container{grid-template-columns:1fr !important}
  .hero h1{font-size:34px !important}
}


/* ===== Hero 'foot 2' style ===== */
.hero--foot2{
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(255,255,255,0));
  padding: 72px 0 40px;
  border-bottom: 1px solid #eef2f7;
}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.hero-left h1{font-size:56px;line-height:1.06;margin:12px 0;color:#0f172a}
.hero-left .lead{color:#475569;font-size:18px;max-width:720px;margin:0 0 18px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.hero-pills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:14px}
.pill{background:#fff;border:1px solid #e6eaf0;border-radius:18px;padding:16px 20px;text-align:center;color:#0f172a;box-shadow:0 1px 0 rgba(9,30,66,.03)}
@media (max-width: 1100px){ .hero-grid{grid-template-columns:1fr} .hero-left h1{font-size:42px} .hero-pills{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 640px){ .hero-left h1{font-size:32px} .pill{padding:14px} }