:root {
  /* Colour */
  --color-navy:#1B3A6B; --color-navy-light:#4A6FA5; --color-navy-darker:#142C52;
  --color-link:#6B8FC9; --color-violet:#7B68EE; --color-white:#FFFFFF;
  --color-surface:#F5F5F5; --color-surface-2:#ECEFF3; --color-border:#D0D5DD;
  --dot-red:#FF272B; --dot-green:#24AD39; --dot-yellow:#FFBE1C; --logo-blue:#0084FE;
  --bg:var(--color-white); --bg-alt:var(--color-surface); --bg-dark:var(--color-navy);
  --text:#555F6E; --text-strong:var(--color-navy); --text-muted:#8A93A2; --text-invert:var(--color-white);
  --border:var(--color-border); --accent:var(--color-navy);
  --navy-soft:#EAF0F9; --violet-soft:#EEEBFE; --success:#24AD39;
  /* Type */
  --font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.5rem,1.6rem + 3.6vw,3.5rem);
  --fs-h1:clamp(2rem,1.5rem + 2vw,2.75rem);
  --fs-h2:clamp(1.6rem,1.25rem + 1.4vw,2.5rem);
  --fs-h3:clamp(1.35rem,1.2rem + 0.5vw,1.75rem);
  --fs-h4:1.375rem; --fs-lead:1.25rem; --fs-base:1rem; --fs-sm:.875rem; --fs-xs:.8125rem;
  --lh-tight:1.1; --lh-heading:1.2; --lh-snug:1.4; --lh-body:1.6;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.12em;
  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:3rem; --space-6:5rem; --space-7:7.5rem;
  --section-py:clamp(4rem,2.5rem + 5vw,7.5rem);
  --container-max:1160px; --container-narrow:760px; --container-pad:clamp(1.25rem,.5rem + 3vw,2.5rem);
  /* Radii */
  --radius-nav:6px; --radius-btn:8px; --radius-card:12px; --radius-pill:999px;
  /* Shadows */
  --shadow-sm:0 1px 2px rgba(27,58,107,.06); --shadow-card:0 8px 24px rgba(27,58,107,.08);
  --shadow-lg:0 16px 40px rgba(27,58,107,.12); --shadow-btn:0 4px 12px rgba(27,58,107,.18);
  /* Motion */
  --ease:cubic-bezier(0.22,1,0.36,1); --dur-fast:140ms; --dur:220ms; --dur-slow:380ms;
}
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-body);
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img, svg, video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; padding:0; }
h1, h2, h3, h4 { font-family:var(--font-display); line-height:var(--lh-heading); color:var(--text-strong); text-wrap:balance; }
@media (prefers-reduced-motion:reduce) {
*, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.container { width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }
.container--narrow { max-width:var(--container-narrow); }
.section { padding-block:var(--section-py); }
.section--alt { background:var(--bg-alt); }
.section--dark { background:var(--bg-dark); color:var(--text-invert); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color:var(--text-invert); }
.section--navy-deep { background:var(--color-navy-darker); color:var(--text-invert); }
.section--navy-deep h1, .section--navy-deep h2, .section--navy-deep h3 { color:var(--text-invert); }
.eyebrow { display:inline-block; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--color-navy-light); }
.section--dark .eyebrow, .section--navy-deep .eyebrow { color:#9DB6DC; }
.lead { font-size:var(--fs-lead); line-height:var(--lh-snug); font-weight:var(--fw-regular); }
.muted { color:var(--text-muted); }
.center { text-align:center; }
.mx-auto { margin-inline:auto; }
.section-head { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); max-width:56ch; }
.section-head--center { align-items:center; text-align:center; margin-inline:auto; }
.section-head__title { font-size:var(--fs-h2); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); }
.dots { display:inline-flex; gap:8px; }
.dots span { width:11px; height:11px; border-radius:var(--radius-pill); display:block; }
.dots span:nth-child(1) { background:var(--dot-red); }
.dots span:nth-child(2) { background:var(--dot-green); }
.dots span:nth-child(3) { background:var(--dot-yellow); }
.dots span { animation:tws-dot-hop 1.3s cubic-bezier(.34,1.56,.64,1) infinite; }
.dots span:nth-child(2) { animation-delay:.15s; }
.dots span:nth-child(3) { animation-delay:.3s; }
@keyframes tws-dot-hop { 0%,60%,100%{ transform:translateY(0); } 30%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce) {
.dots span { animation:none; }
}
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-base); line-height:1; letter-spacing:var(--ls-normal); padding:.875rem var(--space-4); border-radius:var(--radius-btn); border:1px solid transparent; cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.btn--primary { background:var(--color-navy); color:var(--text-invert); }
.btn--primary:hover { background:var(--color-navy-light); box-shadow:var(--shadow-btn); transform:translateY(-2px); }
.btn--primary:active { background:var(--color-navy-darker); box-shadow:none; transform:translateY(0); }
.btn--ghost { background:transparent; border-color:var(--border); color:var(--color-navy); }
.btn--ghost:hover { border-color:var(--color-navy); background:var(--navy-soft); }
.btn--ghost:active { background:var(--color-surface-2); }
.btn--on-dark { background:var(--color-white); color:var(--color-navy); }
.btn--on-dark:hover { background:var(--navy-soft); box-shadow:var(--shadow-btn); transform:translateY(-2px); }
.btn--on-dark:active { transform:translateY(0); box-shadow:none; }
.btn--ghost-dark { background:transparent; border-color:rgba(255,255,255,.4); color:var(--color-white); }
.btn--ghost-dark:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn--block { width:100%; }
.btn--lg { padding:1.05rem var(--space-5); font-size:var(--fs-lead); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--navy-soft); }
.section--dark .btn:focus-visible, .section--navy-deep .btn:focus-visible { box-shadow:0 0 0 3px rgba(255,255,255,.45); }
.btn__icon { width:18px; height:18px; flex:0 0 auto; }
.link { color:var(--color-navy); font-weight:var(--fw-semibold); }
.link:hover { color:var(--color-navy-light); text-decoration:underline; }
.hero { padding-block:clamp(3.5rem,2rem + 6vw,6rem); }
.hero__inner { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,1rem + 4vw,5rem); }
.hero__body { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.hero__title { font-size:var(--fs-display); font-weight:var(--fw-extra); letter-spacing:var(--ls-tight); line-height:var(--lh-tight); color:var(--text-strong); }
.hero__title em { font-style:normal; color:var(--color-navy-light); }
.hero__lead { max-width:34ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); }
.hero__media { position:relative; }
.hero--center { text-align:center; }
.hero--center .hero__body { align-items:center; max-width:760px; margin-inline:auto; }
.hero--center .hero__lead { max-width:60ch; }
.hero--center .hero__actions { justify-content:center; }
.media-ph { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); background:var(--navy-soft); border:1px solid var(--border); border-radius:var(--radius-card); color:var(--color-navy-light); overflow:hidden; }
.media-ph svg { width:40px; height:40px; opacity:.7; }
.media-ph__label { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em; }
.media-ph--portrait { aspect-ratio:4 / 5; box-shadow:var(--shadow-lg); }
.media-ph--landscape { aspect-ratio:5 / 4; }
.media-ph--wide { aspect-ratio:16 / 9; }
.media-ph--square { aspect-ratio:1 / 1; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.stat { display:flex; flex-direction:column; gap:var(--space-1); }
.stat__num { font-family:var(--font-display); font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem); font-weight:var(--fw-extra); letter-spacing:var(--ls-tight); color:var(--color-navy); line-height:1; }
.section--dark .stat__num, .section--navy-deep .stat__num { color:#fff; }
.stat__label { font-size:var(--fs-sm); color:var(--text-muted); }
.section--dark .stat__label, .section--navy-deep .stat__label { color:#9DB6DC; }
.feat-list { display:flex; flex-direction:column; gap:var(--space-3); }
.feat-list li { display:flex; align-items:flex-start; gap:var(--space-3); }
.feat-list__check { flex:0 0 auto; width:24px; height:24px; border-radius:var(--radius-pill); background:var(--navy-soft); color:var(--success); display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.feat-list__check svg { width:14px; height:14px; }
.feat-list--on-dark .feat-list__check { background:rgba(255,255,255,.16); color:#fff; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.card { display:flex; flex-direction:column; gap:var(--space-3); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.card:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); }
.card__icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:var(--radius-btn); background:var(--navy-soft); color:var(--color-navy); }
.card__icon svg { width:26px; height:26px; }
.card__title { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--color-navy); }
.card__text { font-size:var(--fs-base); color:var(--text); }
.card__link { margin-top:auto; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:var(--color-navy); display:inline-flex; align-items:center; gap:6px; }
.card__link svg { width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.card:hover .card__link svg { transform:translateX(3px); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); counter-reset:step; }
.step { display:flex; flex-direction:column; gap:var(--space-2); }
.step__num { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:1.5rem; width:48px; height:48px; border-radius:var(--radius-pill); background:var(--navy-soft); color:var(--color-navy); display:inline-flex; align-items:center; justify-content:center; }
.step__title { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--color-navy); }
.step__text { font-size:var(--fs-sm); color:var(--text); }
.packs { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); align-items:stretch; }
.pack { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); box-shadow:var(--shadow-card); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.pack:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.pack--hi { background:var(--color-navy); border-color:var(--color-navy); color:#fff; margin-top:-14px; box-shadow:0 22px 48px rgba(27,58,107,.24); }
.pack--hi:hover { box-shadow:0 30px 60px rgba(27,58,107,.30); }
.pack__badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--dot-yellow); color:#1f1500; white-space:nowrap; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.75rem; letter-spacing:.03em; padding:6px 16px; border-radius:var(--radius-pill); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.pack__name-row { display:flex; align-items:center; gap:9px; }
.pack__dot { width:9px; height:9px; border-radius:var(--radius-pill); flex:0 0 auto; }
.pack__name { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.2rem; color:var(--color-navy); }
.pack--hi .pack__name { color:#fff; }
.pack__tag { font-size:.85rem; font-weight:var(--fw-semibold); color:var(--text-muted); margin-top:4px; }
.pack--hi .pack__tag { color:rgba(255,255,255,.7); }
.pack__price { display:flex; align-items:baseline; gap:6px; margin-top:var(--space-3); }
.pack__price-prefix { font-size:.9rem; font-weight:var(--fw-bold); color:var(--text-muted); }
.pack--hi .pack__price-prefix { color:rgba(255,255,255,.7); }
.pack__amount { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:2.6rem; line-height:1; letter-spacing:var(--ls-tight); color:var(--color-navy); }
.pack--hi .pack__amount { color:#fff; }
.pack__unit { font-size:.78rem; color:var(--text-muted); margin-top:4px; }
.pack--hi .pack__unit { color:rgba(255,255,255,.6); }
.pack__desc { font-size:.9rem; line-height:1.55; color:var(--text); margin-top:var(--space-3); text-wrap:pretty; }
.pack--hi .pack__desc { color:rgba(255,255,255,.88); }
.pack__feats { display:flex; flex-direction:column; gap:11px; margin-top:var(--space-4); margin-bottom:var(--space-4); flex:1 1 auto; }
.pack__feats li { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.45; }
.pack__feats .feat-list__check { width:22px; height:22px; }
.pack--hi .pack__feats li { color:rgba(255,255,255,.92); }
.pack__cta { width:100%; }
.pack--hi .pack__cta { background:var(--dot-yellow); color:#1f1500; }
.pack--hi .pack__cta:hover { background:#FFD34D; box-shadow:none; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.post-card:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); }
.post-card__media { aspect-ratio:16 / 10; border-radius:0; border:none; }
.post-card__body { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4); flex:1 1 auto; }
.post-card__meta { display:flex; gap:var(--space-2); align-items:center; font-size:var(--fs-xs); color:var(--text-muted); }
.tag { display:inline-block; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.02em; padding:4px 11px; border-radius:var(--radius-pill); background:var(--navy-soft); color:var(--color-navy); }
.post-card__title { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--color-navy); line-height:1.25; }
.post-card__excerpt { font-size:.9rem; color:var(--text); }
.post-card__link { margin-top:auto; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:var(--color-navy); display:inline-flex; align-items:center; gap:6px; }
.post-card__link svg { width:16px; height:16px; }
.post-card--feature { grid-column:1 / -1; display:grid; grid-template-columns:1.1fr .9fr; }
.post-card--feature .post-card__media { aspect-ratio:auto; }
.post-card--feature .post-card__body { padding:var(--space-5); justify-content:center; }
.post-card--feature .post-card__title { font-size:var(--fs-h2); letter-spacing:var(--ls-tight); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); color:var(--color-navy); background:#fff; cursor:pointer; transition:all var(--dur) var(--ease); }
.chip:hover { border-color:var(--color-navy); }
.chip[aria-current="true"] { background:var(--color-navy); color:#fff; border-color:var(--color-navy); }
.prose { max-width:720px; margin-inline:auto; }
.prose > * + * { margin-top:var(--space-4); }
.prose h2 { font-size:var(--fs-h2); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); margin-top:var(--space-5); }
.prose h3 { font-size:var(--fs-h3); font-weight:var(--fw-semibold); margin-top:var(--space-4); }
.prose p, .prose li { font-size:1.0625rem; line-height:1.75; color:var(--text); }
.prose ul { display:flex; flex-direction:column; gap:var(--space-2); padding-left:var(--space-4); list-style:disc; }
.prose ul li::marker { color:var(--color-navy-light); }
.prose strong { color:var(--text-strong); font-weight:var(--fw-bold); }
.prose a { color:var(--color-link); font-weight:var(--fw-semibold); }
.prose a:hover { text-decoration:underline; }
.prose blockquote { border-left:3px solid var(--color-violet); padding-left:var(--space-4); font-size:var(--fs-lead); font-style:italic; color:var(--color-navy); }
.prose figure .media-ph { aspect-ratio:16 / 9; }
.prose figcaption { font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--space-2); text-align:center; }
.product { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; }
.product__media { position:relative; }
.product__media .media-ph { aspect-ratio:3 / 4; box-shadow:var(--shadow-lg); }
.product__body { display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.product__title { font-size:var(--fs-h1); font-weight:var(--fw-extra); letter-spacing:var(--ls-tight); }
.price-row { display:flex; align-items:baseline; gap:var(--space-3); margin-block:var(--space-2); }
.price-now { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:2.6rem; letter-spacing:var(--ls-tight); color:var(--color-navy); }
.price-was { font-size:var(--fs-lead); color:var(--text-muted); text-decoration:line-through; }
.price-badge { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:5px 12px; border-radius:var(--radius-pill); background:var(--dot-green); color:#fff; }
.rating { display:flex; align-items:center; gap:var(--space-2); color:var(--dot-yellow); }
.rating svg { width:18px; height:18px; fill:currentColor; stroke:none; }
.rating__text { color:var(--text-muted); font-size:var(--fs-sm); }
.guarantee { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--text-muted); }
.guarantee svg { width:18px; height:18px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.shop-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.shop-card:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); }
.shop-card__media { aspect-ratio:4 / 3; border:none; border-radius:0; }
.shop-card__body { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-4); flex:1 1 auto; }
.shop-card__title { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--color-navy); }
.shop-card__foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:var(--space-2); }
.shop-card__price { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-lead); color:var(--color-navy); }
.funnel { display:flex; flex-direction:column; gap:14px; max-width:760px; margin-inline:auto; }
.funnel__stage { color:#fff; border-radius:var(--radius-card); padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); box-shadow:var(--shadow-card); }
.funnel__stage-n { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:1.5rem; opacity:.6; flex:0 0 auto; }
.funnel__stage-t { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h4); }
.funnel__stage-d { font-size:var(--fs-sm); opacity:.92; }
.funnel__stage:nth-child(1) { background:#2E5AA0; width:100%; }
.funnel__stage:nth-child(2) { background:#34619F; width:92%; margin-inline:auto; }
.funnel__stage:nth-child(3) { background:#3A6494; width:80%; margin-inline:auto; }
.funnel__stage:nth-child(4) { background:#1B3A6B; width:66%; margin-inline:auto; }
.funnel__stage:nth-child(5) { background:var(--color-violet); width:50%; margin-inline:auto; }
.awareness { display:flex; flex-direction:column; gap:var(--space-3); }
.awareness__row { display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:start; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-card); background:#fff; }
.awareness__n { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:1.75rem; color:var(--color-navy-light); line-height:1; }
.awareness__t { font-size:var(--fs-h4); font-weight:var(--fw-semibold); color:var(--color-navy); }
.awareness__d { font-size:var(--fs-base); color:var(--text); margin-top:6px; }
.form { display:flex; flex-direction:column; gap:var(--space-3); }
.form__field { display:flex; flex-direction:column; gap:6px; }
.form__label { font-family:var(--font-display); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--color-navy); }
.form__input, .form__textarea { font-family:var(--font-body); font-size:var(--fs-base); color:var(--text-strong); padding:.8rem var(--space-3); border:1px solid var(--border); border-radius:var(--radius-btn); background:#fff; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); width:100%; }
.form__input:focus, .form__textarea:focus { outline:none; border-color:var(--color-navy); box-shadow:0 0 0 3px var(--navy-soft); }
.form__textarea { min-height:120px; resize:vertical; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.form__note { font-size:var(--fs-xs); color:var(--text-muted); }
.optin { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-5); box-shadow:var(--shadow-card); }
.cta__inner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-4); }
.cta__title { font-size:var(--fs-h1); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); max-width:20ch; }
.cta__lead { color:#C6D2E6; max-width:50ch; }
.cta__actions { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-2); }
.quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.quote { display:flex; flex-direction:column; gap:var(--space-3); background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); }
.quote__stars { display:flex; gap:2px; color:var(--dot-yellow); }
.quote__stars svg { width:16px; height:16px; fill:currentColor; stroke:none; }
.quote__text { font-size:var(--fs-base); line-height:1.6; color:var(--text-strong); }
.quote__who { display:flex; align-items:center; gap:var(--space-3); margin-top:auto; }
.quote__avatar { width:42px; height:42px; border-radius:var(--radius-pill); background:var(--navy-soft); color:var(--color-navy-light); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.95rem; flex:0 0 auto; }
.quote__name { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:var(--color-navy); }
.quote__role { font-size:var(--fs-xs); color:var(--text-muted); }
.faq { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; }
.faq__item { border-bottom:1px solid var(--border); }
.faq__item summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-4); font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h4); color:var(--color-navy); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary .faq__icon { flex:0 0 auto; transition:transform var(--dur) var(--ease); }
.faq__item[open] summary .faq__icon { transform:rotate(45deg); }
.faq__answer { padding-bottom:var(--space-4); color:var(--text); font-size:var(--fs-base); line-height:1.65; max-width:62ch; }
.crumbs { display:flex; gap:var(--space-2); align-items:center; font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--space-3); }
.crumbs a:hover { color:var(--color-navy); }
.crumbs span.sep { opacity:.5; }
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
[data-reveal] { opacity:1; transform:none; }
}
@media (max-width:991px) {
.hero__inner { grid-template-columns:1fr; gap:var(--space-5); }
.hero__media { order:-1; max-width:480px; }
.stats { grid-template-columns:repeat(2,1fr); gap:var(--space-5) var(--space-4); }
.grid-3, .post-grid, .shop-grid, .quote-grid { grid-template-columns:repeat(2,1fr); }
.steps { grid-template-columns:repeat(2,1fr); }
.packs { grid-template-columns:repeat(2,1fr); }
.pack--hi { margin-top:0; }
.product { grid-template-columns:1fr; gap:var(--space-4); }
.product__media { max-width:420px; }
.post-card--feature { grid-template-columns:1fr; }
}
@media (max-width:767px) {
.grid-3, .grid-2, .post-grid, .shop-grid, .quote-grid { grid-template-columns:1fr; }
.steps { grid-template-columns:1fr; }
.packs { grid-template-columns:1fr; }
.form__row { grid-template-columns:1fr; }
.cta__title { font-size:var(--fs-h2); }
}
@media (max-width:478px) {
.hero__actions, .cta__actions { width:100%; }
.hero__actions .btn, .cta__actions .btn { flex:1 1 auto; }
.stats { grid-template-columns:1fr 1fr; }
}

  .pk-hero__top { display:flex; align-items:center; gap:10px; margin-bottom:2px; flex-wrap:wrap; }
  .pk-dot { width:13px; height:13px; border-radius:999px; background:var(--pk); display:inline-block; }
  .pk-hero__name { font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; color:var(--pk-ink); }
  .pk-badge { display:inline-flex; align-items:center; background:var(--pk); color:#1f1500; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.72rem; letter-spacing:.03em; padding:5px 12px; border-radius:var(--radius-pill); }
  .eyebrow--pk { color:var(--pk-ink); }
  .price-pill { display:inline-flex; align-items:baseline; gap:8px; background:var(--pk-soft); padding:10px 18px; border-radius:var(--radius-pill); }
  .price-pill strong { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:1.4rem; color:var(--color-navy); letter-spacing:var(--ls-tight); }
  .price-pill span { font-size:var(--fs-sm); color:var(--text-muted); }

  .btn--whatsapp { background:#25D366; color:#fff; border-color:#25D366; }
  .btn--whatsapp:hover { background:#1ebe5a; box-shadow:var(--shadow-btn); transform:translateY(-2px); color:#fff; }
  .btn--whatsapp:active { background:#199e4b; transform:translateY(0); box-shadow:none; }
  .btn--whatsapp svg { width:20px; height:20px; fill:currentColor; stroke:none; }

  /* Voor wie dit is — 3 kaarten */
  .aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
  .aud { display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-4); box-shadow:var(--shadow-card); }
  .aud__dot { width:42px; height:42px; border-radius:12px; background:var(--pk-soft); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .aud__dot svg { width:21px; height:21px; stroke:var(--pk-ink); fill:none; }
  .aud__text { font-size:1rem; color:var(--text); line-height:1.55; }

  /* Hero reassurance line */
  .hero__assure { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:var(--fs-sm); color:var(--text-muted); margin-top:-2px; }
  .hero__assure span { display:inline-flex; align-items:center; gap:6px; }
  .hero__assure svg { width:15px; height:15px; stroke:var(--pk-ink); fill:none; }

  /* Tablet device mockup */
  .tablet { width:100%; background:#222a3a; border-radius:26px; padding:15px 15px 15px 22px; box-shadow:0 26px 60px rgba(27,58,107,.28); border:1px solid #161c28; position:relative; }
  .tablet::before { content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:999px; background:#454f63; }
  .tablet__screen { border-radius:13px; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }

  /* Wat je krijgt — colored pillar cards ("onder één dak"-stijl) */
  .pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
  .pillar { display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-card); padding:26px; box-shadow:var(--shadow-card); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
  .pillar:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
  .pillar--red { border-color:#FF272B; } .pillar--green { border-color:#24AD39; } .pillar--yellow { border-color:#FFBE1C; } .pillar--blue { border-color:#0084FE; }
  .pillar__ic { width:48px; height:48px; border-radius:11px; background:var(--navy-soft); color:var(--color-navy); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .pillar__ic svg { width:24px; height:24px; stroke:currentColor; fill:none; }
  .pillar__t { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.2rem; color:var(--color-navy); margin-bottom:9px; line-height:1.2; }
  .pillar__d { font-size:.9rem; line-height:1.55; color:var(--text); margin-bottom:18px; }
  .pillar__pts { display:flex; flex-direction:column; gap:9px; margin-top:auto; }
  .pillar__pts li { display:flex; gap:9px; align-items:center; font-size:.85rem; font-weight:var(--fw-semibold); color:var(--text-strong); }
  .pillar__pts svg { width:16px; height:16px; stroke:var(--success); fill:none; flex:0 0 auto; }

  /* Social proof — Google-review kaarten */
  .greviews { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
  .grev { display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; box-shadow:var(--shadow-card); }
  .grev__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .grev__brand { display:flex; align-items:center; gap:8px; }
  .gword { font-family:var(--font-display); font-weight:700; font-size:18px; line-height:1; letter-spacing:-.01em; }
  .gword .b { color:#4285F4; } .gword .r { color:#EA4335; } .gword .y { color:#FBBC04; } .gword .g { color:#34A853; }
  .grev__rlabel { font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--text-muted); }
  .grev__score { display:flex; align-items:center; gap:6px; }
  .grev__score b { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--color-navy); }
  .gstars { display:inline-flex; gap:2px; }
  .gstars svg { width:14px; height:14px; fill:#FBBC04; stroke:none; }
  .grev__quote { font-size:.95rem; line-height:1.55; color:var(--text); }
  .grev__who { display:flex; align-items:center; gap:11px; margin-top:auto; }
  .grev__av { width:34px; height:34px; border-radius:999px; background:var(--color-navy); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; flex:0 0 auto; }
  .grev__name { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--color-navy); }
  .grev__meta { font-size:12px; color:var(--text-muted); }
  .gagg { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:var(--space-5); }
  .gagg__pill { display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:9px 18px; box-shadow:var(--shadow-sm); }
  .gagg__pill b { font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--color-navy); }
  .gagg__pill span { font-size:13px; color:var(--text-muted); }
  .greviews-foot { text-align:center; margin-top:var(--space-5); font-size:var(--fs-sm); color:var(--text-muted); }

  /* Andere pakketten — extra waarde-hints (per-pakket kleur via --oc) */
  .other__feats { display:flex; flex-direction:column; gap:11px; }
  .other__feats li { display:flex; gap:9px; align-items:flex-start; font-size:.88rem; line-height:1.4; color:var(--text); }
  .other__feats svg { width:15px; height:15px; stroke:var(--oc); fill:none; flex:0 0 auto; margin-top:2px; }

  /* Mini sample site inside the browser */
  .ms { font-family:var(--font-display); background:#fff; }
  .ms__nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; border-bottom:1px solid #eef0f3; }
  .ms__brand { display:flex; align-items:center; gap:7px; font-weight:700; font-size:.82rem; color:var(--color-navy); letter-spacing:-.01em; }
  .ms__brand i { width:9px; height:9px; border-radius:999px; background:var(--pk); display:block; }
  .ms__links { display:flex; gap:13px; }
  .ms__links span { width:32px; height:6px; border-radius:999px; background:#e3e7ee; display:block; }
  .ms__navcta { width:62px; height:22px; border-radius:6px; background:var(--color-navy); }
  .ms__hero { padding:24px 20px 18px; display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:center; }
  .ms__h { font-size:1.22rem; font-weight:800; line-height:1.12; color:var(--color-navy); letter-spacing:-.02em; }
  .ms__lines { display:flex; flex-direction:column; gap:6px; margin:11px 0 14px; }
  .ms__lines span { height:6px; border-radius:999px; background:#e9ecf1; display:block; }
  .ms__lines span:nth-child(2){ width:88%; }
  .ms__lines span:nth-child(3){ width:72%; }
  .ms__row { display:flex; align-items:center; gap:9px; }
  .ms__btn { height:28px; padding:0 16px; border-radius:7px; background:var(--color-navy); display:inline-flex; align-items:center; color:#fff; font-size:.66rem; font-weight:600; }
  .ms__btn2 { height:28px; padding:0 14px; border-radius:7px; border:1px solid var(--border); display:inline-flex; align-items:center; color:var(--color-navy); font-size:.66rem; font-weight:600; }
  .ms__shot { aspect-ratio:4/3; border-radius:10px; background:linear-gradient(150deg,#dfe7f4,#eef2f8); border:1px solid #e4e9f1; position:relative; overflow:hidden; }
  .ms__shot::after { content:""; position:absolute; left:14%; right:14%; bottom:16%; top:42%; border-radius:7px; background:#fff; opacity:.55; }
  .ms__shot i { position:absolute; top:16%; left:14%; width:26%; height:18%; border-radius:6px; background:var(--pk); opacity:.85; }
  .ms__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:4px 20px 22px; }
  .ms__card { border:1px solid #eef0f3; border-radius:9px; padding:11px; display:flex; flex-direction:column; gap:7px; }
  .ms__card b { width:22px; height:22px; border-radius:6px; background:var(--navy-soft); display:block; }
  .ms__card u { height:5px; border-radius:999px; background:#e9ecf1; display:block; }
  .ms__card u.s { width:62%; }

  /* Blog-achtige intro */
  .intro { max-width:720px; margin-inline:auto; }
  .intro p { font-size:1.0625rem; line-height:1.75; color:var(--text); }
  .intro p + p { margin-top:var(--space-3); }
  .intro strong { color:var(--text-strong); font-weight:var(--fw-bold); }
  .intro__bridge { margin-top:var(--space-4); border-left:3px solid var(--pk); background:var(--pk-soft); border-radius:0 var(--radius-card) var(--radius-card) 0; padding:18px 22px; font-size:1.0625rem; line-height:1.6; color:var(--color-navy); }

  /* Wat je krijgt — benefit-blokken */
  .get-list { display:flex; flex-direction:column; gap:var(--space-4); max-width:760px; margin-inline:auto; }
  .get { display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:start; }
  .get__check { flex:0 0 auto; width:30px; height:30px; border-radius:999px; background:var(--pk-soft); display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
  .get__check svg { width:17px; height:17px; stroke:var(--pk-ink); fill:none; }
  .get__t { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:1.0625rem; color:var(--color-navy); }
  .get__d { font-size:.95rem; color:var(--text); margin-top:4px; line-height:1.55; }

  /* Wat het je oplevert */
  .outcome { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); max-width:880px; margin-inline:auto; }
  .outcome__item { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:18px 20px; }
  .outcome__ic { flex:0 0 auto; width:30px; height:30px; border-radius:999px; background:var(--pk-soft); display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
  .outcome__ic svg { width:16px; height:16px; stroke:var(--pk-ink); fill:none; }
  .outcome__t { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:1.0rem; color:var(--color-navy); line-height:1.35; }

  /* Proces — amber accent on steps */
  .pk-steps .step__num { background:var(--pk-soft); color:var(--pk-ink); }
  /* Genummerde stappen komen één voor één in beeld */
  @media (prefers-reduced-motion: no-preference) {
    .pk-steps .step__num { opacity:0; transform:scale(.55) translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
    .pk-steps.in .step__num { opacity:1; transform:none; }
    .pk-steps.in .step:nth-child(1) .step__num { transition-delay:.10s; }
    .pk-steps.in .step:nth-child(2) .step__num { transition-delay:.32s; }
    .pk-steps.in .step:nth-child(3) .step__num { transition-delay:.54s; }
    .pk-steps.in .step:nth-child(4) .step__num { transition-delay:.76s; }
  }
  .steps__foot { text-align:center; margin-top:var(--space-5); font-size:var(--fs-sm); color:var(--text-muted); }

  /* Social proof — placeholders */
  .quote--ph { border-style:dashed; }
  .quote--ph .quote__avatar { background:var(--pk-soft); color:var(--pk-ink); }
  .invul { color:var(--text-muted); font-style:italic; }
  .proof-count { text-align:center; margin-top:var(--space-5); font-family:var(--font-display); font-size:1.05rem; color:var(--color-navy); }
  .proof-count .invul { font-weight:var(--fw-bold); font-style:normal; color:var(--pk-ink); }

  /* Geruststelling-strip */
  .assure { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
  .assure__item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--space-5) var(--space-3); }
  .assure__ic { width:48px; height:48px; border-radius:12px; background:var(--pk-soft); display:inline-flex; align-items:center; justify-content:center; }
  .assure__ic svg { width:23px; height:23px; stroke:var(--pk-ink); fill:none; }
  .assure__t { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:.95rem; color:var(--color-navy); line-height:1.35; }

  /* Wanneer dit NIET voor jou is */
  .notfor { max-width:760px; margin-inline:auto; background:#fff; border:1px solid var(--border); border-left:4px solid var(--pk); border-radius:var(--radius-card); padding:var(--space-5); }
  .notfor h3 { font-size:var(--fs-h3); color:var(--color-navy); margin-bottom:var(--space-3); }
  .notfor p { font-size:1.0625rem; line-height:1.6; color:var(--text); margin-bottom:var(--space-4); }
  .notfor .hero__actions { margin-top:0; }

  /* Schaarste-regel */
  .scarce { max-width:760px; margin-inline:auto; display:flex; gap:13px; align-items:center; justify-content:center; text-align:left; background:var(--pk-soft); border:1px solid var(--pk-border); border-radius:var(--radius-card); padding:16px 22px; font-size:1.0rem; line-height:1.5; color:#6b5210; }
  .scarce svg { width:21px; height:21px; stroke:var(--pk-ink); fill:none; flex:0 0 auto; }

  /* Andere pakketten */
  .others { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
  .other { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:16px; padding:0; overflow:hidden; box-shadow:var(--shadow-card); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease); }
  .other::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--oc); }
  .other::after { content:""; position:absolute; inset:0; border-radius:16px; background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--oc) 9%,transparent), transparent 60%); opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
  .other:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:color-mix(in srgb,var(--oc) 45%,var(--border)); }
  .other:hover::after { opacity:1; }
  .other__head { padding:26px 24px 18px; }
  .other__name-row { display:flex; align-items:center; gap:9px; }
  .other__dot { width:10px; height:10px; border-radius:999px; background:var(--oc); flex:0 0 auto; box-shadow:0 0 0 4px color-mix(in srgb,var(--oc) 16%,transparent); }
  .other__name { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.2rem; color:var(--color-navy); }
  .other__tag { font-size:.85rem; color:var(--text-muted); margin-top:7px; }
  .other__price { display:flex; align-items:baseline; gap:7px; margin-top:14px; }
  .other__amount { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:1.85rem; line-height:1; letter-spacing:var(--ls-tight); color:var(--color-navy); }
  .other__unit { font-size:.78rem; color:var(--text-muted); }
  .other__body { display:flex; flex-direction:column; flex:1 1 auto; padding:0 24px 24px; }
  .other__divider { height:1px; background:var(--border); margin:0 0 18px; }
  .other__cta { position:relative; z-index:1; margin-top:20px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:.72rem 1rem; border-radius:10px; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:.9rem; color:var(--oc); background:color-mix(in srgb,var(--oc) 11%,#fff); transition:background var(--dur) var(--ease),color var(--dur) var(--ease); }
  .other__cta svg { width:16px; height:16px; transition:transform var(--dur) var(--ease); }
  .other:hover .other__cta { background:var(--oc); color:#fff; }
  .other:hover .other__cta svg { transform:translateX(3px); }
  /* Populair-badge */
  .other__badge { position:absolute; top:16px; right:16px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:var(--oc); color:#1f1500; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-pill); box-shadow:0 4px 12px color-mix(in srgb,var(--oc) 32%,transparent); }
  .other__badge svg { width:12px; height:12px; fill:currentColor; stroke:none; }

  .cta__advies { font-size:var(--fs-sm); color:#9DB6DC; margin-top:var(--space-2); }
  .cta__advies a { color:#fff; font-weight:var(--fw-semibold); text-decoration:underline; text-underline-offset:3px; }

  /* Hero-afbeelding: op desktop rechts, op mobiel ONDER de tekst (niet bovenaan) */
  .hero__shot { width:100%; height:auto; display:block; }

  /* Hero-intro: speelt pas af NADAT het gordijn (page-transition) is opgetrokken.
     De titel komt letter-voor-letter omhoog, daarna faden lead, prijs, knoppen in. */
  .hero__title { opacity:0; }
  .hero__title.is-split { opacity:1; }
  .hero__title .word { display:inline-block; }
  .hero__title .ch { display:inline-block; opacity:0; transform:translateY(0.6em); will-change:transform,opacity; }
  .hero__body.revealed .hero__title .ch { animation:chUp .52s var(--ease) forwards; animation-delay:calc(var(--i) * 0.035s); }
  .hero__title.is-done .ch { opacity:1; transform:none; animation:none; }
  @keyframes chUp { to { opacity:1; transform:none; } }

  /* Lead, prijs, knoppen en geruststelling: gestaffeld inkomen na de titel */
  .hero__body .hero__lead,
  .hero__body .price-pill,
  .hero__body .hero__actions,
  .hero__body .hero__assure { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .hero__body.revealed .hero__lead    { opacity:1; transform:none; transition-delay:.40s; }
  .hero__body.revealed .price-pill    { opacity:1; transform:none; transition-delay:.55s; }
  .hero__body.revealed .hero__actions { opacity:1; transform:none; transition-delay:.68s; }
  .hero__body.revealed .hero__assure  { opacity:1; transform:none; transition-delay:.80s; }
  .hero__body.is-shown .hero__lead,
  .hero__body.is-shown .price-pill,
  .hero__body.is-shown .hero__actions,
  .hero__body.is-shown .hero__assure { opacity:1 !important; transform:none !important; transition:none !important; }

  @media (prefers-reduced-motion:reduce){
    .hero__title, .hero__title .ch,
    .hero__body .hero__lead, .hero__body .price-pill, .hero__body .hero__actions, .hero__body .hero__assure { opacity:1 !important; transform:none !important; animation:none !important; }
  }

  @media (max-width:991px){
    .assure,.pillars { grid-template-columns:repeat(2,1fr); }
    .hero__media { order:0; max-width:560px; margin-inline:auto; margin-top:var(--space-3); }
  }
  @media (max-width:880px){ .greviews { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
  @media (max-width:767px){ .aud-grid,.others,.outcome,.pillars { grid-template-columns:1fr; } .ms__hero { grid-template-columns:1fr; } .ms__cards { grid-template-columns:1fr 1fr; } }
  @media (max-width:478px){ .assure { grid-template-columns:1fr 1fr; } }

  /* Zeer smalle schermen (±280–380px): voorkom lompe afbrekingen */
  @media (max-width:400px){
    /* Prijs-pill: compact en links uitgelijnd i.p.v. één brede ovaal */
    .price-pill { flex-direction:column; align-items:flex-start; gap:2px; padding:12px 18px; border-radius:16px; }
    .price-pill strong { font-size:1.5rem; line-height:1.1; }
    .price-pill span { line-height:1.3; }

    /* CTA- en hero-knoppen: kleinere tekst zodat ze niet over 3 regels breken,
       en het icoon bovenaan de eerste regel i.p.v. zwevend in het midden */
    .cta__actions .btn--lg,.hero__actions .btn { font-size:1rem; padding:.85rem 1rem; line-height:1.25; align-items:flex-start; }
    .cta__actions .btn--lg svg,.hero__actions .btn svg,.btn--whatsapp svg { margin-top:1px; }

    /* Schaarste-strip: icoon bij de eerste regel houden */
    .scarce { align-items:flex-start; padding:16px 18px; }
    .scarce svg { margin-top:2px; }

    /* Google-aggregatie-pill: nette wikkeling, sterren zichtbaar houden */
    .gagg__pill { flex-wrap:wrap; justify-content:center; row-gap:4px; padding:12px 16px; }
  }

:root{--pk:#24AD39;--pk-ink:#1B7A30;--pk-soft:#E7F6EA;--pk-border:#BCE4C4;} /* default = Starter */
.pak--starter{--pk:#24AD39;--pk-ink:#1B7A30;--pk-soft:#E7F6EA;--pk-border:#BCE4C4;}
.pak--plus{--pk:#0084FE;--pk-ink:#0061BC;--pk-soft:#E5F1FF;--pk-border:#B9DBFF;}
.pak--pro{--pk:#FFBE1C;--pk-ink:#9A6E00;--pk-soft:#FFF4D6;--pk-border:#F2DFA6;}
.pak--premium{--pk:#7B68EE;--pk-ink:#5A48C8;--pk-soft:#EEEBFE;--pk-border:#D3CCFA;}

/* ===== Bricks-build overrides — That Web Design Studio (gedeeld: pakket-detailpagina's) ===== */
:root{ --font-display:'Thicccboi','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; }
html{ font-size:100% !important; }
.hero__title, .hero__title .word, .hero__title .ch,
.eyebrow, .eyebrow *, .pk-hero__name, .price-pill strong,
.gword, .grev__score b, .grev__av, .grev__name, .gagg__pill b,
.get__t, .outcome__t, .assure__t, .other__name, .other__amount,
.other__cta, .other__badge, .step__num, .pillar__t, .aud__text,
.section-head__title, .cta__title, .btn{
  font-family: var(--font-display) !important;
}
html.tws-builder [data-reveal]{ opacity:1 !important; transform:none !important; }
html.tws-builder .hero__title .ch{ opacity:1 !important; transform:none !important; }
html.tws-builder .hero__body{ opacity:1 !important; }
html, .page-root{ overflow-x:clip; }


/* ===== 2026-07-02 (Ali): stap-items gecentreerd op alle pakket-paginas ===== */
.pk-steps .step{ align-items:center; text-align:center; }
 /* duidelijke dropdown-pijl */ .field-select{ -webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231b3a6b%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22/%3E%3C/svg%3E) no-repeat right 16px center; padding-right:46px; } 
/* 2026-07-03: Summer Sale −25% op Starter & Plus (Ali) */
.price-old{font-size:.52em;font-weight:600;opacity:.55;text-decoration:line-through;margin-right:8px;}
.pack-badge--sale{background:#E8443A;color:#fff;}
.pack-card{position:relative;}