/* home.css — voorpagina, laadt na style.css.
   Zelfde structuur en merk (navy / paper / merkverloop / Switzer), scherper uitgevoerd:
   één gechoreografeerde entree in de hero, daarna rustige, reagerende details. */

@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --led:#7ee2a8;
  --deep:#021b29;
  --ease-out:cubic-bezier(.2,.75,.2,1);
}
.h1,.h2,.h3,.step h3,.kh-inline-copy h3,.overstap-copy h2{text-wrap:balance}
.sub,.step p,.rev p,.why-item span{text-wrap:pretty}

/* skip-link voor toetsenbordgebruikers */
.skip{position:absolute;left:16px;top:-60px;z-index:400;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:14px;font-weight:600;transition:top .2s}
.skip:focus{top:16px;outline:2px solid #fff;outline-offset:2px}

/* ══════════ HERO: focus-pull op de foto, kop woord voor woord, zoekbalk als middelpunt ══════════ */
.hero-home{min-height:min(72vh,760px)}
.hero-home .hero-inner{padding-top:clamp(120px,15vh,150px);gap:clamp(26px,3.6vh,40px)}
.hero-home .h1{max-width:none;font-size:clamp(36px,5vw,62px);letter-spacing:-.03em;line-height:1.05;
  text-shadow:none;filter:drop-shadow(0 2px 4px rgba(10,14,20,.35)) drop-shadow(0 18px 40px rgba(10,14,20,.3))}
.hero-home .h1 .line{display:block}
.hero-home .h1 .line.dim{color:rgba(255,255,255,.62);font-size:.62em;letter-spacing:-.025em;line-height:1.15;margin-bottom:.22em;font-weight:500}
.hero-home .h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em 0;margin:0 -.04em -.12em 0}
.hero-home .h1 .w i{display:inline-block;font-style:normal;transform:translateY(112%) rotate(1.5deg);transform-origin:0 100%;
  transition:transform 1.05s var(--ease-out);transition-delay:calc(.28s + var(--i) * .055s)}
body.ready .hero-home .h1 .w i{transform:none}

.hero-home:has(.dom-search:focus-within) .hero-noise{opacity:.04}

/* zoekbalk: groter, met extensies als glaschips eronder */
.hero-zoek{display:flex;flex-direction:column;gap:14px}
.hero-zoek .dom-search{max-width:680px;border-radius:20px;padding:6px 6px 6px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 30px 80px -30px rgba(2,14,22,.75);
  transition:box-shadow .45s var(--ease-out), transform .45s var(--ease-out)}
.hero-zoek .dom-search:focus-within{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 4px rgba(255,255,255,.16), 0 36px 90px -30px rgba(2,14,22,.8)}
.hero-zoek .dom-search input{height:48px;font-size:clamp(16px,1.5vw,17px)}
.hero-zoek .dom-search input::placeholder{color:var(--grey-soft);transition:color .2s}
.hero-zoek .dom-search input:focus::placeholder{color:rgba(143,160,172,.55)}
.hero-zoek .dom-search .btn-lg{height:48px;padding:0 22px;font-size:15px}
.hero-zoek .zoek{transition:color .2s,transform .3s var(--ease-out)}
.hero-zoek .dom-search:focus-within .zoek{color:var(--ink);transform:scale(1.06)}

.tld-hints.tld-glas{justify-content:flex-start;margin:0;max-width:820px;gap:8px;padding-left:2px}
.tld-glas button{
  padding:8px 13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:13px;font-weight:600;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .25s,border-color .25s,transform .25s var(--ease-out);
}
.tld-glas button b{color:rgba(255,255,255,.62);font-weight:500}
.tld-glas button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);transform:translateY(-1px);color:#fff}
.tld-glas button:hover b{color:#fff}
.tld-glas .tld-note{color:rgba(255,255,255,.62);font-size:12.5px}
.tld-glas .tld-alle{color:rgba(255,255,255,.85);text-decoration-color:rgba(255,255,255,.35)}
.tld-glas .tld-alle:hover{color:#fff;text-decoration-color:#fff}

@media(max-width:640px){
  .hero-home{min-height:min(60vh,600px)}
  .hero-home .hero-inner{padding-top:118px;gap:22px}
  .hero-home .h1 .line.dim{font-size:.7em}
  /* op telefoons alleen de reviewscore; de andere twee punten staan verderop op de pagina */
  .hero-home .hero-trust > span,.hero-home .hero-trust > i{display:none}
}
body.ready .hero .hero-zoek{transition-delay:.55s}
body.ready .hero .hero-acties{transition-delay:.7s}
body.ready .hero .hero-trust{transition-delay:.85s}

/* vervolgstappen onder de domeinzoeker: pakketten bekijken, website verhuizen, en een compacte link naar de keuzehulp */
.hero-acties{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:-6px;padding-left:2px}
.hero-acties .btn-glass{height:44px;padding:0 20px;font-size:14.5px;font-weight:500;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.hero-acties .btn-glass:hover{background:rgba(255,255,255,.2)}
.hero-kh{display:inline-flex;align-items:center;gap:7px;margin-left:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,.86);text-shadow:0 1px 3px rgba(10,14,20,.45);transition:color .2s,gap .25s var(--ease-out)}
.hero-kh svg{opacity:.8;transition:transform .25s var(--ease-out)}
.hero-kh:hover{color:#fff}
.hero-kh:hover svg{transform:translateX(3px)}
@media(max-width:640px){
  .hero-acties{gap:8px 10px;margin-top:-2px}
  .hero-acties .btn-glass{height:42px;padding:0 16px;font-size:14px}
  .hero-kh{width:100%;margin:2px 0 0 2px}
}

.hero-home .hero-trust{padding-left:4px;font-weight:500;color:rgba(255,255,255,.86)}
.hero-home .hero-trust b{font-weight:600;color:#fff}

/* ══════════ ANKER + REGISTRY-STRIP ══════════ */
.checker-sec{padding-top:clamp(22px,3vw,34px)}
.hosting-anker{
  margin:0 auto;max-width:1040px;
  flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;
  padding:16px 16px 16px 24px;border-radius:22px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.hosting-anker p{text-align:left;font-size:14.5px}
.hosting-anker p b{font-size:15.5px}
.hosting-anker .anker-rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media(max-width:720px){
  .hosting-anker{flex-direction:column;align-items:stretch;text-align:center;padding:18px}
  .hosting-anker p{text-align:center}
  .hosting-anker .anker-rechts{justify-content:center}
}

.registry-strip{padding:clamp(36px,5vw,56px) 0 0}
.registry-strip .cap{text-align:center;font-size:13.5px;color:var(--grey);margin-bottom:18px}
.registry-strip .cap strong{color:var(--ink);font-weight:600}
.registry-strip .marquee-track{animation-duration:46s}
.registry-strip .m-item{padding:11px 20px;font-size:14px;gap:9px}
.registry-strip .m-item em{font-style:normal;font-weight:500;color:var(--grey)}
.registry-strip .m-item i{width:6px;height:6px;border-radius:50%;background:var(--brand-grad);flex-shrink:0}

/* ══════════ DIENSTEN: spotlight-kaarten, uitgelichte kaart met draaiende merkrand ══════════ */
.steps-4{gap:16px}
.step{position:relative;border-radius:26px;padding:32px 28px 30px;isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s}
.step>*{position:relative;z-index:1}
.step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(3,44,64,.075), transparent 62%)}
.step:hover::after{opacity:1}
.step:hover{transform:translateY(-6px);border-color:rgba(3,44,64,.16);box-shadow:0 1px 2px rgba(3,44,64,.04), 0 30px 60px -28px rgba(3,44,64,.22)}
.step h3{font-size:21px;letter-spacing:-.022em}
.step-num{width:40px;height:40px;transition:transform .5s var(--ease-out), background .3s}
.step:hover .step-num{transform:rotate(-8deg) scale(1.06)}
.step-voet .prijs b{font-size:16px}

.step-donker,a.step.step-donker{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-dark),var(--card-dark)) padding-box,
    conic-gradient(from var(--spin), rgba(255,255,255,.08) 0 62%, #ff9f2b 74%, #ff005d 84%, rgba(255,255,255,.08) 96%) border-box;
  animation:spin 9s linear infinite;
}
@keyframes spin{to{--spin:360deg}}
.step-donker::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(520px 320px at 90% -10%, rgba(110,125,150,.32), transparent 60%)}
.step-donker::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 62%)}
.step-donker:hover{border-color:transparent;box-shadow:0 34px 70px -30px rgba(2,14,22,.7)}
.step-donker .step-tag{position:absolute;top:22px;right:22px;padding:5px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;background:var(--brand-grad)}

/* keuzehulp inline */
.kh-inline{position:relative;isolation:isolate;border-radius:28px;background:#fff}
.kh-inline::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(3,44,64,.06), transparent 62%)}
.kh-inline:hover::after{opacity:1}
.kh-inline>*{position:relative;z-index:1}
.kh-inline-opties .kh-optie{background:var(--paper);border-color:transparent}
.kh-inline-opties .kh-optie:hover{background:#fff;border-color:rgba(3,44,64,.2)}

/* ══════════ WAAROM: tekst die met scrollen inkleurt, principes zonder nummers, feiten met status ══════════ */
.why-copy .sub{max-width:44ch;font-size:clamp(16px,1.7vw,18px)}
.why-copy .sub .w{transition:color .3s}
@supports (animation-timeline: view()){
  .why-copy .sub .w{color:rgba(255,255,255,.22);animation:inkt linear both;animation-timeline:view();
    animation-range:cover calc(6% + var(--i) * 1.1%) cover calc(22% + var(--i) * 1.1%)}
  @keyframes inkt{to{color:rgba(255,255,255,.72)}}
}
.why-item{grid-template-columns:44px 1fr;gap:18px;padding:22px 0}
.why-item .ico{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:#fff}
.why-item .ico svg{width:16px;height:16px}
.why-item b{font-size:18px}
.why-feiten{align-items:center;font-size:13.5px}
.why-feiten .count{font-variant-numeric:tabular-nums}
.status{display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:7px 13px 7px 10px;border-radius:var(--r-pill);
  background:rgba(126,226,168,.09);border:1px solid rgba(126,226,168,.22);color:#d9f6e6;font-weight:500}
.status .led{position:relative;width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 12px rgba(126,226,168,.9)}
.status .led::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--led);opacity:0;animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media(max-width:900px){.status{margin-left:0}}

/* ══════════ REVIEWS: aanhalingsteken in het merkverloop, zachte tilt ══════════ */
.rev{position:relative;isolation:isolate;transform-style:preserve-3d;will-change:transform;
  transition:transform .45s var(--ease-out), box-shadow .5s var(--ease-out), opacity .8s var(--ease-out)}
.rev::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(3,44,64,.06), transparent 62%)}
.rev:hover::after{opacity:1}
.rev:hover{box-shadow:0 1px 2px rgba(3,44,64,.04), 0 30px 60px -30px rgba(3,44,64,.25)}
.rev>*{position:relative;z-index:1}
.rev p{position:relative;padding-top:24px;quotes:none;font-size:15.5px}
.rev p::before{content:"\201C";position:absolute;left:-2px;top:-8px;font-size:56px;line-height:1;font-weight:700;letter-spacing:-.05em;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rev-score b{font-size:52px}
.rev-score .cnt{font-variant-numeric:tabular-nums}

/* ══════════ OVERSTAPPEN: route van oude host naar Intention ══════════ */
.overstap-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(28px,5vw,72px)}
.overstap-copy{gap:16px}
.overstap-copy .btn{margin-top:8px}
.route-vis{position:relative;z-index:2;width:100%;max-width:520px;justify-self:end}
.route-vis svg{width:100%;height:auto;display:block;overflow:visible;font-family:inherit}
.route-vis .knoop{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18);stroke-width:1}
.route-vis .knoop.nieuw{fill:url(#routeGrad);stroke:none}
.route-vis text{fill:#fff;font-size:13px;font-weight:600;letter-spacing:-.01em}
.route-vis text.klein{fill:rgba(255,255,255,.55);font-size:11px;font-weight:500}
.route-vis .pad{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5;stroke-dasharray:3 6}
.route-vis .pakket{fill:none;stroke:url(#routeGrad);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 91;animation:reis 3.4s linear infinite}
.route-vis .pakket.b{animation-delay:-1.7s;stroke-dasharray:5 95}
@keyframes reis{to{stroke-dashoffset:-100}}
.route-vis .tag{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.16)}
.route-vis .tag-tekst{font-size:12px}
.route-vis .vink{fill:var(--led)}
@media(max-width:900px){.overstap-card{grid-template-columns:1fr}.route-vis{justify-self:start;max-width:460px}}

/* ══════════ BLOG-RIJEN ══════════ */
.kbx-row{transition:padding-left .4s var(--ease-out)}
.kbx-row .kbx-tile{transition:transform .5s var(--ease-out), box-shadow .5s}
.kbx-row:hover .kbx-tile{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 20px 40px -22px rgba(3,44,64,.45)}
.kbx-row h4{transition:color .2s}
.kbx-row .kbx-pijl{margin-left:auto;width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(3,44,64,.06);color:var(--ink);transition:background .25s,color .25s,transform .4s var(--ease-out)}
.kbx-row:hover .kbx-pijl{background:var(--ink);color:#fff;transform:translateX(4px)}
@media(max-width:560px){.kbx-row .kbx-pijl{display:none}}

/* ══════════ SLOT ══════════ */
.final-inner .h2{font-size:clamp(34px,5vw,64px)}
.final .specs b{font-weight:500;color:rgba(255,255,255,.85)}

/* magnetische knoppen: kleine verschuiving richting de cursor, gezet door JS in --tx/--ty */
.btn.mag{transform:translate(var(--tx,0),var(--ty,0));transition:transform .35s var(--ease-out), background .2s}
.btn.mag>span{display:inline-block;transform:translate(calc(var(--tx,0) * .35),calc(var(--ty,0) * .35));transition:transform .35s var(--ease-out)}

/* ══════════ REDUCED MOTION ══════════ */
@media(prefers-reduced-motion:reduce){
  .hero-home .h1 .w i{transform:none;transition:none}
  .step-donker,a.step.step-donker{animation:none}
  .route-vis .pakket{animation:none;stroke-dasharray:none;opacity:.6}
  .status .led::after{animation:none}
  .why-copy .sub .w{animation:none;color:inherit}
  .rev{transform:none!important}
  .btn.mag,.btn.mag>span{transform:none!important}
}
@media(hover:none){.step:hover{transform:none}}