/* ============================================================
   Wat kan AI voor mij betekenen — clay design system
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */
:root {
  /* ground — koel en licht */
  --ground:         #F6F9FD;
  --ground-alt:     #ECF2FA;
  --ground-deep:    #E0E9F5;
  --surface:        #FFFFFF;

  /* De klei-renders staan op een warme crème achtergrond. Dit token houdt de
     'contain'-kaders in de kaarten onzichtbaar. Verandert het palet van de
     renders, dan moet deze waarde mee. */
  --render-bg:      #E0ECEC;

  /* ink — koel donkerblauw, nooit puur zwart */
  --ink:            #182534;
  --ink-soft:       #56657A;
  --ink-faint:      #8593A7;

  /* accenten, benoemd naar hun rol */
  --accent:         #2A66E0;   /* primair: knoppen, stap 1, nadruk */
  --accent-lit:     #4A82EE;
  --accent-edge:    #1A4CB4;
  --accent-wash:    #E2EBFD;

  --success:        #199C84;   /* 'na', vinkjes, bevestiging */
  --success-lit:    #2FB79D;
  --success-edge:   #0F7A66;
  --success-wash:   #DBF2ED;

  --highlight:      #6250DC;   /* opbrengst, winst, uitgelicht */
  --highlight-lit:  #7C6BE8;
  --highlight-edge: #4735BC;
  --highlight-wash: #E8E4FD;

  --info:           #0C97CE;   /* vierde accent, markeringen */
  --info-lit:       #2BB0E4;
  --info-edge:      #0A76A4;
  --info-wash:      #DBF0FA;

  /* diepte — lichter dan in het warme thema; zware schaduwen ogen vuil op wit */
  --clay:
    inset 0  2px 0    rgba(255,255,255,.9),
    inset 0 -8px 16px rgba(38, 70, 120,.06),
    0 18px 32px -18px rgba(24, 48, 88,.22),
    0  5px 12px  -7px rgba(24, 48, 88,.10);
  --clay-sm:
    inset 0  2px 0    rgba(255,255,255,.85),
    inset 0 -6px 12px rgba(38, 70, 120,.05),
    0 10px 20px -12px rgba(24, 48, 88,.20),
    0  3px  7px  -5px rgba(24, 48, 88,.09);
  --clay-lift:
    inset 0  2px 0    rgba(255,255,255,.95),
    inset 0 -8px 16px rgba(38, 70, 120,.05),
    0 28px 46px -20px rgba(24, 48, 88,.26),
    0  9px 18px -10px rgba(24, 48, 88,.12);
  --clay-press:
    inset 0  2px 8px  rgba(30, 60, 105,.16),
    inset 0 -2px 0    rgba(255,255,255,.6),
    0  3px  8px -6px  rgba(24, 48, 88,.18);

  --r-sm: 16px;
  --r:    26px;
  --r-lg: 38px;
  --r-xl: 52px;

  --ease: cubic-bezier(.34, 1.4, .5, 1);
}

/* ---- 2. Reset & base ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ground);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* matte clay grain over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; height: auto; display: block; }
.hero__art > svg,
.case__art > svg,
.split > div > svg { width: 100%; height: auto; }
.split > div > img { width: 100%; border-radius: var(--r-lg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-wash); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 10000;
  background: var(--ink);
  color: var(--ground);
  padding: 12px 20px;
  border-radius: var(--r-sm);
}
.skip-link:focus { left: 12px; }

/* ---- 3. Typography --------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
}

h1 { font-size: clamp(2.55rem, 6.4vw, 4.5rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 3.05rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.05rem; }

.lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: 'Fredoka', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.hl {
  background-image: linear-gradient(
    transparent 55%,
    rgba(43, 176, 228, .45) 55%,
    rgba(43, 176, 228, .45) 86%,
    transparent 86%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- 4. Layout ------------------------------------------- */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 820px; }

.section { padding: clamp(76px, 10vw, 130px) 0; position: relative; }
.section--alt { background: var(--ground-alt); }
.section-head { max-width: 700px; margin-bottom: clamp(44px, 6vw, 68px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 18px; }

.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- 5. Clay primitives ---------------------------------- */
.clay {
  background: linear-gradient(163deg, var(--surface) 0%, #EEF3FA 100%);
  border-radius: var(--r-lg);
  box-shadow: var(--clay);
}
.clay--accent { background: linear-gradient(163deg, var(--accent-lit) 0%, var(--accent) 100%); color: #fff; }
.clay--success  { background: linear-gradient(163deg, var(--success-lit)  0%, var(--success)  100%); color: #fff; }
.clay--highlight { background: linear-gradient(163deg, var(--highlight-lit) 0%, var(--highlight) 100%); color: #fff; }
.clay--info   { background: linear-gradient(163deg, var(--info-lit)   0%, var(--info)   100%); color: #fff; }
.clay--accent h2, .clay--accent h3, .clay--success h2, .clay--success h3,
.clay--info h2, .clay--info h3,
.clay--highlight h2, .clay--highlight h3 { color: #fff; }

/* chunky pressable clay button */
.btn {
  --edge: var(--accent-edge);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-lit), var(--accent));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    0 6px 0 var(--edge),
    0 18px 26px -12px rgba(24,48,88,.5);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s ease;
  will-change: transform;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 1px 0 var(--edge),
    0 6px 10px -8px rgba(24,48,88,.4);
}
.btn--success  { --edge: var(--success-edge);  background: linear-gradient(180deg, var(--success-lit), var(--success)); }
.btn--info   { --edge: var(--info-edge);   background: linear-gradient(180deg, var(--info-lit), var(--info)); }
.btn--highlight { --edge: var(--highlight-edge); background: linear-gradient(180deg, var(--highlight-lit), var(--highlight)); }
.btn--ghost {
  --edge: #C3D3E8;
  color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF, #E9F0FA);
}
.btn--sm { font-size: .94rem; padding: 11px 22px; }
/* voor gebruik op de donkere cta: transparant met witte rand */
.btn--outline {
  color: #fff;
  background: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
}
.btn--outline:hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.btn--outline:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn--lg { font-size: 1.12rem; padding: 18px 38px; }
.btn--block { width: 100%; justify-content: center; }

.badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--clay-sm);
}
.badge--success  { background: var(--success-wash);  color: var(--success-edge); }
.badge--accent { background: var(--accent-wash); color: var(--accent-edge); }
.badge--highlight   { background: var(--highlight-wash);   color: var(--highlight-edge); }
.badge--info   { background: var(--info-wash);   color: var(--info-edge); }

/* decorative blobs */
.blob {
  position: absolute;
  border-radius: 62% 38% 47% 53% / 55% 48% 52% 45%;
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* ---- 6. Header ------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 16px 0;
  transition: padding .25s ease;
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ground);
  opacity: 0;
  transition: opacity .25s ease;
  box-shadow: 0 10px 30px -20px rgba(24,48,88,.6);
}
.header.is-stuck { padding: 10px 0; }
.header.is-stuck::before { opacity: .94; backdrop-filter: blur(8px); }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo { display: flex; align-items: center; gap: 11px; }
.logo__mark {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 14px 16px 13px 15px;
  background: linear-gradient(160deg, var(--accent-lit), var(--accent));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 12px -6px rgba(24,48,88,.6);
  display: grid;
  place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
}
.logo__text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.18;
  letter-spacing: -.01em;
}
.logo__text b { display: block; font-weight: 600; }
.logo__text span { color: var(--ink-faint); font-size: .82rem; }

.nav__links { display: flex; align-items: center; gap: 6px; }
/* :not(.btn) — anders overschrijft deze regel de kleur en achtergrond
   van de knop in het menu, die specifieker is dan .btn zelf */
.nav__links a:not(.btn) {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: .96rem;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
}
.nav__links a:not(.btn):hover { background: rgba(255,255,255,.7); color: var(--ink); }
.nav__cta { margin-left: 8px; }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(160deg, var(--surface), #E9F0FA);
  box-shadow: var(--clay-sm);
  cursor: pointer;
  position: relative;
}
.nav__toggle span,
.nav__toggle::before,
.nav__toggle::after {
  content: '';
  position: absolute;
  left: 13px;
  width: 20px; height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s ease;
}
.nav__toggle::before { top: 16px; }
.nav__toggle span    { top: 22px; }
.nav__toggle::after  { top: 28px; }
.nav__toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span    { opacity: 0; }
.nav__toggle[aria-expanded="true"]::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- 7. Hero --------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 84px) 0 clamp(70px, 9vw, 110px);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.hero h1 { margin: 18px 0 22px; }
.hero .lead { max-width: 33ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.hero__note {
  margin-top: 22px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  /* start in plaats van center: de tekst ernaast loopt over twee regels en
     dan zweeft de badge halverwege */
  align-items: flex-start;
  gap: 8px 10px;
}
.hero__note .badge { margin-top: 1px; }
.hero__art { position: relative; }
/* de render heeft een eigen crème achtergrond (#FEEDD1), iets warmer dan de
   pagina; afronden maakt van die rand een keuze in plaats van een naad */

.hero__art img { width: 100%; border-radius: var(--r-xl); }

/* ---- 8. Marquee of pain points --------------------------- */
.strip {
  background: var(--ink);
  color: var(--ground);
  padding: 18px 0;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: slide 38s linear infinite;
}
.strip__track span {
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 44px;
  opacity: .9;
}
.strip__track span::after { content: '●'; font-size: .5rem; color: var(--info-lit); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- 9. Cards -------------------------------------------- */
.card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(163deg, var(--surface) 0%, #EEF3FA 100%);
  box-shadow: var(--clay);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--clay-lift); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-soft); }

/* Kader op de verhouding van de renders zelf (rond 1,4), zodat 'cover' het
   helemaal vult. Met 'contain' bleef er opvulling over, en zodra de
   achtergrond van één render iets afweek zag je die randen meteen. */
.card__media {
  aspect-ratio: 3 / 2;
  background: var(--render-bg);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 28px 30px 34px; }

/* ---- 10. Steps ------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 22px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(163deg, var(--surface) 0%, #EEF3FA 100%);
  box-shadow: var(--clay);
}
.step__num {
  counter-increment: step;
  width: 76px; height: 76px;
  border-radius: 26px 30px 24px 28px;
  display: grid;
  place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(160deg, var(--accent-lit), var(--accent));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), 0 10px 18px -10px rgba(24,48,88,.7);
}
.step__num::before { content: counter(step); }
.step:nth-child(2) .step__num { background: linear-gradient(160deg, var(--highlight-lit), var(--highlight)); }
.step:nth-child(3) .step__num { background: linear-gradient(160deg, var(--success-lit), var(--success)); }
.step:nth-child(4) .step__num { background: linear-gradient(160deg, var(--info-lit), var(--info)); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); max-width: 62ch; }
.step__meta {
  display: inline-block;
  margin-top: 12px;
  font-size: .86rem;
  font-family: 'Fredoka', sans-serif;
  color: var(--ink-faint);
}

/* ---- 11. Cases ------------------------------------------- */
.case {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(163deg, var(--surface) 0%, #EEF3FA 100%);
  box-shadow: var(--clay);
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: stretch;
}
.case + .case { margin-top: 30px; }
.case__art {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--highlight-wash);
}
.case__art img { width: 100%; border-radius: var(--r); }
.case:nth-of-type(2) .case__art { background: var(--success-wash); }
.case:nth-of-type(3) .case__art { background: var(--info-wash); }
.case__body { padding: 36px 38px; }
.case__body h3 { margin: 14px 0 18px; }

.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-top: 8px; }
.ba__col {
  padding: 20px 22px;
  border-radius: var(--r);
  background: var(--ground-alt);
  box-shadow: inset 0 2px 6px rgba(40,72,120,.14);
}
.ba__col--after { background: var(--success-wash); box-shadow: inset 0 2px 6px rgba(15,122,102,.14); }
.ba__label {
  font-family: 'Fredoka', sans-serif;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 10px;
}
.ba__col--after .ba__label { color: var(--success-edge); }
.ba__col p { font-size: .97rem; color: var(--ink-soft); line-height: 1.6; }
.ba__arrow {
  align-self: center;
  width: 54px; height: 54px;
  flex: 0 0 54px;
  border-radius: 20px 22px 18px 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--accent-lit), var(--accent));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 8px 14px -8px rgba(24,48,88,.7);
  color: #fff;
}
.case__win {
  margin-top: 24px;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--highlight-lit), var(--highlight));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 10px 18px -10px rgba(71,53,188,.6);
  color: #fff;
}
.case__win b { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 600; }
.case__win span { font-size: .92rem; }

/* ---- 12. Report / split feature -------------------------- */
.split h2 { margin-bottom: 18px; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.checklist { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
/* Geen grid op de li: dan wordt elk inline-element (<em>, <strong>) een
   eigen gridcel en breekt de zin op. Icoon dus absoluut positioneren. */
.checklist li {
  position: relative;
  padding-left: 42px;
  color: var(--ink-soft);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px; height: 26px;
  border-radius: 10px 11px 9px 10px;
  background: linear-gradient(160deg, var(--success-lit), var(--success));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 9px -5px rgba(15,122,102,.9);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--success-lit), var(--success));
  background-size: 17px 17px, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* ---- 13. Audience ---------------------------------------- */
.aud {
  padding: 32px 30px;
  border-radius: var(--r-lg);
  box-shadow: var(--clay);
}
.aud h3 { margin: 18px 0 10px; }
.aud p { opacity: .95; }
.aud__mark {
  width: 60px; height: 60px;
  border-radius: 20px 23px 19px 21px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5);
}

/* ---- 14. CTA --------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 78px) clamp(30px, 5vw, 70px);
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, #24384F 0%, var(--ink) 100%);
  color: var(--ground);
  text-align: center;
  box-shadow: 0 30px 60px -28px rgba(24,48,88,.45);
}
.cta h2 { color: var(--ground); }
.cta p { color: rgba(236,242,250,.78); margin: 18px auto 0; max-width: 54ch; }
.cta .btn { margin-top: 34px; }
.cta .blob--a { width: 260px; height: 260px; top: -80px; left: -60px; background: var(--accent); opacity: .3; }
.cta .blob--b { width: 220px; height: 220px; bottom: -90px; right: -50px; background: var(--highlight); opacity: .28; }

/* ---- 15. Footer ------------------------------------------ */
.footer {
  background: var(--ground-deep);
  padding: 62px 0 34px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.footer p, .footer a { color: var(--ink-soft); font-size: .96rem; }
.footer a:hover { color: var(--accent); }
.footer h4 {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer__bottom {
  border-top: 2px solid rgba(40,72,120,.16);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: .88rem;
  color: var(--ink-faint);
}
.footer .logo { margin-bottom: 16px; }

/* ---- 16. Forms ------------------------------------------- */
.form-page { padding: clamp(40px, 6vw, 70px) 0 clamp(70px, 9vw, 110px); }
.fieldset {
  border: 0;
  padding: 32px 32px 34px;
  border-radius: var(--r-lg);
  background: linear-gradient(163deg, var(--surface) 0%, #EEF3FA 100%);
  box-shadow: var(--clay);
}
.fieldset + .fieldset { margin-top: 24px; }
.fieldset legend {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.32rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 6px;
  float: left;
  width: 100%;
}
.fieldset > p.hint { clear: both; color: var(--ink-soft); font-size: .96rem; margin-bottom: 22px; }

.field { display: grid; align-content: start; gap: 8px; margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > .field__label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}
.field small { color: var(--ink-faint); font-size: .88rem; line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--ground-alt);
  box-shadow: inset 0 2px 7px rgba(40,72,120,.20), inset 0 -2px 0 rgba(255,255,255,.6);
  transition: box-shadow .2s ease, background .2s ease;
}
.textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 2px 7px rgba(40,72,120,.14), 0 0 0 3px var(--info-wash), 0 0 0 5px var(--info);
}
.select {
  appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356657A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 16 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* pill checkbox / radio group */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: .95rem;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--ground-alt);
  box-shadow: inset 0 2px 6px rgba(40,72,120,.16);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease, color .18s ease;
  user-select: none;
}
.pill span:hover { transform: translateY(-2px); }
.pill input:checked + span {
  background: linear-gradient(180deg, var(--success-lit), var(--success));
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 var(--success-edge), 0 12px 18px -10px rgba(15,122,102,.9);
  transform: translateY(-2px);
}
.pill input:focus-visible + span { outline: 3px solid var(--info); outline-offset: 3px; }

/* single checkbox row */
.check {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  cursor: pointer;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--ground-alt);
  box-shadow: inset 0 2px 6px rgba(40,72,120,.14);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 26px; height: 26px;
  margin-top: 2px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 2px 5px rgba(40,72,120,.24);
  display: grid; place-items: center;
  transition: background .18s ease, box-shadow .18s ease;
}
.check input:checked ~ .check__box {
  background: linear-gradient(160deg, var(--success-lit), var(--success));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 9px -5px rgba(15,122,102,.9);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--success-lit), var(--success));
  background-size: 16px 16px, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.check input:focus-visible ~ .check__box { outline: 3px solid var(--info); outline-offset: 3px; }
.check__text { font-size: .98rem; line-height: 1.55; }
.check__text b { font-family: 'Fredoka', sans-serif; font-weight: 500; display: block; }
.check__text small { color: var(--ink-faint); }

/* running time-saved tally */
.tally {
  position: sticky;
  top: 96px;
  padding: 26px 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(163deg, var(--highlight-lit) 0%, var(--highlight) 100%);
  box-shadow: var(--clay);
  text-align: center;
  color: #fff;
}
.tally__label {
  font-family: 'Fredoka', sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.tally__value {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 8px 0 2px;
}
.tally__unit { font-family: 'Fredoka', sans-serif; font-size: 1rem; }
.tally__note { font-size: .86rem; color: rgba(255,255,255,.82); margin-top: 12px; line-height: 1.5; }

.task-block { position: relative; }
.task-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.task-block__head h3 { font-size: 1.32rem; }
.link-btn {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-size: .92rem;
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
}
.link-btn:hover { background: var(--accent-wash); }

.form-status {
  margin-top: 22px;
  padding: 18px 24px;
  border-radius: var(--r);
  font-size: .98rem;
  display: none;
}
.form-status.is-error   { display: block; background: var(--accent-wash); color: var(--accent-edge); }
.form-status.is-success { display: block; background: var(--success-wash);  color: var(--success-edge); }

.form-layout { display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; }
.form-layout > aside { align-self: stretch; }

/* ---- 17. FAQ --------------------------------------------- */
.faq-item {
  border-radius: var(--r-lg);
  background: linear-gradient(163deg, var(--surface) 0%, #EEF3FA 100%);
  box-shadow: var(--clay);
  overflow: hidden;
}
.faq-item + .faq-item { margin-top: 18px; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--accent-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A4CB4' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-size: 17px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item__body { padding: 0 30px 28px; }
.faq-item__body p + p { margin-top: 14px; }
.faq-item__body p, .faq-item__body li { color: var(--ink-soft); }
.faq-item__body ul { margin: 14px 0 0 20px; display: grid; gap: 8px; }
.faq-cat {
  font-family: 'Fredoka', sans-serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 46px 0 18px;
}
.faq-cat:first-of-type { margin-top: 0; }

/* ---- 18. Page hero (sub pages) --------------------------- */
.page-hero { padding: clamp(40px, 6vw, 76px) 0 clamp(28px, 4vw, 46px); position: relative; overflow: hidden; }
.page-hero h1 { margin: 16px 0 20px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hero .lead { max-width: 60ch; }
.page-hero .blob--1 { width: 340px; height: 340px; top: -140px; right: -110px; background: var(--success-wash); }

/* ---- 19. Reveal ------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .7s var(--ease);
}

/* ---- 20. Responsive -------------------------------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; width: 100%; max-width: 460px; margin: 0 auto; }
  .hero .lead { max-width: 46ch; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .case__art { padding: 30px; }
  .case__art > svg { width: 100%; max-width: 220px; }
  .form-layout { grid-template-columns: 1fr; }
  .tally { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: calc(100% + 14px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--clay-lift);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 16px; }
  .nav__cta { margin: 8px 0 0; justify-content: center; }
}

@media (max-width: 720px) {
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; gap: 14px; }
  .ba__arrow { justify-self: center; transform: rotate(90deg); }
  .field-row { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 16px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .case__body { padding: 30px 26px; }
  .fieldset { padding: 26px 22px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .strip, .cta, .nav__toggle { display: none; }
  body::after { display: none; }
  .clay, .card, .step, .case, .fieldset { box-shadow: none; border: 1px solid #ddd; }
}