/* Direction: modern vibrant SaaS — clean white, deep navy ink, electric indigo + lime energy */
:root{
  --color-background:#F7F8FF;
  --color-surface:#FFFFFF;
  --color-surface-2:#EEF1FF;
  --color-text:#101331;
  --color-text-secondary:#3E426E;
  --color-muted:#4B5078;
  --color-border:#E2E5F5;
  --color-primary:#3B49E8;
  --color-primary-dark:#2630B8;
  --color-primary-ink:#FFFFFF;
  --color-accent:#C6F135;
  --color-accent-ink:#101331;
  --color-success:#0E9F6E;
  --color-warning:#FF8A00;
  --color-danger:#E02424;
  --color-navy:#13164A;
  --font-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;
  --shadow-soft:0 12px 32px rgba(16,19,49,.10),0 2px 8px rgba(16,19,49,.06);
  --shadow-card:0 8px 24px rgba(59,73,232,.12);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.02em;margin:0 0 .6em;color:var(--color-text)}
h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em;color:var(--color-text-secondary)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:84px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:8px 14px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary-dark)}
.eyebrow i{width:16px;height:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:14px;font-weight:800;font-size:1rem;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 10px 24px rgba(59,73,232,.34)}
.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-1px)}
.btn-accent{background:var(--color-accent);color:var(--color-accent-ink)}
.btn-accent:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.btn-ghost{background:#fff;border-color:var(--color-border);color:var(--color-text)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.muted{color:var(--color-muted)}
.small{font-size:.9rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr} section{padding:60px 0}}
@media(max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr} body{font-size:16px}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
.hero-pattern{background:radial-gradient(800px 400px at 20% 0%,rgba(59,73,232,.16),transparent),radial-gradient(700px 380px at 90% 10%,rgba(198,241,53,.35),transparent),linear-gradient(#F7F8FF,#fff)}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#101331;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:7px 12px;font-size:.85rem;font-weight:600}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
input::placeholder{color:#4B5078;opacity:1}
div[style*="navy"] h3,div[style*="navy"] p,div[style*="navy"] strong,div[style*="navy"] small,div[style*="navy"] s,div[style*="navy"] li,section[style*="navy"] h2,section[style*="navy"] p{color:#FFFFFF!important}
div[style*="navy"] .chip{background:#FFFFFF!important;color:#101331!important}
div[style*="navy"] .chip *,section[style*="navy"] .card{color:#101331!important}
section[style*="navy"] .card p,section[style*="navy"] .card input{color:#101331!important}
.dot{width:8px;height:8px;border-radius:50%;background:var(--color-success);display:inline-block}
.marquee{display:flex;gap:14px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:14px;animation:scroll 26s linear infinite;min-width:max-content}
@keyframes scroll{to{transform:translateX(-50%)}}
.faq-item{border:1px solid var(--color-border);border-radius:16px;background:#fff;overflow:hidden}
.faq-item button{width:100%;text-align:left;background:none;border:0;padding:18px 20px;font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--color-text)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-answer{max-height:320px}
.tick{color:var(--color-success);flex-shrink:0}