/* THNK DIFFERENT — Editorial Perspective
   Single visual principle: change of perspective, told through a static aerial photograph
   and a small set of exceptional images. No motion for motion's sake. No carousels, no gimmicks.

   TYPOGRAPHY SYSTEM — max 2 families, chosen for family resemblance with the THNK DIFFERENT
   logo (bold/tight-cut "THNK" + light/wide-tracked "DIFFERENT" sub-label). Applied consistently
   across every label-like element on the site — nav, footer nav, eyebrows, section labels,
   image tags, form labels, payoff line — so they read as one system, not several:
   - DISPLAY   Space Grotesk 700, tight tracking (negative). Brand lockup, section h1/h2/h3,
               big statements, stats (14 DAGEN, €14.995, JOUW THNK SCORE).
   - SUPPORT   Space Grotesk, uppercase, wide tracking (+0.06–0.16em). Echoes the logo's
               "DIFFERENT" sub-label. Weight flexes with size for legibility: 500 for small
               interactive UI text (nav, footer nav, eyebrows, image tags, form labels), 300
               for larger, more spacious lines (hero payoff, full-bleed image captions).
   - BODY      Inter 400/500/600, normal tracking, sentence case. Paragraphs, forms, buttons. */

:root{
  --bg:#0e1013;
  --bg-alt:#15181d;
  --card:#191c22;
  --card-border:rgba(255,255,255,0.10);
  --text:#f4f5f7;
  --text-dim:#a5aab3;
  --text-dimmer:#757983;
  --accent:#c8ff2b;
  --accent-2:#3d7bff;
  --whatsapp:#25d366;
  --radius:18px;
  --maxw:1180px;
  --maxw-narrow:760px;
  --nav-h:76px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--maxw-narrow);margin:0 auto;padding:0 24px;}
.wrap-perspective{max-width:920px;margin:0 auto;padding:0 24px;}

h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.08;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
button{font-family:inherit;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#0e1013;
  padding:12px 20px;z-index:1000;font-weight:600;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.bg-grid{
  position:fixed;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;
}
.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,transparent 40%,rgba(0,0,0,0.35) 100%);
}

/* ---------- Header / Nav ---------- */
header#siteHeader{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
header#siteHeader.scrolled{
  background:rgba(14,16,19,0.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--card-border);
}
.nav{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;}
.logo-link{display:flex;align-items:center;}
.logo-mark{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{font-family:'Space Grotesk',sans-serif;font-size:0.85rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-dim);transition:color .2s;}
.nav-links a:hover,.nav-links a.current{color:var(--text);}
.nav-links a.nav-cta{color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
.nav-links a.nav-cta:hover{color:var(--accent);}
.nav-links a.nav-cta .btn-arrow{transition:transform .2s;}
.nav-links a.nav-cta:hover .btn-arrow{transform:translateX(4px);}
.lang-switch{
  font-size:0.76rem !important;padding:5px 11px;border:1px solid var(--card-border);border-radius:100px;
}
.lang-switch:hover{border-color:rgba(255,255,255,0.3);}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;z-index:110;}
.burger span{display:block;width:22px;height:2px;background:var(--text);transition:transform .3s,opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:opacity .3s;z-index:90;}
.scrim.open{opacity:1;visibility:visible;}
.mobile-menu{
  position:fixed;top:0;right:-100%;width:min(320px,84vw);height:100vh;
  background:var(--bg-alt);z-index:95;padding:110px 32px 40px;
  display:flex;flex-direction:column;gap:26px;
  transition:right .35s cubic-bezier(.22,1,.36,1);
  border-left:1px solid var(--card-border);
}
.mobile-menu.open{right:0;}
.mobile-menu a{font-size:1.1rem;font-weight:600;color:var(--text);}
.mobile-menu a.nav-cta{color:var(--accent);}
.mobile-menu a.lang-switch{align-self:flex-start;}

@media (max-width:860px){
  .nav-links{display:none;}
  .burger{display:flex;}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ---------- Hero — static, exceptional aerial still. No motion on the image itself. ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:1;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);}
.hero-static-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;
  filter:brightness(.72) saturate(1.05) contrast(1.05);
}
.hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(14,16,19,0.55) 0%,rgba(14,16,19,0.15) 40%,rgba(14,16,19,0.65) 100%);
}
.hero-inner{position:relative;z-index:3;padding:calc(var(--nav-h) + 30px) 0 70px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.brand-hero{margin-bottom:10px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.brand-hero-title{display:flex;justify-content:center;}
.brand-hero-logo{
  width:min(88vw,920px);height:auto;color:var(--text);
  opacity:0;transform:translateY(26px) scale(0.97);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);
}
.brand-hero-logo.enter{opacity:1;transform:translateY(0) scale(1);}
.brand-hero-payoff{
  margin-top:26px;font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.35rem);color:var(--accent);
  opacity:0;transform:translateY(16px);transition:opacity .9s ease .3s,transform .9s ease .3s;
}
.brand-hero-payoff.enter{opacity:1;transform:translateY(0);}
.hero-sub{
  margin-top:28px;max-width:620px;font-size:clamp(1.2rem,2.1vw,1.55rem);color:var(--text-dim);
  opacity:0;transform:translateY(16px);transition:opacity .9s ease .5s,transform .9s ease .5s;
}
.hero-sub.enter{opacity:1;transform:translateY(0);}
.hero-rotate-word{color:#fff;font-weight:600;transition:opacity .35s ease;}

/* ---------- Section shells ---------- */
section{padding:110px 0;position:relative;}
.section-label{
  display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.section-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:0.12;z-index:0;pointer-events:none;}
.glow-lime{background:var(--accent);}
.glow-blue{background:var(--accent-2);}

/* ---------- Homepage chapters: each answers one question, each feels different ---------- */
.chapter-num{color:var(--accent);}
.chapter-01{
  background:var(--bg-alt);border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);
  padding:150px 0 150px;
}
.perspective-lead{font-size:clamp(1.1rem,2.4vw,1.4rem);color:var(--text-dim);line-height:1.6;max-width:760px;}
.text-accent{color:var(--accent);}

/* The coffee quote is a deliberate visual break: a small, isolated detail (one cup, one
   long shadow, an otherwise empty surface) with the fluor quote centred on top of it —
   a short, wide band rather than a dominant photo, so the quote carries the moment and
   the image supports it instead of overpowering it. Flexbox centering (not absolute
   positioning with manual offsets) keeps the quote genuinely centred both ways. */
.perspective-visual{
  position:relative;width:100%;aspect-ratio:2.8/1;overflow:hidden;margin-top:96px;background:#1a1410;
  display:flex;align-items:center;justify-content:center;
}
.perspective-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;}
.perspective-visual-scrim{position:absolute;inset:0;background:rgba(18,12,8,0.4);}
.perspective-quote{
  position:relative;z-index:1;max-width:700px;padding:0 32px;margin:0;
  color:var(--accent);font-family:'Space Grotesk',sans-serif;font-weight:600;font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.34;letter-spacing:-0.01em;text-align:center;
}
@media (max-width:760px){
  .perspective-visual{aspect-ratio:1/1;margin-top:64px;}
  .perspective-quote{font-size:clamp(1.15rem,4.6vw,1.5rem);padding:0 28px;}
}

/* ---------- Keuze: three equal routes, same ratio, size and hierarchy ---------- */
.route-intro{padding-top:120px;padding-bottom:110px;}
.chapter-03-title{max-width:600px;margin-bottom:48px;font-size:clamp(1.5rem,3vw,2rem);}
.route-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.route-tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:3/4;padding:28px;overflow:hidden;background:var(--card);
  border:1px solid var(--card-border);border-radius:var(--radius);
  transition:border-color .25s,transform .25s;
}
.route-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.25);}
.route-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.route-tile:hover img{transform:scale(1.04);}
.route-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,19,0.1) 0%,rgba(14,16,19,0.88) 100%);}
.route-eyebrow{
  position:relative;z-index:1;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.76rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;
}
.route-headline{position:relative;z-index:1;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.7rem;color:var(--text);letter-spacing:-0.01em;margin-bottom:10px;}
.route-desc{position:relative;z-index:1;font-size:0.86rem;line-height:1.45;color:var(--text-dim);margin-bottom:16px;max-width:260px;}
.route-price-mini{position:relative;z-index:1;display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.92rem;color:var(--accent);margin-bottom:14px;}
.route-cta{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:0.9rem;
  color:var(--text);width:fit-content;padding:11px 20px;border-radius:100px;border:1px solid rgba(255,255,255,0.25);
  transition:border-color .2s,color .2s;
}
.route-tile:hover .route-cta{border-color:var(--accent);color:var(--accent);}
.route-tile:hover .btn-arrow{transform:translateX(4px);}
.route-tile-scan img{object-position:82% 30%;transform:scale(1.55);}
.route-tile-together img{object-position:center 38%;transform:scale(1.08);}
.route-tile-analyse img{object-position:center 58%;transform:scale(1.02);}
@media (max-width:860px){
  .route-grid{grid-template-columns:1fr;gap:18px;}
  .route-tile{aspect-ratio:auto;min-height:320px;}
}

/* ---------- Standalone route pages (scan.html / together.html / analyse.html):
   a large, high-impact full-bleed visual, then the story below it. ---------- */
.page-hero{position:relative;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden;}
.page-hero-media{position:absolute;inset:0;z-index:1;}
.page-hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.74) saturate(1.05) contrast(1.05);}
.page-hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(14,16,19,0.3) 0%,rgba(14,16,19,0.4) 45%,rgba(14,16,19,0.96) 100%);}
.page-hero-inner{position:relative;z-index:3;width:100%;padding:calc(var(--nav-h) + 40px) 0 64px;}
.page-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:36px;
  font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;
}
.page-back:hover{color:var(--text);}
.page-hero-eyebrow{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.85rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.page-hero-title{font-size:clamp(2.6rem,7vw,5rem);max-width:820px;color:var(--text);}
.page-hero-sub{margin-top:18px;font-size:clamp(1.05rem,1.9vw,1.25rem);color:var(--text-dim);line-height:1.6;max-width:600px;}
.page-hero-cta{margin-top:32px;margin-bottom:0;}
.page-content{padding:48px 0;}
@media (max-width:600px){
  .page-hero{min-height:64svh;}
  .page-content{padding:32px 0;}
}

/* THNK Together — reveal a minimal form after one click, then a short thank-you */
.together-form-wrap,.together-thanks{display:none;}
#together[data-state="form"] .together-intro-cta{display:none;}
#together[data-state="form"] .together-form-wrap{display:block;margin-top:8px;max-width:480px;}
#together[data-state="thanks"] .together-intro-cta,
#together[data-state="thanks"] .together-form-wrap{display:none;}
#together[data-state="thanks"] .together-thanks{display:block;}

/* ---------- Asymmetric content sections (Scan / Analyse / Over) ---------- */
.split{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:start;
}
.split.rev{grid-template-columns:1.1fr 0.9fr;}
.split.rev .split-media{order:2;}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:1fr;gap:40px;}
  .split.rev .split-media{order:0;}
}
.split-eyebrow{display:block;font-family:'Space Grotesk',sans-serif;font-size:0.8rem;font-weight:500;letter-spacing:0.14em;color:var(--text-dimmer);text-transform:uppercase;margin-bottom:16px;}
.split h2{font-size:clamp(1.9rem,4.2vw,2.9rem);margin-bottom:22px;}
.split p{color:var(--text-dim);font-size:1.03rem;margin-bottom:18px;max-width:560px;}
.split p strong{color:var(--text);}
/* Why-me (chapter-04) column must never grow visually taller than the portrait next
   to it. No eyebrow/keyline/signature here anymore (plain running text), and the
   fit margin is comfortable, so this only trims the heading slightly and keeps
   paragraph rhythm calm rather than aggressively compact. */
.chapter-04 .split h2{font-size:clamp(1.7rem,3.2vw,2.2rem);margin-bottom:20px;}
.chapter-04 .split p{font-size:1.03rem;line-height:1.58;margin-bottom:20px;}
.price-line{
  display:inline-flex;align-items:baseline;gap:10px;margin:8px 0 26px;padding:14px 22px;
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;
}
.price-line .amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--accent);}
.price-line .excl{font-size:0.82rem;color:var(--text-dimmer);}

.outcome-list{list-style:none;margin:22px 0 26px;}
.outcome-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;color:var(--text-dim);font-size:0.98rem;}
.outcome-icon{flex-shrink:0;width:22px;height:22px;margin-top:1px;color:var(--accent);}
.outcome-icon svg{width:100%;height:100%;}

/* ---------- THNK Scan: interactive scored quiz ---------- */
.scan-quiz-wrap{margin-top:64px;}
.scan-quiz{
  background:#1e2a14;border:2px solid var(--accent);border-radius:var(--radius);
  padding:48px 44px;position:relative;z-index:1;
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.7),0 0 40px rgba(200,255,43,0.12);
}
.scan-hook{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--text);letter-spacing:-0.01em;margin-bottom:22px;max-width:560px;}
.scan-hook span{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:1rem;color:var(--text-dim);margin-top:8px;letter-spacing:0;}

/* Scan state machine: intro (button in the split column above) -> quiz (one statement at a time) -> result -> form -> thanks */
.scan-quiz-body,.scan-result,.scan-lead,.scan-thanks{display:none;}
.scan-quiz[data-state="quiz"] .scan-quiz-body{display:block;}
.scan-quiz[data-state="result"] .scan-result{display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
.scan-quiz[data-state="form"] .scan-lead{display:block;}
.scan-quiz[data-state="thanks"] .scan-thanks{display:block;text-align:center;}

.scan-progress{
  text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.85rem;
  letter-spacing:0.12em;color:var(--text-dimmer);margin-bottom:28px;
}
.scan-progress span:first-child{color:var(--accent);}
.scan-q{display:none;text-align:center;max-width:640px;margin:0 auto;}
.scan-q.active{display:block;}
.scan-q-text{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.25rem,3vw,1.7rem);
  color:var(--text);letter-spacing:-0.01em;line-height:1.3;margin-bottom:34px;
  background:var(--bg);border:1px solid rgba(255,255,255,0.08);border-radius:16px;
  padding:32px 34px;
}
.scan-q-numbers{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.scan-num{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.06);
  color:var(--text);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s,color .15s;
}
.scan-num:hover{border-color:rgba(200,255,43,0.5);transform:translateY(-2px);}
.scan-num.selected{background:var(--accent);color:#0e1013;border-color:var(--accent);}
.scan-q-meaning{display:flex;justify-content:space-between;gap:12px;font-size:0.8rem;color:var(--text-dimmer);max-width:460px;margin:0 auto;}
.scan-back{
  display:block;margin:32px auto 0;background:none;border:none;color:var(--text-dimmer);font-size:0.86rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:inherit;
}
.scan-back:hover{color:var(--text-dim);}
.scan-back:disabled{visibility:hidden;}

.scan-score-circle{position:relative;width:140px;height:140px;flex-shrink:0;}
.scan-score-circle svg{transform:rotate(-90deg);}
.scan-score-track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:8;}
.scan-score-fill{
  fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);
}
.scan-score-num{
  position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:2px;
  font-family:'Space Grotesk',sans-serif;color:var(--text);
}
.scan-score-num span:first-child{font-size:2.1rem;font-weight:700;}
.scan-score-max{font-size:0.85rem;color:var(--text-dimmer);}
.scan-result-text{flex:1;min-width:260px;}
.scan-score-disclaimer{color:var(--text-dimmer);font-size:0.86rem;max-width:440px;margin:10px 0 18px;}
.scan-cta-title{font-size:1.5rem;margin:0 0 10px;color:var(--text);}
.scan-cta-sub{color:var(--text-dim);font-size:0.96rem;max-width:460px;margin-bottom:20px;}
.scan-result-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px;}
.scan-retry{
  background:none;border:none;color:var(--text-dimmer);font-size:0.86rem;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:0;font-family:inherit;
}
.scan-retry:hover{color:var(--text-dim);}

.scan-lead{max-width:480px;}
.scan-lead-form{display:flex;flex-direction:column;gap:16px;margin-top:22px;}
.scan-form-error{
  color:var(--text-dim);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;padding:12px 16px;font-size:0.88rem;margin:-4px 0 0;
}
.scan-thanks .btn{margin-top:6px;}
@media (max-width:640px){
  .scan-quiz{padding:32px 22px;}
  .scan-q-text{padding:22px 20px;}
  .scan-num{width:40px;height:40px;font-size:0.92rem;}
  .scan-result{gap:24px;}
}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;
  font-weight:600;font-size:0.95rem;transition:transform .25s,background .25s,border-color .25s;
}
.btn-primary{background:var(--accent);color:#0e1013;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{border:1px solid var(--card-border);color:var(--text);}
.btn-outline:hover{border-color:rgba(255,255,255,0.35);transform:translateY(-2px);}
.btn-whatsapp{background:#12331f;color:#d7ffb0;border:1px solid rgba(200,255,43,0.35);}
.btn-whatsapp:hover{background:#173f27;transform:translateY(-2px);}
.btn-arrow{transition:transform .2s;}
.btn:hover .btn-arrow{transform:translateX(4px);}

.split-media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--card);}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.split-media:hover img{transform:scale(1.03);}
.crop-wide img{object-position:center 30%;transform:scale(1.08);}

/* Recognizable WhatsApp glyph, reused everywhere a WhatsApp link appears */
.wa-icon{width:17px;height:17px;flex-shrink:0;color:var(--whatsapp);}

/* Scan intro CTA row (button + secondary WhatsApp link) */
.scan-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:14px;}
.scan-cta-alt{display:inline-flex;align-items:center;gap:8px;font-size:0.92rem;color:var(--text-dim);border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
.scan-cta-alt:hover{color:var(--text);border-color:var(--accent);}
/* Same link-style trigger, reused as a <button> for the secondary "Stuur mijn Scan"
   action on the Scan result — needs a chrome reset since buttons (unlike <a>) carry
   default browser styling. */
button.scan-cta-alt{background:none;border:none;border-bottom:1px solid transparent;padding:0;margin:2px 0 18px;font-family:inherit;cursor:pointer;display:flex;}
.scan-cta-note{display:block;font-size:0.8rem;color:var(--text-dimmer);}

/* Over section portrait crop */
.about-portrait{aspect-ratio:1/1;}
.chapter-04{padding-top:130px;}

/* Quiet visual pause between About and Contact — a breath, not a new content
   section: no eyebrow, no image, no button, just the brand line on dark space. */
.thnk-pause{padding:180px 24px;text-align:center;}
.thnk-pause-line{
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.01em;line-height:1.05;
  font-size:clamp(2.6rem,9vw,6.5rem);color:var(--text);margin:0;
}
@media (max-width:640px){
  .thnk-pause{padding:110px 24px;}
}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field label{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);}
.form-field input,.form-field textarea{
  background:var(--card);border:1px solid var(--card-border);border-radius:10px;
  padding:13px 16px;color:var(--text);font-family:inherit;font-size:0.98rem;
}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent);outline:none;}
.form-field textarea{min-height:120px;resize:vertical;}
.contact-direct{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
.contact-direct a{display:inline-flex;align-items:center;gap:9px;font-size:1.05rem;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s;width:fit-content;}
.contact-direct a:hover{border-color:var(--accent);}

/* ---------- Footer ---------- */
footer{padding:56px 0 36px;border-top:1px solid var(--card-border);}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
.footer-brand{display:flex;flex-direction:column;gap:12px;}
.footer-tagline{color:var(--text-dimmer);font-size:0.9rem;}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;}
.footer-links a{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);}
.footer-links a:hover{color:var(--text);}
.footer-legal{margin-top:32px;padding-top:24px;border-top:1px solid var(--card-border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-legal-text{color:var(--text-dimmer);font-size:0.8rem;}
.footer-legal-link{color:var(--text-dimmer);font-size:0.8rem;text-decoration:underline;text-underline-offset:2px;}
.footer-legal-link:hover{color:var(--text-dim);}

/* ---------- WhatsApp branded tag (not default floating green button) ---------- */
.whatsapp-tag{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;align-items:center;gap:10px;
  background:var(--bg-alt);border:1px solid var(--card-border);
  padding:12px 18px 12px 14px;border-radius:100px;
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  transition:transform .25s,border-color .25s,background .25s;
}
.whatsapp-tag:hover{transform:translateY(-3px);border-color:rgba(37,211,102,0.5);background:#171b21;}
.whatsapp-tag .wa-icon-badge{
  width:26px;height:26px;border-radius:50%;background:var(--whatsapp);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  animation:wa-blink 1.8s ease-in-out infinite;
}
.whatsapp-tag .wa-icon-badge .wa-icon{width:15px;height:15px;color:#fff;}
@keyframes wa-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(37,211,102,0.5);}
  50%{opacity:0.55;box-shadow:0 0 0 7px rgba(37,211,102,0);}
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-tag .wa-icon-badge{animation:none;}
}
.whatsapp-tag .wa-text{font-size:0.82rem;font-weight:600;letter-spacing:0.02em;color:var(--text);white-space:nowrap;}
.whatsapp-tag .wa-text .dim{color:var(--text-dimmer);font-weight:500;}
@media (max-width:520px){
  .whatsapp-tag{right:14px;bottom:14px;padding:11px 16px 11px 13px;}
  .whatsapp-tag .wa-text{font-size:0.76rem;}
}

@media (max-width:600px){
  section{padding:76px 0;}
  .hero-inner{padding:calc(var(--nav-h) + 20px) 0 64px;}
}