/* ==========================================================================
   xldomein.com
   Opbouw: tokens · basis · achtergrond · glas · navigatie · knoppen · hero ·
           prijsband · domeinzoeker · secties · aanbod · pakketten · functies ·
           illustraties · werkwijze · FAQ · CTA · subpagina's · formulieren ·
           bestellen · documenten · footer · onthullen · beweging
   ========================================================================== */

@view-transition { navigation: auto; }

:root {
    --ink: #05070c;
    --ink-2: #0a0e17;
    --text: #eef2f7;
    --text-2: #b4bdca;
    --muted: #7a8496;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);
    --surface: rgba(255, 255, 255, .04);
    --surface-2: rgba(255, 255, 255, .07);

    --volt: #d8ff45;
    --volt-hover: #e4ff7d;
    --volt-ink: #0d1400;
    --mint: #5ef0d2;
    --sky: #76b6ff;
    --ok: #5df2a4;
    --bad: #ff6b7d;
    --warn: #ffcf6b;

    --r-xl: 24px;
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;

    --f-display: "Unbounded", "Arial Black", sans-serif;
    --f-body: "Onest", "Segoe UI", system-ui, sans-serif;
    --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", monospace;

    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 48px);
    --nav-h: 62px;
    --blur: 20px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

@media (max-width: 700px) {
    :root { --blur: 16px; --nav-h: 56px; }
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    background: var(--ink);
}

/* Geen achtergrond op body: die zou over de .scene-laag (z-index -1) heen vallen. */
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font: 400 1rem/1.6 var(--f-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body.menu-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
h1, h2 { font-family: var(--f-display); font-weight: 500; letter-spacing: -.035em; }
h3, h4 { font-family: var(--f-body); font-weight: 600; letter-spacing: -.01em; }

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

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 8px; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip {
    position: fixed; left: 16px; top: -80px; z-index: 300;
    padding: .75rem 1.1rem; border-radius: 999px;
    background: var(--volt); color: var(--volt-ink);
    font-weight: 600; text-decoration: none;
    transition: top .3s var(--ease);
}
.skip:focus { top: 16px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Bovenregel: het vierkante puntje komt uit het logo. */
.eyebrow {
    display: inline-flex; align-items: center; gap: .7em;
    margin-bottom: 1.1rem;
    font: 400 .68rem/1.3 var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-2);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 1px; background: var(--volt); }

.xl-word { font-style: normal; color: var(--volt); }
.muted { color: var(--muted); }
.center { text-align: center; }
.icon { width: 20px; height: 20px; flex: none; }

.link-arrow {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--text); text-decoration: none;
    font-weight: 500;
}
.link-arrow .icon { width: 16px; height: 16px; color: var(--volt); transition: transform .35s var(--ease); }
.link-arrow:hover { color: #fff; }
.link-arrow:hover .icon { transform: translateX(3px); }

.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted); }
.dot--ok { background: var(--ok); }
.dot--bad { background: var(--bad); }
.dot--warn { background: var(--warn); }

/* ---------- Achtergrond ---------- */

.scene {
    position: fixed; inset: 0; z-index: -1;
    overflow: hidden; pointer-events: none;
    background:
        radial-gradient(1100px 760px at 82% -18%, rgba(38, 78, 170, .22), transparent 62%),
        radial-gradient(900px 700px at -12% 28%, rgba(14, 110, 112, .16), transparent 62%),
        var(--ink);
}
.scene__blob { position: absolute; border-radius: 50%; will-change: transform; }
.scene__blob--a {
    width: 62vmax; height: 62vmax; left: -22vmax; top: -24vmax;
    background: radial-gradient(circle, rgba(24, 150, 146, .32), transparent 62%);
    animation: drift-a 80s var(--ease-io) infinite alternate;
}
.scene__blob--b {
    width: 58vmax; height: 58vmax; right: -24vmax; top: 10vh;
    background: radial-gradient(circle, rgba(46, 88, 220, .3), transparent 62%);
    animation: drift-b 96s var(--ease-io) infinite alternate;
}
.scene__blob--c {
    width: 36vmax; height: 36vmax; left: 30vw; top: 58vh;
    background: radial-gradient(circle, rgba(200, 255, 60, .07), transparent 62%);
    animation: drift-c 110s var(--ease-io) infinite alternate;
}
.scene__blob--d, .scene__glow { display: none; }
.scene__grain {
    position: absolute; inset: 0;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Glas ---------- */

.glass {
    position: relative;
    isolation: isolate;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .03));
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -32px rgba(0, 0, 0, .7);
}
/* Haarlijn met wat licht aan de bovenkant. */
.glass::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .07));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/* Klikbaar glas: de rand licht rustig op. */
.glass::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
a.glass:hover::after, .plan:hover::after { opacity: 1; }
.glass--pill { border-radius: 999px; }

/* ---------- Navigatie ---------- */

.nav {
    position: fixed; top: 12px; left: 0; right: 0;
    z-index: 100;
    padding-inline: var(--gutter);
    transition: translate .5s var(--ease);
    pointer-events: none;
}
.nav.is-hidden { translate: 0 calc(-100% - 20px); }

.nav__bar {
    view-transition-name: nav; /* op de balk zelf: op .nav eromheen zou het glas niets meer vervagen (backdrop root) */
    pointer-events: auto;
    max-width: var(--wrap);
    height: var(--nav-h);
    margin-inline: auto;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 8px 0 20px;
    transition: background .4s, height .4s var(--ease);
}
.nav.is-scrolled .nav__bar {
    height: calc(var(--nav-h) - 6px);
    background: linear-gradient(180deg, rgba(14, 18, 28, .82), rgba(10, 14, 22, .7));
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__logo { display: block; height: 22px; width: auto; color: var(--text); overflow: visible; }
.logo-dot { transform-box: fill-box; transform-origin: 50% 100%; }
.brand:hover .logo-dot { animation: logo-hop .6s var(--ease); }
.footer .brand__logo { height: 26px; }
.brand__tag { margin-left: .6rem; padding: .26rem .45rem; border-radius: 5px; background: var(--surface-2); color: var(--text-2); font: 500 .56rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 520px) { .nav .brand__logo { height: 19px; } }

.nav__links { display: flex; gap: .15rem; margin-inline: auto; }
.nav__link {
    padding: .5rem .9rem;
    white-space: nowrap;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--text-2);
    text-decoration: none;
    transition: color .25s, background .25s;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link.is-active { color: var(--text); background: var(--surface-2); }

.nav__actions { display: flex; align-items: center; gap: .4rem; }

/* Mijn account (/account/, het klantenportaal): dezelfde rustige pil als de winkelwagen, met tekst waar er ruimte is.
   Ingelogd: initialen en voornaam, plus een los knopje voor het accountmenu (.drop--account). */
.nav__account {
    display: inline-flex; align-items: center; gap: .45rem; flex: none;
    height: 40px; padding: 0 1rem 0 .8rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    font-size: .86rem; font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s, color .25s, box-shadow .25s;
}
.nav__account .icon { width: 18px; height: 18px; flex: none; transition: color .25s, translate .35s var(--ease-spring); }
.nav__account:hover { background: var(--surface-2); color: var(--text); }
.nav__account:hover .icon { color: var(--volt); translate: 0 -1px; }
.nav__account.is-active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.nav__account.is-active .icon { color: var(--volt); }

/* Ingelogd: avatar met initialen, voornaam en (bij ongelezen meldingen) een volt stip; het pijltje opent het menu. */
.drop--account { display: flex; align-items: center; gap: 4px; }
.nav__account--in { position: relative; padding: 0 .95rem 0 .3rem; gap: .5rem; }
.nav__avatar {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .45);
    color: var(--volt);
    font: 600 .66rem/1 var(--f-body); letter-spacing: .02em;
}
.nav__dot { position: absolute; top: 5px; left: 27px; width: 9px; height: 9px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 2px #0b0f18; }
.nav__account-toggle {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0; flex: none;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    transition: color .25s, background .25s;
}
.nav__account-toggle:hover, .drop--account.is-open .nav__account-toggle { color: var(--text); background: var(--surface-2); }
.drop--account .drop__panel { left: auto; right: 0; width: 260px; translate: 0 6px; }
.drop.drop--account.is-open .drop__panel { translate: 0 0; } /* zwaarder dan .drop.is-open .drop__panel verderop */
.drop--account .drop__item { gap: .7rem; padding: .5rem .6rem; }
.drop--account .drop__icon { width: 32px; height: 32px; border-radius: 9px; }
.drop--account .drop__icon .icon { width: 16px; height: 16px; }
.drop--account .drop__text b { font-size: .88rem; }
.drop__who { display: grid; gap: .1rem; margin: 0 0 4px; padding: .6rem .65rem .7rem; border-bottom: 1px solid var(--line); }
.drop__who b { font-weight: 500; font-size: .9rem; overflow-wrap: anywhere; }
.drop__who small { color: var(--text-2); font-size: .78rem; overflow-wrap: anywhere; }
.drop__count { min-width: 22px; padding: .15rem .45rem; border-radius: 999px; background: rgba(216, 255, 69, .14); color: var(--volt); font: 600 .7rem/1.3 var(--f-body); text-align: center; }
.drop__logout { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.drop__logout .drop__item { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }

.nav__cart {
    position: relative;
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: none;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-2);
    transition: background .25s, color .25s;
}
.nav__cart:hover { background: var(--surface-2); color: var(--text); }
.nav__cart .icon { width: 18px; height: 18px; }
.nav__count {
    position: absolute; top: -3px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--volt); color: var(--volt-ink);
    font: 600 .62rem/18px var(--f-body);
    text-align: center;
}
.nav__count.is-bump { animation: pop .45s var(--ease-spring); }


@media (min-width: 1001px) and (max-width: 1180px), (max-width: 640px) {
    .nav__actions .btn span { display: none; }
    .nav__actions .btn { width: 40px; padding: 0; }
}
/* Mijn account op de telefoon: alleen het icoon of de avatar (de naam blijft voor schermlezers via aria-label), zonder
   menuknopje (de link en het mobiele menu dekken het). Heel smal: alleen in het menu. */
@media (max-width: 640px) {
    .nav__account { width: 40px; padding: 0; justify-content: center; }
    .nav__account span { display: none; }
    .nav__account .nav__avatar, .nav__account .nav__dot { display: grid; }
    .nav__account .nav__dot { top: 3px; left: auto; right: 3px; }
    .drop--account .nav__account-toggle { display: none; }
}
@media (max-width: 374px) { .nav__account, .drop--account { display: none; } }

.nav__toggle {
    display: none;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: var(--surface-2);
    cursor: pointer;
    place-items: center;
}
.nav__toggle-lines { position: relative; display: block; width: 17px; height: 9px; }
.nav__toggle-lines::before,
.nav__toggle-lines::after {
    content: "";
    position: absolute; left: 0; right: 0;
    height: 1.5px; border-radius: 2px;
    background: currentColor;
    transition: top .4s var(--ease), rotate .4s var(--ease);
}
.nav__toggle-lines::before { top: 0; }
.nav__toggle-lines::after { top: 7.5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-lines::before { top: 3.75px; rotate: 45deg; }
.nav__toggle[aria-expanded="true"] .nav__toggle-lines::after { top: 3.75px; rotate: -45deg; }

@media (max-width: 1080px) { .nav__links .nav__link { padding: .5rem .65rem; } }
@media (max-width: 1000px) {
    .nav__links { display: none; }
    .nav__toggle { display: grid; }
    .brand { margin-right: auto; }
    .nav__bar { padding-left: 16px; }
}
@media (max-width: 520px) {
    .nav { top: 8px; }
}

/* Uitklapmenu Hosting */
.drop { position: relative; }
.drop__toggle { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; cursor: pointer; }
.drop__chev { width: 14px; height: 14px; transition: rotate .35s var(--ease); }
.drop.is-open .drop__chev { rotate: 180deg; }
.drop__panel {
    position: absolute; top: calc(100% + 14px); left: 50%;
    width: 460px; /* breed genoeg voor "v.a. €12,99 / mnd" naast een omschrijving van twee regels */
    display: grid; gap: 2px;
    padding: 6px;
    border-radius: 18px;
    /* Glas in glas kan niet vervagen (de navigatiebalk is al glas), dus vrijwel dekkend. */
    background: linear-gradient(180deg, #161b28, #0d111a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .8);
    opacity: 0; visibility: hidden;
    translate: -50% 6px;
    transition: opacity .25s var(--ease), translate .35s var(--ease), visibility 0s .25s;
}
.drop.is-open .drop__panel { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .25s var(--ease), translate .35s var(--ease); }
.drop__item { display: flex; align-items: center; gap: .85rem; padding: .7rem .75rem; border-radius: 12px; text-decoration: none; transition: background .2s; }
.drop__item:hover, .drop__item:focus-visible { background: var(--surface-2); }
.drop__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); transition: color .2s; }
.drop__item:hover .drop__icon { color: var(--volt); }
.drop__icon .icon { width: 18px; height: 18px; }
.drop__text { flex: 1; min-width: 0; }
.drop__text b { display: block; font-weight: 500; font-size: .92rem; }
.drop__text small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.drop__price { font: 400 .66rem var(--f-mono); color: var(--text-2); white-space: nowrap; }

/* Mobiel menu */
.menu {
    position: fixed; inset: 0; z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--nav-h) + 48px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background: rgba(5, 7, 12, .78);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility 0s .4s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.menu__links { display: grid; }
.menu__links a, .menu__foot { opacity: 0; translate: 0 18px; transition: opacity .45s var(--ease), translate .6s var(--ease); }
.menu__links a {
    display: flex; align-items: baseline; gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
    font: 500 clamp(1.5rem, 6.5vw, 2.2rem)/1.2 var(--f-display);
    letter-spacing: -.035em;
    text-decoration: none;
}
.menu__links small { font: 400 .64rem var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.menu.is-open .menu__links a, .menu.is-open .menu__foot { opacity: 1; translate: 0 0; transition-delay: calc(.06s + var(--i) * .045s); }
.menu__foot { display: grid; gap: .7rem; font-size: .95rem; color: var(--text-2); }
.menu__foot a { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.menu__foot .icon { width: 18px; height: 18px; color: var(--volt); }
.menu__foot .menu__account { display: flex; align-items: center; gap: .7rem; padding-bottom: .9rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 500; }
.menu__foot .menu__account-arrow { margin-left: auto; color: var(--text-2); transition: translate .3s var(--ease); }
.menu__account:hover .menu__account-arrow, .menu__account:focus-visible .menu__account-arrow { translate: 3px 0; color: var(--volt); }
.menu__foot .menu__account[aria-current] .menu__account-arrow { color: var(--volt); } /* op /account/ zelf, zoals de pil in de navigatie */

/* ---------- Knoppen ---------- */

.btn {
    --h: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: var(--h);
    padding: 0 1.35rem;
    border: 0; border-radius: 999px;
    font: 600 .92rem/1 var(--f-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn--sm { --h: 40px; padding: 0 1rem; font-size: .86rem; }

.btn--volt { background: var(--volt); color: var(--volt-ink); }
.btn--volt:hover { background: var(--volt-hover); }

.btn--ghost, .btn--glass {
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover, .btn--glass:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    height: 32px; padding: 0 .8rem;
    border: 0; border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 400 .72rem var(--f-mono);
    color: var(--muted);
    cursor: pointer;
    transition: background .25s, box-shadow .25s, color .25s;
}
.chip b { font-weight: 500; color: var(--text); }
.chip:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: min(100svh, 940px);
    display: flex; align-items: center;
    padding: calc(var(--nav-h) + 64px) 0 72px;
}
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}
.hero__title {
    margin-bottom: 1.5rem;
    font-size: clamp(2.3rem, 4.7vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}
.hero__lead { max-width: 33rem; margin-bottom: 2rem; font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--text-2); }
.hero__search { max-width: 600px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }

/* Regels van een kop schuiven uit een masker omhoog. */
.line { display: block; overflow: hidden; padding: .04em .04em .1em 0; margin-bottom: -.08em; }
.line > span { display: inline-block; text-wrap: balance; animation: line-up 1s var(--ease) both; animation-delay: calc(.12s + var(--i) * .08s); }
.hero__in { animation: fade-up .9s var(--ease) both; animation-delay: calc(.1s + var(--i) * .08s); }

/* 3D-serverstapel */
.hero__visual {
    --hv: 0;
    position: relative;
    height: clamp(420px, 42vw, 560px);
    display: grid; place-items: center;
}
.hero__visual:hover { --hv: 1; }

/* De intro zit op de wrapper: opacity op de stapel zelf zou de 3D plat maken. */
.stack-wrap {
    display: grid; place-items: center;
    animation: stack-in 1.4s var(--ease) .25s both, stack-float 10s var(--ease-io) 1.65s infinite;
}
.stack {
    --gap: calc(40px + var(--sp, 0) * 40px + var(--hv) * 12px);
    --s: min(280px, 60vw);
    position: relative;
    width: var(--s); height: var(--s);
    transform-style: preserve-3d;
    transform:
        perspective(1800px)
        rotateX(calc(57deg + var(--ty, 0) * 1deg))
        rotateZ(calc(-44deg + var(--tx, 0) * 1deg))
        translateZ(calc(var(--gap) * -2));
    transition: transform .9s var(--ease);
}
.slab {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--i) * var(--gap)));
    transition: transform .9s var(--ease);
}
.slab__face {
    position: absolute; inset: 0;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 58%, rgba(94, 240, 210, .05));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 40px rgba(0, 0, 0, .3);
}
.slab__edge { position: absolute; background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .04)); }
.slab__edge--b { left: 18px; right: 18px; bottom: 0; height: 10px; transform-origin: 50% 100%; transform: rotateX(90deg); }
.slab__edge--r { top: 18px; bottom: 18px; left: 0; width: 10px; transform-origin: 0 50%; transform: rotateY(90deg); }
.slab__label {
    position: absolute; left: 22px; bottom: 20px;
    font: 500 .66rem/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(238, 242, 247, .8);
}
.slab__leds { position: absolute; right: 22px; top: 22px; display: flex; gap: 6px; }
.slab__leds i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px rgba(94, 240, 210, .7); }
.slab__leds i:nth-child(2) { background: var(--volt); box-shadow: 0 0 6px rgba(216, 255, 69, .7); }
.slab__vents {
    position: absolute; left: 22px; top: 22px;
    width: 42%; height: 22px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 8px);
    opacity: .55;
}
.slab--top .slab__face {
    background: linear-gradient(135deg, rgba(216, 255, 69, .24), rgba(216, 255, 69, .06) 55%, rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .5), 0 0 60px rgba(216, 255, 69, .1);
}
.slab--top .slab__label {
    left: 50%; top: 50%; bottom: auto;
    translate: -50% -50%;
    font: 500 1rem/1 var(--f-display);
    letter-spacing: -.03em;
    text-transform: none;
    color: #f4ffd6;
    white-space: nowrap;
}
.packet {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 6px; height: 6px; margin: -3px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 10px 2px rgba(216, 255, 69, .45);
    opacity: 0;
}
.is-playing .packet { animation: packet 3.6s var(--ease-io) infinite; animation-delay: var(--dl); }

/* Lichtbundel: een smalle strook die rechtop door alle lagen staat (rotateX 90°) en naar de kijker gedraaid is.
   Over de bundel loopt een lichtstreep omhoog, gelijk met het pakketje (zelfde duur, curve en vertraging). */
.beam {
    --bh: calc(var(--gap) * 4 + 16px);
    position: absolute;
    left: var(--x); top: var(--y);
    width: 2px; height: var(--bh);
    margin-left: -1px;
    overflow: hidden;
    transform-origin: 50% 0;
    transform: rotateZ(44deg) rotateX(90deg);
    background: linear-gradient(to bottom, rgba(94, 240, 210, .3), rgba(94, 240, 210, .04));
}
.beam i { position: absolute; left: 0; top: 0; width: 100%; height: 34px; background: linear-gradient(to bottom, transparent, rgba(216, 255, 69, .9)); opacity: 0; }
.is-playing .beam i { animation: beam-pulse 3.6s var(--ease-io) infinite; animation-delay: var(--dl); }

/* Scanlijn: een omlijning die door de stapel omhoog glijdt en bovenaan uitdooft. */
.scan {
    position: absolute; inset: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(94, 240, 210, .08), transparent 62%);
    box-shadow: inset 0 0 0 1px rgba(94, 240, 210, .55), 0 0 18px rgba(94, 240, 210, .16);
    opacity: 0;
    pointer-events: none;
}
.is-playing .scan { animation: scan 8s var(--ease-io) infinite 1.2s; }

/* Bodemraster onder de stapel; het raster schuift langzaam diagonaal door. */
.stack__floor {
    position: absolute; inset: -42%;
    overflow: hidden;
    transform: translateZ(-26px);
    -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
}
.stack__floor i {
    position: absolute; inset: -32px;
    background-image: linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px);
    background-size: 32px 32px;
}
.is-playing .stack__floor i { animation: floor-flow 7s linear infinite; }

/* Belastingsmeter per server: zes staafjes die elk in hun eigen tempo op en neer gaan. */
.slab__meter { position: absolute; right: 22px; bottom: 20px; display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.slab__meter i { width: 3px; height: 100%; border-radius: 1px; background: rgba(94, 240, 210, .7); transform-origin: 50% 100%; transform: scaleY(calc(.35 + var(--b) * .1)); }
.is-playing .slab__meter i {
    animation: meter calc(1s + var(--b) * .17s) var(--ease-io) infinite alternate;
    animation-delay: calc(var(--b) * -.37s - var(--i) * .5s);
}

/* Domeinnaam bovenop wisselt (main.js); zacht uit- en invagen. */
.slab--top .slab__label { transition: opacity .35s var(--ease), filter .35s var(--ease); }
.slab--top .slab__label.is-out { opacity: 0; filter: blur(3px); }
.is-playing .slab__leds i { animation: led 3s ease-in-out infinite; }
.is-playing .slab__leds i:nth-child(2) { animation-delay: .6s; }
.is-playing .slab__leds i:nth-child(3) { animation-delay: 1.3s; }
.slab:nth-child(2) .slab__leds i { animation-delay: .9s; }
.slab:nth-child(3) .slab__leds i { animation-delay: 1.7s; }

.hero__shadow {
    position: absolute; left: 50%; bottom: 7%;
    width: 70%; height: 70px;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(94, 240, 210, .16), transparent 70%);
    filter: blur(10px);
    animation: fade-in 1.6s var(--ease) .5s both;
}

@media (max-width: 980px) {
    .hero { min-height: 0; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 32px; }
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__visual { height: 380px; }
}
@media (max-width: 520px) {
    .hero__visual { height: 300px; }
    .stack { --s: 184px; --gap: calc(30px + var(--sp, 0) * 26px); }
    .slab__face { border-radius: 16px; }
    .slab__label { left: 14px; bottom: 13px; font-size: .5rem; }
    .slab__leds { right: 14px; top: 14px; gap: 4px; }
    .slab__leds i { width: 5px; height: 5px; }
    .slab__vents { left: 14px; top: 14px; height: 15px; }
    .slab__meter { right: 14px; bottom: 13px; gap: 2px; height: 10px; }
    .slab__meter i { width: 2px; }
    .slab--top .slab__label { font-size: .72rem; }
    .scan { border-radius: 16px; }
}

/* ---------- Domeinbalk onder de hero ----------
   "jouwbedrijf" met een extensie die als een cijferslot doorrolt; de prijs rolt mee en de actieve
   extensie licht op in de rij eronder. Een dun lijntje laat zien wanneer de volgende komt (main.js). */

.droll {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-areas: "copy stage" "chips cta";
    align-items: center;
    gap: 1.8rem 3rem;
    padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.3rem, 4vw, 2.8rem);
    border-radius: var(--r-xl);
    overflow: hidden;
    background:
        radial-gradient(55% 140% at 82% 30%, rgba(216, 255, 69, .07), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .03));
}
.droll__copy { grid-area: copy; }
.droll__copy .eyebrow { margin-bottom: .8rem; }
.droll__title { margin-bottom: .55rem; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.12; }
.droll__text { max-width: 30rem; font-size: .95rem; color: var(--text-2); }

.droll__stage { grid-area: stage; display: grid; justify-items: end; gap: .55rem; min-width: 0; }
.droll__domain {
    display: flex; align-items: flex-end;
    max-width: 100%;
    font: 500 clamp(1.6rem, 3.5vw, 3rem)/1.15 var(--f-display);
    letter-spacing: -.045em;
    white-space: nowrap;
}
.droll__name { display: block; height: 1.15em; color: var(--text); }
.droll__slot { position: relative; display: block; height: 1.15em; overflow: hidden; transition: width .6s var(--ease); }
.droll__reel { display: flex; flex-direction: column; align-items: flex-start; transition: transform .7s var(--ease); }
.droll__reel > span { display: block; height: 1.15em; line-height: 1.15em; white-space: nowrap; }
.droll__domain .droll__slot { color: var(--volt); }

.droll__price { display: flex; align-items: flex-end; gap: .55rem; font: 500 clamp(1.05rem, 1.7vw, 1.35rem)/1.15 var(--f-display); letter-spacing: -.03em; }
.droll__price small { padding-bottom: .12em; font: 400 .82rem/1 var(--f-body); letter-spacing: 0; color: var(--muted); }

/* Tijdlijntje: twee neonbalken lopen over elkaar heen. De groene vult zich tot de volgende extensie
   doorrolt, de turquoise schiet er in hetzelfde tempo overheen; waar ze kruisen licht de lijn wit op. */
.droll__timer { position: relative; width: min(220px, 60%); height: 2px; margin-top: .35rem; border-radius: 2px; background: rgba(255, 255, 255, .08); clip-path: inset(-8px 0 -8px 0 round 2px); isolation: isolate; }
.droll__timer i, .droll__timer b { position: absolute; top: 0; bottom: 0; border-radius: inherit; mix-blend-mode: screen; }
.droll__timer i { inset: 0; background: var(--volt); box-shadow: 0 0 6px rgba(216, 255, 69, .75), 0 0 14px rgba(216, 255, 69, .35); transform-origin: left; transform: scaleX(0); }
.droll__timer b { left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgb(94, 240, 210) 70%, #e9fffb); box-shadow: 0 0 8px rgba(94, 240, 210, .7); opacity: 0; transform: translateX(-100%); }
.is-playing.is-ticking .droll__timer i { animation: droll-timer var(--droll-t, 2.6s) linear both; }
.is-playing.is-ticking .droll__timer b { animation: droll-comet var(--droll-t, 2.6s) var(--ease-io) both; }

.droll__chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: .4rem; }
.droll__chip {
    display: inline-flex; align-items: center; gap: .45rem;
    height: 32px; padding: 0 .75rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 400 .68rem var(--f-mono);
    color: var(--muted);
    text-decoration: none;
    transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s;
}
.droll__chip b { font: 500 .8rem var(--f-display); letter-spacing: -.02em; color: var(--text-2); transition: color .35s; }
.droll__chip:hover { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.droll__chip.is-active { background: rgba(216, 255, 69, .08); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .55); color: var(--text-2); }
.droll__chip.is-active b { color: var(--volt); }
.droll__cta { grid-area: cta; justify-self: end; }

@media (max-width: 900px) {
    .droll { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "chips" "cta"; gap: 1.4rem; }
    .droll__stage { justify-items: start; }
    .droll__cta { justify-self: stretch; }
}
@media (max-width: 420px) {
    .droll__chip:nth-child(n + 7) { display: none; }
}

/* ---------- Domeinzoeker ---------- */

.dsearch {
    display: flex; align-items: center; gap: .25rem;
    width: 100%;
    padding: 5px;
    transition: box-shadow .35s var(--ease);
}
.dsearch:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(216, 255, 69, .5), 0 0 0 5px rgba(216, 255, 69, .07); }
.dsearch__www { padding-left: 1.05rem; font: 400 .8rem var(--f-mono); color: var(--muted); user-select: none; }
.dsearch__field { position: relative; flex: 1; min-width: 0; }
.dsearch input {
    width: 100%; height: 48px;
    padding: 0 .35rem;
    border: 0; outline: 0;
    background: transparent;
    color: var(--text);
    font: 500 1.05rem var(--f-body);
    caret-color: var(--volt);
}
.dsearch input:focus-visible { outline: 0; }
.dsearch input::placeholder { color: var(--muted); }
.js .dsearch input::placeholder { color: transparent; }
.dsearch__ghost {
    position: absolute; inset: 0 .35rem;
    display: flex; align-items: center;
    font: 500 1.05rem var(--f-body);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .2s;
}
.dsearch__ghost em { font-style: normal; color: var(--text-2); }
.dsearch__ghost::after { content: ""; width: 1.5px; height: 1.1em; margin-left: 2px; background: var(--volt); animation: blink 1.1s steps(1) infinite; }
.dsearch.has-value .dsearch__ghost,
.dsearch:focus-within .dsearch__ghost,
.dsearch input:not(:placeholder-shown) + .dsearch__ghost { opacity: 0; }
.dsearch__btn { flex: none; }

.dsearch--xl input, .dsearch--xl .dsearch__ghost { font-size: 1.15rem; }
.dsearch--xl input { height: 54px; }
.dsearch--xl .btn { --h: 52px; padding: 0 1.6rem; }

@media (max-width: 520px) {
    .dsearch__www { display: none; }
    .dsearch input { padding-left: .85rem; }
    .dsearch__ghost { left: .85rem; }
    .dsearch__btn span { display: none; }
    .dsearch__btn, .dsearch--xl .btn { width: 48px; --h: 48px; padding: 0; }
    .dsearch--xl input { height: 48px; font-size: 1.02rem; }
    .dsearch--xl .dsearch__ghost { font-size: 1.02rem; }
}

/* Resultaten */
.dresults { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-top: .85rem; }
.dresults:empty { display: none; }

.dres-main {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .9rem 1.2rem;
    padding: 1rem 1rem 1rem 1.3rem;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    animation: res-in .5s var(--ease) both;
}
.dres-main__info { flex: 1 1 220px; min-width: 0; }
.dres-main__status {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: .3rem;
    font: 500 .62rem var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.dres-main__name { display: block; font: 500 clamp(1.1rem, 2.2vw, 1.4rem)/1.2 var(--f-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.dres-main__name b { font-weight: 500; color: var(--volt); }
.dres-main__price { font: 400 .78rem var(--f-mono); color: var(--text-2); }
.dres-main__price b { font: 500 1.1rem var(--f-display); color: var(--text); letter-spacing: -.03em; }
.dres-main.is-free { background: rgba(216, 255, 69, .07); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .45); }
.dres-main.is-free .dres-main__status { color: var(--volt); }
.dres-main.is-taken .dres-main__name b { color: var(--text-2); }
.dres-main.is-taken .dres-main__status { color: var(--bad); }
.dres-main.is-unknown .dres-main__status { color: var(--warn); }
.dres-main.is-loading .dres-main__status::after { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--volt), transparent); background-size: 200% 100%; animation: shimmer 1s linear infinite; }

.dres-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.dalt {
    display: flex; align-items: center; gap: .7rem;
    min-height: 52px;
    padding: .5rem .55rem .5rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--line);
    text-decoration: none;
    animation: res-in .45s var(--ease) both;
    animation-delay: calc(var(--i) * 45ms);
    transition: background .25s, box-shadow .25s;
}
.dalt__name { flex: 1; min-width: 0; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dalt__name b { font-weight: 600; }
.dalt__price { font: 400 .7rem var(--f-mono); color: var(--text-2); white-space: nowrap; }
.dalt__add { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-2); transition: background .25s, color .25s; }
.dalt__add .icon { width: 15px; height: 15px; }
.dalt.is-free:hover { background: rgba(216, 255, 69, .06); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .4); }
.dalt.is-free:hover .dalt__add { background: var(--volt); color: var(--volt-ink); }
/* Bezet: de inhoud gedimd, niet de tegel zelf. De opacity van de tegel wordt door de inloopanimatie (res-in, fill-mode both) op 1 gehouden.
   Bezet maar te verhuizen (is-transfer) is wel een actie: alleen de naam gedimd (zonder doorhaling), label en pijl
   volledig leesbaar, en bij hover dezelfde rand als een vrije naam, in wit. */
.dalt.is-taken:not(.is-transfer) > * { opacity: .55; }
.dalt.is-taken .dalt__name { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .55); }
.dalt.is-transfer .dalt__name { opacity: .6; text-decoration: none; }
.dalt.is-transfer:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.dalt.is-transfer:hover .dalt__add { background: var(--text); color: var(--ink); }
.dalt.is-loading .dalt__price { width: 52px; height: 10px; border-radius: 6px; color: transparent; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.dres-note { padding: .2rem .3rem 0; font: 400 .66rem/1.6 var(--f-mono); color: var(--muted); }
.dres-error { padding: .9rem 1.1rem; border-radius: 12px; background: rgba(255, 107, 125, .08); box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .3); font-size: .92rem; }

@media (max-width: 560px) {
    .dres-grid { grid-template-columns: minmax(0, 1fr); }
    .dalt__name { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
    .dres-main { padding: 1rem; }
    .dres-main .btn { width: 100%; }
}

/* ---------- Secties ---------- */

.section { position: relative; padding: clamp(3.5rem, 6.5vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .02) 14%, rgba(255, 255, 255, .02) 86%, transparent); }

.shead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    align-items: end;
    gap: 1rem 4rem;
    margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.shead h2, .shead__title, .split__head h2 { font-size: clamp(1.7rem, 3.1vw, 2.6rem); line-height: 1.1; }
.shead .eyebrow { margin-bottom: .9rem; }
.shead__text { max-width: 30rem; font-size: 1rem; color: var(--text-2); }
.shead__text a, .split__head a:not(.btn):not(.link-arrow) { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; }
.shead--stack { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (max-width: 820px) { .shead { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split__head h2 { margin-bottom: 1rem; }
.split__head .shead__text { margin-bottom: .4rem; }
.split__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
@media (min-width: 901px) { .split__head--sticky { position: sticky; top: 110px; } }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Aanbod ---------- */

.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cat {
    display: flex; flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--r-xl);
    text-decoration: none;
    transition: translate .5s var(--ease);
}
.cat:hover { translate: 0 -4px; }
.cat__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--text);
    transition: background .3s, color .3s, box-shadow .3s;
}
.cat__icon .icon { width: 20px; height: 20px; }
.cat:hover .cat__icon { background: var(--volt); color: var(--volt-ink); box-shadow: none; }
.cat h3 { margin: 2.2rem 0 .45rem; font-size: 1.1rem; }
.cat p { margin-bottom: 1.6rem; font-size: .92rem; color: var(--text-2); }
.cat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cat__meta { font: 400 .64rem/1.4 var(--f-mono); color: var(--muted); white-space: nowrap; }
.cat__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.cat__price { font-size: .86rem; color: var(--text-2); white-space: nowrap; }
.cat__price b { font: 500 1rem var(--f-display); letter-spacing: -.03em; color: var(--text); }
.cat__foot > .icon { width: 16px; height: 16px; color: var(--text-2); transition: transform .35s var(--ease), color .25s; }
.cat:hover .cat__foot > .icon { transform: translateX(3px); color: var(--volt); }
@media (max-width: 1100px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cats { grid-template-columns: minmax(0, 1fr); } .cat h3 { margin-top: 1.4rem; } }

/* ---------- Pakketten ---------- */

.billing { display: flex; justify-content: center; margin-bottom: 2.2rem; }
html:not(.js) .billing { display: none; }
.billing__switch {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
}
.billing__switch button {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center;
    height: 38px; padding: 0 1.15rem;
    border: 0; border-radius: 999px;
    background: none;
    font-size: .88rem;
    color: var(--text-2);
    cursor: pointer;
    transition: color .35s var(--ease);
}
.billing__switch button.is-active { color: var(--volt-ink); font-weight: 600; }
.billing__save { margin-left: .45rem; padding: .2rem .4rem; border-radius: 5px; background: rgba(216, 255, 69, .14); color: var(--volt); font: 500 .62rem var(--f-mono); transition: background .35s, color .35s; }
.is-active .billing__save { background: rgba(13, 20, 0, .12); color: var(--volt-ink); }
.billing__thumb {
    position: absolute; top: 4px; bottom: 4px; left: 0;
    width: var(--w, 0);
    border-radius: 999px;
    background: var(--volt);
    translate: var(--x, 4px) 0;
    transition: translate .5s var(--ease), width .5s var(--ease);
}

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; margin-inline: auto; }
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.plans--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }

.plan {
    display: flex; flex-direction: column;
    padding: 1.6rem 1.5rem 1.5rem;
    border-radius: var(--r-xl);
    transition: translate .5s var(--ease);
}
.plan:hover { translate: 0 -4px; }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.plan__name { font: 500 1.25rem/1.2 var(--f-display); letter-spacing: -.03em; }
.plan__badge { padding: .32rem .5rem; border-radius: 6px; background: rgba(216, 255, 69, .12); color: var(--volt); font: 500 .58rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* Twee regels hoog, ook bij een korte intro: zo staan prijs en knop in elke kaart op dezelfde hoogte. */
.plan__intro { min-height: 3.2em; margin-bottom: 1.4rem; font-size: .92rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 420px), (min-width: 901px) and (max-width: 1000px) { .plan__intro { min-height: 4.8em; } }

/* Prijs op één basislijn: klein euroteken, groot bedrag, kleinere centen, dan "per maand".
   Het bedrag schaalt mee met de kaartbreedte (container query), zodat "per maand" nooit afbreekt. */
.price { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; margin-bottom: .45rem; }
/* Inline-block in plaats van flex: dezelfde basislijn, maar kopiëren geeft "€12,99" en niet "€ 12 ,99" (voorlezen: zie .sr-only hieronder). */
.price__amount { display: inline-block; font: 500 clamp(1.9rem, 15.5cqi, 2.6rem)/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
/* Vijf cijfers voor de komma (een jaarbedrag als €10.454,25): iets kleiner, zodat "per jaar" ernaast blijft passen. */
.price__amount.is-long { font-size: clamp(1.65rem, 13.5cqi, 2.25rem); }
.price__cur { margin-right: .03em; font-size: .5em; letter-spacing: 0; color: var(--text-2); } /* het euroteken heeft zelf al wat lucht: "€12,99", net als elke andere prijs */
.price__amount > span { display: inline-block; } /* inline-block: de cijferwissel (num-flip) gebruikt transform */
/* Voorlezen: het hele bedrag in één keer ("€54,44") uit een verborgen tekst; de losse delen zijn aria-hidden.
   Niet selecteerbaar, zodat kopiëren het bedrag niet twee keer geeft. */
.price__amount > .sr-only { -webkit-user-select: none; user-select: none; }
.price__whole { font-variant-numeric: tabular-nums; }
.price__cents { margin-left: .06em; font-size: .5em; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.price__per { font-size: .86rem; color: var(--muted); white-space: nowrap; }
.price.is-swapping .price__whole, .price.is-swapping .price__cents { animation: num-flip .45s var(--ease); }
/* Korting: de gewone maandprijs doorgestreept boven de prijs, met het percentage (price_was_html()).
   Zonder korting bij de gekozen periode is de regel onzichtbaar maar houdt hij zijn hoogte. */
.price__was { flex-basis: 100%; display: flex; align-items: center; gap: .5rem; min-height: 1.35rem; margin-bottom: .35rem; font-size: .84rem; color: var(--muted); transition: opacity .35s var(--ease), translate .35s var(--ease); }
.price__was s { text-decoration-thickness: 1px; }
.price__was.is-off { visibility: hidden; opacity: 0; translate: 0 3px; }
.price__off { padding: .22rem .42rem; border-radius: 5px; background: rgba(216, 255, 69, .14); color: var(--volt); font: 500 .62rem/1 var(--f-mono); }
.price__off:empty { display: none; }

/* Korte prijsnotatie (kaarten, menu, footer, domeinprijzen, beheer): "vanaf €12,99 / mnd", "€6,95 / jaar".
   Grote prijsblokken houden "per maand" en "per jaar". In de HTML direct achter het bedrag, de spatie binnen de span:
   price_html(...)<span class="per"> / mnd</span>. Het achtervoegsel is overal even klein, mono en gedempt; zo valt ook
   de spatie ervoor in de monoletter en is er aan beide kanten van de schuine streep precies even veel lucht, welk
   lettertype het bedrag ook heeft. Kopiëren en voorlezen geven gewoon "€12,99 / mnd". Bedrag en achtervoegsel breken
   nooit los: nowrap hier en op de prijsregels zelf. */
.per { font: 400 .64rem var(--f-mono); letter-spacing: 0; color: var(--muted); white-space: nowrap; }

.plan__billing { min-height: 1.4em; margin-bottom: 1.35rem; font-size: .82rem; color: var(--muted); }
/* Actietekst (data-promo) alleen in mint bij de maandprijs: per jaar staat hier het jaarbedrag. De periode staat op het
   prijsblok erboven (data-period, gezet door main.js en shop.js; zonder data-period is het per maand). */
.price:not([data-period="y"]) + .plan__billing[data-promo] { color: var(--mint); }
.plan__billing-vat { color: var(--muted); white-space: nowrap; } /* "· incl. btw" achter een actietekst: grijs, niet in mint */
.plan__cta { width: 100%; margin-bottom: 1.4rem; }

.plan__spec { display: grid; gap: .5rem; margin: 0 0 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.plan__spec div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9rem; }
.plan__spec dt { color: var(--muted); }
.plan__spec dd { margin: 0; font-weight: 500; text-align: right; }
.plan__checks { display: grid; gap: .5rem; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .88rem; color: var(--text-2); }
.plan__checks li { display: flex; align-items: flex-start; gap: .55rem; }
.plan__checks .icon { width: 16px; height: 16px; margin-top: .2rem; color: var(--mint); }

.plan--featured { background: linear-gradient(180deg, rgba(216, 255, 69, .075), rgba(255, 255, 255, .03) 42%); }
.plan--featured::before { background: linear-gradient(180deg, rgba(216, 255, 69, .55), rgba(216, 255, 69, .14) 45%, rgba(255, 255, 255, .07)); }

.plans__more { margin-top: 2rem; text-align: center; }
.plans__vat { margin-top: 1.4rem; text-align: center; font: 400 .68rem var(--f-mono); color: var(--muted); }
.plans__dots { display: none; }

@media (max-width: 1100px) { .plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .plans[data-plans] {
        display: flex;
        gap: .75rem;
        max-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding: .4rem var(--gutter) 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .plans::-webkit-scrollbar { display: none; }
    .plan { flex: 0 0 min(86%, 360px); scroll-snap-align: start; }
    .plan:hover { translate: none; }
    .plans__dots { display: flex; justify-content: center; gap: .4rem; margin-top: .2rem; }
    .plans__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .2); cursor: pointer; transition: width .4s var(--ease), background .3s; }
    .plans__dots button.is-active { width: 22px; background: var(--volt); }
}

/* ---------- Functies ---------- */

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); }
.feature__art {
    display: grid; place-items: center;
    height: 148px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .035), transparent 70%);
}
.feature__art svg { width: 100%; max-width: 260px; height: auto; overflow: visible; }
.feature h3 { margin: 1.35rem 1.5rem .4rem; font-size: 1.02rem; }
.feature p { margin: 0 1.5rem 1.6rem; font-size: .92rem; color: var(--text-2); }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .features { grid-template-columns: minmax(0, 1fr); } .feature__art { height: 136px; } }

/* ---------- Illustraties (includes/partials/motion.php) ----------
   De ruststand is de eindstand; animaties lopen alleen in beeld (.is-playing). */

.m { font-family: var(--f-mono); }
.m--fade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.m-frame { fill: rgba(0, 0, 0, .2); stroke: var(--line-2); stroke-width: 1; }
.m-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.m-grid { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; stroke-dasharray: 2 4; }
.m-text { font-family: var(--f-mono); font-size: 10px; fill: var(--muted); }
.m-text--hi { fill: var(--text); }
.m-text--sm { font-size: 8.5px; letter-spacing: .04em; }

/* SSL: het slot gaat dicht zodra de verbinding versleuteld is. */
.m-ssl__bg { fill: var(--volt); }
.m-ssl__shackle { fill: none; stroke: var(--volt-ink); stroke-width: 1.6; stroke-linecap: round; }
.m-ssl__body { fill: var(--volt-ink); }
.m-ssl__scan { fill: none; stroke: var(--volt); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 148; }
.is-playing .m-ssl__scan { animation: m-ssl-scan 5s var(--ease-io) infinite; }
.is-playing .m-ssl__bg { animation: m-ssl-bg 5s var(--ease) infinite; }
.is-playing .m-ssl__shackle { animation: m-ssl-shackle 5s var(--ease) infinite; }
.is-playing .m-ssl__body { animation: m-ssl-body 5s var(--ease) infinite; }

/* DDoS: verkeer van links, het schild laat alleen het goede door. */
.m-ddos__shield { fill: #0a0e16; stroke: rgba(216, 255, 69, .55); stroke-width: 1.2; stroke-linejoin: round; }
.m-ddos__check { fill: none; stroke: var(--volt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-ddos__in, .m-ddos__out { opacity: 0; }
.m-ddos__in--bad { fill: var(--bad); }
.m-ddos__in--ok { fill: var(--text); }
.m-ddos__out { fill: var(--volt); }
.is-playing .m-ddos__in { animation: m-ddos-in 2.8s linear infinite; animation-delay: var(--dl); }
.is-playing .m-ddos__out { animation: m-ddos-out 2.8s linear infinite; animation-delay: var(--dl); }

/* Monitoring: een rustige hartslaglijn. */
.m-monitor__line { fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.m-monitor__ok { fill: var(--ok); }
.is-playing .m-monitor__scroll { animation: m-scroll 2.8s linear infinite; }
.is-playing .m-monitor__ok { animation: m-blink 2.8s ease-in-out infinite; }

/* Back-ups: een boog loopt rond en zet steeds een nieuw ijkpunt. */
.m-backup__tick { stroke: var(--text-2); stroke-width: 1.4; stroke-linecap: round; opacity: .4; }
.m-backup__arc { fill: none; stroke: var(--volt); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22 78; transform-box: fill-box; transform-origin: center; }
.m-backup__db { fill: none; stroke: var(--text-2); stroke-width: 1.4; }
.is-playing .m-backup__arc { animation: m-spin 6s linear infinite; }
.is-playing .m-backup__tick { animation: m-tick 6s linear infinite; animation-delay: var(--dl); }

/* Beheer: een klein controlepaneel. */
.m-panel__active { fill: rgba(216, 255, 69, .12); stroke: rgba(216, 255, 69, .4); stroke-width: 1; }
.m-panel__menu { stroke: rgba(255, 255, 255, .24); stroke-width: 2; stroke-linecap: round; }
.m-panel__bar-bg { fill: rgba(255, 255, 255, .07); }
.m-panel__bar { fill: var(--mint); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--w)); }
.m-panel__switch { fill: var(--volt); }
.m-panel__knob { fill: var(--volt-ink); }
.is-playing .m-panel__active { animation: m-menu 8s var(--ease) infinite; }
.is-playing .m-panel__bar { animation: m-bar 6s var(--ease-io) infinite; animation-delay: var(--dl); }
.is-playing .m-panel__switch { animation: m-switch 5s var(--ease) infinite; }
.is-playing .m-panel__knob { animation: m-knob 5s var(--ease) infinite; }

/* Onbeperkt verkeer: lijnen die blijven stromen. */
.m-traffic__line { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 34 16 8 22; }
.m-traffic__line--a { stroke: rgba(255, 255, 255, .2); }
.m-traffic__line--b { stroke: rgba(94, 240, 210, .7); }
.m-traffic__line--c { stroke: var(--volt); }
.is-playing .m-traffic__line { animation: m-dash var(--t) linear infinite; animation-delay: var(--dl); }

/* ---------- Werkwijze ---------- */

.steps { display: grid; margin: 0; padding: 0; list-style: none; }
.step {
    position: relative;
    display: grid; grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
/* Een limoen streepje tekent zich bij het onthullen over de lijn. */
.step::before {
    content: "";
    position: absolute; left: 0; top: -1px;
    width: 2.8rem; height: 1px;
    background: var(--volt);
    transform: scaleX(0); transform-origin: left;
    transition: transform .9s var(--ease) calc(.25s + var(--d, 0) * 80ms);
}
.step.is-in::before, html:not(.js) .step::before { transform: none; }
.step__n { font: 500 .72rem/1.8 var(--f-mono); color: var(--volt); }
.step h3 { margin-bottom: .3rem; font-size: 1.04rem; }
.step p { font-size: .93rem; color: var(--text-2); }
.steps--compact { margin-top: 2rem; }
.steps--compact .step { padding: 1.05rem 0; }

/* ---------- Reviews ---------- */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.review { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.6rem; border-radius: var(--r-xl); }
.review blockquote { flex: 1; margin: 0; font-size: 1rem; line-height: 1.65; }
.review figcaption b { display: block; font-weight: 600; }
.review figcaption span { font-size: .85rem; color: var(--muted); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q { margin: 0; font: inherit; letter-spacing: normal; }
.faq__q button {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    width: 100%;
    padding: 1.25rem 0;
    border: 0; background: none;
    font: 500 1.02rem/1.4 var(--f-body);
    text-align: left;
    cursor: pointer;
}
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: box-shadow .3s, color .3s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 2px; background: currentColor; translate: -50% -50%; transition: rotate .45s var(--ease); }
.faq__icon::after { rotate: 90deg; }
.faq__q button:hover .faq__icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: var(--text); }
.faq__item.is-open .faq__icon { box-shadow: inset 0 0 0 1px var(--volt); color: var(--volt); }
.faq__item.is-open .faq__icon::after { rotate: 0deg; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s .5s; }
.faq__a p { max-width: 62ch; padding: 0 3rem 1.35rem 0; font-size: .96rem; color: var(--text-2); }
.faq__a a { color: var(--text); text-decoration-color: var(--volt); text-underline-offset: 3px; }
.faq__item.is-open .faq__a, html:not(.js) .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > div, html:not(.js) .faq__a > div { visibility: visible; transition-delay: 0s; }

/* ---------- CTA ---------- */

.cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 2rem 4rem;
    padding: clamp(1.6rem, 5vw, 3.4rem);
    border-radius: var(--r-xl);
}
.cta h2 { margin-bottom: .8rem; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; }
.cta__copy p { max-width: 30rem; color: var(--text-2); }
.cta__search, .cta__actions { min-width: 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
@media (max-width: 900px) { .cta { grid-template-columns: minmax(0, 1fr); } .cta__actions { justify-content: flex-start; } }

/* ---------- Subpagina's ---------- */

.phero { position: relative; padding: calc(var(--nav-h) + 80px) 0 clamp(2.5rem, 5vw, 4rem); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem 4rem; align-items: end; }
.phero__title { max-width: 20ch; font-size: clamp(2rem, 3.9vw, 3.3rem); line-height: 1.08; letter-spacing: -.04em; }
.phero__lead { max-width: 36rem; margin-top: 1.3rem; font-size: clamp(1rem, 1.25vw, 1.1rem); color: var(--text-2); animation: fade-up .9s var(--ease) .35s both; }
.phero .eyebrow { animation: fade-up .8s var(--ease) .05s both; }
.phero__actions { margin-top: 1.8rem; animation: fade-up .9s var(--ease) .45s both; }
.phero--center { text-align: center; }
.phero--center .phero__title, .phero--center .phero__lead { margin-inline: auto; }
@media (max-width: 900px) { .phero { padding-top: calc(var(--nav-h) + 56px); } .phero__grid { grid-template-columns: minmax(0, 1fr); } }

/* Pakketoverzicht in de kop van een hostingpagina */
.pindex { padding: .5rem; border-radius: var(--r-xl); animation: fade-up 1s var(--ease) .35s both; }
.pindex__head { display: flex; justify-content: space-between; padding: .7rem calc(.9rem + 18px + 1rem) .6rem .9rem; font: 400 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pindex__row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center; gap: .3rem 1rem;
    padding: .85rem .9rem;
    border-top: 1px solid var(--line);
    text-decoration: none;
    border-radius: 12px;
    transition: background .25s;
    animation: fade-up .8s var(--ease) both;
    animation-delay: calc(.45s + var(--i) * .07s);
}
.pindex__row:hover { background: var(--surface-2); }
.pindex__row:hover, .pindex__row:hover + .pindex__row { border-top-color: transparent; }
.pindex__name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; font-weight: 600; }
.pindex__name small { padding: .22rem .4rem; border-radius: 5px; background: rgba(216, 255, 69, .12); color: var(--volt); font: 500 .54rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pindex__spec { grid-column: 1; grid-row: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font: 400 .66rem/1.5 var(--f-mono); color: var(--muted); }
.pindex__price { grid-row: 1 / span 2; grid-column: 2; font: 500 1.05rem var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.pindex__row > .icon { grid-row: 1 / span 2; grid-column: 3; width: 16px; height: 16px; color: var(--muted); transition: transform .3s var(--ease), color .25s; }
.pindex__row:hover > .icon { transform: translateY(2px); color: var(--volt); }

/* Vergelijkingstabel */
.compare-wrap { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.compare-scroll { overflow-x: auto; scrollbar-width: thin; }
.compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.compare th, .compare td { padding: .9rem 1.1rem; text-align: center; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--text-2); }
.compare thead th { padding: 1.3rem 1.1rem; font: 500 1.1rem var(--f-display); letter-spacing: -.03em; vertical-align: bottom; background: rgba(10, 14, 24, .4); }
.compare thead th small { display: block; margin-top: .3rem; font: 400 .64rem var(--f-mono); letter-spacing: 0; color: var(--muted); white-space: nowrap; }
/* Prijs en "per maand" breken nooit los af. Smaller dan dit past "€181,49 per maand" niet in elke kolom:
   dan staat "per maand" in álle kolommen onder het bedrag, niet in de ene kolom wel en de andere niet. */
@media (max-width: 1000px) { .compare__per { display: block; } }
/* Korting: de gewone prijs doorgestreept op een eigen regel erboven, net als op de kaarten. Zo maakt hij de kolom
   niet breder en blijven de bedragen (vertical-align: bottom) in elke kolom op één lijn; .compare__was houdt de regel
   vrij in kolommen zonder korting, zodat ook de namen gelijk staan. Het bedrag zelf iets lichter. */
.compare thead th small s, .compare__was { display: block; margin-bottom: .15rem; }
.compare thead th small s { text-decoration-thickness: 1px; }
.compare thead th small > .money { color: var(--text-2); }
.compare thead th.is-featured { color: var(--volt); }
.compare tbody th { padding: 1.5rem 1.1rem .65rem; font: 400 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom-color: var(--line-2); }
.compare td.is-featured { background: rgba(216, 255, 69, .035); }
.compare .icon { width: 17px; height: 17px; margin: auto; }
.compare .yes { color: var(--mint); }
.compare .no { color: rgba(255, 255, 255, .22); }
.compare tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.compare tfoot td { padding: 1.2rem 1.1rem; border-bottom: 0; }
.compare tfoot .btn { --h: 40px; padding: 0 1rem; font-size: .85rem; }
/* Boven 760px is er geen veeg-hint: daar moet de tabel passen. Tot 1000px dus geen vaste minimumbreedte en wat
   minder ruimte opzij in de cellen, anders schuift de tabel net boven 760px een paar pixels opzij (min-width: 720px). */
@media (min-width: 761px) and (max-width: 1000px) {
    .compare { min-width: 0; }
    .compare tr > :is(th, td) { padding-inline: .8rem; }
}
.compare__first { position: sticky; left: 0; z-index: 2; background: #0a0d15; }
@media (min-width: 761px) { .compare__first { background: transparent; } }
@media (max-width: 760px) { .compare thead .compare__first { background: #0a0d15; } }
.compare-hint { display: none; margin-top: .8rem; font: 400 .64rem var(--f-mono); color: var(--muted); text-align: center; }
@media (max-width: 760px) { .compare-hint { display: block; } }

/* Kaarten met icoon: extra diensten, inbegrepen */
.included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.included__item, .service { padding: 1.5rem; border-radius: var(--r-xl); }
.included__item > .icon, .service__icon, .ccard > .icon, .stepcard__icon {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--text);
}
.included__item > .icon, .ccard > .icon { padding: 11px; }
.service__icon .icon, .stepcard__icon .icon { width: 20px; height: 20px; }
.included__item > .icon { margin-bottom: 1.5rem; }
.included__item h3, .service h2 { margin-bottom: .45rem; font: 600 1.02rem/1.3 var(--f-body); letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
.included__item p, .service p { font-size: .91rem; color: var(--text-2); }
@media (max-width: 1100px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .included { grid-template-columns: minmax(0, 1fr); } }

.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.service__icon { margin-bottom: 1.6rem; }
@media (max-width: 1100px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .services { grid-template-columns: minmax(0, 1fr); } }

/* Website design: stappen als kaarten */
.stepgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.stepcard { padding: 1.5rem; border-radius: var(--r-xl); }
.stepcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.stepcard .step__n { font-size: .74rem; }
.stepcard h2 { margin-bottom: .45rem; font: 600 1.05rem/1.3 var(--f-body); letter-spacing: -.01em; }
.stepcard p { font-size: .92rem; color: var(--text-2); }
@media (max-width: 960px) { .stepgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stepgrid { grid-template-columns: minmax(0, 1fr); } }

.empty { padding: 2rem; border-radius: var(--r-xl); text-align: center; color: var(--text-2); }
.empty a { color: var(--text); text-decoration-color: var(--volt); }

/* ---------- Domeinen ---------- */

.dhero__search { max-width: 740px; margin: 2.2rem auto 0; text-align: left; animation: fade-up .9s var(--ease) .45s both; }
.dhero__hint { margin-top: 1rem; font: 400 .66rem var(--f-mono); color: var(--muted); text-align: center; }

.tld-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.tabs button {
    height: 38px; padding: 0 1rem;
    border: 0; border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: .86rem;
    color: var(--text-2);
    cursor: pointer;
    transition: background .25s, color .25s, box-shadow .25s;
}
.tabs button:hover { color: var(--text); background: var(--surface-2); }
.tabs button.is-active { background: var(--text); color: var(--ink); font-weight: 600; box-shadow: none; }
.tld-filter { position: relative; width: min(100%, 260px); }
.tld-filter input {
    width: 100%; height: 42px;
    padding: 0 1rem 0 2.5rem;
    border: 0; border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: .9rem;
    outline: 0;
    transition: box-shadow .25s;
}
.tld-filter input:focus { box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .55); }
.tld-filter .icon { position: absolute; left: .9rem; top: 50%; width: 16px; height: 16px; translate: 0 -50%; color: var(--muted); }

.tlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.tld {
    display: flex; flex-direction: column;
    min-height: 176px;
    padding: 1.25rem;
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: translate .45s var(--ease), opacity .35s;
    container-type: inline-size;
}
.tld:hover { translate: 0 -3px; }
.tld__ext { margin-bottom: auto; font: 500 clamp(1.6rem, 2.4vw, 2rem)/1 var(--f-display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.tld__ext--long { font-size: clamp(1.15rem, 1.9vw, 1.55rem); overflow-wrap: normal; }
.tld__badge { position: absolute; top: 1rem; right: 1rem; padding: .3rem .45rem; border-radius: 5px; background: rgba(216, 255, 69, .12); color: var(--volt); font: 500 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.tld__price { margin-top: 1.3rem; font: 500 1.15rem var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.tld__renew { margin-top: .25rem; font: 400 .62rem var(--f-mono); color: var(--muted); white-space: nowrap; }
/* Smalle kaarten (twee kolommen op een telefoon smaller dan 375px): van binnen 130px of minder past "€48,34 / jaar"
   niet meer op één regel. Dan wordt het bedrag eerst iets kleiner, zodat prijs en "/ jaar" ook op 360px naast elkaar
   blijven. Bij 121px of minder (telefoons smaller dan zo'n 355px) past ook dat niet: dan staat "/ jaar" in álle
   kaarten onder het bedrag, net als in de footer, en komt de verlenging er met wat meer lucht los onder. Beide grenzen
   zijn afgestemd op de breedste prijs van nu ("€48,34 / jaar"); een bedrag van €100 of meer vraagt om ruimere grenzen.
   In die smalste kaarten staat ook het bedrag van de verlenging op een eigen regel onder "Verlenging", in dezelfde
   lettergrootte: "Verlenging €102,79" (.ai incl. btw) paste op 320px niet op één regel. */
@container (max-width: 130px) { .tld__price { font-size: 1rem; } }
@container (max-width: 121px) {
    .tld__price .per { display: block; margin-top: .15rem; }
    .tld__renew { margin-top: .55rem; line-height: 1.5; }
    .tld__renew .money { display: block; }
}
.tld.is-hidden { display: none; }
.tld.is-entering { animation: res-in .45s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
.tlds-empty { display: none; padding: 2rem; text-align: center; color: var(--muted); }
.tlds-empty.is-visible { display: block; }
.tlds-empty a { color: var(--text); text-decoration-color: var(--volt); }
@media (max-width: 1000px) { .tlds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tld { min-height: 150px; padding: 1.05rem; } }
@media (max-width: 420px) {
    .tld { min-height: 0; }
    .tld__ext { font-size: 1.45rem; }
    .tld__ext--long { font-size: 1.05rem; }
    .tld__badge { position: static; align-self: flex-start; margin-bottom: .7rem; }
}
@media (max-width: 360px) { .tld__ext--long { font-size: .88rem; } } /* ".amsterdam" raakte op 320px de rand van de kaart */

/* ---------- Formulieren ---------- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: .45rem; }
.field > label:not(.check), .field__label { font-size: .86rem; font-weight: 500; color: var(--text-2); }
.field > label:not(.check) i, .field__label i { font-style: normal; font-weight: 400; color: var(--muted); }
.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field input[type="number"], .field select, .field textarea {
    width: 100%;
    min-height: 50px;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 1rem;
    color: var(--text);
    outline: 0;
    transition: box-shadow .25s var(--ease), background .25s;
    -webkit-appearance: none;
    appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input[type="number"] { color-scheme: dark; } /* pijltjes van het getalveld in de donkere stijl, niet wit */
.field select {
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bdca' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 18px;
}
.field select option { background: #0d121c; color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { background-color: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .6), 0 0 0 4px rgba(216, 255, 69, .07); }
.field.has-error input, .field.has-error select, .field.has-error textarea { box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .7); }
.field__error { font-size: .84rem; color: var(--bad); }

.check { display: flex; align-items: flex-start; gap: .75rem; font-size: .93rem; color: var(--text-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
    display: grid; place-items: center;
    width: 20px; height: 20px; flex: none;
    margin-top: .1rem;
    border-radius: 6px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transition: background .2s, box-shadow .2s;
}
.check__box .icon { width: 13px; height: 13px; color: var(--volt-ink); stroke-width: 2.2; opacity: 0; scale: .5; transition: opacity .2s, scale .3s var(--ease-spring); }
.check input:checked + .check__box { background: var(--volt); box-shadow: none; }
.check input:checked + .check__box .icon { opacity: 1; scale: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--volt); outline-offset: 3px; }
.check a { color: var(--text); text-decoration-color: var(--volt); }

.alert { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.3rem; padding: .95rem 1.1rem; border-radius: 12px; font-size: .94rem; }
.alert--error { background: rgba(255, 107, 125, .08); box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .35); }
.alert .icon { color: var(--bad); }
.alert__body { min-width: 0; }
.alert__body > * + * { margin-top: .45rem; }
.alert__body ul { margin-bottom: 0; padding-left: 1.1rem; }
.alert__body li + li { margin-top: .25rem; }
.alert__body a { color: var(--text); text-decoration-color: rgba(255, 107, 125, .6); }

.success { display: grid; justify-items: center; gap: 1rem; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; border-radius: var(--r-xl); text-align: center; }
.success__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--volt); color: var(--volt-ink); animation: pop .6s var(--ease-spring) both; }
.success__icon .icon { width: 30px; height: 30px; stroke-width: 2.2; }
.success h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.success p { max-width: 34rem; color: var(--text-2); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1rem; align-items: start; }
.contact__form { padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--r-xl); }
.contact__form h2 { margin-bottom: .4rem; font-size: 1.45rem; }
.contact__form > p { margin-bottom: 1.7rem; color: var(--text-2); }
.contact__side { display: grid; gap: 1rem; }
.ccard { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.35rem; border-radius: var(--r-lg); text-decoration: none; }
.ccard small { display: block; margin-bottom: .15rem; font: 400 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ccard b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ccard span { display: block; margin-top: .2rem; font-size: .88rem; color: var(--text-2); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.form-actions small { font-size: .84rem; color: var(--muted); }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* Mijn account (/account/). Zelfde raster als contact: de kaart links (data-account-slot) wordt het inlogformulier
   zodra het klantenportaal er is, de hulp staat ernaast. */
.account { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1rem; align-items: start; }
.account__card { display: grid; justify-items: start; gap: 1rem; overflow: hidden; padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--r-xl); }
.account__glow { position: absolute; z-index: -1; top: -45%; right: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(216, 255, 69, .09), rgba(94, 240, 210, .04) 55%, transparent); pointer-events: none; }
.account__mark { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: .4rem; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--volt); }
.account__mark .icon { width: 28px; height: 28px; }
/* Een rustige ring die uitdijt: hier gebeurt straks iets. Bij minder beweging blijft hij weg (de animatie loopt dan één keer, direct naar 0). */
.account__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(216, 255, 69, .5); opacity: 0; animation: account-ring 3.6s var(--ease) 1s infinite; }
@keyframes account-ring { 0% { opacity: .9; scale: 1; } 65%, 100% { opacity: 0; scale: 1.6; } }
.account__status { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .75rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 400 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.account__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px rgba(255, 207, 107, .5); }
.account__card h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.account__card > p { max-width: 36rem; color: var(--text-2); }
.account__help { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; width: 100%; margin-top: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.account__contact { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.account__help a:not(.btn) { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.account__help a:not(.btn):hover { color: var(--text); }
.account__help a:not(.btn) .icon { width: 17px; height: 17px; flex: none; color: var(--volt); }
.account__side { display: grid; gap: 1rem; }
.account__sidehead { margin: .3rem 0 -.2rem; font: 400 .64rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.account__side .ccard > .icon { flex: none; }
@media (max-width: 900px) { .account { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .account__help .btn { width: 100%; } }

/* ---------- Bestellen ---------- */

.order { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 1rem; align-items: start; }
.order__main { display: grid; gap: 1rem; min-width: 0; }
.order__block { min-width: 0; margin: 0; padding: clamp(1.3rem, 3vw, 2rem); border: 0; border-radius: var(--r-xl); }
.order__block h2 { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.3rem; font-size: 1.15rem; }
.order__block h2 span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--volt); font: 500 .68rem var(--f-mono); letter-spacing: 0; }
.order__block h2 span .icon { width: 14px; height: 14px; }
.order__tabs { margin-bottom: 1rem; }

.js .pick-group[data-hidden] { display: none; }
.pick-group__title { display: none; margin: 1rem 0 .5rem; font: 400 .64rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html:not(.js) .pick-group__title { display: block; }
html:not(.js) .order__tabs { display: none; }

.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .55rem; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick__card {
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 108px;
    padding: .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transition: background .2s, box-shadow .2s;
}
.pick__card b { font: 500 1.4rem/1 var(--f-display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.pick__card small { font: 400 .62rem/1.5 var(--f-mono); color: var(--muted); }
.pick label:hover .pick__card { background: var(--surface-2); }
.pick input:checked + .pick__card { background: rgba(216, 255, 69, .07); box-shadow: inset 0 0 0 1.5px var(--volt); }
.pick input:checked + .pick__card b { color: var(--volt); }
.pick input:focus-visible + .pick__card { outline: 2px solid var(--volt); outline-offset: 3px; }
.pick.pick--period { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pick--period .pick__card { min-height: 0; justify-content: center; gap: .3rem; padding: .9rem 1.05rem; }
.pick--period .pick__card b { font: 600 .98rem/1.25 var(--f-body); letter-spacing: -.01em; }
.pick--period .pick__card small { font-size: .64rem; }
.pick--period input:checked + .pick__card b { color: var(--text); }
@media (max-width: 420px) { .pick.pick--period { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }

.domain-inline { display: flex; gap: .5rem; }
.domain-inline input { flex: 1; }
.domain-inline .btn { --h: 50px; flex: none; }
.domain-status { min-height: 1.4em; margin-top: .6rem; font: 400 .72rem var(--f-mono); color: var(--muted); }
.domain-status.is-free { color: var(--volt); }
.domain-status.is-taken { color: var(--bad); }
.domain-status.is-unknown { color: var(--warn); }
@media (max-width: 480px) { .domain-inline { flex-direction: column; } .domain-inline .btn { width: 100%; } }

.seg { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-block; padding: .58rem .95rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: .88rem; color: var(--text-2); transition: background .2s, color .2s, box-shadow .2s; }
.seg input:checked + span { background: rgba(216, 255, 69, .1); box-shadow: inset 0 0 0 1px var(--volt); color: var(--text); }
.seg input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 2px; }
.hint { margin-top: .7rem; font-size: .84rem; color: var(--muted); }

.summary { position: sticky; top: 96px; padding: 1.5rem; border-radius: var(--r-xl); }
.summary h2 { margin-bottom: 1.2rem; font-size: 1.1rem; }
.summary__rows { display: grid; gap: .75rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--text-2); }
.summary__row b { font-weight: 500; color: var(--text); white-space: nowrap; }
.summary__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .4rem; }
.summary__total span { font: 400 .64rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.summary__total b { font: 500 1.8rem var(--f-display); letter-spacing: -.03em; } /* niet strakker: dan raken de cijfers elkaar ("77") */
/* "Eerste betaling" met "incl. btw" eronder: het bedrag staat op de onderste regel. */
.summary__total:has(> span small) { align-items: last baseline; }
.summary__total span small { display: block; margin-top: .4rem; font: 500 .8rem var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
/* Opbouw onder het totaal: de btw die erin zit en het bedrag zonder btw (voor zakelijke klanten). */
.summary__vat { display: grid; gap: .3rem; margin: .5rem 0 1.1rem; padding-top: .75rem; border-top: 1px dashed var(--line-2); font-size: .84rem; color: var(--muted); }
.summary__vat div { display: flex; justify-content: space-between; gap: 1rem; }
.summary__vat dd { margin: 0; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary__note { margin-bottom: 1.3rem; font: 400 .64rem/1.6 var(--f-mono); color: var(--muted); }
.summary .btn, .summary form .btn { width: 100%; }
.summary__trust { display: grid; gap: .5rem; margin-top: 1.2rem; font-size: .85rem; color: var(--text-2); }
.summary__trust span { display: flex; gap: .55rem; align-items: center; overflow-wrap: anywhere; }
.summary__trust .icon { width: 16px; height: 16px; color: var(--mint); }
@media (max-width: 980px) { .order { grid-template-columns: minmax(0, 1fr); } .summary { position: static; } }

/* Bestelstatus */
.status-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.4rem; }
.status-row > div { display: grid; gap: .35rem; justify-items: start; }
.status-row small { font: 400 .6rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lines { width: 100%; border-collapse: collapse; font-size: .94rem; }
.lines td { padding: .8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines td b { font-weight: 500; }
.lines td small { display: block; color: var(--muted); font-size: .82rem; }
.lines .num { text-align: right; white-space: nowrap; padding-left: 1rem; }
.lines__sub td { padding: .2rem 0; border-bottom: 0; color: var(--muted); font-size: .86rem; }
.lines__sub .num { color: var(--text-2); }
.lines__total td { padding-top: .9rem; border-top: 1px solid var(--line-2); border-bottom: 0; font: 500 1.15rem var(--f-display); letter-spacing: -.035em; }
.lines__total + .lines__sub td { padding-top: .55rem; }
.bank { margin-top: 1rem; font-size: .9rem; color: var(--text-2); }
.bank dl { display: grid; gap: .4rem; margin: .6rem 0 0; padding: .9rem 1rem; border-radius: 12px; background: var(--surface); }
.bank dl div { display: flex; justify-content: space-between; gap: 1rem; }
.bank dt { color: var(--muted); }
.bank dd { margin: 0; font: 500 .8rem var(--f-mono); color: var(--text); text-align: right; overflow-wrap: anywhere; }

/* Badges (gedeeld met het beheer) */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 99px; font: 500 .74rem/1.2 var(--f-body); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--volt { background: rgba(216, 255, 69, .12); color: var(--volt); }
.badge--ok { background: rgba(93, 242, 164, .12); color: var(--ok); }
.badge--warn { background: rgba(255, 207, 107, .12); color: var(--warn); }
.badge--sky { background: rgba(118, 182, 255, .13); color: var(--sky); }
.badge--muted { background: var(--surface-2); color: var(--muted); }

/* ---------- Documenten (voorwaarden) ---------- */

.doc { display: grid; gap: 1rem; }
.doc--toc { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); align-items: start; }
.doc__toc { position: sticky; top: 100px; display: grid; gap: 2px; max-height: calc(100vh - 130px); overflow: auto; padding: 1rem; border-radius: var(--r-lg); }
.doc__toc b { margin: 0 0 .5rem .5rem; font: 400 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc__toc a { padding: .4rem .5rem; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: .86rem; line-height: 1.35; transition: background .2s, color .2s; }
.doc__toc a:hover { background: var(--surface-2); color: var(--text); }
.doc__body { min-width: 0; padding: clamp(1.4rem, 4vw, 3rem); border-radius: var(--r-xl); line-height: 1.75; color: var(--text-2); }
.doc__body h2 { margin: 2.4rem 0 .9rem; font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--text); scroll-margin-top: 100px; }
.doc__body h2:first-child { margin-top: 0; }
.doc__body h3 { margin: 1.8rem 0 .6rem; font-size: 1.04rem; color: var(--text); }
.doc__body p { margin: 0 0 1rem; }
.doc__body strong { color: var(--text); font-weight: 600; }
.doc__body ul, .doc__body ol { margin: -.4rem 0 1rem; padding-left: 1.3rem; }
.doc__body li { margin-bottom: .35rem; }
.doc__body a { color: var(--text); text-decoration-color: var(--volt); }
.doc__body blockquote { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 2px solid var(--volt); border-radius: 0 10px 10px 0; background: var(--surface); }
.doc__updated { margin-top: 2rem !important; padding-top: 1rem; border-top: 1px solid var(--line); font: 400 .68rem var(--f-mono); color: var(--muted); }
@media (max-width: 900px) { .doc--toc { grid-template-columns: minmax(0, 1fr); } .doc__toc { position: static; max-height: none; } }

/* ---------- 404 ---------- */

.lost { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 60px) 0 60px; text-align: center; }
.lost__code { display: inline-flex; align-items: flex-end; font: 600 clamp(6rem, 22vw, 12rem)/.9 var(--f-display); letter-spacing: -.07em; color: var(--text); animation: fade-up .9s var(--ease) both; }
.lost__dot { width: .16em; height: .16em; margin: 0 0 .06em .06em; border-radius: .02em; background: var(--volt); animation: logo-hop .8s var(--ease) 1s both; }
.lost h1 { margin: 1.4rem 0 .8rem; font-size: clamp(1.5rem, 3.5vw, 2.3rem); }
.lost p { max-width: 30rem; margin: 0 auto 2rem; color: var(--text-2); }
.lost .dsearch-wrap { width: min(100%, 560px); margin: 0 auto; text-align: left; }
.lost .lost__back { margin: 2rem auto 0; }

/* ---------- Footer ---------- */

.footer {
    position: relative;
    margin-top: 2rem;
    padding: 4.5rem 0 calc(2rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, rgba(5, 7, 12, 0), rgba(5, 7, 12, .75));
}
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; }
.footer__intro p { max-width: 34ch; margin-top: 1.1rem; font-size: .94rem; color: var(--text-2); }
.footer__col h2 { margin-bottom: 1rem; font: 400 .64rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer__col a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .8rem; padding: .38rem 0; font-size: .93rem; color: var(--text-2); text-decoration: none; overflow-wrap: break-word; transition: color .25s; }
.footer__col a:hover { color: var(--text); }
.footer__col a > span { margin-left: auto; font: 400 .68rem var(--f-mono); color: var(--muted); white-space: nowrap; }
/* "v.a. €12,99 / mnd" naast de naam. Is de kolom daar te smal voor (279px: "Dedicated servers v.a. €151,24 / mnd" met
   wat marge), dan staat de prijs in álle regels onder de naam, en niet in de ene regel ernaast en in de andere eronder.
   Alleen deze kolom is een container: de andere houden hun minimale breedte, zodat het e-mailadres niet uit zijn kolom loopt. */
.footer__col--prices { container-type: inline-size; }
@container (max-width: 279px) { .footer__col a > span { flex-basis: 100%; margin-left: 0; } }

.footer__mega { margin: 4rem 0 1.4rem; }
.footer__mega svg { width: 100%; height: auto; overflow: visible; }
.footer__mega-base { fill: rgba(255, 255, 255, .045); }
.footer__mega-letters { fill: url(#megaGrad); }

.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font: 400 .64rem var(--f-mono); color: var(--muted); }
.footer__top { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: var(--text-2); text-decoration: none; }
.footer__top .icon { width: 14px; height: 14px; rotate: -90deg; transition: translate .3s var(--ease); }
.footer__top:hover .icon { translate: 0 -3px; }

@media (max-width: 900px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__intro { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .footer { padding-top: 3.2rem; }
    .footer__grid { gap: 2rem 1.2rem; }
    .footer__col:nth-child(2) { grid-column: 1 / -1; }
    .footer__col a { font-size: .9rem; }
    .footer__top { margin-left: 0; }
}

/* ---------- Melding (toast) na toevoegen aan de winkelwagen ---------- */

.toast {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 200;
    display: flex; align-items: center; gap: .75rem;
    max-width: min(440px, calc(100vw - 32px));
    padding: .8rem .9rem .8rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #171d2a, #0f131c);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -18px rgba(0, 0, 0, .85);
    font-size: .9rem;
    opacity: 0;
    translate: 0 14px;
    pointer-events: none;
    transition: opacity .3s var(--ease), translate .45s var(--ease);
}
.toast.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.toast__icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--volt); color: var(--volt-ink); }
.toast__icon .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.toast a { margin-left: auto; padding-left: .4rem; color: var(--text); font-weight: 600; white-space: nowrap; text-decoration-color: var(--volt); text-underline-offset: 3px; }
.toast--error { box-shadow: inset 0 0 0 1px rgba(255, 107, 125, .45), 0 24px 50px -18px rgba(0, 0, 0, .85); }
@media (max-width: 520px) { .toast { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: none; } }

.dalt.is-added { background: rgba(216, 255, 69, .06); box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .4); }
.dalt.is-added .dalt__add { background: var(--volt); color: var(--volt-ink); }

/* ---------- Onthullen bij scrollen ---------- */

.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--ease), transform .9s var(--ease), translate .5s var(--ease);
    transition-delay: calc(var(--d, 0) * 80ms), calc(var(--d, 0) * 80ms), 0s;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */

@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes res-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pop { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes num-flip { 0% { opacity: 1; transform: none; } 40% { opacity: 0; transform: translateY(-30%); } 41% { transform: translateY(30%); } 100% { opacity: 1; transform: none; } }
@keyframes logo-hop { 0% { transform: none; } 35% { transform: translateY(-45%); } 65% { transform: translateY(0) scale(1.08, .9); } 100% { transform: none; } }
@keyframes drift-a { to { transform: translate(10vw, 9vh) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-12vw, 12vh) scale(.94); } }
@keyframes drift-c { to { transform: translate(-16vw, -10vh) scale(1.12); } }
@keyframes stack-in { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
@keyframes stack-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes packet {
    0% { transform: translateZ(0); opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { transform: translateZ(calc(var(--gap) * 4 + 12px)); opacity: 0; }
}
@keyframes beam-pulse {
    0% { transform: translateY(-34px); opacity: 0; }
    15%, 80% { opacity: 1; }
    100% { transform: translateY(calc(var(--bh) - 38px)); opacity: 0; }
}
@keyframes scan {
    0% { transform: translateZ(-6px); opacity: 0; }
    8% { opacity: .85; }
    46% { transform: translateZ(calc(var(--gap) * 4 + 6px)); opacity: .85; }
    54%, 100% { transform: translateZ(calc(var(--gap) * 4 + 6px)); opacity: 0; }
}
@keyframes droll-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes droll-comet { 0% { opacity: 0; transform: translateX(-100%); } 12%, 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(265%); } }
@keyframes floor-flow { to { transform: translate(32px, 32px); } }
@keyframes meter { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@keyframes m-blink { 50% { opacity: .35; } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-scroll { to { transform: translateX(-120px); } }
@keyframes m-dash { to { stroke-dashoffset: -80; } }
@keyframes m-ssl-scan { 0%, 8% { stroke-dashoffset: 148; opacity: 1; } 40%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes m-ssl-bg { 0%, 40% { fill: rgba(255, 255, 255, .08); } 46%, 92% { fill: #d8ff45; } 100% { fill: rgba(255, 255, 255, .08); } }
@keyframes m-ssl-shackle { 0%, 40% { transform: translateY(-3px); stroke: #7a8496; } 46%, 92% { transform: none; stroke: #0d1400; } 100% { transform: translateY(-3px); stroke: #7a8496; } }
@keyframes m-ssl-body { 0%, 40% { fill: #7a8496; } 46%, 92% { fill: #0d1400; } 100% { fill: #7a8496; } }
@keyframes m-ddos-in { 0% { transform: translateX(0); opacity: 0; } 10%, 78% { opacity: 1; } 80% { transform: translateX(72px); } 88%, 100% { transform: translateX(78px); opacity: 0; } }
@keyframes m-ddos-out { 0% { transform: translateX(0); opacity: 0; } 10%, 80% { opacity: 1; } 100% { transform: translateX(76px); opacity: 0; } }
@keyframes m-tick { 0% { opacity: 1; stroke: #d8ff45; } 28%, 100% { opacity: .4; stroke: #b4bdca; } }
@keyframes m-menu { 0%, 22% { transform: none; } 25%, 47% { transform: translateY(18px); } 50%, 72% { transform: translateY(36px); } 75%, 97% { transform: translateY(54px); } 100% { transform: none; } }
@keyframes m-bar { 0%, 100% { transform: scaleX(var(--w)); } 50% { transform: scaleX(calc(var(--w) + .16)); } }
@keyframes m-switch { 0%, 30% { fill: rgba(255, 255, 255, .14); } 36%, 90% { fill: #d8ff45; } 96%, 100% { fill: rgba(255, 255, 255, .14); } }
@keyframes m-knob { 0%, 30% { transform: translateX(-11px); fill: #b4bdca; } 36%, 90% { transform: none; fill: #0d1400; } 96%, 100% { transform: translateX(-11px); fill: #b4bdca; } }

/* Paginaovergangen (Chrome/Edge) */
::view-transition-old(root) { animation: .22s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .4s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

/* Zonder backdrop-filter: iets dichter glas zodat tekst leesbaar blijft. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: linear-gradient(180deg, rgba(24, 30, 44, .94), rgba(14, 18, 28, .92)); }
}