/* ===== Simplisyt — common.css: shared styles (loaded on every page) ===== */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css") layer(bootstrap);

/* ---------- Figma Variables (colour, spacing, type, radius) ---------- */
:root {
  --action-accent: rgb(0,116,158); /* @kind color */
  --border-default: rgb(226,232,241); /* @kind color */
  --border-strong: rgb(203,213,228); /* @kind color */
  --brand-cyan-bright: rgb(15,169,232); /* @kind color */
  --brand-cyan: rgb(6,182,228); /* @kind color */
  --brand-mint: rgb(1,232,185); /* @kind color */
  --brand-navy-band: rgb(11,59,140); /* @kind color */
  --card-padding-bottom: 30;
  --card-padding-top: 34;
  --card-padding-x: 26;
  --container-gutter: 24;
  --container-max-width: 1400;
  --grid-gap: 18;
  --lg: 14;
  --md: 10;
  --pill: 999;
  --section-padding-y-tight: 64;
  --section-padding-y: 92;
  --size-body-sm: 14.88;
  --size-body: 17;
  --size-eyebrow: 12.64;
  --size-h1: 53.6;
  --size-h2: 38.4;
  --size-h3: 21.92;
  --size-h4: 16.32;
  --size-label: 15.2;
  --size-lede: 17.92;
  --size-stat: 48.96;
  --size-tag: 12.16;
  --sm: 8;
  --space-12: 12;
  --space-16: 16;
  --space-18: 18;
  --space-22: 22;
  --space-24: 24;
  --space-26: 26;
  --space-32: 32;
  --space-34: 34;
  --space-48: 48;
  --space-4: 4;
  --space-8: 8;
  --surface-alt: rgb(247,249,252); /* @kind color */
  --surface-default: rgb(255,255,255); /* @kind color */
  --surface-wash-2: rgb(244,250,253); /* @kind color */
  --surface-wash: rgb(234,245,251); /* @kind color */
  --tag-community-bg: rgb(6,182,228); /* @kind color */
  --tag-qualitative-bg: rgb(26,45,107); /* @kind color */
  --tag-surveys-bg: rgb(10,100,85); /* @kind color */
  --text-body: rgb(74,85,104); /* @kind color */
  --text-ink: rgb(22,32,58); /* @kind color */
  --text-muted: rgb(95,108,133); /* @kind color */
  --text-navy-deep: rgb(19,34,80); /* @kind color */
  --text-navy: rgb(26,45,107); /* @kind color */
  --text-on-dark: rgb(255,255,255); /* @kind color */
  --utility-warn-ink: rgb(107,76,0); /* @kind color */
  --utility-warn-wash: rgb(255,248,229); /* @kind color */
  --utility-warn: rgb(251,192,45); /* @kind color */
}

:root[data-mode="mobile"] {
  --card-padding-bottom: 28;
  --card-padding-top: 30;
  --card-padding-x: 24;
  --container-gutter: 16;
  --container-max-width: 1400;
  --grid-gap: 18;
  --section-padding-y-tight: 44;
  --section-padding-y: 64;
  --size-body-sm: 14.88;
  --size-body: 16;
  --size-eyebrow: 12.64;
  --size-h1: 37.6;
  --size-h2: 29.6;
  --size-h3: 21.92;
  --size-h4: 16.32;
  --size-label: 15.2;
  --size-lede: 17.92;
  --size-stat: 38.4;
  --size-tag: 12.16;
  --space-12: 12;
  --space-16: 16;
  --space-18: 18;
  --space-22: 22;
  --space-24: 24;
  --space-26: 26;
  --space-32: 32;
  --space-34: 34;
  --space-48: 48;
  --space-4: 4;
  --space-8: 8;
}

/* ===== navy #1A2D6B / #003573, cyan #0FA9E8, mint #00F5AD, amber #FBC02D. ===== */
:root{
  --navy:#1A2D6B;
  --navy-deep:#132250;
  --ink:#16203A;
  --body:#4A5568;
  --muted:#5F6C85;   /* 5.3:1 on white */

  --accent:#00749E;          /* action cyan — 5.0:1 on white and on the wash */
  --accent-bright:#0FA9E8;   /* decorative only */
  --accent-wash:#EAF5FB;
  --accent-wash-2:#F4FAFD;

  --surface:#FFFFFF;
  --surface-alt:#F7F9FC;
  --border:#E2E8F1;
  --border-strong:#CBD5E4;

  --warn:#FBC02D;
  --warn-ink:#6B4C00;
  --warn-wash:#FFF8E5;

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --container:1400px;
  --t:.2s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){body{font-size:16px}}
h1,h2,h3,h4{color:var(--ink); margin:0; line-height:1.15; font-weight:600; letter-spacing:-.015em}
h1{font-size:clamp(2.35rem,4.6vw,3.35rem); line-height:1.08}
h2{font-size:clamp(1.85rem,3.2vw,2.4rem)}
h3{font-size:1.2rem; line-height:1.3}
h4{font-size:1.02rem; line-height:1.35}
p{margin:0}
a{color:var(--accent); text-decoration:none; transition:color var(--t)}
a:hover{color:var(--navy)}
img,svg{max-width:100%}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px}
@media (max-width:600px){.container{padding:0 16px}}
.section{padding:92px 0}
.section--tight{padding:64px 0}
@media (max-width:820px){.section{padding:64px 0}.section--tight{padding:44px 0}}
.section--wash{background:var(--surface-alt)}
.section--accent{background:var(--accent-wash-2)}

/* ---------- eyebrow: a tag pill, not a bare uppercase line ---------- */
.eyebrow{
  display:inline-block; padding:5px 13px; border-radius:var(--r-pill);
  background:transparent; color:var(--accent); padding-left:0; padding-right:0;
  font-size:.79rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow--light{background:transparent; color:rgba(255,255,255,.8)}

.section-head{max-width:640px; margin-bottom:48px}
.section-head--center{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{margin-top:16px; font-size:1.06rem}
.lede{font-size:1.12rem; line-height:1.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 25px; border-radius:var(--r-pill); border:1px solid transparent;
  font:inherit; font-size:.97rem; font-weight:600; letter-spacing:.005em;
  cursor:pointer; text-align:center; transition:background-color var(--t),color var(--t),border-color var(--t);
}
.btn--primary{background:var(--navy); color:#fff}
.btn--primary:hover{background:var(--navy-deep); color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--navy); color:var(--navy)}
.btn--on-dark{background:#fff; color:var(--navy)}
.btn--on-dark:hover{background:var(--accent-wash); color:var(--navy)}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.btn-arrow{width:16px; height:13px; flex:none}
.btn--pulse .btn-arrow{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)}}

.link-arrow{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.95rem}
.link-arrow svg{transition:transform var(--t)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.header-inner{
  border:1px solid transparent; border-radius:0; background:transparent;
  transition:background-color .25s ease, border-color .25s ease, border-radius .25s ease, margin .25s ease, padding .25s ease;
}
/* over the hero the bar detaches into a floating pill */
.header[data-float="true"]{background:transparent; border-bottom-color:transparent; backdrop-filter:none}
.header[data-float="true"] .header-inner{
  margin:14px auto 0; padding-left:26px; padding-right:14px;
  background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.55); border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
section{scroll-margin-top:84px}
.header-inner{display:flex; align-items:center; gap:28px; height:68px}
.logo{display:inline-flex; align-items:center; flex:none}
.logo img{height:30px; width:auto; display:block}
.footer-about .logo img{height:30px}
/* visible marker while an asset file is still missing */
img.asset-missing{min-height:64px; padding:18px; border:1px dashed var(--warn); border-radius:var(--r-md); background:var(--warn-wash); font-size:.85rem; color:var(--warn-ink)}
.nav{display:flex; align-items:center; gap:4px; margin-left:8px}
.main-nav-link{
  display:inline-flex; align-items:center; gap:5px; padding:9px 13px; border-radius:var(--r-sm);
  color:var(--ink); font-size:.94rem; font-weight:500; background:none; border:0; font-family:inherit; cursor:pointer;
  transition:background-color var(--t),color var(--t);
}
.main-nav-link:hover{background:var(--surface-alt); color:var(--navy)}
.main-nav-link[aria-expanded="true"]{background:var(--surface-alt); color:var(--navy)}
.main-nav-link svg{transition:transform var(--t)}
.main-nav-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:8px}
.header-login{padding:9px 12px; color:var(--ink); font-size:.94rem; font-weight:500}
.header-login:hover{color:var(--navy)}

.dropdown{position:relative}
.dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:0; width:320px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:10px;
  display:none;
}
.dropdown-panel[data-open="true"]{display:block}
/* the overview sits above the four modules, separated by a rule */
.dropdown-link--wide{border-bottom:1px solid var(--border); border-radius:var(--r-sm) var(--r-sm) 0 0; margin-bottom:6px; padding-bottom:12px}
/* sub-pages sit under their product, indented on a hairline so the hierarchy reads at a glance */
.dropdown-subs{margin:0 0 6px 14px; padding-left:8px; border-left:1px solid var(--border)}
.dropdown-sub{display:block; padding:6px 12px; border-radius:var(--r-sm); color:var(--body); font-size:.88rem; font-weight:400}
.dropdown-sub:hover{background:var(--accent-wash); color:var(--navy)}
.dropdown-link{display:block; padding:10px 12px; border-radius:var(--r-sm); color:var(--ink); font-size:.94rem; font-weight:500}
.dropdown-link:hover{background:var(--accent-wash); color:var(--navy)}
.dropdown-link span{display:block; font-size:.82rem; font-weight:400; color:var(--muted); margin-top:1px}

.burger{display:none; margin-left:auto; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer}

@media (max-width:980px){
  .nav,.header-login{display:none}
  .burger{display:inline-flex}
  .header-actions{margin-left:0; gap:6px}
  .header-actions .btn{padding:10px 15px; font-size:.88rem; white-space:nowrap}
}
@media (max-width:420px){
  .logo img{height:29px}
  .header-inner{gap:10px; height:62px}
  .header-actions .btn{padding:9px 12px; font-size:.83rem}
  .burger{width:38px; height:38px}
}
.mobile-nav{display:none; border-top:1px solid var(--border); background:#fff; padding:12px 0 22px}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav-item{display:block; width:100%; text-align:left; padding:13px 4px; border:0; border-bottom:1px solid var(--border); background:none; font:inherit; font-size:1rem; font-weight:600; color:var(--ink); cursor:pointer}
.mobile-nav-sub{display:none; padding:4px 0 10px}
.mobile-nav-sub[data-open="true"]{display:block}
.mobile-nav-sub a{display:block; padding:9px 4px; font-size:.95rem; color:var(--body); font-weight:500}
.mobile-nav-sub a.mobile-nav-child{padding:7px 4px 7px 18px; font-size:.9rem; font-weight:400; color:var(--muted)}
.mobile-nav-foot{display:flex; flex-direction:column; gap:10px; margin-top:20px}

/* ---------- hero ---------- */
.hero{ padding:150px 0 84px;  background-color:#0B3B8C; background-image: url("../img/hero-bg.png"), linear-gradient(225deg,#9FEFDD 0%,#06B6E4 30%,#17538F 66%,#192E6B 100%);background-size:cover, auto; background-position:center right, center; background-repeat:no-repeat, no-repeat;}
.hero h1{color:#fff}
.hero .eyebrow{color:#fff}
.hero p.lede{color:#EDF5FB}
/* on a dark ground the primary CTA has to be the light one */
.hero .btn--primary{background:#fff; color:var(--navy)}
.hero .btn--primary:hover{background:#E8F4FB; color:var(--navy)}
.hero .btn--ghost{border-color:rgba(255,255,255,.55); color:#fff; background:transparent}
.hero .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.12); color:#fff}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.16fr); gap:56px; align-items:center}
.hero p.lede{margin-top:20px; max-width:30em}
.hero-art{display:flex; justify-content:center}
.hero-art img{width:100%; max-width:690px; height:auto; display:block}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; padding:54px 0}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center}
.trust-num{font-size:clamp(2.4rem,3.4vw,3.3rem); font-variant-numeric:tabular-nums;font-weight:700; letter-spacing:-.03em; line-height:1.05; color:#00749E; background:linear-gradient(120deg,#00749E,#0B9080); -webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent;}
.trust-label{font-size:.95rem; color:var(--muted); margin-top:8px}
@media (max-width:760px){.trust-grid{grid-template-columns:repeat(2,1fr); gap:24px}}

/* ---------- final cta ---------- */
.cta-card{
  border-radius:26px; padding:66px 58px; color:rgba(255,255,255,.82); overflow:hidden;
  background-color:var(--navy);
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/></svg>"),
    radial-gradient(120% 92% at 50% 0%, rgba(6,182,228,.32) 0%, rgba(26,45,107,0) 64%);
  background-size:120px 120px, auto;
  background-blend-mode:overlay, normal;
}
.cta-card h2,.cta-card h3{color:#fff}
.cta-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:64px; align-items:center}
.cta-points{margin-top:28px; display:flex; flex-direction:column; gap:14px}
.grad-word--ink{
  font-style:normal;
  color:#00749E;                                  /* shown when background-clip:text is unsupported */
  background:linear-gradient(90deg,#00749E,#0B8A76);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.grad-word{
  font-style:normal;
  color:#43E0D0;                                  /* shown when background-clip:text is unsupported */
  background:linear-gradient(90deg,#06B6E4,#01E8B9);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tick{
  flex:none; width:23px; height:23px; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.tick svg{width:12px; height:12px}
.cta-points li{display:flex; gap:12px; align-items:center; font-size:1rem}
.form{background:#fff; border-radius:var(--r-lg); padding:32px}
/* .form .btn--primary{background:linear-gradient(135deg,#06B6E4,#01E8B9);color:var(--navy);border-color:transparent;}
.form .btn--primary:hover{background:linear-gradient(135deg,#00A6D6,#00D6A8); color:var(--navy)} */
.form h3{color:var(--ink)}
.form > p{color:var(--body)}
.form-grid{display:flex; flex-direction:column; gap:14px}
.field{position:relative; display:flex; flex-direction:column; gap:6px}
.field input{
  font:inherit; font-size:.97rem; color:var(--ink); padding:23px 14px 8px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:#fff;
  transition:border-color var(--t); width:100%;
}
/* the label lives inside the field and lifts out of the way once there is a value */
.field label{
  position:absolute; left:15px; top:15px; font-size:.97rem; font-weight:400; color:var(--muted);
  pointer-events:none; transition:top .15s ease, font-size .15s ease, color .15s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{top:7px; font-size:.73rem; font-weight:600; color:var(--accent)}
.field input:focus{border-color:var(--accent); outline:none}
.field input[aria-invalid="true"]{border-color:#C0392B}
.field-err{font-size:.82rem; color:#C0392B; display:none}
.field-err[data-show="true"]{display:block}
.form-foot{margin-top:6px}
.form-legal{font-size:.84rem; color:var(--muted); margin-top:14px}
.form-foot .form-legal{color:var(--muted)}
.form-status{padding:14px 16px; border-radius:var(--r-sm); font-size:.93rem; display:none}
.form-status[data-state="ok"]{display:block; background:#EAF7F0; color:#1B5E3F; border:1px solid #BFE3D0}
.form-status[data-state="err"]{display:block; background:#FDECEA; color:#922B21; border:1px solid #F5C6C0}
@media (max-width:980px){.cta-grid{grid-template-columns:1fr; gap:36px}.cta-card{padding:40px 26px; border-radius:20px}}
@media (max-width:600px){.form{padding:24px 20px}}

/* ---------- footer ---------- */
.footer{background:var(--surface-alt); border-top:1px solid var(--border); padding:64px 0 32px}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; margin-bottom:48px}
.footer-about p{margin-top:16px; font-size:.94rem; max-width:32ch}
.footer ul.footer-social{display:flex; flex-direction:row; gap:10px; margin-top:22px}
.footer ul.footer-social a{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--border-strong); color:var(--body); background:transparent;
  transition:color var(--t), border-color var(--t), background-color var(--t);
}
.footer ul.footer-social a:hover{color:var(--navy); border-color:var(--navy); background:#fff}
.footer ul.footer-social svg{width:17px; height:17px}
.footer h4{font-size:.83rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:16px; font-weight:600}
.footer ul{display:flex; flex-direction:column; gap:10px}
.footer ul a{color:var(--body); font-size:.94rem; font-weight:500}
.footer ul a:hover{color:var(--navy)}
.footer-bottom{border-top:1px solid var(--border); padding-top:24px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:.88rem; color:var(--muted)}
@media (max-width:940px){.footer-top{grid-template-columns:repeat(2,1fr); gap:32px}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}


/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}

/* ---------- menu: the page you are on ---------- */
.dropdown-link[aria-current="page"],.dropdown-sub[aria-current="page"]{background:var(--accent-wash); color:var(--navy); font-weight:600}
.mobile-nav-sub a[aria-current="page"]{color:var(--accent); font-weight:600}

/* ---------- synced from Figma (mobile screens): hero buttons span the column ---------- */
@media (max-width:600px){
  .hero .btn-row{flex-direction:column; align-items:stretch}
  .hero .btn-row .btn{width:100%; justify-content:center}
}

/* ---------- menu layout (burger): the demo CTA lives inside the menu, not in the bar ---------- */
@media (max-width:980px){
  .header-actions{display:none}
  .burger{margin-left:auto}
}