:root{
  --bg:#FFFFFF;
  --panel:#FFFFFF;
  --border:#E6EAF0;
  --text:#0B1220;
  --muted:#5B6472;
  --accent:#1FA1F2;   /* logo blue */
  --accent-2:#7CCBFA; /* lighter blue */
}

/* Base */
*{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,Arial,sans-serif;line-height:1.55;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Buttons */
a.button{display:inline-block;padding:14px 18px;border-radius:14px;background:var(--accent);font-weight:700;color:#fff;border:1px solid transparent;min-height:48px}
a.button:hover{filter:brightness(1.05)}
a.button.secondary{background:var(--accent-2)}
a.button.outline{background:#fff;border:1px solid var(--accent);color:var(--accent)}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:24px}

/* Header */
.header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; background:var(--bg);
  border-bottom:1px solid var(--border)
}
.header .logo{display:flex;align-items:center;gap:12px}
.header .logo img{height:56px} /* adjust if needed */
.desktop-ctas{display:flex;align-items:center;gap:16px}
.desktop-ctas .link{color:var(--muted)}

/* Hero & cards */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;padding:40px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#F6F8FB;border:1px solid var(--border);color:var(--muted);font-size:12px;margin-bottom:10px}
h1{font-size:40px;line-height:1.12;margin:8px 0 12px}
h2{font-size:28px;margin:10px 0 12px}
h3{font-size:20px;margin:8px 0}
p.lead{color:var(--muted);font-size:18px;margin:0 0 18px}

/* Feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid .feature{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.kpis .kpi{background:#F7FAFF;border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center;color:var(--muted)}

/* Footer */
.footer{padding:28px 0;color:var(--muted);font-size:14px;border-top:1px solid var(--border);margin-top:30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.small{font-size:12px;color:var(--muted)}

/* FAQ */
.faq{margin-top:30px}
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}

/* Mobile sticky bar (hidden on desktop) */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  display:none; gap:10px; align-items:center;
  background:var(--bg); border-top:1px solid var(--border);
  padding:12px 16px; box-shadow:0 -6px 24px rgba(0,0,0,.08)
}
.mobile-cta-bar .button{flex:1; text-align:center}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 900px){
  .container{padding:16px}
  .header .logo img{height:48px}
  .desktop-ctas{display:none}             /* hide header CTAs on mobile */
  .mobile-cta-bar{display:flex}          /* show sticky bar */
  body{padding-bottom:76px}              /* space so bar doesn't cover content */

  .hero{grid-template-columns:1fr; gap:16px; padding:20px 0}
  h1{font-size:clamp(26px,6vw,34px)}
  p.lead{font-size:16px}

  .kpis{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .grid .feature{padding:14px}

  .cta{gap:10px}
  .cta .button{width:100%}               /* full-width CTAs */
}

@media (max-width: 520px){
  .kpis{grid-template-columns:1fr}
}