:root{
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9; --text:#0f172a; --muted:#475569;
  --line:#dbe4ee; --brand:#2563eb; --brand-dark:#1d4ed8; --brand-soft:#dbeafe; --accent:#0ea5e9;
  --max:1180px; --radius:18px; --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,#f8fafc 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:800}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 10px 22px rgba(37,99,235,.22)}
.nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.nav-links>a,.nav-links>.dropdown>a{color:var(--text);font-weight:600}.nav-links>a.button{color:#ffffff}.nav-links>a.button:hover{color:#ffffff}
.dropdown{position:relative;display:flex;align-items:center}
.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px;
}
.dropdown-toggle{display:flex;align-items:center;gap:7px;height:100%}
.dropdown-menu{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  width:330px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
  display:none;
  z-index:1000;
}
.dropdown.is-open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:11px 12px;border-radius:10px;color:var(--text);font-weight:600}
.dropdown-menu a:hover{background:var(--surface-2);text-decoration:none}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid transparent;background:var(--brand);color:#ffffff;font-weight:800;transition:.18s ease}
.button:hover{text-decoration:none;background:var(--brand-dark);transform:translateY(-1px);color:#ffffff}
.button.secondary{background:white;color:var(--text);border-color:var(--line)}
.hero{padding:74px 0 40px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);font-size:14px;font-weight:800}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card,.card{padding:24px} h1,h2,h3{line-height:1.12;margin:0 0 12px} h1{font-size:clamp(36px,5vw,62px);letter-spacing:-.035em} h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em} h3{font-size:clamp(20px,2.2vw,26px)}
.lead{font-size:clamp(18px,2vw,22px);color:#1e293b;max-width:70ch}.muted{color:var(--muted)} .eyebrow{font-size:14px;font-weight:800;color:var(--brand-dark);margin-bottom:14px}
.section{padding:34px 0}.section-lg{padding:68px 0}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kicker{margin-bottom:12px;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:900;color:var(--brand-dark)}
.solution-card{min-height:250px;display:flex;flex-direction:column;gap:10px}
.solution-icon{width:46px;height:46px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:22px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
ul.clean{padding-left:18px;margin:8px 0 0} li{margin:6px 0}
.thumb{aspect-ratio:16/9;border-radius:14px 14px 0 0;background:linear-gradient(135deg,#eff6ff,#dbeafe 55%,#e0f2fe);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-weight:800;color:#0f172a}
.example{overflow:hidden}.example .body{padding:18px}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#ecfdf5;color:#166534;border:1px solid #bbf7d0;font-size:12px;font-weight:800}
.breadcrumbs{font-size:14px;color:var(--muted);margin:8px 0 16px}.breadcrumbs a{color:var(--muted)}
.callout{padding:18px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe}
.faq details{background:var(--surface);border:1px solid var(--line);padding:16px 18px;border-radius:14px}.faq details+details{margin-top:12px}
summary{cursor:pointer;font-weight:800}
.compare{width:100%;border-collapse:collapse;margin-top:12px}.compare th,.compare td{padding:12px;border:1px solid var(--line);text-align:left;vertical-align:top}.compare th{background:var(--surface-2)}
.form-grid{display:grid;gap:16px}.field label{display:block;margin-bottom:6px;font-weight:700}.field input,.field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #cbd5e1;background:white;color:var(--text);font:inherit}.field textarea{min-height:120px;resize:vertical}
footer{margin-top:40px;border-top:1px solid var(--line);background:#fff;padding:44px 0 62px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:24px}
.small{font-size:14px}.inline-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.option-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:white;cursor:pointer}.option-card input{margin-right:8px}.option-card:hover{border-color:#93c5fd;background:#f8fbff}
.hero-quote{font-size:18px;color:#0f172a;font-weight:700;margin-top:14px}.hero-summary{font-size:16px;color:#334155;margin-top:18px}
@media (max-width:980px){.hero-grid,.split,.grid-4,.grid-3,.grid-2,.footer-grid,.inline-options{grid-template-columns:1fr}.nav{align-items:flex-start;padding:14px 0}}
.brand-logo-img{height:38px;width:auto;display:block}
.testimonial-quote{font-size:18px;line-height:1.55;color:var(--text);font-weight:700;margin:0 0 14px}
.testimonial-meta{font-size:14px;color:var(--muted);margin:0}

.alert { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); display:none; }
.alert.show { display:block; }
.alert-success { background: color-mix(in oklab, #22c55e 18%, transparent); }
.alert-error { background: color-mix(in oklab, #ef4444 18%, transparent); }

.thumb{padding:0;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}


.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.hero-proof span{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.hero-montage{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.hero-montage-card{
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.hero-montage-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 1.15 / 0.88;
}
.section-intro{
  max-width:760px;
}
.audience-grid .panel{
  height:100%;
}
.logo-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.logo-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:13px;
  font-weight:800;
  color:var(--muted);
}
.testimonial-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}


.dropdown-menu{width:360px}
.dropdown-group + .dropdown-group{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dropdown-heading{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:4px 12px 8px;
}


.hero-figure{
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.hero-figure img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 1.08 / 0.95;
}