/* Rankkraft - startpagina. Alleen het eigene; tokens, knoppen, balk, voet en
   .rijs .kantel .gloed komen uit basis.css. */
#hoofd section[id]{scroll-margin-top:6.5rem} /* anker onder de vaste kopbalk */

/* == hero ==
   perspective staat op de hero, niet op de kantelende laag. Zo delen de drie
   lagen een camera en legt elke laag bij het kantelen een andere afstand af.
   Dat verschil is het diepte-effect. */
.ix-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(3rem,9vh,6rem) clamp(4rem,11vh,7rem);perspective:720px;perspective-origin:50% 42%}
/* Volglicht van .kantel zwakker dan standaard: met de gewone waas haalt de
   introtekst op het lichtste punt 4,3:1, met .07 blijft het 5,0:1. */
.ix-diepte{position:absolute;inset:0;z-index:0;border-radius:0;--accent-waas:rgba(94,230,196,.07)}
.ix-laag{position:absolute;pointer-events:none}
/* Laag 1, het verst: gloed op de horizon. Piek op .30 accent; hoger zakt tekst
   die eroverheen valt onder 4,5:1. */
.ix-horizon{left:50%;top:46%;width:170%;height:56%;transform:translate(-50%,-50%) translateZ(-180px);background:radial-gradient(58% 100% at 50% 100%,rgba(94,230,196,.30),rgba(94,230,196,.09) 44%,transparent 72%)}
/* Laag 2, de vloer: een vlak dat om zijn bovenrand kantelt en naar de horizon
   wegloopt. Twee gradients, geen afbeelding. Het masker laat het raster in de
   verte oplossen in plaats van hard af te kappen. */
.ix-vloer{left:-30%;right:-30%;top:46%;height:170%;transform-origin:50% 0;transform:rotateX(74deg);background-image:repeating-linear-gradient(90deg,rgba(94,230,196,.26) 0 1px,transparent 1px 6.25%),repeating-linear-gradient(0deg,rgba(94,230,196,.20) 0 1px,transparent 1px 56px);mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 66%,transparent 100%);animation:ix-reis 18s linear infinite}
/* Een cel per ronde, dus naadloos. Transform en geen background-position:
   dat draait op de compositor, zonder hertekenen. */
@keyframes ix-reis{from{transform:rotateX(74deg) translate3d(0,0,0)}to{transform:rotateX(74deg) translate3d(0,56px,0)}}
/* Laag 3, het dichtst bij: gaat bij het kantelen de andere kant op, en dat
   verschil maakt de diepte pas zichtbaar. */
.ix-nabij{inset:-12%;transform:translateZ(90px);background:radial-gradient(320px 320px at 16% 24%,rgba(94,230,196,.10),transparent 70%)}
.ix-hero-in{position:relative;z-index:2;display:grid;gap:clamp(2.5rem,6vw,4rem)}
/* De tekst laat de muis door naar het raster eronder; anders kantelt er niets
   zodra de cursor over de kop komt. Links vangen hun eigen klik wel. */
.ix-hero-tekst{pointer-events:none}
.ix-hero-tekst a,.ix-hero-tekst button{pointer-events:auto}
.ix-nadruk{background:linear-gradient(100deg,var(--accent),#9AF0DA);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Geen .rijs op de h1: een kop die eerst onzichtbaar is verlaat het laadmoment
   (LCP) later. Alles eromheen mag wel opkomen. */
.ix-hero h1{margin-bottom:1.5rem;max-width:16ch}
/* #C3CCD8 haalt op het lichtste punt van het raster 5,0:1; --tekst-zacht zou
   daar op 4,2:1 blijven steken en dus zakken. */
.ix-hero .inleiding,.ix-garantie,.ix-punten,.ix-score{color:#C3CCD8}
.ix-knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.ix-garantie{margin-top:1.75rem;font-size:.9375rem;max-width:46ch}
.ix-garantie strong,.ix-score strong{color:var(--tekst)}
.ix-punten{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.875rem;list-style:none;padding:0;margin:1.25rem 0 0}
.ix-punten li{display:flex;align-items:center;gap:.5rem}
.ix-score{display:inline-flex;align-items:center;gap:.625rem;margin-top:1.5rem;min-height:44px;padding:.375rem .875rem;border:1px solid var(--lijn-op);border-radius:999px;text-decoration:none;font-size:.875rem}
.ix-paneel{position:relative;pointer-events:auto;padding:1.25rem;border-radius:var(--rond);background:var(--vlak-op);border:1px solid var(--lijn)}
.ix-paneel-kop{margin:0 0 1rem}
.ix-meting{margin:0;display:grid}
.ix-meting>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.6875rem 0;border-top:1px solid var(--lijn)}
.ix-meting dd{margin:0;font-family:var(--kop);font-weight:700;font-size:1.75rem;color:var(--accent);line-height:1}
.ix-paneel-voet{margin:1rem 0 0;padding-top:.875rem;border-top:1px solid var(--lijn)}
@media(min-width:920px){
.ix-hero{min-height:min(92vh,860px);display:flex;align-items:center}
.ix-hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.ix-demo-in{grid-template-columns:1.25fr .75fr;align-items:center;gap:3rem}
}

/* == gedeelde bouwstenen == */
.ix-kop{max-width:62ch;margin-bottom:clamp(2rem,5vh,3rem)}
.ix-midden{margin-inline:auto;text-align:center}
.ix-midden .inleiding{margin-inline:auto}
.ix-drie{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
@media(min-width:760px){.ix-waarom{grid-template-columns:1fr 1fr}}
.ix-breed{width:100%}
.ix-naschrift{text-align:center;margin-top:2.5rem}
.ix-waarom,.ix-merken,.ix-stappen,.ix-dienst ul,.ix-pakket>ul{list-style:none;margin:0;padding:0}
.ix-punten li::before,.ix-dienst li::before,.ix-pakket li::before{content:"\2713";color:var(--accent);font-weight:700;flex:none}
.ix-fijn,.ix-naschrift,.ix-paneel-kop,.ix-paneel-voet,.ix-meting dt,.ix-oprichter p,.ix-stap-kaart p,.ix-dienst>p,.ix-usp p,.ix-case>p,.ix-vraag p{color:var(--tekst-zacht)}
.ix-fijn,.ix-meting dt{font-size:.875rem}
.ix-paneel-kop,.ix-paneel-voet{font-size:.75rem}
.ix-naschrift,.ix-dienst>p,.ix-usp p,.ix-case>p,.ix-vraag p{font-size:.9375rem}
#hoofd h2{margin-bottom:1rem}
.ix-usp p,.ix-stap-kaart p,.ix-vraag p{margin:0}
.ix-score:focus-visible,.ix-door:focus-visible,.ix-op-links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Gloed-patroon: buitenlaag doorzichtig en 1px dik, binnenlaag draagt de
   vulling. Zo blijft de oplichtende rand een rand en geen vlek over de tekst. */
.ix-demo,.ix-usp,.ix-oprichter,.ix-slot{border-radius:var(--rond);padding:1px;background:none}
.ix-demo-in,.ix-usp-in,.ix-oprichter-in,.ix-slot-in{background:var(--vlak);border:1px solid var(--lijn);border-radius:calc(var(--rond) - 1px);padding:clamp(1.5rem,4vw,2.5rem)}

/* == gratis demo == */
.ix-demo-in{display:grid;gap:2rem;background:var(--vlak-op)}
.ix-demo em{font-style:normal;color:var(--accent)}
.ix-demo-actie{display:grid;gap:1rem;justify-items:start}
.ix-demo-actie .ix-punten{flex-direction:column;gap:.5rem;margin:0}

/* == diensten == */
.ix-dienst,.ix-pakket,.ix-case{position:relative;border-radius:var(--rond);background:var(--vlak);border:1px solid var(--lijn)}
.ix-dienst,.ix-pakket{padding:clamp(1.375rem,3vw,1.875rem)}
.ix-teken{display:block;margin-bottom:1rem;color:var(--accent)}
.ix-dienst h3,.ix-usp h3,.ix-stap-kaart h3{margin-bottom:.5rem}
.ix-dienst ul,.ix-pakket>ul{display:grid;gap:.5rem;margin:1.25rem 0;font-size:.9375rem}
.ix-dienst li,.ix-pakket li{display:flex;gap:.625rem}
/* 44px hoog, dus ook met een duim te raken. */
.ix-door{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;font-size:.9375rem;text-decoration:none}
.ix-door::after{content:"\2192";transition:transform var(--snel) var(--veer)}
.ix-door:hover::after{transform:translateX(.25rem)}

/* == waarom Rankkraft == */
.ix-waarom{display:grid;gap:1.25rem}
.ix-usp-in{height:100%}
.ix-usp h3{font-size:1.125rem}

/* == vier stappen, kaarten die stapelen ==
   Sticky breekt zodra een voorouder overflow:hidden heeft; de hero heeft dat
   wel maar staat naast deze sectie. Elke <li> houdt ruimte onder zich vrij en
   dat is de scrollafstand waarin de kaart blijft plakken. */
.ix-stappen-sectie{overflow:visible}
.ix-stappen{position:relative}
.ix-stap{position:sticky;top:calc(6rem + var(--n,0) * .875rem);padding-bottom:clamp(3rem,24vh,13rem)}
.ix-stappen li:last-child{padding-bottom:0}
.ix-stap-kaart{display:flex;gap:clamp(1rem,3vw,1.75rem);align-items:flex-start;background:var(--vlak-op);border:1px solid var(--lijn);border-radius:var(--rond);padding:clamp(1.375rem,3.5vw,2.25rem);box-shadow:0 -1px 0 var(--lijn-op),0 24px 48px rgba(0,0,0,.55)}
/* Alleen een contour: het cijfer geeft ritme en concurreert niet met de kop. */
.ix-stap-nr{margin:0;flex:none;font-family:var(--kop);font-weight:700;line-height:1;font-size:clamp(2.25rem,7vw,3.25rem);color:transparent;-webkit-text-stroke:1px var(--accent-diep)}

/* == oprichter. Geen foto beschikbaar, dus een gezet monogram in plaats van
   een verwijzing naar een bestand dat niet bestaat. */
.ix-oprichter-in{display:grid;gap:1.5rem}
@media(min-width:640px){.ix-oprichter-in{grid-template-columns:auto minmax(0,1fr);gap:2rem}}
p.ix-op-teken{margin:0;display:grid;place-items:center;width:5rem;height:5rem;font:700 1.625rem/1 var(--kop);color:var(--grond);border-radius:var(--rond);background:var(--accent)}
.ix-oprichter h2{font-size:1.5rem}
.ix-op-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-bottom:.75rem}
.ix-op-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.9375rem;text-decoration:none}

/* == prijzen in het kort == */
.ix-pakket{display:flex;flex-direction:column}
.ix-pakket-top{border-color:var(--accent-diep);background:var(--vlak-op)}
.ix-label{align-self:flex-start;margin:0 0 .75rem;padding:.25rem .75rem;border-radius:999px;background:var(--accent);color:#06231C;font-size:.75rem;font-weight:700}
.ix-pakket .prijs{margin:.5rem 0 .25rem;color:var(--tekst-zacht);font-size:.875rem}
.ix-pakket .prijs span{display:block;font-family:var(--kop);font-weight:700;line-height:1.05;font-size:2.25rem;color:var(--tekst);letter-spacing:-.02em}
/* Wat er niet bij zit krijgt een eigen teken en een leesbare kleur. Geen
   opacity, want dat drukt het contrast onder de norm. */
.ix-nee{color:var(--tekst-zacht)}
li.ix-nee::before{content:"\2715";color:var(--tekst-zacht);font-weight:400}
.ix-pakket .knop{margin-top:auto}

/* == wat er is opgeleverd. Geen foto's, dus typografie op een verloop. == */
.ix-case{overflow:hidden;display:flex;flex-direction:column}
.ix-case-beeld{margin:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;padding:1.25rem;min-height:9rem;font:700 1.75rem/1 var(--kop);color:#F2F7FB;letter-spacing:-.02em}
.ix-case-beeld em{font:600 .75rem/1.4 var(--tekstfont);text-transform:uppercase}
.ix-case h3{margin:1.25rem 1.25rem .625rem;font-size:1.125rem}
.ix-case>p{margin:0 1.25rem 1rem}
.ix-merken{display:flex;flex-wrap:wrap;gap:.375rem;margin:0 1.25rem 1.25rem}
.ix-merken li{font-size:.75rem;padding:.25rem .625rem;border-radius:999px;background:var(--accent-waas);color:var(--accent);border:1px solid rgba(94,230,196,.28)}
.ix-case .ix-door{margin:auto 1.25rem 1rem}

/* == veelgestelde vragen, details/summary klapt open zonder JavaScript ==
   Rand op .42 wit geeft 3,7:1 op --vlak; een bedieningsrand moet 3:1 halen. */
.ix-vragen{display:grid;gap:.75rem}
.ix-vraag{background:var(--vlak);border-radius:var(--rond-klein);border:1px solid rgba(232,237,242,.42)}
.ix-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:1rem 1.25rem;cursor:pointer;font-weight:600;list-style:none}
.ix-vraag summary::-webkit-details-marker{display:none}
.ix-vraag summary::after{content:"+";flex:none;color:var(--accent);font-size:1.5rem;line-height:1}
.ix-vraag[open] summary::after{content:"\2212"}
.ix-vraag summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--rond-klein)}
.ix-vraag p{padding:0 1.25rem 1.25rem}

/* == slot == */
.ix-slot-in{text-align:center;padding-block:clamp(2.5rem,7vw,4rem);background:var(--vlak-op)}
.ix-slot .inleiding{margin:1rem auto 0}
.ix-slot .ix-knoppen{justify-content:center}

/* == rustige weergave, twee keer opgeschreven net als in basis.css.
   animation:none staat er expliciet bij: de globale noodgreep zet de duur op
   .01ms en dat laat een oneindige lus juist op volle snelheid doordraaien. */
@media(prefers-reduced-motion:reduce){
.ix-vloer{animation:none}
.ix-door::after{transition:none}
}
html.rustig .ix-vloer{animation:none}
html.rustig .ix-door::after{transition:none}