/* refine.css — de designronde over de business case (index.html) en CoCentric (cocentric.html).
   Additief: het laadt NA style.css / de inline stijl van de pagina, dus het overschrijft waar het
   moet en verandert niets aan de opbouw. Alles op de bestaande tokens, zodat licht en donker
   vanzelf blijven kloppen. Zonder dit bestand staat de pagina er nog steeds - alleen minder scherp.

   Drie dingen die het doet:
   1. Typografie: één schaal, één letter, koppen die niet meer met één woord op de laatste regel staan.
   2. Het geldmoment: €287 tegen €19 was het bleekste blok van de pagina; nu is het het donkerste.
   3. De rest van de regels die een pagina bruikbaar maken - focus, aanraken, beweging uit. */

/* ── 1. de letter en de schaal ─────────────────────────────────────────────*/
:root{
  --f-display:"Inter Tight","Inter",var(--f-sys);
  --f-body:"Inter",var(--f-sys);
  --f-sys:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* vloeiend, zodat een kop op een telefoon niet in vier regels breekt en op een
     breed scherm niet blijft steken op de maat van een laptop */
  --t-eyebrow:clamp(11px,.62rem + .18vw,12.5px);
  --t-body:clamp(15px,.92rem + .18vw,17px);
  --t-lead:clamp(16px,.95rem + .3vw,18.5px);
  --t-h3:clamp(18px,1rem + .55vw,22px);
  --t-h2:clamp(28px,1.6rem + 2.1vw,48px);
  --t-h1:clamp(34px,1.9rem + 3.4vw,66px);

  --ease-out:cubic-bezier(.22,.9,.28,1);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
  --dur-fast:150ms;
  --dur:250ms;
  --dur-slow:420ms;

  --focus-ring:var(--accent,#34d17a);
}

body{font-family:var(--f-body);font-size:var(--t-body)}

/* Elke <img> heeft nu width en height in de markup staan (anders springt de tekst weg zodra de
   plaat binnen is). Die twee zijn een VERHOUDING, geen maat: zonder deze regel rekt een figuur
   die op width:100% staat zich uit tot de hoogte uit het attribuut. */
img{max-width:100%;height:auto}
h1,h2,h3,.h2,.hero-numbers-head,.film-hero-line{font-family:var(--f-display);text-wrap:balance}
p,li{text-wrap:pretty}
.lead,.hero-numbers-sub{font-size:var(--t-lead)}
.eyebrow,.band-eyebrow{font-size:var(--t-eyebrow);letter-spacing:.2em}

/* Een getal hoort in een tabel of een vergelijking onder het getal ernaast te staan. */
.vs-price,.save-line b,.stat .n,.calc-out .v,.kv b,.bar-row .bl b,.big-num,.repl-num b,
td.num,.dev-price,#seat-val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 2. het geldmoment ─────────────────────────────────────────────────────
   De vergelijking stond in een bijna-wit blok op een bijna-witte pagina: de duurste zin van de
   hele site, in het lichtste vlak. Hij wordt nu de donkere plaat waar de pagina op stilvalt. */
.hero-numbers .price-card{
  background:linear-gradient(160deg,#07130d 0%,#040a07 62%,#061109 100%);
  border:1px solid rgba(52,209,122,.22);
  border-radius:26px;
  padding:clamp(20px,3vw,34px);
  box-shadow:0 40px 90px -40px rgba(4,20,12,.85),0 0 0 1px rgba(255,255,255,.03) inset;
  position:relative;overflow:hidden;
}
.hero-numbers .price-card::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 0,rgba(52,209,122,.16),transparent 60%);
}
/* de schuine glans van de lichte kaart is een streep grijs op een donkere plaat: weg ermee,
   de gloed hierboven doet het werk al */
.hero-numbers .price-card::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent)}
.hero-numbers .versus{position:relative;z-index:1}
.hero-numbers .vs-box{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
}
.hero-numbers .vs-them{border-color:rgba(245,166,35,.34)}
.hero-numbers .vs-us{
  border-color:rgba(52,209,122,.5);
  background:linear-gradient(160deg,rgba(52,209,122,.16),rgba(52,209,122,.05));
  box-shadow:0 0 44px -14px rgba(52,209,122,.55);
}
.hero-numbers .vs-label{color:rgba(255,255,255,.62)}
.hero-numbers .vs-sub{color:rgba(255,255,255,.44)}
.hero-numbers .vs-price{font-family:var(--f-display);font-size:clamp(40px,6.4vw,74px);line-height:1;letter-spacing:-.04em}
.hero-numbers .vs-price.warn{color:#f7bd5c}
.hero-numbers .vs-price.accent{color:#6ff2a8}
/* de streep door de oude prijs: het punt van de vergelijking, niet alleen een kleurtje */
.hero-numbers .vs-them .vs-price{position:relative;display:inline-block}
.hero-numbers .vs-them .vs-price::after{
  content:"";position:absolute;left:-4%;right:-4%;top:52%;height:3px;border-radius:3px;
  background:rgba(247,189,92,.8);transform:scaleX(var(--strike,0));transform-origin:left center;
  transition:transform .7s var(--ease-out) .15s;
}
.hero-numbers .price-card.is-in .vs-them .vs-price{--strike:1}
.hero-numbers .vs-mid{
  color:rgba(255,255,255,.4);font-weight:800;letter-spacing:.18em;
}
.hero-numbers .save-line{
  border-top:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.66);
}
.hero-numbers .save-line b{color:#6ff2a8;font-family:var(--f-display);letter-spacing:-.02em}
.hero-numbers .save-line:last-child b{font-size:clamp(22px,2.4vw,30px)}

/* de vier cijfers eronder waren randloze witte vlakken op wit */
.hero-numbers .stat{
  border:1px solid var(--glass-line-2);
  background:var(--surface-2);
  border-radius:18px;
  transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur);
}
.hero-numbers .stat:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-sm)}
.hero-numbers .stat .n{font-family:var(--f-display);letter-spacing:-.03em}

/* ── 3. knoppen: twee groene knoppen naast elkaar zijn geen keuze ──────────
   .btn is in style.css al de primaire (groene) knop, en .btn--primary bestond niet. Op de
   CoCentric-kop stonden daardoor twee identieke groene knoppen: de tweede is een uitweg,
   geen tweede hoofdactie. */
.cc-cta .btn:not(.btn--primary),
.cc-end .btn:not(.btn--primary),
.start-row .btn:not(.btn--primary):not(.btn--ghost){
  background:none;border:1px solid var(--glass-line-2);color:var(--text);
  box-shadow:none;
}
.cc-cta .btn:not(.btn--primary):hover,
.cc-end .btn:not(.btn--primary):hover,
.start-row .btn:not(.btn--primary):not(.btn--ghost):hover{
  border-color:var(--accent-line);color:var(--text);background:var(--accent-soft);
}
.btn{transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur),background-color var(--dur),border-color var(--dur),color var(--dur)}
.btn:active{transform:translateY(0) scale(.97)}

/* ── 4. focus, aanraken, en de dingen die een muis niet merkt ──────────────*/
a,button,input,select,textarea,summary,[tabindex]{touch-action:manipulation}
html{-webkit-tap-highlight-color:rgba(52,209,122,.18)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:10px;
}
/* de schuif had outline:none zonder vervanging: met het toetsenbord was hij onzichtbaar */
input[type=range]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
input[type=range]{touch-action:pan-y}

/* de sprong-link: eerste tabstop van de pagina, alleen zichtbaar als hij focus heeft.
   `body > .skip-link` en niet `.skip-link`: style.css zet `body>*:not(.orbs){position:relative}`
   en die :not() draagt een klasse, dus hij wint van een kale klasse. Dezelfde val als bij de nav
   en de lightbox, met dezelfde uitkomst: de link stond gewoon zichtbaar boven de pagina. */
body > .skip-link,.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:11px 18px;border-radius:12px;font-weight:800;font-size:14px;
  background:var(--accent);color:#04140a;
  transform:translateY(-160%);transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible{transform:translateY(0)}

/* een volle pagina op een telefoon met een inkeping */
nav>.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}

/* ── 4b. de themaknop hoort op elke pagina ─────────────────────────────────
   Hij bestond alleen op de business case, en alleen daar stond zijn stijl. De knop is nu een
   echte <button> op beide pagina's, dus hij heeft hier ook zijn eigen vorm nodig. */
.theme-toggle{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;
  background:var(--glass,rgba(255,255,255,.5));border:1px solid var(--glass-line-2);
  color:var(--muted);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:color var(--dur),border-color var(--dur),transform var(--dur-fast) var(--ease-spring);
}
.theme-toggle:hover{color:var(--text);border-color:var(--accent-line);transform:translateY(-2px)}
.theme-toggle:active{transform:translateY(0) scale(.94)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ── 5. het menu op een telefoon ───────────────────────────────────────────
   Onder 860px werd .nav-links simpelweg verborgen: negen ankers, en op een telefoon geen
   enkele manier om er te komen. De knop hieronder wordt door refine.js gezet. */
.nav-burger{
  display:none;width:40px;height:40px;flex:0 0 40px;border-radius:12px;cursor:pointer;
  align-items:center;justify-content:center;
  background:var(--glass,rgba(255,255,255,.5));border:1px solid var(--glass-line-2);
  color:var(--text);margin-left:auto;
}
.nav-burger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body > .nav-sheet,.nav-sheet{
  position:fixed;inset:0;z-index:150;display:none;
  background:rgba(4,10,7,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.nav-sheet[open],.nav-sheet.is-open{display:block}
.nav-sheet__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);
  padding:calc(18px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background:var(--bg);border-left:1px solid var(--glass-line-2);
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
}
.nav-sheet.is-open .nav-sheet__panel{transform:translateX(0)}
.nav-sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.nav-sheet__head b{font-family:var(--f-display);font-size:17px}
.nav-sheet__close{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--glass-line-2);color:var(--text);
}
.nav-sheet__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-sheet a{
  display:block;padding:13px 14px;border-radius:13px;font-size:16px;font-weight:650;color:var(--text);
  border:1px solid transparent;
}
.nav-sheet a:hover,.nav-sheet a:focus-visible{background:var(--surface-1);border-color:var(--glass-line-2)}
.nav-sheet a.is-cta{
  margin-top:10px;text-align:center;font-weight:800;color:#04140a;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
}
/* Negen ankers naast een merk, een thema-knop en een app-knop passen in Inter niet meer op een
   laptop van 1180px: ze braken in twee regels. Vanaf daar neemt de knop het over. */
.nav-links a{white-space:nowrap}
@media(max-width:1180px){
  .nav-burger{display:flex;margin-left:8px}
  nav .nav-links a:not(.cta){display:none}
  nav .nav-links{gap:12px}
  nav .theme-toggle{margin-left:auto}
}
/* Op een telefoon van 390px passen merk + thema + "Launch app" + menuknop niet naast elkaar:
   de menuknop viel buiten het scherm. De app-knop staat onderin het menu, dus die kan weg. */
@media(max-width:640px){
  nav .btn-primary,nav .nav-links .cta{display:none}
  .nav-burger{margin-left:0}
}
@media(min-width:1181px){.nav-sheet{display:none!important}}

/* ── 6. de pagina komt binnen terwijl je leest ─────────────────────────────
   Alleen transform en opacity, dus het kost de compositor niets, en het is één klasse:
   staat JS uit of staat beweging uit, dan is alles gewoon zichtbaar. */
[data-reveal]{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.07s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.14s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.21s}
[data-reveal][data-reveal-delay="4"]{transition-delay:.28s}
[data-reveal][data-reveal-delay="5"]{transition-delay:.35s}

/* ── 7. de knop die de film stilzet ────────────────────────────────────────
   Een video van meer dan vijf seconden die vanzelf loopt naast tekst hoort een pauze te hebben. */
.motion-toggle{
  position:absolute;right:max(18px,env(safe-area-inset-right));bottom:18px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:100px;cursor:pointer;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:rgba(6,14,10,.55);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color var(--dur),border-color var(--dur),transform var(--dur-fast) var(--ease-spring);
}
.motion-toggle:hover{background:rgba(6,14,10,.75);border-color:rgba(255,255,255,.4)}
.motion-toggle:active{transform:scale(.96)}
.motion-toggle svg{width:14px;height:14px;fill:currentColor;stroke:none}

/* ── 8. het wiel ───────────────────────────────────────────────────────────
   Het wiel is het hart van beide pagina's en was grijs op grijs: één stuk groen, vijf stukken
   niets. De rest krijgt nu ook diepte, en waar je op kunt klikken merk je met de muis. */
/* Elk van de zes krijgt een eigen tint uit dezelfde familie, zodat het wiel zes delen toont in
   plaats van één groen stuk en vijf keer niets - en de tint komt terug bij het deel zelf. */
/* Groen naar blauwgroen, om en om: twee buren zijn nooit dezelfde tint, en geel of blauw komt
   er niet in - het blijft de kleurfamilie van het merk. */
.gw-seg[data-seg="content"] .gw-seg__band{fill:#34d17a}
.gw-seg[data-seg="community"] .gw-seg__band{fill:#12b9b3}
.gw-seg[data-seg="coordination"] .gw-seg__band{fill:#6ad167}
.gw-seg[data-seg="competence"] .gw-seg__band{fill:#17a9c4}
.gw-seg[data-seg="communication"] .gw-seg__band{fill:#4bd499}
.gw-seg[data-seg="crewmates"] .gw-seg__band{fill:#2f9bb0}
.gw-seg .gw-seg__band{fill-opacity:.14;stroke-opacity:.26;stroke-width:1.2}
.gw-seg:hover .gw-seg__band{fill-opacity:.30;stroke-opacity:.6}
.gw-seg--lit .gw-seg__band{fill:url(#gwLit);fill-opacity:1}

/* de wig komt naar je toe vanuit het midden van het wiel, niet vanuit zichzelf */
.gw-seg{transform-box:view-box;transform-origin:310px 310px;
  transition:transform var(--dur) var(--ease-out)}
.gw-seg:hover{transform:scale(1.022)}
.gw-seg__band{transition:fill-opacity var(--dur),stroke var(--dur),stroke-opacity var(--dur)}
.gw-seg__label{letter-spacing:.03em;font-weight:750}
.gw-seg:not(.gw-seg--lit) .gw-seg__label{fill:var(--text);fill-opacity:.78}
/* "Communication" is het langste woord van de zes en liep op een telefoon van zijn eigen boog af
   ("ommunicatio"). De letters staan in de coördinaten van de svg, dus dit is de hele oplossing. */
@media(max-width:600px){.gw-seg__label{font-size:18px}}
.gw-card,.gw-chip{transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur)}
.gw-chip:hover{transform:translateY(-2px)}

/* ── 7b. de kop van CoCentric ──────────────────────────────────────────────
   Eén zin, twee knoppen en heel veel wit: de eerste schermvulling zei nog niet waar de pagina
   over gaat. Een aura achter de kop geeft het midden een zwaartepunt - hetzelfde midden waar
   het wiel eronder om draait. */
.cc-hero{position:relative;isolation:isolate}
.cc-hero::before{
  content:"";position:absolute;z-index:-1;left:50%;top:44%;
  width:min(920px,92vw);aspect-ratio:1.6;transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    radial-gradient(46% 46% at 50% 50%,rgba(52,209,122,.20),transparent 70%),
    radial-gradient(30% 30% at 68% 34%,rgba(18,161,80,.14),transparent 72%);
  filter:blur(6px);
}
.cc-hero h1{font-size:var(--t-h1);letter-spacing:-.035em;line-height:1.02}
.cc-hero p{max-width:60ch}
.cc-hero .cc-cta{margin-top:30px}
@media (prefers-reduced-motion:no-preference){
  .cc-hero::before{animation:cc-aura 18s ease-in-out infinite}
}
@keyframes cc-aura{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-52%) scale(1.06)}
}

/* ── 8a. de leeslijn ───────────────────────────────────────────────────────
   style.css laat hem op width lopen; een breedte animeren is layout-werk bij elke scrollstap.
   Dezelfde streep op scaleX kost de compositor niets. */
body > .progress,.progress{
  position:fixed;top:0;left:0;z-index:120;
  width:100%;transform:scaleX(0);transform-origin:left center;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* ── 8b. het lijntje met de zes delen ──────────────────────────────────────
   Zes secties met dezelfde vorm lezen als een lijst zonder eind. Dit zegt welk deel je leest,
   in de kleur die het in het wiel heeft, en hoeveel er nog komt. De naam verschijnt pas bij
   hover of focus, zodat het in rust een streepje is en geen tweede menu. */
/* style.css zet `body > nav:not(.orbs)` op sticky met een eigen achtergrond - dat is specifieker
   dan een enkele klasse, dus dit lijntje kreeg de balk van de hoofdnavigatie mee. */
body > nav.part-rail,.part-rail{
  position:fixed;background:var(--glass);border:1px solid var(--glass-line-2);
  top:50%;z-index:90;width:auto;right:max(14px,env(safe-area-inset-right));top:50%;z-index:90;
  transform:translateY(-50%);
  display:none;flex-direction:column;gap:2px;
  padding:10px 8px;border-radius:100px;
  background:var(--glass);border:1px solid var(--glass-line-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-sm);
}
.part-rail__item{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:var(--muted-2);text-decoration:none;
  transition:color var(--dur),background-color var(--dur);
}
.part-rail__n{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;transition:opacity var(--dur)}
.part-rail__dot{
  position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:currentColor;opacity:0;transform:scale(.6);
  transition:opacity var(--dur),transform var(--dur) var(--ease-spring);
}
.part-rail__name{
  position:absolute;right:calc(100% + 12px);white-space:nowrap;
  padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:700;
  color:var(--text);background:var(--surface-2);border:1px solid var(--glass-line-2);
  box-shadow:var(--shadow-sm);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--dur),transform var(--dur) var(--ease-out);
}
.part-rail__item:hover,.part-rail__item:focus-visible{color:var(--text);background:var(--surface-1)}
.part-rail__item:hover .part-rail__name,.part-rail__item:focus-visible .part-rail__name{opacity:1;transform:none}
.part-rail__item.is-on{background:var(--accent-soft)}
.part-rail__item.is-on .part-rail__n{opacity:0}
.part-rail__item.is-on .part-rail__dot{opacity:1;transform:scale(1.15)}
/* dezelfde zes tinten als in het wiel, zodat het lijntje en het wiel één ding zijn */
.part-rail__item[data-seg="content"]{color:#2bb56a}
.part-rail__item[data-seg="community"]{color:#0f9d99}
.part-rail__item[data-seg="coordination"]{color:#57b455}
.part-rail__item[data-seg="competence"]{color:#1690a6}
.part-rail__item[data-seg="communication"]{color:#33b581}
.part-rail__item[data-seg="crewmates"]{color:#2a8a9c}
@media(min-width:1180px){body > nav.part-rail,.part-rail{display:flex}}

/* ── 9. beweging uit ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-numbers .vs-them .vs-price::after{transition:none;transform:scaleX(1)}
  .nav-sheet__panel{transition:none}
  .btn,.hero-numbers .stat,.gw-seg{transition:none}
  html{scroll-behavior:auto}
}