/* ==========================================================================
   Homepage: kaarten die uit de zijkant van de serverstapel komen (hero)
   en de inricht-animatie "Van bestelling tot online".
   Ruststand = eindstand; lussen lopen alleen in beeld (.is-playing).
   ========================================================================== */

/* ---------- Hero: aansluitpunten op de servers ----------
   Onzichtbare puntjes op de hoeken van elke laag. home.js leest waar ze op het scherm staan
   en tekent daar de lijnen vanaf, zodat alles vast blijft zitten als de stapel kantelt of uitschuift. */

.hx-tip { position: absolute; width: 2px; height: 2px; margin: -1px; pointer-events: none; }
.hx-tip--l { left: 6.5px; top: 6.5px; }
.hx-tip--r { left: calc(100% - 6.5px); top: calc(100% - 6.5px); }
.hx-tip--t { left: calc(100% - 6.5px); top: 6.5px; }
.hx-tip--b { left: 6.5px; top: calc(100% - 6.5px); }
@media (max-width: 520px) {
    .hx-tip--l { left: 4.7px; top: 4.7px; }
    .hx-tip--r { left: calc(100% - 4.7px); top: calc(100% - 4.7px); }
    .hx-tip--t { left: calc(100% - 4.7px); top: 4.7px; }
    .hx-tip--b { left: 4.7px; top: calc(100% - 4.7px); }
}

.hx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
html:not(.js) .hx { display: none; }
/* Tot home.js de kaarten op hun plek heeft gezet: niets tonen (anders flitsen ze linksboven). */
.hx:not(.is-armed):not(.is-on) { visibility: hidden; }
.hx__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* Lijnen: een dunne geleider, met een lichtpuls die van de server naar de kaart loopt. */
.hx-link__base { fill: none; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hx-link__glow, .hx-link__pulse { fill: none; stroke-linecap: round; opacity: 0; }
.hx-link__glow { stroke: rgba(216, 255, 69, .22); stroke-width: 5; stroke-dasharray: .16 1.3; stroke-dashoffset: .16; }
.hx-link__pulse { stroke: var(--volt); stroke-width: 1.5; stroke-dasharray: .1 1.3; stroke-dashoffset: .1; }
.hx-link__port { fill: var(--mint); }
.hx-link__ring { fill: none; stroke: rgba(94, 240, 210, .55); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hx-link__end { fill: #0b1019; stroke: rgba(255, 255, 255, .35); stroke-width: 1; }

/* Kaartjes. home.js zet de positie (transform) op .hx-card; de binnenkant doet de entree. */
.hx-card { --s: 1; position: absolute; left: 0; top: 0; will-change: transform; }
.hx-card[data-side="l"] { --s: -1; }
.hx-card__in {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(24, 30, 43, .9), rgba(12, 16, 25, .86));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .1),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 20px 40px -20px rgba(0, 0, 0, .85);
    white-space: nowrap;
}
.hx-card__icon {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: var(--volt);
}
.hx-card__icon .icon { width: 15px; height: 15px; }
.hx-card__txt { display: grid; gap: 3px; min-width: 0; }
.hx-card__label { font: 400 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hx-card__value { font: 500 .82rem/1.1 var(--f-body); color: var(--text); }
.hx-card__value--num { font: 500 .8rem/1.1 var(--f-display); letter-spacing: -.02em; }
.hx-card__fx { display: block; flex: none; margin-left: 4px; overflow: visible; }

/* Microbeweging per kaart (ruststand = klaar). Alle lussen delen de cyclus van de puls (--cy),
   zodat er iets gebeurt op het moment dat het licht de kaart bereikt. */
.hx-card, .hx-link { --cy: 4.8s; --dl: calc(var(--k) * 1.2s + 1.6s); }

.hx-fx-ring { fill: none; stroke: rgba(216, 255, 69, .28); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.hx-fx-check { fill: none; stroke: var(--volt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hx-fx-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 2; }
.hx-fx-prog { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 10px 10px; }
/* Uptime: een rij statusbalkjes zoals op een statuspagina; allemaal "up", de laatste is nu. */
.hx-fx-bar { fill: var(--volt); opacity: .38; transform-box: fill-box; transform-origin: 50% 100%; }
.hx-fx-bar--now { opacity: 1; }
.hx-fx-done { fill: none; stroke: var(--mint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.hx-fx-beat { fill: none; stroke: rgba(94, 240, 210, .28); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hx-fx-beat--hi { stroke: var(--mint); stroke-dasharray: .28 1.2; stroke-dashoffset: .28; opacity: 0; }
.hx-fx-live { fill: var(--mint); }
.hx-fx-ping { fill: none; stroke: var(--mint); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Entree: de lijn tekent zich uit de server, daarna schuift de kaart uit de stapel naar buiten. */
.hx.is-armed:not(.is-on) .hx-link__base { stroke-dashoffset: 1; }
.hx.is-armed:not(.is-on) .hx-link__port,
.hx.is-armed:not(.is-on) .hx-link__end { opacity: 0; }
.hx.is-armed:not(.is-on) .hx-card__in { opacity: 0; transform: translateX(calc(var(--s) * -18px)) scale(.92); filter: blur(6px); }
.hx.is-on .hx-link__base { transition: stroke-dashoffset .8s var(--ease-io) calc(var(--k) * .16s); }
.hx.is-on .hx-link__port { transition: opacity .3s var(--ease) calc(var(--k) * .16s); }
.hx.is-on .hx-link__end { transition: opacity .3s var(--ease) calc(var(--k) * .16s + .7s); }
.hx.is-on .hx-card__in {
    transition: opacity .55s var(--ease), transform .9s var(--ease), filter .6s var(--ease);
    transition-delay: calc(var(--k) * .16s + .55s);
}

.is-playing .hx.is-on .hx-link__pulse { animation: hx-pulse var(--cy) var(--ease-io) var(--dl) infinite; }
.is-playing .hx.is-on .hx-link__glow { animation: hx-glow var(--cy) var(--ease-io) var(--dl) infinite; }
.is-playing .hx.is-on .hx-link__ring { animation: hx-ping var(--cy) var(--ease) var(--dl) infinite; }
.is-playing .hx.is-on .hx-link__end { animation: hx-arrive var(--cy) var(--ease) var(--dl) infinite; }
.is-playing .hx.is-on .hx-fx-ring { animation: hx-ring var(--cy) var(--ease) var(--dl) infinite; }
.is-playing .hx.is-on .hx-fx-prog { animation: hx-prog var(--cy) var(--ease-io) var(--dl) infinite; }
.is-playing .hx.is-on .hx-fx-bar { animation: hx-bar var(--cy) var(--ease) calc(var(--dl) + var(--b) * 24ms) infinite; }
.is-playing .hx.is-on .hx-fx-bar--now { animation-name: hx-bar-now; }
.is-playing .hx.is-on .hx-fx-done { animation: hx-done var(--cy) var(--ease) var(--dl) infinite; }
.is-playing .hx.is-on .hx-fx-beat--hi { animation: hx-beat 2.4s linear var(--dl) infinite; }
.is-playing .hx.is-on .hx-fx-ping { animation: hx-live 2.4s var(--ease) var(--dl) infinite; }

@keyframes hx-pulse {
    0% { stroke-dashoffset: .1; opacity: 1; }
    40% { stroke-dashoffset: -1; opacity: 1; }
    40.5%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes hx-glow {
    0% { stroke-dashoffset: .16; opacity: 1; }
    40% { stroke-dashoffset: -1; opacity: 1; }
    40.5%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes hx-ping { 0% { opacity: .9; transform: scale(.4); } 26%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes hx-arrive {
    0%, 36% { fill: #0b1019; stroke: rgba(255, 255, 255, .35); }
    41% { fill: #d8ff45; stroke: #d8ff45; }
    70%, 100% { fill: #0b1019; stroke: rgba(255, 255, 255, .35); }
}
@keyframes hx-ring { 0%, 38% { stroke: rgba(216, 255, 69, .28); transform: none; } 42% { stroke: #d8ff45; transform: scale(1.12); } 70%, 100% { stroke: rgba(216, 255, 69, .28); transform: none; } }
@keyframes hx-prog { 0% { stroke-dashoffset: 1; opacity: 1; } 40%, 80% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes hx-bar { 0%, 39% { opacity: .38; } 43% { opacity: 1; } 60%, 100% { opacity: .38; } }
@keyframes hx-bar-now { 0%, 39% { opacity: 1; transform: none; } 44% { opacity: 1; transform: scaleY(1.35); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes hx-done { 0%, 38% { opacity: 0; transform: scale(.5); } 46%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes hx-beat { 0% { stroke-dashoffset: .28; opacity: 1; } 70% { stroke-dashoffset: -1; opacity: 1; } 71%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes hx-live { 0% { opacity: .8; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(2.6); } }

/* Indeling per kaart. --origin: laag waar de lijn uitkomt (0 = onderste), --dir: -1 omhoog, 1 omlaag,
   --run: hoe ver de lijn eerst zijwaarts gaat, --at: waar de lijn de kaart raakt (0 = binnenkant). */
.hx-card { --run: 34; --at: .42; --clear: 18; }
.hx-card--ssl { --origin: 3; --dir: -1; }
.hx-card--backup { --origin: 1; --dir: 1; }
.hx-card--uptime { --origin: 4; --dir: -1; }
.hx-card--monitor { --origin: 0; --dir: 1; }

.hx-short { display: none; }

/* Naast de tekstkolom: kaarten links blijven (bijna) binnen de kolom van de illustratie. */
@media (min-width: 981px) {
    .hx-card[data-side="l"] { --minl: 0; }
}

/* Smalle desktop: de stapel vult de kolom bijna; de kaarten komen dichter op de stapel. */
@media (min-width: 981px) and (max-width: 1279px) {
    .hx-card { --run: 24; --at: .3; }
    .hx-card__fx { display: none; }
}

/* Kleine tablet en telefoon: compacte kaarten zonder grafiekje. */
@media (max-width: 700px) {
    .hx-card { --run: 20; --at: .3; --clear: 14; }
    .hx-card__in { gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; }
    .hx-card__icon { width: 26px; height: 26px; border-radius: 8px; }
    .hx-card__icon .icon { width: 13px; height: 13px; }
    .hx-card__label { font-size: .56rem; letter-spacing: .06em; }
    .hx-card__value { font-size: .76rem; }
    .hx-card__fx { display: none; }
}

/* Telefoon: twee kaarten onder de stapel, links en rechts; daarboven blijft het rustig.
   Back-ups komt uit de laag "Back-ups", uptime uit de laag "24/7 monitoring" (die de uptime meet). */
@media (max-width: 560px) {
    .hx-card--ssl, .hx-card--monitor { display: none; }
    .hx-card--backup { --origin: 1; --dir: 1; }
    .hx-card--uptime { --origin: 0; --dir: 1; }
    .hx-card { --run: 18; --clear: 12; }
    .hx-long { display: none; }
    .hx-short { display: inline; }
}

/* ---------- Van bestelling tot online ---------- */

.split--deploy { align-items: center; }

/* Links: de actieve stap krijgt een lijn die vol loopt, gelijk met de animatie rechts. */
.dsteps .step::after {
    content: "";
    position: absolute; left: 0; right: 0; top: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--volt), rgba(216, 255, 69, .35));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease);
}
.dsteps .step.is-past::after { transform: none; }
.dsteps .step.is-current::after { transform: none; animation: dp-fill var(--dur, 1s) linear both; }
.dsteps.is-paused .step.is-current::after { animation-play-state: paused; }
@keyframes dp-fill { from { transform: scaleX(0); } to { transform: none; } }
.dsteps .step h3 { transition: color .4s; }
.dsteps.is-running .step:not(.is-current) h3 { color: var(--text-2); }
/* Tijdens de animatie draagt alleen de voortgangslijn limoen; de vaste streepjes uit style.css wijken. */
.dsteps .step::before { transition: transform .9s var(--ease) calc(.25s + var(--d, 0) * 80ms), opacity .4s var(--ease); }
.dsteps.is-live .step::before { opacity: 0; }

.deploy {
    --dp-pad: clamp(1.1rem, 2.6vw, 1.75rem);
    padding: var(--dp-pad) var(--dp-pad) 0;
    border-radius: var(--r-xl);
    overflow: hidden;
}
.deploy__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; }
.deploy__id { display: grid; gap: .35rem; min-width: 0; }
.deploy__kicker { font: 400 .62rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.deploy__name { font: 500 1.05rem/1.2 var(--f-display); letter-spacing: -.03em; }

/* Het label is in beide standen even breed (de langste tekst, 15 tekens mono), zodat de kop
   nooit verspringt: niet in breedte op desktop en niet in hoogte als hij op telefoons afbreekt. */
.deploy__badge {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    height: 28px; padding: 0 .75rem;
    min-width: calc(15ch + 15 * .08em + 9px + .55rem + 1.5rem + 2px);
    border-radius: 999px;
    background: rgba(93, 242, 164, .1);
    color: var(--ok);
    font: 500 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
    transition: background .5s var(--ease), color .5s var(--ease), opacity .4s var(--ease);
}
/* Terug naar het begin: label en adres vervagen tegelijk met de stappen, en komen met de nieuwe stand terug. */
.deploy.is-resetting .deploy__badge,
.deploy.is-resetting .browser__addr,
.deploy.is-resetting .browser__lock { opacity: 0; }
.deploy__badge-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.deploy__badge-dot::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; box-shadow: 0 0 0 1px currentColor; opacity: 0;
}
.deploy__badge-text { display: inline-block; }
.deploy__badge-text.is-swap { animation: dp-swap .5s var(--ease); }
.deploy:not(.s-online) .deploy__badge { background: rgba(255, 207, 107, .1); color: var(--warn); }
.deploy:not(.s-online) .deploy__badge-dot { width: 9px; height: 9px; background: transparent; border: 1.5px solid currentColor; border-right-color: transparent; }
.deploy.is-playing:not(.s-online) .deploy__badge-dot { animation: m-spin .9s linear infinite; }
.deploy.is-playing.s-online .deploy__badge-dot::after { animation: dp-ping 2.2s var(--ease) infinite; }

/* Pijplijn met zes stappen */
.dpipe {
    --p: 1;
    position: relative;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 1.5rem 0 1.4rem; padding: 0;
    list-style: none;
}
.dpipe::before, .dpipe::after {
    content: "";
    position: absolute; top: 15px; left: calc(100% / 12); right: calc(100% / 12);
    height: 1px;
    background: rgba(255, 255, 255, .1);
}
.dpipe::after {
    background: linear-gradient(90deg, rgba(216, 255, 69, .5), var(--volt));
    transform: scaleX(var(--p)); transform-origin: left;
    transition: transform .8s var(--ease);
}
.dnode { position: relative; z-index: 1; display: grid; justify-items: center; gap: .6rem; min-width: 0; }
.dnode__dot {
    position: relative;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #0c111b;
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--muted);
    transition: background .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
}
.dnode__dot > * { grid-area: 1 / 1; }
.dnode__icon .icon, .dnode__check .icon { display: block; width: 14px; height: 14px; }
.dnode__icon { transition: opacity .3s, transform .45s var(--ease); }
.dnode__check { color: var(--volt-ink); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .5s var(--ease-spring); }
.dnode__check .icon { stroke-width: 2.4; }
.dnode__spin { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; transition: opacity .3s; }
.dnode__spin circle { fill: none; stroke: var(--volt); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .22 1; }
.dnode__label {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 400 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted);
    transition: color .4s;
}
.dnode.is-active .dnode__dot { box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .55); color: var(--volt); }
.dnode.is-active .dnode__spin { opacity: 1; }
.deploy.is-playing .dnode.is-active .dnode__spin { animation: m-spin 1.1s linear infinite; }
.dnode.is-active .dnode__label { color: var(--text); }
.dnode.is-done .dnode__dot { background: var(--volt); box-shadow: 0 0 0 4px rgba(216, 255, 69, .08); }
.dnode.is-done .dnode__icon { opacity: 0; transform: scale(.4); }
.dnode.is-done .dnode__check { opacity: 1; transform: none; }
.dnode.is-done .dnode__label { color: var(--text-2); }

/* Browservenster dat aan de onderkant van de kaart wegvalt */
.browser {
    position: relative;
    margin: 0 calc(var(--dp-pad) * -.35);
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #0d121c, #0a0e16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 -18px 50px -30px rgba(94, 240, 210, .25);
    -webkit-mask-image: linear-gradient(#000 84%, transparent);
    mask-image: linear-gradient(#000 84%, transparent);
    transition: box-shadow .8s var(--ease);
}
.deploy.is-launch .browser { box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .35), 0 -18px 60px -26px rgba(216, 255, 69, .35); }
.browser__bar {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center;
    height: 42px; padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.browser__url {
    position: relative;
    justify-self: center;
    display: flex; align-items: center; gap: .45rem;
    width: min(100%, 300px); height: 26px; padding: 0 .7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    font: 400 .74rem/1 var(--f-body);
    color: var(--text);
    transition: box-shadow .6s var(--ease);
}
.browser__lock { display: grid; place-items: center; width: 14px; height: 14px; flex: none; color: var(--muted); transition: color .4s var(--ease), transform .5s var(--ease-spring), opacity .4s var(--ease); }
.browser__lock .icon { width: 13px; height: 13px; overflow: visible; }
/* Open slot: de beugel staat omhoog en klikt dicht zodra het certificaat er is. */
.browser__shackle { transform: translateY(-3px); transition: transform .5s var(--ease-spring); }
.browser__addr { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .4s var(--ease); }
/* Adres: eerst http://, bij het certificaat komt de "s" erbij. Het voorvoegsel zelf komt in één keer op volle breedte
   (alleen een fade) en de slashes staan er altijd: geen tussenbeeld als "http:jouwbedrijf.nl" tijdens een overgang. */
.browser__scheme { display: flex; flex: none; color: var(--muted); max-width: 0; overflow: hidden; opacity: 0; transition: opacity .4s var(--ease), color .6s var(--ease); }
/* De "s" fadet in terwijl hij ruimte maakt, zonder vertraging: anders staat er even een leeg gat ("http ://"). */
.browser__s { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s var(--ease), opacity .3s var(--ease); }
.browser__caret { width: 1px; height: 13px; margin-left: 1px; background: var(--volt); opacity: 0; }
.deploy.is-typing .browser__caret, .deploy.is-waiting .browser__caret { opacity: 1; }
.deploy.is-playing.is-waiting .browser__caret { animation: blink 1s steps(1) infinite; }
/* Bij bestelling en account is er nog geen adres, dus ook geen (open) slotje. */
.deploy:is([data-at=""], [data-at="order"], [data-at="panel"]) .browser__lock { opacity: 0; }
/* Zodra de cursor knippert staat http:// klaar; de naam wordt erachter ingetypt. */
.deploy:is(.is-waiting, .is-typing, .s-ssl, [data-at="dns"], [data-at="ssl"]) .browser__scheme { max-width: none; opacity: 1; }
.deploy.s-ssl .browser__lock { color: var(--volt); transform: scale(1.08); }
.deploy.s-ssl .browser__shackle { transform: none; }
/* Tegelijk met het dichtklikken van het slot maakt het adres ruimte en komt de "s" erin. */
.deploy.s-ssl .browser__s { max-width: .6em; opacity: 1; }
.deploy.s-ssl .browser__url { box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .18); }
/* Net na het dichtklikken licht https:// even op in limoen. */
.deploy[data-at="ssl"].s-ssl .browser__scheme { color: var(--volt); }

/* Zoals in een echte browser: onder het slotje verschijnt kort wat er beveiligd is. */
.browser__pop {
    position: absolute; left: 0; top: calc(100% + 9px);
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px 8px 8px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(30, 37, 52, .97), rgba(18, 23, 34, .97));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 30px -12px rgba(0, 0, 0, .8);
    white-space: nowrap;
    opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: 14px 0;
    transition: opacity .35s var(--ease), transform .5s var(--ease);
    pointer-events: none;
}
.browser__pop::before {
    content: ""; position: absolute; left: 10px; top: -4px;
    width: 8px; height: 8px;
    background: rgb(30, 37, 52);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1);
    transform: rotate(45deg);
}
.browser__pop-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(216, 255, 69, .12); color: var(--volt); }
.browser__pop-icon .icon { width: 13px; height: 13px; }
.browser__pop b { display: block; font: 500 .72rem/1.2 var(--f-body); }
.browser__pop small { display: block; margin-top: 2px; font: 400 .54rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.deploy[data-at="ssl"] .browser__pop.is-on { opacity: 1; transform: none; }

/* Herladen en een laadbalk onder de adresbalk, op het moment dat de site live gaat. */
.browser__reload { justify-self: end; display: grid; place-items: center; width: 14px; height: 14px; color: var(--muted); opacity: .75; }
.browser__reload .icon { width: 13px; height: 13px; }
.browser__reload.is-on .icon { animation: m-spin .8s var(--ease) both; }
.browser__load {
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(216, 255, 69, 0), var(--volt));
    transform: scaleX(0); transform-origin: left;
    opacity: 0;
}
.browser__load.is-on { animation: dp-load .95s var(--ease-io) both; }

.browser__page { position: relative; height: clamp(272px, 25vw, 322px); overflow: hidden; }
/* Stippenraster achter de tussenstappen; weg zodra de site er staat. */
.browser__page::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px);
    background-size: 18px 18px;
    background-position: 9px 9px;
    transition: opacity .5s var(--ease);
}
.deploy[data-at="site"] .browser__page::before { opacity: 0; }

/* ---------- Beelden per stap ----------
   Eén beeld tegelijk (.is-current). Het vorige schuift naar links weg (.is-past), het volgende komt van rechts.
   Onderdelen met data-beat zet home.js een voor een aan (.is-on); zonder .is-on staan ze in de beginstand. */
.dsc {
    position: absolute; inset: 0;
    padding: 18px 20px;
    opacity: 0; visibility: hidden;
    transform: translateX(24px);
    transition: opacity .4s var(--ease), transform .7s var(--ease), visibility 0s linear .7s;
}
.dsc.is-past { transform: translateX(-24px); }
.dsc.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .15s, transform .8s var(--ease) .15s, visibility 0s; }
.dsc--card { display: flex; align-items: flex-start; justify-content: center; padding-top: 26px; }
.dsc--app { padding: 14px 16px 0; }

/* Kaart met kop: icoon, titel en een statuslabel */
.dcard {
    width: min(100%, 400px);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(19, 25, 37, .96), rgba(12, 16, 25, .96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 44px -26px rgba(0, 0, 0, .9);
}
.dcard__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .065); }
.dcard__icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: rgba(94, 240, 210, .1); color: var(--mint); }
.dcard__icon .icon { width: 14px; height: 14px; }
.dcard__title { display: grid; gap: 5px; min-width: 0; margin-right: auto; }
.dcard__title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dcard__title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .8rem/1.15 var(--f-body); color: var(--text); }

/* Statuslabel: beide teksten op dezelfde plek, zodat de breedte niet verspringt. */
.dchip { display: grid; flex: none; font: 500 .54rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.dchip > span {
    grid-area: 1 / 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 22px; padding: 0 9px;
    border-radius: 999px;
    white-space: nowrap;
    transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.dchip__busy { background: rgba(255, 207, 107, .1); color: var(--warn); }
.dchip__spin { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; }
.deploy.is-playing .dchip:not(.is-on) .dchip__spin { animation: m-spin .9s linear infinite; }
.dchip__done { background: rgba(216, 255, 69, .1); color: var(--volt); opacity: 0; transform: translateY(5px); }
.dchip__done .icon { width: 10px; height: 10px; flex: none; stroke-width: 2.6; }
/* Eerst gaat het oude label snel weg, dan komt het nieuwe: nooit twee teksten over elkaar. */
.dchip.is-on .dchip__busy { opacity: 0; transform: translateY(-5px); transition-duration: .18s; }
.dchip.is-on .dchip__done { opacity: 1; transform: none; transition-delay: .16s; }

/* 1. Besteld */
.dorder__list { margin: 0; padding: 4px 14px; }
.dorder__row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 34px;
    font: 400 .76rem/1.2 var(--f-body);
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.dorder__row + .dorder__row { border-top: 1px solid rgba(255, 255, 255, .065); }
.dorder__row dt { color: var(--muted); }
.dorder__row dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.dorder__mail {
    display: flex; align-items: center; gap: 9px;
    margin: 0 10px 10px; padding: 6px 10px 6px 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    font: 400 .72rem/1.2 var(--f-body); color: var(--text-2);
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.dorder__row.is-on, .dorder__mail.is-on { opacity: 1; transform: none; }
.dorder__env { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: rgba(94, 240, 210, .12); color: var(--mint); overflow: hidden; }
.dorder__env .icon { width: 13px; height: 13px; }
/* De envelop vliegt weg (verstuurd) en er schuift een nieuwe in. */
.dorder__mail.is-on .dorder__env .icon { animation: dp-send .8s var(--ease) .15s both; }
.dorder__tick { display: grid; place-items: center; width: 16px; height: 16px; flex: none; margin-left: auto; border-radius: 50%; background: var(--volt); color: var(--volt-ink); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .5s var(--ease-spring); }
.dorder__tick .icon { width: 10px; height: 10px; stroke-width: 2.8; }
.dorder__mail.is-on .dorder__tick { opacity: 1; transform: none; transition-delay: .5s; }

/* 2. Account: een beheeromgeving met zijbalk */
.dapp {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    height: 100%;
    border-radius: 12px 12px 0 0;
    background: #0f141e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    overflow: hidden;
}
.dapp__side { display: grid; align-content: start; justify-items: center; gap: 4px; padding: 10px 0; background: rgba(255, 255, 255, .02); border-right: 1px solid rgba(255, 255, 255, .06); }
.dapp__side > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); }
.dapp__side > i.is-sel { background: rgba(216, 255, 69, .1); color: var(--volt); }
.dapp__side .icon { width: 14px; height: 14px; }
.dapp__main { min-width: 0; }

/* Ruimte uit het pakket: de balk loopt vol (inrichten) en wordt daarna een stippellijn naar de waarde.
   Zo leest de eindstand als "toegewezen" en niet als "vol". Eén raster voor alle rijen (subgrid), zodat
   de balken even lang blijven; label en waarde zijn zo breed als nodig, en lange waarden krijgen een beletselteken. */
.dres { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr) fit-content(40%); column-gap: 12px; margin: 0; padding: 5px 14px; list-style: none; }
.dres__row {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: 7.8em minmax(0, 1fr) 4.2em;
    grid-template-columns: subgrid;
    align-items: center; gap: 12px;
    height: 32px;
    font: 400 .74rem/1 var(--f-body); color: var(--text-2);
}
.dres__row + .dres__row { border-top: 1px solid rgba(255, 255, 255, .05); }
.dres__k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dres__bar { position: relative; height: 4px; border-radius: 4px; background-color: rgba(255, 255, 255, .07); overflow: hidden; transition: background-color .4s var(--ease) .85s; }
.dres__bar::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, .24) .9px, transparent 1.3px) 0 50% / 6px 4px repeat-x;
    opacity: 0;
    transition: opacity .4s var(--ease) .85s;
}
.dres__bar i { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--volt)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-io); }
.dres__v { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.dres__row.is-on .dres__bar { background-color: transparent; }
.dres__row.is-on .dres__bar::before { opacity: 1; }
.dres__row.is-on .dres__bar i { transform: none; opacity: 0; transition: transform .8s var(--ease-io), opacity .45s var(--ease) .85s; }
.dres__row.is-on .dres__v { opacity: 1; transform: none; transition-delay: .55s; }

.dtog { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 11px 14px 12px; border-top: 1px solid rgba(255, 255, 255, .065); list-style: none; }
.dtog li { display: flex; align-items: center; gap: 8px; font: 400 .72rem/1.2 var(--f-body); color: var(--muted); transition: color .35s var(--ease); }
.dtog__sw { position: relative; width: 24px; height: 14px; flex: none; border-radius: 999px; background-color: rgba(255, 255, 255, .12); transition: background-color .35s var(--ease); }
.dtog__sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--text-2); transition: transform .45s var(--ease-spring), background-color .35s var(--ease); }
.dtog li.is-on { color: var(--text); }
.dtog li.is-on .dtog__sw { background-color: var(--volt); }
.dtog li.is-on .dtog__sw::after { transform: translateX(10px); background-color: var(--volt-ink); }

/* 3. Domein: DNS-records, elk eerst gecontroleerd en dan afgevinkt */
.ddns { width: min(100%, 440px); }
.ddns__table { padding: 2px 14px 6px; }
.ddns__row {
    display: grid; grid-template-columns: 52px 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px;
    height: 32px;
    font: 400 .64rem/1 var(--f-mono); color: var(--text-2);
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.ddns__row + .ddns__row { border-top: 1px solid rgba(255, 255, 255, .055); }
.ddns__row--th { height: 28px; font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: 1; transform: none; }
.ddns__row.is-on { opacity: 1; transform: none; }
.ddns__type { justify-self: start; padding: 4px 6px; border-radius: 5px; background: rgba(94, 240, 210, .1); color: var(--mint); font-size: .56rem; letter-spacing: .04em; }
.ddns__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ddns__ok {
    position: relative;
    display: grid; place-items: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--volt-ink);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ddns__ok::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--volt); transition: opacity .2s; }
.deploy.is-playing .ddns__ok:not(.is-on)::after { animation: m-spin .8s linear infinite; }
.ddns__ok .icon { width: 10px; height: 10px; stroke-width: 2.8; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .45s var(--ease-spring); }
.ddns__ok.is-on { background-color: var(--volt); box-shadow: none; }
.ddns__ok.is-on::after { opacity: 0; }
.ddns__ok.is-on .icon { opacity: 1; transform: none; }

/* 4. SSL: de ring loopt rond, daarna klikt het slot dicht en kleurt limoen.
   Het beeld staat lager dan de andere kaarten: de melding onder het slotje in de adresbalk valt erboven. */
.dsc.dsc--ssl { padding-top: 58px; }
.dssl { display: grid; justify-items: center; gap: 12px; padding-top: 2px; text-align: center; }
.dssl__art { display: block; width: 92px; height: 92px; overflow: visible; }
.dssl__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.5; }
.dssl__ring {
    fill: none; stroke: var(--volt); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
    opacity: 0;
    transform: rotate(-90deg); transform-origin: 50px 50px;
    transition: stroke-dashoffset 1.1s var(--ease-io), opacity .2s;
}
.dssl__ring.is-on { stroke-dashoffset: 0; opacity: 1; }
.dssl__disc { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .1); stroke-width: 1; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.dssl__shackle { fill: none; stroke: var(--text-2); stroke-width: 3.2; stroke-linecap: round; transform: translateY(-6px); transition: transform .55s var(--ease-spring), stroke .4s var(--ease); }
.dssl__body { fill: var(--text-2); transition: fill .4s var(--ease); }
.dssl__key { fill: none; stroke: #0f141e; stroke-width: 3; stroke-linecap: round; transition: stroke .4s var(--ease); }
.dssl__ping { fill: none; stroke: var(--volt); stroke-width: 1.5; opacity: 0; transform-origin: 50px 50px; }
/* Dicht: een getinte schijf met limoen rand en slot, zoals de andere iconen; de echte climax is "Online". */
.dssl__lock.is-on .dssl__disc { fill: rgba(216, 255, 69, .1); stroke: rgba(216, 255, 69, .5); }
.dssl__lock.is-on .dssl__shackle { transform: none; stroke: var(--volt); }
.dssl__lock.is-on .dssl__body { fill: var(--volt); }
.dssl__lock.is-on .dssl__ping { animation: dp-ring .9s var(--ease) .1s both; }
.dssl__title { display: flex; align-items: center; gap: 10px; margin: 0; }
.dssl__title b { font: 500 .86rem/1.2 var(--f-body); }
.dssl__hosts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dssl__hosts li {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    font: 400 .68rem/1 var(--f-body); color: var(--text-2);
    opacity: 0; transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.dssl__hosts .icon { width: 11px; height: 11px; color: var(--volt); stroke-width: 2.4; }
.dssl__hosts li.is-on { opacity: 1; transform: none; }

/* 5. Mail: mappen links, en een envelop die in de lege inbox valt */
.dapp--mail { grid-template-columns: 128px minmax(0, 1fr); }
.dmail__folders { justify-items: stretch; gap: 2px; padding: 10px 8px; }
.dmail__folders > span { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 8px; font: 400 .72rem/1 var(--f-body); color: var(--muted); }
.dmail__folders > span.is-sel { background: rgba(255, 255, 255, .05); color: var(--text); }
.dmail__folders .icon { width: 13px; height: 13px; flex: none; }
.dmail__count { display: grid; place-items: center; min-width: 16px; height: 16px; margin-left: auto; padding: 0 4px; border-radius: 999px; background: var(--volt); color: var(--volt-ink); font: 600 .56rem/1 var(--f-body); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .5s var(--ease-spring); }
.dmail__count.is-on { opacity: 1; transform: none; }
.dmail { position: relative; padding: 12px 14px; }
.dmail__empty { position: absolute; left: 0; right: 0; top: 36px; margin: 0; text-align: center; font: 400 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: opacity .3s var(--ease); }
/* Zodra de envelop valt, is de inbox niet meer leeg. */
.dmail__env.is-on ~ .dmail__empty { opacity: 0; transition-duration: .2s; }
.dmail__msg {
    display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 4px 9px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(216, 255, 69, .045);
    box-shadow: inset 0 0 0 1px rgba(216, 255, 69, .14);
    opacity: 0; transform: translateY(-8px) scale(.98);
    transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.dmail__msg.is-on { opacity: 1; transform: none; }
.dmail__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.dmail__from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .74rem/1.2 var(--f-body); color: var(--text); }
.dmail__time { font: 400 .54rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dmail__subj, .dmail__prev { grid-column: 2 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmail__subj { font: 500 .74rem/1.25 var(--f-body); color: var(--text); }
.dmail__prev { font: 400 .68rem/1.25 var(--f-body); color: var(--muted); }
/* De envelop landt precies op het puntje van het nieuwe bericht en krimpt daar tot dat puntje. */
.dmail__env {
    position: absolute; left: 12.5px; top: 12px; z-index: 1;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--mint); color: #04211c;
    box-shadow: 0 12px 24px -10px rgba(94, 240, 210, .6);
    opacity: 0;
    pointer-events: none;
}
.dmail__env .icon { width: 17px; height: 17px; stroke-width: 1.9; }
.dmail__env.is-on { animation: dp-drop .85s var(--ease) both; }

/* 6. Voorbeeldsite: eerst skeletblokken, bij "Online" de echte vormen en kleuren. */
.mock { display: grid; gap: 18px; height: 100%; }
.mock .sk {
    display: block;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .085);
    transition: background-color .6s var(--ease), opacity .6s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--o, 0) * 70ms);
}
.deploy.is-playing:not(.s-online) .mock .sk {
    background-image: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, .06) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: dp-shimmer 1.6s linear infinite;
}

.mock__nav { display: flex; align-items: center; gap: 10px; }
.mock__logo { width: 14px; height: 14px; border-radius: 4px !important; }
.mock__brand { position: relative; margin-right: auto; font: 600 .7rem/1 var(--f-display); letter-spacing: -.03em; color: transparent; border-radius: 4px; transition: color .5s var(--ease); }
.mock__brand::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .07); transition: opacity .5s var(--ease) .1s; }
.mock__links { display: flex; gap: 12px; }
.mock__links i { width: 30px; height: 5px; }
.mock__btn { width: 58px; height: 20px; border-radius: 999px !important; }

.mock__hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 22px; }
.mock__copy { display: grid; gap: 9px; align-content: center; }
/* Kop: in het skelet een balk zo breed als de tekst (en lager dan de letters), online de tekst zelf.
   De letters schalen mee met de breedte van het venster (cqi). Regelafstand 1,08em, ondanks de 9px gap. */
.mock { container-type: inline-size; }
.mock .mock__h {
    justify-self: start; max-width: 100%;
    height: .62em;
    font: 500 1.2rem/.62 var(--f-display);
    font-size: clamp(.82rem, 4.3cqi, 1.5rem);
    letter-spacing: -.035em; white-space: nowrap;
    color: transparent;
    transition: background-color .6s var(--ease), color .6s var(--ease), opacity .6s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--o, 0) * 70ms);
}
.mock .mock__h + .mock__h { margin-top: calc(.46em - 9px); margin-bottom: .2em; }
.mock__p { width: var(--w); height: 6px; }
.mock__h + .mock__p { margin-top: 6px; }
.mock__ctas { display: flex; gap: 8px; margin-top: 8px; }
.mock__cta { width: 76px; height: 22px; border-radius: 999px !important; }
.mock__cta--2 { width: 58px; }
.mock__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px !important; }
.mock__img i { position: absolute; display: block; opacity: 0; transition: opacity .7s var(--ease), transform 1s var(--ease); transition-delay: .25s; }
.mock__sun { width: 19%; aspect-ratio: 1; right: 18%; top: 18%; border-radius: 50%; background: rgba(238, 242, 247, .85); transform: translateY(10px); }
.mock__hill { left: -10%; right: 30%; bottom: -38%; height: 80%; border-radius: 50%; background: rgba(94, 240, 210, .55); transform: translateY(14px); }
.mock__hill--2 { left: 34%; right: -20%; bottom: -46%; background: rgba(118, 182, 255, .5); transition-delay: .35s !important; }

.mock__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-self: start; }
.mock__card { display: grid; gap: 7px; padding: 10px; border-radius: 8px !important; }
.mock__card b { display: block; width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .08); transition: background-color .6s var(--ease); transition-delay: inherit; }
.mock__card i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.mock__card i + i { width: 70%; }

/* Online: kleur en vorm */
.deploy.s-online .mock__logo { background-color: var(--volt); }
.deploy.s-online .mock__brand { color: var(--text); }
.deploy.s-online .mock__brand::after { opacity: 0; }
.deploy.s-online .mock__links i { background-color: rgba(255, 255, 255, .16); }
.deploy.s-online .mock__btn { background-color: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.deploy.s-online .mock__h { background-color: transparent; color: var(--text); }
.deploy.s-online .mock__h + .mock__h { color: rgba(238, 242, 247, .6); }
.deploy.s-online .mock__p { background-color: rgba(255, 255, 255, .16); }
.deploy.s-online .mock__cta { background-color: var(--volt); }
.deploy.s-online .mock__cta--2 { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.deploy.s-online .mock__img { background-color: #10284a; background-image: linear-gradient(165deg, #173a66, #0b4f52); }
.deploy.s-online .mock__img i { opacity: 1; transform: none; }
.deploy.s-online .mock__card { background-color: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.deploy.s-online .mock__card:nth-child(1) b { background: var(--volt); }
.deploy.s-online .mock__card:nth-child(2) b { background: var(--mint); }
.deploy.s-online .mock__card:nth-child(3) b { background: var(--sky); }
/* Bij het live gaan bouwt de pagina zich op: blokken en de kop komen omhoog, tekstregels lopen uit.
   (De selector voor de tekstregels moet zwaarder zijn dan die voor alle blokken, anders wint dp-build.) */
.deploy.is-launch .mock .sk { animation: dp-build .8s var(--ease) calc(var(--o, 0) * 70ms) both; }
.deploy.is-launch .mock .sk.mock__p { transform-origin: left; animation-name: dp-line; }

/* Lijn die bij "Online" een keer over de pagina loopt, alsof hij wordt opgebouwd. */
.browser__page::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 70px;
    background: linear-gradient(180deg, transparent, rgba(216, 255, 69, .07) 80%, rgba(216, 255, 69, .5) 99%, transparent);
    opacity: 0;
    pointer-events: none;
}
.deploy.is-launch .browser__page::after { animation: dp-sweep 1.1s var(--ease-io) both; }

/* Terug naar het begin: ook de melding onder het slotje gaat mee weg. https:// verdwijnt onzichtbaar en
   zonder overgang, zodat het niet even oplicht als het adres terugkomt. */
.deploy.is-resetting .browser__pop { opacity: 0; }
.deploy.is-resetting :is(.browser__scheme, .browser__s) { transition: none; }

@keyframes dp-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes dp-ping { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes dp-swap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes dp-sweep { 0% { opacity: 1; transform: translateY(-70px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(320px); } }
@keyframes dp-load { 0% { opacity: 1; transform: scaleX(0); } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes dp-send {
    0% { opacity: 1; transform: none; }
    40% { opacity: 0; transform: translate(14px, -8px) rotate(-10deg); }
    41% { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: none; }
}
@keyframes dp-ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes dp-drop {
    0% { opacity: 0; transform: translateY(-40px) rotate(-14deg); }
    30% { opacity: 1; }
    55% { opacity: 1; transform: translateY(3px) rotate(3deg); }
    68% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: scale(.2); }
}
@keyframes dp-build { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dp-line { from { opacity: .4; transform: scaleX(.3); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) and (min-width: 901px) {
    .mock__links { display: none; }
    .dapp--mail { grid-template-columns: 112px minmax(0, 1fr); }
}
/* Smalste tweekoloms: mappen alleen als icoon (de teller wordt een puntje), zodat het mailadres heel blijft. */
@media (max-width: 1000px) and (min-width: 901px) {
    .dapp--mail { grid-template-columns: 44px minmax(0, 1fr); }
    .dmail__folders { justify-items: center; padding: 10px 0; }
    .dmail__folders > span { position: relative; justify-content: center; width: 28px; padding: 0; gap: 0; font-size: 0; }
    .dmail__count { position: absolute; top: 5px; right: 5px; min-width: 0; width: 6px; height: 6px; padding: 0; }
}
/* Gestapeld (tablet): breder venster, dus een iets lagere afbeelding en een hogere pagina. */
@media (max-width: 900px) and (min-width: 561px) {
    .browser__page { height: 320px; }
    .mock__img { aspect-ratio: 16 / 11; }
    .mock__sun { width: 15%; }
}
@media (max-width: 560px) {
    .deploy__name { font-size: .95rem; }
    .dpipe { margin: 1.25rem -4px 1.2rem; }
    .dpipe::before, .dpipe::after { top: 13px; }
    .dnode { gap: .5rem; }
    .dnode__dot { width: 26px; height: 26px; }
    .dnode__icon .icon, .dnode__check .icon { width: 12px; height: 12px; }
    .dnode__label { font-size: .56rem; letter-spacing: .02em; }
    .browser { margin: 0 -6px; }
    .browser__bar { grid-template-columns: 40px minmax(0, 1fr) 24px; height: 38px; padding: 0 10px; }
    .browser__dots { gap: 4px; }
    .browser__dots i { width: 6px; height: 6px; }
    .browser__url { height: 24px; font-size: .68rem; padding: 0 .55rem; }
    .browser__page { height: 268px; }
    .dsc { padding: 14px; }
    .dsc--card { padding-top: 16px; }
    .dsc--app { padding: 10px 10px 0; }
    .dcard__head { gap: 8px; padding: 10px 12px; }
    .dcard__icon { width: 24px; height: 24px; border-radius: 7px; }
    .dcard__icon .icon { width: 12px; height: 12px; }
    .dcard__title b { font-size: .75rem; }
    .dchip > span { padding: 0 8px; }
    .dorder__list { padding: 2px 12px; }
    .dorder__row { height: 32px; font-size: .72rem; }
    .dapp { grid-template-columns: 36px minmax(0, 1fr); }
    .dapp__side > i { width: 24px; height: 24px; border-radius: 7px; }
    .dapp__side .icon { width: 12px; height: 12px; }
    .dapp--mail { grid-template-columns: minmax(0, 1fr); }
    .dmail__folders { display: none; }
    .dres { column-gap: 10px; padding: 3px 12px; }
    .dres__row { gap: 10px; height: 30px; font-size: .7rem; }
    .dtog { gap: 7px 14px; padding: 9px 12px 10px; }
    .dtog li { font-size: .68rem; }
    .ddns__table { padding: 2px 12px 4px; }
    .ddns__row { grid-template-columns: 46px 36px minmax(0, 1fr) 16px; gap: 8px; height: 30px; font-size: .6rem; }
    .dssl { gap: 10px; }
    .dssl__art { width: 76px; height: 76px; }
    .dmail { padding: 10px 12px; }
    .dmail__env { left: 10.5px; top: 10px; }
    .mock { gap: 14px; }
    .dsc--site { padding: 14px; }
    .mock__links { display: none; }
    .mock__hero { gap: 14px; }
    .mock__copy { gap: 7px; }
    .mock .mock__h + .mock__h { margin-top: calc(.46em - 7px); }
    .mock__ctas { gap: 6px; }
    .mock__cta { width: 60px; height: 18px; }
    .mock__cta--2 { width: 44px; }
    .mock__cards { gap: 7px; }
    .mock__card { padding: 8px; }
}
/* Smalle telefoons: de pijplijn iets breder, zodat de zes labels lucht houden. */
@media (max-width: 400px) {
    .dpipe { margin-inline: -9px; }
}
/* Nog smaller (375/360px): de kaartkoppen zonder icoon, zodat titel en statuslabel naast elkaar passen.
   Op de allersmalste schermen mag de bedanktitel naar een tweede regel. */
@media (max-width: 380px) {
    .dcard__head > .dcard__icon { display: none; }
    .dorder .dcard__title b { white-space: normal; }
    .ddns__row { gap: 6px; }
}