/* ==========================================================================
   BOOST LAB AGENCY — DESIGN SYSTEM
   Concept: "The Growth Formula" — lab precision × kinetic energy × human warmth.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- Brand palette --- */
  --ink:#0E0E12;
  --ink-soft:#17171D;
  --ink-line: rgba(246,243,236,.14);
  --paper:#F6F3EC;
  --paper-dim:#EBE6D8;
  --paper-line: rgba(14,14,18,.1);
  --lime:#CCFF66;
  --lime-dim:#AEE83F;
  --coral:#FF5A3C;
  --coral-dim:#E14526;
  --violet:#6D28D9;
  --violet-deep:#2E1065;

  /* --- Gradient & glow system --- */
  --gradient-primary: linear-gradient(135deg, var(--lime) 0%, var(--coral) 100%);
  --gradient-dark: linear-gradient(160deg, var(--ink) 0%, var(--violet-deep) 120%);
  --gradient-cta: linear-gradient(135deg, var(--lime-dim) 0%, var(--lime) 50%, var(--coral) 130%);
  --glow-lime: 0 0 1px rgba(204,255,102,.4), 0 20px 60px -14px rgba(204,255,102,.55);
  --glow-coral: 0 0 1px rgba(255,90,60,.4), 0 20px 60px -14px rgba(255,90,60,.5);
  --glow-violet: 0 0 1px rgba(109,40,217,.4), 0 20px 70px -16px rgba(109,40,217,.55);

  --text-on-paper: var(--ink);
  --text-on-paper-70: rgba(14,14,18,.68);
  --text-on-paper-45: rgba(14,14,18,.45);
  --text-on-ink: var(--paper);
  --text-on-ink-70: rgba(246,243,236,.72);
  --text-on-ink-45: rgba(246,243,236,.45);

  /* --- Type --- */
  --font-display: 'Poppins', 'Arial', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --fs-hero: clamp(2.75rem, 6.4vw, 7.5rem);
  --fs-h1: clamp(2.25rem, 4.6vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 3.4rem);
  --fs-h3: clamp(1.4rem, 2vw, 2rem);
  --fs-lead: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-tiny: .75rem;

  /* --- Layout --- */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4.5rem, 9vw, 9rem);
  --radius-lg: 44px;
  --radius-md: 30px;
  --radius-sm: 18px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .35s;
  --dur-med: .7s;
  --dur-slow: 1.1s;

  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
*{ margin:0; padding:0; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  background: var(--paper);
  color: var(--text-on-paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.02em; }

::selection{ background: var(--lime); color: var(--ink); }

/* Hide default cursor only when custom cursor is active (desktop, fine pointer) */
@media (hover:hover) and (pointer:fine){
  body.cursor-ready, body.cursor-ready a, body.cursor-ready button{ cursor:none; }
}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.wrap{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--section-pad); position:relative; }
.section--tight{ padding-block: calc(var(--section-pad) * .6); }
.bg-ink{ background: var(--ink); color: var(--text-on-ink); }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color: var(--text-on-ink); }
.bg-paper-dim{ background: var(--paper-dim); }
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing:.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color: var(--text-on-paper-70);
  margin-bottom:1.4em;
}
.bg-ink .eyebrow{ color: var(--text-on-ink-70); }
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background: var(--coral);
  animation: pulse-dot 2.2s var(--ease-in-out) infinite;
}
@keyframes pulse-dot{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.6); opacity:.5;} }

.lead{ font-size: var(--fs-lead); color: var(--text-on-paper-70); max-width:46ch; }
.bg-ink .lead{ color: var(--text-on-ink-70); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,4vw,5rem); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(1.25rem,2.5vw,2rem); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.text-accent{ color: var(--coral); }
.text-lime{ color: var(--lime); }
.font-mono{ font-family: var(--font-mono); }
.text-gradient{
  background: var(--gradient-primary);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* Decorative glow spotlight — soft radial bloom behind key CTAs/headlines */
.spotlight{ position:relative; isolation:isolate; }
.spotlight::before{
  content:''; position:absolute; z-index:-1;
  width:min(60vw,620px); height:min(60vw,620px);
  left:50%; top:50%; transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(204,255,102,.35) 0%, rgba(255,90,60,.14) 45%, transparent 72%);
  filter: blur(10px);
  pointer-events:none;
}

.highlight{
  background: linear-gradient(120deg, var(--lime) 0%, var(--lime) 100%);
  background-repeat:no-repeat;
  background-size: 100% 40%;
  background-position: 0 88%;
  padding-inline:.08em;
}
.highlight--ink{ color: var(--ink); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding: 1.05em 1.7em;
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight:600;
  font-size: var(--fs-small);
  letter-spacing:.01em;
  isolation:isolate;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px -16px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn::after{
  content:'';
  position:absolute; inset:0;
  background: var(--lime);
  transform: translateY(101%);
  transition: transform var(--dur-fast) var(--ease-in-out);
  z-index:-1;
}
.btn:hover::after{ transform: translateY(0); }
.btn::before{
  content:'';
  position:absolute; top:0; left:-60%; width:36%; height:100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events:none;
  opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ opacity:1; animation: btn-shine .85s var(--ease-out); }
}
@keyframes btn-shine{ from{ left:-60%; } to{ left:130%; } }
.btn:hover{ color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--glow-lime); transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.97); }
.btn:hover svg{ transform: translate(3px,-3px); }
.btn svg{ width:16px; height:16px; transition: transform var(--dur-fast) var(--ease-out); }
.btn--lime{ --btn-bg: var(--lime); --btn-fg: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 28px -16px rgba(204,255,102,.45); }
.btn--lime::after{ background: var(--ink); }
.btn--lime:hover{ color: var(--paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 16px 34px -14px rgba(14,14,18,.45); }
.btn--ghost{
  --btn-bg: rgba(255,255,255,.06); --btn-fg: var(--ink);
  border:1.5px solid var(--paper-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.bg-ink .btn--ghost{ --btn-bg: rgba(255,255,255,.04); --btn-fg: var(--paper); border-color: var(--ink-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn--ghost::after{ background: var(--ink); }
.bg-ink .btn--ghost::after{ background: var(--lime); }
.btn--ghost:hover{ color:var(--paper); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--glow-violet); }
.bg-ink .btn--ghost:hover{ color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), var(--glow-lime); }
.btn--block{ width:100%; justify-content:center; }
.btn--sm{ padding:.8em 1.3em; font-size:var(--fs-tiny); }
.btn--coral{ --btn-bg: var(--coral); --btn-fg: var(--paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 28px -16px rgba(255,90,60,.45); }
.btn--coral::after{ background: var(--ink); }
.btn--coral:hover{ color: var(--paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), var(--glow-coral); }
.btn--gradient{
  --btn-fg: var(--ink); background: var(--gradient-cta);
  background-size:200% 200%; background-position:0% 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 28px -16px rgba(204,255,102,.4);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-position .7s var(--ease-out);
}
.btn--gradient::after{ background: var(--ink); }
.btn--gradient:hover{ color: var(--paper); background-position:100% 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), var(--glow-lime); }

.magnetic{ display:inline-block; }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor{
  position:fixed; top:0; left:0; z-index:9999;
  width:11px; height:11px; border-radius:50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(255,90,60,.16), 0 0 16px 2px rgba(255,90,60,.55);
  pointer-events:none;
  transform: translate3d(-50%,-50%,0);
  will-change: transform;
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast);
}
.cursor-ring{
  position:fixed; top:0; left:0; z-index:9998;
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--lime);
  background: rgba(204,255,102,.07);
  pointer-events:none;
  transform: translate3d(-50%,-50%,0);
  will-change: transform;
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), opacity var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.cursor-label{
  position:fixed; top:0; left:0; z-index:9999;
  transform: translate3d(-50%,-50%,0);
  will-change: transform;
  font-family: var(--font-mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  background: var(--ink); color: var(--lime);
  border: 1px solid rgba(204,255,102,.35);
  padding:.5em 1em; border-radius:100px;
  pointer-events:none; opacity:0; white-space:nowrap;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  transition: opacity var(--dur-fast) var(--ease-out);
}
body.cursor-hover .cursor{ width:0; height:0; box-shadow:none; }
body.cursor-hover .cursor-ring{ width:72px; height:72px; opacity:1; border-color: var(--coral); background: rgba(255,90,60,.1); }
body.cursor-label-active .cursor-label{ opacity:1; }
@media (hover:none), (pointer:coarse){
  .cursor,.cursor-ring,.cursor-label{ display:none; }
}

/* ==========================================================================
   NOISE OVERLAY
   ========================================================================== */
.grain{
  position:fixed; inset:0; z-index:60;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:10000;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.loader.is-done{ transform: translateY(-100%); }
.loader__logo-wrap{ position:relative; display:grid; place-items:center; isolation:isolate; }
.loader__logo-wrap::before{
  content:'';
  position:absolute; bottom:-15%; left:50%; width:80%; height:50%;
  transform:translateX(-50%) scale(.5);
  background: radial-gradient(ellipse at center, rgba(204,255,102,.55), transparent 72%);
  filter: blur(22px);
  opacity:0; z-index:-1;
  animation: loader-glow 1.1s var(--ease-out) forwards;
  animation-delay:.05s;
}
@keyframes loader-glow{
  0%{ opacity:0; transform:translateX(-50%) scale(.5); }
  45%{ opacity:.85; }
  100%{ opacity:0; transform:translateX(-50%) scale(1.5); }
}
.loader__logo{
  width: clamp(150px, 26vw, 260px);
  height:auto;
  opacity:0;
  transform: translateY(150px) scale(.65);
  filter: blur(8px);
  animation: loader-boost-in 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.12s;
}
@keyframes loader-boost-in{
  0%{ opacity:0; transform: translateY(150px) scale(.6); filter:blur(10px); }
  62%{ opacity:1; transform: translateY(-16px) scale(1.06); filter:blur(0); }
  100%{ opacity:1; transform: translateY(0) scale(1); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .loader__logo-wrap::before{ display:none; }
  .loader__logo{ animation:none; opacity:1; transform:none; filter:none; }
}
.loader__bar{
  position:absolute; bottom:12%; left:50%; transform:translateX(-50%);
  width:min(220px,50vw); height:2px; background: var(--ink-line); overflow:hidden; border-radius:2px;
}
.loader__bar::after{
  content:''; position:absolute; inset:0; background: var(--lime);
  animation: loader-bar 1.4s var(--ease-in-out) forwards;
}
@keyframes loader-bar{ from{ transform: translateX(-100%); } to{ transform: translateX(0); } }

/* Page transition wipe */
.page-transition{
  position:fixed; inset:0; z-index:9999;
  background: var(--lime);
  transform: translateY(101%);
  pointer-events:none;
}
.page-transition.is-active{ transition: transform .6s var(--ease-in-out); transform: translateY(0); }
.page-transition.is-leaving{ transition: transform .6s var(--ease-in-out) .05s; transform: translateY(-101%); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top: clamp(.8rem,2vw,1.4rem); left:50%; z-index:500;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - var(--gutter) * 2));
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: clamp(.6rem,2vw,1.4rem);
  padding: .55rem .6rem .55rem 1.1rem;
  border-radius: 20px;
  background: rgba(246,243,236,.86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--paper-line);
  box-shadow: 0 24px 60px -30px rgba(14,14,18,.3), inset 0 1px 0 rgba(255,255,255,.5);
  transition: box-shadow var(--dur-fast), padding var(--dur-fast);
}
.nav.is-scrolled{
  box-shadow: 0 24px 60px -24px rgba(14,14,18,.42), inset 0 1px 0 rgba(255,255,255,.5);
}
.nav > .menu-toggle{ justify-self:start; }
.nav > .nav__logo{ justify-self:center; }
.nav > .btn{ justify-self:end; }
@media (max-width:640px){
  .nav > .btn span{ display:none; }
  .nav{ padding-inline:.5rem .5rem; gap:.4rem; }
}
.nav__logo{
  font-family: var(--font-display);
  font-weight:800; font-size:1.3rem; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.5em;
}
.nav__logo em{
  font-style:normal; color: var(--coral);
}
.nav__logo .dot{ width:8px;height:8px;border-radius:50%; background: var(--lime); border:1.5px solid var(--ink); }
.logo-img{ height:24px; width:auto; display:block; }
.footer .logo-img{ height:26px; }

/* Logo hover animation — soft lift + shine sweep, no snap */
.logo-anim{ position:relative; overflow:visible; isolation:isolate; }
.logo-anim .logo-img{
  transition: transform .55s var(--ease-out);
  transform-origin:center left;
}
.logo-anim:hover .logo-img{ transform: scale(1.08) rotate(-3deg); }
.logo-anim::after{
  content:'';
  position:absolute; inset:-8px -14px;
  border-radius: 12px;
  background: linear-gradient(115deg, transparent 25%, rgba(204,255,102,.9) 50%, transparent 75%);
  background-size: 260% 260%;
  background-position: 130% 130%;
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition: opacity .3s var(--ease-out);
}
.logo-anim:hover::after{
  opacity:1;
  animation: logo-shine 1.5s var(--ease-out);
}
@keyframes logo-shine{
  from{ background-position: 130% 130%; }
  to{ background-position: -30% -30%; }
}
@media (prefers-reduced-motion: reduce){
  .logo-anim .logo-img{ transition:none; }
  .logo-anim:hover .logo-img{ transform:none; }
  .logo-anim::after{ display:none; }
}
.nav__links{
  display:flex; align-items:center; gap: clamp(1.4rem,2.4vw,2.4rem);
  font-size:var(--fs-small); font-weight:600;
}
.nav__links a{ position:relative; padding-block:.3em; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--coral); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color: var(--coral); }
.nav__cta{ display:flex; align-items:center; gap:1rem; }
@media (max-width:640px){ .nav__cta .btn span{ display:none; } }

/* ==========================================================================
   MENU TOGGLE (opens fullscreen mega menu)
   ========================================================================== */
.menu-toggle{
  display:flex; align-items:center; gap:.85em;
  padding:.75em 1.4em .75em 1rem; z-index:1100; position:relative;
  border-radius:14px;
  border:1.5px solid var(--paper-line);
  background: rgba(246,243,236,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bg-ink .menu-toggle{ border-color: var(--ink-line); background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.menu-toggle:hover{ border-color: var(--lime-dim); background: var(--lime); color: var(--ink); box-shadow: var(--glow-lime); transform: translateY(-2px) scale(1.03); }
.menu-toggle:active{ transform: translateY(0) scale(.96); }
.menu-toggle__bars{ display:flex; flex-direction:column; gap:5px; width:24px; }
.menu-toggle__bar{ height:2px; width:100%; background:currentColor; border-radius:2px; transform-origin:center; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
@media (hover:hover) and (pointer:fine){
  .menu-toggle:hover .menu-toggle__bar:nth-child(1){ animation: menu-bar-tension .5s var(--ease-in-out); }
  .menu-toggle:hover .menu-toggle__bar:nth-child(2){ animation: menu-bar-tension .5s var(--ease-in-out) .06s; }
}
@keyframes menu-bar-tension{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
.menu-toggle__text{ font-family:var(--font-body); font-size:var(--fs-small); letter-spacing:.02em; text-transform:none; font-weight:700; }
body.menu-open .menu-toggle{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
body.menu-open .menu-toggle:hover{ background: var(--coral); border-color: var(--coral); color: var(--paper); box-shadow: var(--glow-coral); }
body.menu-open .menu-toggle__bar:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
body.menu-open .menu-toggle__bar:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){
  .menu-toggle:hover .menu-toggle__bar{ animation:none; }
}

/* ==========================================================================
   FULLSCREEN MEGA MENU
   ========================================================================== */
.mega-menu{
  position:fixed; inset:0; z-index:1000;
  background: rgba(9,9,13,.62);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  color: var(--paper);
  opacity:0; visibility:hidden; pointer-events:none;
  display:flex; flex-direction:column;
  transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
  overflow-y:auto;
}
.mega-menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .45s var(--ease-out), visibility 0s linear 0s;
}
.mega-menu .wrap{ flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding-block: clamp(5.5rem,10vw,6.5rem) 1.5rem; }
.mega-menu__inner{
  width:100%; max-width:1220px;
  background: linear-gradient(160deg, rgba(23,23,29,.92) 0%, rgba(46,16,101,.5) 130%);
  border: 1px solid rgba(246,243,236,.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 70px 140px -50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  padding: clamp(2.6rem,4.5vw,4.5rem);
  display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem);
  transform: scale(.94) translateY(18px);
  opacity:0;
  transition: transform .55s var(--ease-out), opacity .5s var(--ease-out);
}
.mega-menu.is-open .mega-menu__inner{ transform:none; opacity:1; transition: transform .6s var(--ease-out) .05s, opacity .5s var(--ease-out) .05s; }
.mega-menu__label{
  font-family:var(--font-mono); font-size:var(--fs-tiny); letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-on-ink-45); margin-bottom:1.6rem;
}
.mega-menu__links{ display:flex; flex-direction:column; gap:.2rem; }
.mega-menu__links a{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.35rem,2.4vw,2rem);
  color:var(--paper); padding-block:.3em; display:inline-block; width:fit-content;
  opacity:0; transform:translateY(18px);
  transition: color .3s, transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.mega-menu__links--secondary a{ font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:600; color:var(--text-on-ink-70); }
.mega-menu.is-open .mega-menu__links a{ opacity:1; transform:none; }
.mega-menu__links a:nth-child(1){ transition-delay:.08s; }
.mega-menu__links a:nth-child(2){ transition-delay:.14s; }
.mega-menu__links a:nth-child(3){ transition-delay:.2s; }
.mega-menu__links a:nth-child(4){ transition-delay:.26s; }
.mega-menu__links a:nth-child(5){ transition-delay:.32s; }
.mega-menu__links a:nth-child(6){ transition-delay:.38s; }
.mega-menu__links a:nth-child(7){ transition-delay:.44s; }
.mega-menu__links a:hover{ color: var(--lime); }
.mega-menu__links--secondary a:hover{ color: var(--coral); }
.mega-menu__links a.is-active{ color: var(--lime); position:relative; }
.mega-menu__links a.is-active::after{ content:''; position:absolute; left:calc(100% + .5em); top:50%; width:7px; height:7px; border-radius:50%; background:var(--lime); transform:translateY(-50%); box-shadow: 0 0 10px 2px rgba(204,255,102,.7); }
.mega-menu__card{
  background: linear-gradient(155deg, rgba(204,255,102,.16) 0%, rgba(109,40,217,.24) 60%, rgba(255,90,60,.14) 100%);
  border:1px solid rgba(246,243,236,.18); border-radius:var(--radius-md);
  padding: clamp(1.8rem,2.6vw,2.4rem); display:flex; flex-direction:column; gap:1.2rem;
  opacity:0; transform:translateY(18px);
  transition: transform .6s var(--ease-out) .3s, opacity .6s var(--ease-out) .3s, box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  position:relative; overflow:hidden; isolation:isolate;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.5);
}
.mega-menu.is-open .mega-menu__card{ opacity:1; transform:none; }
.mega-menu.is-open .mega-menu__card:hover{ transform:translateY(-4px); border-color: rgba(204,255,102,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--glow-lime); }
.mega-menu__card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(circle at 80% 0%, rgba(204,255,102,.28), transparent 60%);
}
.mega-menu__card::after{
  content:''; position:absolute; width:180px; height:180px; border-radius:50%; z-index:-1;
  background: radial-gradient(circle, rgba(255,90,60,.35), transparent 70%);
  bottom:-70px; right:-50px; filter:blur(6px);
  animation: float 8s ease-in-out infinite;
}
.mega-menu__card h3{ font-size:clamp(1.2rem,1.8vw,1.5rem); color:var(--paper); max-width:20ch; }
.mega-menu__card p{ color: var(--text-on-ink-70); font-size:var(--fs-small); }
.mega-menu__card .btn{ margin-top:.2rem; align-self:flex-start; }
@media (prefers-reduced-motion: reduce){
  .mega-menu__card::after{ animation:none; }
}
.mega-menu__close{
  position:absolute; top:clamp(1.2rem,2.4vw,1.8rem); right:var(--gutter); z-index:10;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background: rgba(246,243,236,.08); border:1px solid var(--ink-line); color:var(--paper);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.mega-menu__close:hover{ background: var(--lime); color:var(--ink); transform: rotate(90deg); }
.mega-menu__footer{
  flex-shrink:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:1.2rem 2rem;
  padding: 1.4rem var(--gutter) 2rem;
  font-family:var(--font-mono); font-size:var(--fs-tiny); color:var(--text-on-ink-45);
}
body.menu-open{ overflow:hidden; }
@media (max-width:900px){
  .mega-menu__inner{ grid-template-columns:1fr; gap:2.2rem; padding: clamp(2rem,6vw,2.6rem); }
  .mega-menu .wrap{ padding-block: clamp(4.5rem,14vw,5.5rem) 1rem; }
}
@media (prefers-reduced-motion: reduce){
  .mega-menu, .mega-menu__inner, .mega-menu__links a, .mega-menu__card{ transition:none; }
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   ========================================================================== */
.whatsapp-fab{
  position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:800;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 14px 34px -12px rgba(37,211,102,.6);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.whatsapp-fab:hover{ transform: scale(1.08); box-shadow: 0 18px 40px -12px rgba(37,211,102,.75); }
.whatsapp-fab svg{ width:28px; height:28px; }
.whatsapp-fab::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation: whatsapp-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes whatsapp-pulse{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.55); opacity:0; }
}
.whatsapp-fab .cursor-label{ display:none; }
@media (hover:hover) and (pointer:fine){
  .whatsapp-fab[data-tooltip]{ position:fixed; }
  .whatsapp-fab[data-tooltip]::after{
    content: attr(data-tooltip);
    position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
    background: var(--ink); color:var(--paper); white-space:nowrap;
    font-size:var(--fs-tiny); font-family:var(--font-body); font-weight:600;
    padding:.6em 1em; border-radius:100px;
    opacity:0; pointer-events:none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .whatsapp-fab[data-tooltip]:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
}
@media (max-width:640px){
  .whatsapp-fab{ width:52px; height:52px; }
  .whatsapp-fab svg{ width:25px; height:25px; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-fab::before{ display:none; }
}

/* ==========================================================================
   BOOST CHECK — interactive quiz
   ========================================================================== */
.quiz__progress{ height:6px; background:var(--paper-line); border-radius:100px; overflow:hidden; }
.quiz__progress-bar{ height:100%; width:0%; background:var(--gradient-primary); border-radius:100px; transition:width .5s var(--ease-out); }
.quiz__meta{ margin-top:1rem; font-family:var(--font-mono); font-size:var(--fs-tiny); color:var(--text-on-paper-45); text-transform:uppercase; letter-spacing:.08em; }
.quiz__step{ display:none; margin-top:clamp(2rem,4vw,3rem); }
.quiz__step.is-active{ display:block; animation: quiz-step-in .55s var(--ease-out); }
@keyframes quiz-step-in{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.quiz__question{ font-family:var(--font-display); font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:700; margin-bottom:1.8rem; max-width:24ch; }
.quiz__answers{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.quiz__card{
  display:flex; align-items:center; gap:1rem; text-align:left; width:100%;
  padding:1.3rem 1.5rem; border-radius:var(--radius-md); border:1.5px solid var(--paper-line);
  background:var(--paper); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.quiz__card:hover{ transform:translateY(-4px); border-color:var(--lime-dim); box-shadow:0 20px 40px -22px rgba(204,255,102,.5); }
.quiz__card.is-selected{ background:var(--ink); border-color:var(--ink); color:var(--paper); box-shadow: var(--glow-lime); }
.quiz__card-letter{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-dim); font-family:var(--font-mono); font-weight:700; font-size:var(--fs-small);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.quiz__card.is-selected .quiz__card-letter{ background:var(--lime); color:var(--ink); }
.quiz__card-text{ font-size:var(--fs-small); font-weight:600; }
.quiz__nav{ margin-top:2rem; display:flex; justify-content:space-between; align-items:center; }
.quiz__back{ font-family:var(--font-mono); font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.06em; color:var(--text-on-paper-45); display:flex; align-items:center; gap:.4em; transition:color var(--dur-fast); }
.quiz__back:not(:disabled):hover{ color:var(--ink); }
.quiz__back:disabled{ opacity:.3; cursor:default; }
@media (max-width:640px){ .quiz__answers{ grid-template-columns:1fr; } }

.quiz-result{ opacity:0; transition: opacity .6s var(--ease-out); }
.quiz-result.is-visible{ opacity:1; }

.quiz-result__score{
  font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,10vw,7rem);
  background: var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1; margin-block:.6rem 1.2rem;
}
.quiz-result__advice{ text-align:left; display:flex; flex-direction:column; gap:.7rem; margin-top:0; }
.quiz-result__advice li{
  display:flex; align-items:flex-start; gap:.6em; font-size:var(--fs-small);
  opacity:0; transform:translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.boost-result-card.is-visible .quiz-result__advice li{ opacity:1; transform:none; }
.boost-result-card.is-visible .quiz-result__advice li:nth-child(1){ transition-delay:.15s; }
.boost-result-card.is-visible .quiz-result__advice li:nth-child(2){ transition-delay:.23s; }
.boost-result-card.is-visible .quiz-result__advice li:nth-child(3){ transition-delay:.31s; }
.boost-result-card.is-visible .quiz-result__advice li:nth-child(4){ transition-delay:.39s; }

/* Boost Check result — sterke punten / verbeterpunten / aanbevelingen cards */
.boost-result-grid{ text-align:left; }
.boost-result-card{
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(26px) scale(.96);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.boost-result-card.is-visible{ opacity:1; transform:none; }
.boost-result-card:nth-child(1){ transition-delay:.05s; }
.boost-result-card:nth-child(2){ transition-delay:.16s; }
.boost-result-card:nth-child(3){ transition-delay:.27s; }
.boost-result-card.is-visible:hover{ transform:translateY(-4px); }
.boost-result-card__icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.1rem; flex:0 0 auto;
}
.boost-result-card--strengths .boost-result-card__icon{ background:rgba(204,255,102,.2); color:var(--lime-dim); }
.boost-result-card--improvements .boost-result-card__icon{ background:rgba(255,90,60,.16); color:var(--coral); }
.boost-result-card--advice .boost-result-card__icon{ background:rgba(109,40,217,.16); color:var(--violet); }
.boost-result-card__title{ font-size:1.1rem; margin-bottom:.3rem; }
@media (prefers-reduced-motion: reduce){
  .quiz-result, .boost-result-card, .quiz-result__advice li{ transition:none; opacity:1; transform:none; }
}

/* ==========================================================================
   REVEAL / SCROLL ANIMATION
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-scale]{ opacity:0; transform: scale(.92); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal-scale].is-visible{ opacity:1; transform:none; }
[data-reveal-left]{ opacity:0; transform: translateX(-48px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal-left].is-visible{ opacity:1; transform:none; }
[data-reveal-right]{ opacity:0; transform: translateX(48px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal-right].is-visible{ opacity:1; transform:none; }
[data-stagger] > *{ opacity:0; transform: translateY(30px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-stagger].is-visible > *{ opacity:1; transform:none; }
[data-stagger].is-visible > *:nth-child(1){ transition-delay:.02s; }
[data-stagger].is-visible > *:nth-child(2){ transition-delay:.1s; }
[data-stagger].is-visible > *:nth-child(3){ transition-delay:.18s; }
[data-stagger].is-visible > *:nth-child(4){ transition-delay:.26s; }
[data-stagger].is-visible > *:nth-child(5){ transition-delay:.34s; }
[data-stagger].is-visible > *:nth-child(6){ transition-delay:.42s; }

/* Bouncier "pop" stagger variant — for value/feature cards that want more punch */
[data-stagger].stagger--pop > *{ transform: translateY(24px) scale(.85) rotate(-3deg); transition: opacity .7s var(--ease-out), transform .8s cubic-bezier(.34,1.56,.64,1); }
[data-stagger].stagger--pop.is-visible > *{ opacity:1; transform:none; }

/* ==========================================================================
   VALUE CARDS (over-ons — waarden)
   ========================================================================== */
.value-card{
  position:relative; padding: clamp(1.4rem,2vw,1.9rem); border-radius: var(--radius-md);
  border:1px solid var(--paper-line); background: var(--paper);
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.value-card:hover{ transform: translateY(-8px) rotate(-1deg); border-color: transparent; box-shadow: 0 24px 48px -24px rgba(14,14,18,.18); }
.value-card__icon{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; font-size:1.5rem;
  background: var(--paper-dim); margin-bottom:1rem;
  transition: transform .4s var(--ease-out);
  animation: value-pulse 3.6s ease-in-out infinite;
}
.value-card:hover .value-card__icon{ transform: scale(1.12) rotate(10deg); }
.value-card:nth-child(2) .value-card__icon{ animation-delay:-.6s; }
.value-card:nth-child(3) .value-card__icon{ animation-delay:-1.2s; }
.value-card:nth-child(4) .value-card__icon{ animation-delay:-1.8s; }
.value-card:nth-child(5) .value-card__icon{ animation-delay:-2.4s; }
.value-card:nth-child(6) .value-card__icon{ animation-delay:-3s; }
@keyframes value-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(204,255,102,.45); }
  50%{ box-shadow: 0 0 0 9px rgba(204,255,102,0); }
}
@media (prefers-reduced-motion: reduce){
  .value-card__icon{ animation:none; }
}

/* Kinetic headline split */
.kinetic{ overflow:hidden; display:block; }
.kinetic .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.kinetic .word span{
  display:inline-block;
  transform: translateY(112%) rotate(4deg);
  transition: transform 1s var(--ease-out);
}
.kinetic.is-visible .word span{ transform:none; }
.kinetic .word:nth-child(1) span{ transition-delay:.02s; }
.kinetic .word:nth-child(2) span{ transition-delay:.07s; }
.kinetic .word:nth-child(3) span{ transition-delay:.12s; }
.kinetic .word:nth-child(4) span{ transition-delay:.17s; }
.kinetic .word:nth-child(5) span{ transition-delay:.22s; }
.kinetic .word:nth-child(6) span{ transition-delay:.27s; }
.kinetic .word:nth-child(7) span{ transition-delay:.32s; }
.kinetic .word:nth-child(8) span{ transition-delay:.37s; }
.kinetic .word:nth-child(9) span{ transition-delay:.42s; }
.kinetic .word:nth-child(10) span{ transition-delay:.47s; }
.kinetic .word:nth-child(11) span{ transition-delay:.52s; }
.kinetic .word:nth-child(12) span{ transition-delay:.57s; }
.kinetic .word:nth-child(n+13) span{ transition-delay:.6s; }

/* Floating decorative elements */
.float{ animation: float 6s ease-in-out infinite; }
.float--slow{ animation-duration:9s; }
.float--delay{ animation-delay:1.4s; }
@keyframes float{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-22px) rotate(6deg); } }

.spin-slow{ animation: spin 14s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   HERO MEDIA (video-style banner, Ken Burns fallback until real footage)
   ========================================================================== */
.hero-media{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 21/9;
  isolation:isolate;
}
.hero-media__img{
  width:100%; height:100%; object-fit:cover;
  animation: ken-burns 22s ease-in-out infinite alternate;
}
@keyframes ken-burns{
  0%{ transform: scale(1) translate(0,0); }
  100%{ transform: scale(1.12) translate(-1.5%,-1%); }
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,14,18,0) 40%, rgba(14,14,18,.55) 100%);
  pointer-events:none;
}
.hero-media__badge{
  position:absolute; bottom:1.2rem; left:1.2rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:var(--fs-tiny); letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper); background:rgba(14,14,18,.4); backdrop-filter:blur(6px);
  padding:.6em 1em; border-radius:100px; border:1px solid rgba(246,243,236,.25);
}
@media (max-width:700px){
  .hero-media{ aspect-ratio: 4/5; }
}

/* ==========================================================================
   PROCESS (werkwijze — numbered nodes on a connecting path)
   ========================================================================== */
.process{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top: clamp(3rem,6vw,5rem);
}
.process__step{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.1rem;
}
.process__node{
  position:relative;
  width:78px; height:78px; border-radius:50%;
  background: var(--ink); border:2px solid var(--lime);
  display:grid; place-items:center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.process__step:hover .process__node{ transform: translateY(-6px) scale(1.04); }
.process__node svg{ width:30px; height:30px; color: var(--lime); }
.process__node--down{ margin-top:2.4rem; }
.process__badge{
  position:absolute; top:-8px; right:-10px;
  width:28px; height:28px; border-radius:50%;
  background: var(--coral); color: var(--paper);
  font-family: var(--font-mono); font-size:.7rem;
  display:grid; place-items:center;
}
.process__step h3{ font-size:1.15rem; }
.process__step p{ color: var(--text-on-paper-70); font-size:var(--fs-small); max-width:26ch; }
.process__arrow{
  flex:0 0 auto; align-self:center; margin-top:39px;
  width:clamp(24px,3.5vw,48px); height:20px; color: var(--paper-line);
}
@media (max-width:800px){
  .process{ flex-direction:column; align-items:center; gap:2.4rem; }
  .process__node--down{ margin-top:0; }
  .process__arrow{ transform:rotate(90deg); margin-top:0; }
}

/* ==========================================================================
   ROADMAP — premium alternating vertical timeline ("Onze aanpak" per dienst)
   ========================================================================== */
.roadmap{ position:relative; margin-top: clamp(3rem,6vw,5rem); display:flex; flex-direction:column; gap: clamp(2.2rem,4.5vw,3.2rem); }
.roadmap::before{
  content:''; position:absolute; top:4px; bottom:4px; left:27px; width:2px;
  background: linear-gradient(180deg, var(--lime) 0%, var(--coral) 55%, var(--violet) 100%); opacity:.4;
}
.roadmap__item{ position:relative; padding-left:76px; }
.roadmap__node{
  position:absolute; left:0; top:0; z-index:1;
  width:56px; height:56px; border-radius:50%;
  background: var(--ink); border:2px solid var(--lime);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:.85rem; color:var(--lime);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.roadmap__item:hover .roadmap__node{ transform: scale(1.08); box-shadow: 0 0 0 7px rgba(204,255,102,.14); border-color: var(--coral); }
.roadmap__card{
  background: var(--ink-soft); border:1px solid var(--ink-line); border-radius: var(--radius-md);
  padding: clamp(1.5rem,2.4vw,2.2rem);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.roadmap__item:hover .roadmap__card{ transform: translateY(-4px); border-color: transparent; box-shadow: 0 24px 48px -24px rgba(0,0,0,.5), 0 30px 70px -30px rgba(204,255,102,.3); }
.roadmap__phase{ font-family:var(--font-mono); font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.08em; color: var(--coral); }
.roadmap__card h3{ font-size:1.25rem; color: var(--paper); margin-top:.4rem; }
.roadmap__fields{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.roadmap__fields div span{ font-family:var(--font-mono); font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.06em; color: var(--lime); }
.roadmap__fields div p{ margin-top:.25rem; color: var(--text-on-ink-70); font-size:var(--fs-small); }
@media (min-width:901px){
  .roadmap::before{ left:50%; margin-left:-1px; }
  .roadmap__item{ padding-left:0; display:grid; grid-template-columns:1fr 76px 1fr; column-gap:2.4rem; align-items:start; }
  .roadmap__node{ position:relative; left:auto; top:auto; grid-column:2; justify-self:center; }
  .roadmap__card{ grid-column:1; }
  .roadmap__item:nth-child(even) .roadmap__card{ grid-column:3; }
}

/* ==========================================================================
   SERVICE VISUAL — abstract gradient panel for services without dedicated
   photography (Platformen, AI & Automatisering)
   ========================================================================== */
.service-visual{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  display:grid; place-items:center;
}
.service-visual::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(246,243,236,.16) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.5; mix-blend-mode:overlay;
}
.service-visual svg{
  position:relative; z-index:1; width:clamp(84px,13vw,132px); height:clamp(84px,13vw,132px);
  color: var(--lime); opacity:.9;
}

/* ==========================================================================
   REVIEWS — featured quote treatment
   ========================================================================== */
.review-card{
  position:relative; overflow:hidden;
}
.review-card__stars{ display:flex; gap:.25em; color: var(--lime); }
.review-card__stars svg{ width:16px; height:16px; }
.review-card__quote{ font-size:1.2rem; line-height:1.55; margin-top:1.4rem; }
.review-card__who{ margin-top:1.8rem; display:flex; align-items:center; gap:.8rem; }
.review-card__mark{
  width:36px; height:36px; border-radius:50%; background: var(--lime);
  color: var(--ink); font-family: var(--font-display); font-weight:700;
  display:grid; place-items:center; font-size:.9rem; flex:0 0 auto;
}

/* ==========================================================================
   ATTENTION CARDS (waar gaat jouw aandacht naartoe)
   ========================================================================== */
.attention-card{ display:flex; flex-direction:column; }
.attention-card__icon{
  width:52px; height:52px; border-radius:50%; background: var(--paper-dim);
  display:grid; place-items:center; margin-bottom:1.4rem;
}
.bg-ink .attention-card__icon{ background: var(--ink); }
.attention-card__icon svg{ width:24px; height:24px; color: var(--coral); }
.attention-card .arrow{ transition: transform var(--dur-fast) var(--ease-out); margin-top:auto; padding-top:1.2rem; }
.attention-card:hover .arrow{ transform: translate(4px,-4px); }

/* ==========================================================================
   INSIGHT BANNERS (replace random stock photos with on-brand icon banners)
   ========================================================================== */
.insight-banner{
  position:relative; width:100%; overflow:hidden;
  aspect-ratio:16/9; border-radius: var(--radius-lg);
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--ink), var(--ink-soft));
  transition: transform .6s var(--ease-out);
}
.gallery-grid__item:hover .insight-banner{ transform: scale(1.06); }
.insight-banner--grid{ aspect-ratio:4/3; border-radius: var(--radius-md); }
.insight-banner::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 26% 20%, rgba(255,255,255,.18), transparent 55%);
}
.insight-banner::after{
  content:''; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 16px);
}
.insight-banner svg{ position:relative; z-index:1; width:26%; max-width:110px; color: var(--paper); }
.insight-banner--grid svg{ width:24%; max-width:64px; }
.insight-banner--branding{ background: linear-gradient(135deg, var(--coral), var(--coral-dim)); }
.insight-banner--web{ background: linear-gradient(135deg, var(--violet), var(--violet-deep)); }
.insight-banner--marketing{ background: linear-gradient(135deg, #2A2A33, var(--ink)); }
.insight-banner--content{ background: linear-gradient(135deg, var(--coral), var(--violet-deep)); }
.insight-banner--groei{ background: linear-gradient(135deg, var(--ink), var(--violet-deep)); }
.insight-banner--identiteit{ background: linear-gradient(135deg, var(--lime-dim), var(--lime)); }
.insight-banner--identiteit svg{ color: var(--ink); }
.insight-banner--grafisch{ background: linear-gradient(135deg, var(--coral-dim), var(--ink)); }

/* ==========================================================================
   CASE PAGES — client badge, meta strip, photo gallery
   ========================================================================== */
.client-badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.7em 1.2em; border-radius:100px;
  border:1.5px solid var(--paper-line); background: var(--paper);
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em; color: var(--ink);
}
.client-badge__dot{ width:9px; height:9px; border-radius:50%; background: var(--coral); flex:0 0 auto; }

.meta-strip{ display:flex; gap:0; flex-wrap:wrap; margin-top:2.4rem; }
.meta-strip__item{
  flex:1; min-width:160px; padding:1.1rem 1.4rem;
  border-left:2px solid var(--coral);
  background: var(--paper-dim);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.meta-strip__item:hover{ transform: translateY(-4px); background: var(--lime); }
.meta-strip__item:hover .meta-strip__label,
.meta-strip__item:hover .meta-strip__value{ color: var(--ink); }
.meta-strip__label{ font-family:var(--font-mono); font-size:var(--fs-tiny); color: var(--text-on-paper-45); text-transform:uppercase; letter-spacing:.08em; }
.meta-strip__value{ margin-top:.35em; font-weight:600; }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1.1rem; }
.gallery-grid__item{ position:relative; overflow:hidden; border-radius: var(--radius-md); display:block; }
.gallery-grid__item img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition: transform .6s var(--ease-out);
}
.gallery-grid__item:hover img{ transform: scale(1.07); }

/* ==========================================================================
   CASE SLIDER (case pages — visuele impressie slideshow)
   ========================================================================== */
.case-slider{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio:16/9; isolation:isolate;
  box-shadow: 0 30px 60px -30px rgba(14,14,18,.3);
}
.case-slider__track{
  display:flex; width:100%; height:100%;
  transition: transform .6s var(--ease-out);
}
.case-slider__slide{ flex:0 0 100%; width:100%; height:100%; }
.case-slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(14,14,18,.5);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border:1px solid rgba(246,243,236,.25);
  color: var(--paper);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.case-slider__arrow svg{ width:20px; height:20px; }
.case-slider__arrow:hover{ background: var(--lime); color: var(--ink); border-color: var(--lime); transform: translateY(-50%) scale(1.08); }
.case-slider__arrow--prev{ left: clamp(.7rem,2vw,1.4rem); }
.case-slider__arrow--next{ right: clamp(.7rem,2vw,1.4rem); }
.case-slider__dots{
  position:absolute; bottom: clamp(.9rem,2vw,1.4rem); left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:.5rem;
}
.case-slider__dot{
  width:8px; height:8px; border-radius:100px;
  background: rgba(246,243,236,.55); border:1px solid rgba(255,255,255,.4);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.case-slider__dot:hover{ background: rgba(246,243,236,.8); }
.case-slider__dot.is-active{ background: var(--lime); border-color: var(--lime); width:24px; }
@media (max-width:640px){
  .case-slider__arrow{ width:42px; height:42px; }
  .case-slider__arrow svg{ width:17px; height:17px; }
}
@media (prefers-reduced-motion: reduce){
  .case-slider__track{ transition:none; }
}

/* ==========================================================================
   STORY RAIL (diensten.html — scroll storytelling progress)
   ========================================================================== */
.story-rail{
  position:fixed; right: clamp(1.2rem,2.6vw,2.4rem); top:50%; transform:translateY(-50%);
  z-index:400; display:flex; align-items:stretch; gap:.9rem;
  height:180px;
}
.story-rail__track{ position:relative; width:2px; border-radius:2px; background: var(--paper-line); }
.story-rail__fill{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background: var(--lime); border-radius:2px;
  transform-origin:top; transform:scaleY(0);
  transition: transform .12s linear;
}
.story-rail__items{ display:flex; flex-direction:column; justify-content:space-between; }
.story-rail__item{
  display:flex; align-items:center; gap:.6em; text-decoration:none;
  font-family:var(--font-mono); font-size:var(--fs-tiny); letter-spacing:.05em; text-transform:uppercase;
  color: var(--text-on-paper-45);
  transition: color .3s var(--ease-out);
}
.story-rail__dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background: var(--paper); border:2px solid var(--paper-line);
  transition: background .3s, border-color .3s, transform .3s var(--ease-out);
}
.story-rail__item.is-active{ color: var(--ink); }
.story-rail__item.is-active .story-rail__dot{ background: var(--lime); border-color: var(--lime); transform: scale(1.35); }
@media (max-width:1150px){ .story-rail{ display:none; } }
@media (prefers-reduced-motion: reduce){ .story-rail__fill{ transition:none; } }

/* Top-of-page scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:600;
  background: var(--lime); transform-origin:left; transform:scaleX(0);
  pointer-events:none;
}

/* Giant background chapter number — scroll-linked parallax watermark */
.service-num{
  position:absolute; top:50%; left:50%; z-index:0;
  transform:translate(-50%,-50%);
  font-family: var(--font-display); font-weight:800; line-height:1;
  font-size:clamp(9rem,24vw,22rem);
  color: var(--ink); opacity:.045;
  pointer-events:none; white-space:nowrap;
  will-change: transform;
}
.bg-ink .service-num{ color: var(--paper); opacity:.05; }

/* Scroll-linked parallax wrapper for service images */
.service-parallax-img{ will-change: transform; }

@media (max-width:900px){ .service-num{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .service-num, .service-parallax-img{ transform:none !important; }
  .scroll-progress{ display:none; }
}

/* ==========================================================================
   GRADIENT BLOBS
   ========================================================================== */
.blob-field{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%;
  filter: blur(70px);
  opacity:.55;
  animation: blob-move 16s var(--ease-in-out) infinite;
}
@keyframes blob-move{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(4%,6%) scale(1.12); }
  66%{ transform: translate(-5%,-3%) scale(.94); }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{ overflow:hidden; white-space:nowrap; position:relative; }
.marquee__track{ display:inline-flex; gap: clamp(2rem,4vw,4.5rem); animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.marquee__item{
  font-family: var(--font-display); font-size: clamp(1.6rem,3.6vw,3rem);
  font-weight:700; color: var(--text-on-paper-45); display:flex; align-items:center; gap: clamp(2rem,4vw,4.5rem);
}
.bg-ink .marquee__item{ color: var(--text-on-ink-45); }
.marquee__item svg{ width:.7em; height:.7em; color: var(--coral); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background: var(--paper);
  border:1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: clamp(1.6rem,2.4vw,2.4rem);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(14,14,18,.16), 0 30px 70px -30px rgba(204,255,102,.4); border-color: transparent; }
.bg-ink .card{ background: var(--ink-soft); border-color: var(--ink-line); }
.bg-ink .card:hover{ box-shadow:0 24px 48px -24px rgba(0,0,0,.5), 0 30px 70px -30px rgba(255,90,60,.35); }

.chip{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:var(--fs-tiny); letter-spacing:.06em; text-transform:uppercase;
  padding:.5em 1em; border-radius:100px; border:1px solid var(--paper-line);
}
.chip--filled{ background: var(--ink); color: var(--paper); border-color:transparent; }
.chip--lime{ background: var(--lime); color: var(--ink); border-color:transparent; }

/* ==========================================================================
   SERVICES GRID (homepage "Wat we doen" — connected, hairline card grid)
   ========================================================================== */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background: var(--paper-line); border:1px solid var(--paper-line);
  border-radius: var(--radius-md); overflow:hidden;
}
.bg-ink .services-grid{ background: var(--ink-line); border-color: var(--ink-line); }
.service-tile{
  position:relative; background: var(--paper); padding: clamp(1.8rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; min-height:15.5rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bg-ink .service-tile{ background: var(--ink); }
.service-tile::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--gradient-primary); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur-med) var(--ease-out);
}
.service-tile:hover{ background: var(--paper-dim); transform: translateY(-4px); z-index:1; }
.bg-ink .service-tile:hover{ background: var(--ink-soft); }
.service-tile:hover::before{ transform: scaleX(1); }
.service-tile svg{ margin-block:1.1rem; color: var(--ink); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.bg-ink .service-tile svg{ color: var(--paper); }
.service-tile:hover svg{ color: var(--coral); transform: translateY(-2px); }
.service-tile h3{ font-size:1.2rem; }
.service-tile p{ margin-top:.5rem; color: var(--text-on-paper-70); font-size:var(--fs-small); }
.service-tile__detail{
  margin-top:0; padding-top:0; border-top:1px dashed transparent;
  font-family:var(--font-mono); font-size:var(--fs-tiny); color: var(--text-on-paper-45); letter-spacing:.02em;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), margin-top var(--dur-fast), padding-top var(--dur-fast), border-color var(--dur-fast);
}
.service-tile:hover .service-tile__detail{ margin-top:.9rem; padding-top:.9rem; border-top-color: var(--paper-line); max-height:6rem; opacity:1; }
.service-tile .arrow{ margin-top:auto; align-self:flex-end; padding-top:1rem; opacity:0; transform:translate(-6px,6px); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.service-tile:hover .arrow{ opacity:1; transform:translate(0,0); }
@media (max-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--ink); color: var(--text-on-ink); position:relative; overflow:hidden; }
.footer a:hover{ color: var(--lime); }
.footer__top{ padding-block: clamp(3.5rem,7vw,6rem); border-bottom:1px solid var(--ink-line); }
.footer__cta{ font-family:var(--font-display); font-size: clamp(2.2rem,6vw,5.5rem); font-weight:700; letter-spacing:-.02em; max-width:16ch; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; padding-block: clamp(2.5rem,5vw,4rem); }
.footer__col h4{ font-family:var(--font-mono); font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.1em; color:var(--text-on-ink-45); margin-bottom:1.2em; font-weight:400; }
.footer__col li{ margin-bottom:.7em; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:1.6rem; border-top:1px solid var(--ink-line); font-size:var(--fs-tiny); color: var(--text-on-ink-45); flex-wrap:wrap; gap:1rem; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FORM
   ========================================================================== */
.field{ position:relative; margin-bottom:1.6rem; }
.field label{ display:block; font-family:var(--font-mono); font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6em; color: var(--text-on-ink-70); }
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--ink-line);
  padding:.8em .2em; color: var(--paper); font-size:1.05rem; transition: border-color var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-on-ink-45); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--lime); box-shadow: 0 8px 24px -12px rgba(204,255,102,.5); }
.field textarea{ resize:vertical; min-height:100px; }
.field select option{ background: var(--ink); }
.form-status{ font-size:var(--fs-small); margin-top:1rem; font-family:var(--font-mono); }
.form-status.is-success{ color: var(--lime); }
.form-status.is-error{ color: var(--coral); }

/* Fields placed inside a light `.card` (e.g. Boost Check lead form) need
   ink-on-paper contrast instead of the paper-on-ink defaults above. */
.card .field label{ color: var(--text-on-paper-70); }
.card .field input, .card .field textarea, .card .field select{
  color: var(--ink); border-bottom-color: var(--paper-line);
}
.card .field input::placeholder, .card .field textarea::placeholder{ color: var(--text-on-paper-45); }
.card .field input:focus, .card .field textarea:focus, .card .field select:focus{
  border-color: var(--lime-dim); box-shadow: 0 8px 24px -12px rgba(204,255,102,.35);
}
.card .field select option{ background: var(--paper); color: var(--ink); }
.card .form-status.is-success{ color:#5C8A1F; }
.card .form-status.is-error{ color: var(--coral-dim); }

/* ==========================================================================
   BACK TO TOP / MISC
   ========================================================================== */
.divider{ height:1px; background: var(--paper-line); }
.bg-ink .divider{ background: var(--ink-line); }
.hairline-top{ border-top:1px solid var(--paper-line); }
.bg-ink.hairline-top{ border-color: var(--ink-line); }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--lime); color:var(--ink); padding:1em; z-index:10001; }
.skip-link:focus{ left:1rem; top:1rem; }

.num{ font-family: var(--font-mono); font-size:var(--fs-tiny); color: var(--text-on-paper-45); }
.bg-ink .num{ color: var(--text-on-ink-45); }

/* ==========================================================================
   CONTACT — path cards & flask illustration
   ========================================================================== */
.path-card{
  display:block; padding:2rem; border-radius: var(--radius-md);
  border:1.5px solid var(--ink-line); background: var(--ink-soft);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast);
}
.path-card:hover{ transform: translateY(-6px); border-color: var(--lime); background: var(--ink); }
.path-card .arrow{ transition: transform var(--dur-fast) var(--ease-out); }
.path-card:hover .arrow{ transform: translate(4px,-4px); }

.flask-wrap{ display:flex; align-items:center; justify-content:center; padding: 2rem; }
.flask{ transition: transform .4s var(--ease-out); filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.bubble{ animation: bubble-rise 3.4s ease-in infinite; transform-origin:center; }
.bubble--2{ animation-duration:4.1s; animation-delay:.5s; }
.bubble--3{ animation-duration:3.7s; animation-delay:1.1s; }
.bubble--4{ animation-duration:4.6s; animation-delay:.2s; }
@keyframes bubble-rise{
  0%{ transform: translateY(0) scale(1); opacity:.85; }
  90%{ opacity:.5; }
  100%{ transform: translateY(-150px) scale(.6); opacity:0; }
}

.social-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.social-row a{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink-line);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.social-row a:hover{ background: var(--lime); border-color: var(--lime); color:var(--ink); transform: translateY(-4px); }

/* ==========================================================================
   INSIGHTS — search field
   ========================================================================== */
.search-field{ position:relative; max-width:420px; }
.search-field input{
  width:100%; padding:.9em 1.2em .9em 2.6em; border-radius:100px;
  border:1.5px solid var(--paper-line); background: var(--paper); font-size:.95rem;
  transition: border-color var(--dur-fast);
}
.search-field input:focus{ outline:none; border-color: var(--ink); }
.search-field svg{ position:absolute; left:1.1em; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--text-on-paper-45); pointer-events:none; }

/* ==========================================================================
   PRIJZEN — sticky category nav, price cards, accordion FAQ
   ========================================================================== */
.pricing-layout{ display:grid; grid-template-columns:1fr 200px; gap: clamp(2.5rem,5vw,5rem); align-items:start; }
.pricing-nav{
  position:sticky; top:130px;
  display:flex; flex-direction:column; gap:.85rem;
  padding-left:1.1rem; border-left:2px solid var(--paper-line);
}
.pricing-nav a{
  font-family:var(--font-mono); font-size:var(--fs-tiny); letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-on-paper-45); font-weight:600;
  transition: color var(--dur-fast) var(--ease-out);
  position:relative;
}
.pricing-nav a::before{
  content:''; position:absolute; left:-1.36rem; top:50%; width:8px; height:8px; border-radius:50%;
  background: var(--paper); border:2px solid var(--paper-line); transform:translateY(-50%) scale(1);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.pricing-nav a:hover{ color: var(--ink); }
.pricing-nav a.is-active{ color: var(--ink); }
.pricing-nav a.is-active::before{ background: var(--lime); border-color: var(--lime); transform:translateY(-50%) scale(1.35); }
@media (max-width:1100px){
  .pricing-layout{ grid-template-columns:1fr; }
  .pricing-nav{ display:none; }
}

.pricing-jump{ display:none; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
@media (max-width:1100px){ .pricing-jump{ display:flex; } }

.price-category{ scroll-margin-top:110px; padding-block: clamp(2.6rem,5vw,4rem); border-top:1px solid var(--paper-line); }
.price-category:first-child{ border-top:none; padding-top:0; }
.price-category__head{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; margin-bottom: clamp(1.8rem,3vw,2.6rem); }
.price-category__head h2{ font-size: clamp(1.9rem,3.6vw,2.8rem); }
.price-category__head p{ color: var(--text-on-paper-70); max-width:42ch; }

.price-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap: 1.2rem; }
.price-card{
  display:flex; flex-direction:column; gap:.7rem; height:100%;
  position:relative; isolation:isolate;
}
.price-card__title{ font-size:1.2rem; margin-top:.2rem; }
.price-card__desc{ color: var(--text-on-paper-70); font-size:var(--fs-small); flex:1; }
.price-card__price{
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--paper-line);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.price-card__amount{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.price-card__link{
  font-family:var(--font-mono); font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-on-paper-45); display:inline-flex; align-items:center; gap:.4em;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.price-card:hover .price-card__link{ color: var(--ink); transform: translateX(3px); }

.price-card--dark{ background: var(--ink); color: var(--paper); border-color: transparent; }
.price-card--dark .price-card__desc{ color: var(--text-on-ink-70); }
.price-card--dark .price-card__price{ border-top-color: var(--ink-line); }
.price-card--dark .price-card__link{ color: var(--text-on-ink-45); }
.price-card--dark:hover .price-card__link{ color: var(--lime); }
.price-card--dark:hover{ box-shadow: 0 24px 48px -24px rgba(0,0,0,.5), var(--glow-coral); }

.price-card--gradient{ background: var(--gradient-dark); color: var(--paper); border-color: transparent; }
.price-card--gradient .price-card__desc{ color: var(--text-on-ink-70); }
.price-card--gradient .price-card__price{ border-top-color: rgba(246,243,236,.16); }
.price-card--gradient .price-card__link{ color: var(--text-on-ink-45); }
.price-card--gradient:hover .price-card__link{ color: var(--lime); }
.price-card--gradient:hover{ box-shadow: 0 24px 48px -24px rgba(0,0,0,.5), var(--glow-violet); }

/* Accordion — FAQ */
.accordion__item{ border-bottom:1px solid var(--paper-line); }
.bg-ink .accordion__item{ border-color: var(--ink-line); }
.accordion__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding: clamp(1.4rem,3vw,2rem) 0; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,2vw,1.5rem);
  transition: color var(--dur-fast);
}
.accordion__trigger:hover{ color: var(--coral); }
.accordion__icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--paper-line);
  display:grid; place-items:center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.bg-ink .accordion__icon{ border-color: var(--ink-line); }
.accordion__icon svg{ width:14px; height:14px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ background: var(--lime); border-color: var(--lime); color: var(--ink); transform: rotate(135deg); }
.accordion__panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .45s var(--ease-out); }
.accordion__panel-inner{ overflow:hidden; }
.accordion__panel.is-open{ grid-template-rows:1fr; }
.accordion__panel p{ padding-bottom: clamp(1.4rem,3vw,2rem); color: var(--text-on-paper-70); max-width:60ch; font-size:1.02rem; }
@media (prefers-reduced-motion: reduce){
  .accordion__panel{ transition:none; }
  .accordion__icon{ transition:none; }
}