/* Homepage (design D). Theme tokens live in tokens.css, header/footer in layout.css, shared blocks in components.css.
   Several d-* blocks (hero, chip, email form, CTA) are reused by inner pages via components.css aliases. */

/* Dark-context token overrides (navy hero / CTA) */
.d-hero, .d-cta {
    color-scheme: dark;
    --bg: var(--navy); --bg-raised: var(--navy-2); --text: #ffffff; --text-2: #c9d0e6; --text-muted: #b9c1dd;
    --accent: var(--sky-text); --accent-strong: var(--sky); --accent-contrast: var(--navy-deep);
    --border: #3a4468; --border-control: #7e89b3; --focus: var(--sky-text);
}
.d-hero .btn--primary:hover, .d-cta .btn--primary:hover { background: var(--sky-text); }


/* Hero */
.d-hero {
    position: relative; overflow: hidden; color: var(--text);
    background:
        radial-gradient(50rem 30rem at 85% 10%, rgb(1 160 222 / 0.28), transparent 65%),
        radial-gradient(40rem 30rem at 0% 100%, rgb(1 160 222 / 0.12), transparent 60%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding-block: var(--space-2xl) var(--space-xl);
}
.d-hero::before { /* faint dot grid */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
    background-image: radial-gradient(rgb(255 255 255 / 0.18) 1px, transparent 1px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.d-hero > .container { position: relative; }
.d-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.d-hero__copy > * + * { margin-top: var(--space-s); }
.d-chip { display: inline-block; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); background: rgb(1 160 222 / 0.16); border: 1px solid rgb(56 182 232 / 0.45); color: #dff4fd; font-size: var(--step--1); font-weight: 600; }
.d-hero h1 { font-size: var(--step-5); line-height: 1.05; color: #fff; max-width: 15ch; }
/* rotating word sits on its own line so the H1 never reflows while it changes */
.d-rotate { display: block; color: var(--sky-text); white-space: nowrap; }
.d-hero__lead { font-size: var(--step-1); color: var(--text-2); max-width: 36rem; }
.d-checks { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); max-width: 36rem; }
.d-checks li { display: flex; gap: 0.6rem; align-items: baseline; font-size: var(--step--1); color: #e3e8f5; }
.d-checks li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; transform: translateY(0.2rem); border-radius: 50%; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23161b33' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }

.d-email { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 34rem; margin-top: var(--space-m) !important; padding: 0.4rem; background: #fff; border-radius: var(--radius-m); box-shadow: var(--shadow-3); }
.d-email input { flex: 1 1 14rem; min-height: 2.875rem; padding: 0 0.9rem; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--navy); font-size: var(--step-0); }
.d-email input::placeholder { color: #5a6482; }
.d-email input:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.d-email .btn { flex: 0 0 auto; background: var(--blue); color: #fff; }
.d-email .btn:hover { background: var(--blue-hover) !important; }
@media (max-width: 30rem) { .d-email .btn { flex: 1 1 100%; } }

.d-regs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.d-regs li { padding: 0.2rem 0.6rem; border: 1px solid rgb(185 193 221 / 0.45); border-radius: var(--radius-xs); font-size: var(--step--2); font-weight: 600; color: #e3e8f5; background: rgb(255 255 255 / 0.04); }
.d-regs .d-regs__label { border: 0; background: none; padding-left: 0; color: var(--text-muted); font-weight: 500; }

.d-hero__visual { position: relative; }
.d-frame { border-radius: var(--radius-l); overflow: hidden; background: #fff; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.12); }
.d-frame__bar { display: flex; gap: 6px; padding: 0.55rem 0.8rem; background: #eceff6; border-bottom: 1px solid #dfe4ef; }
.d-frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: #c6ccdb; }
.d-frame img { width: 100%; }
.d-float { position: absolute; display: grid; gap: 0.1rem; padding: 0.7rem 0.95rem 0.7rem 2.6rem; background: #fff; color: var(--navy); border-radius: var(--radius-m); box-shadow: var(--shadow-3); font-size: var(--step--1); }
.d-float::before { content: ""; position: absolute; left: 0.85rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); border-radius: 50%; background: #17663a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }
.d-float span { color: #5a6482; font-size: var(--step--2); }
.d-float--a { left: -1rem; bottom: 12%; }
.d-float--b { right: -0.75rem; top: 14%; }
@media (max-width: 40rem) { .d-float { display: none; } }
@media (prefers-reduced-motion: no-preference) {
    .d-float { animation: d-bob 6s var(--ease-in-out) infinite; }
    .d-float--b { animation-delay: -3s; }
}
@keyframes d-bob { 50% { transform: translateY(-6px); } }
@media (min-width: 64rem) { .d-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.d-hero h1 .d-hl { white-space: nowrap; } /* "of every size." never splits across lines */

.d-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--border); }
.d-stats > div { display: flex; flex-direction: column; gap: 0.2rem; }
.d-stats dd { order: -1; font-size: var(--step-4); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.d-stats dt { color: var(--text-muted); font-size: var(--step--1); }
@media (min-width: 48rem) { .d-stats { grid-template-columns: repeat(4, 1fr); } }

/* Trusted by */
.d-trust { border-bottom: 1px solid var(--border); padding-block: var(--space-l); }
.d-trust__inner { display: grid; gap: var(--space-s); align-items: center; }
.d-trust h2 { font-size: var(--step--1); font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.d-trust ul { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-xl); }
.d-trust li { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; color: #8a93ad; }
@media (min-width: 64rem) { .d-trust__inner { grid-template-columns: 18rem 1fr; } .d-trust ul { justify-content: space-between; } }

/* Products */
.d-products__grid { display: grid; gap: var(--space-s); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .d-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 2 + 2 on tablets, never 3 + 1 */
.d-prod { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-m); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.d-prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: #b9dff1; }
.d-prod__k { align-self: start; padding: 0.25rem 0.6rem; border-radius: var(--radius-s); background: var(--navy); color: #fff; font-weight: 700; font-size: var(--step--1); }
.d-prod h3 { font-size: var(--step-2); margin-top: 0.35rem; }
.d-prod__for { font-size: var(--step--1); color: var(--blue); font-weight: 600; }
.d-prod ul { display: grid; gap: 0.4rem; margin-block: 0.4rem 0.8rem; flex: 1; }
.d-prod ul li { position: relative; padding-left: 1.2rem; font-size: var(--step--1); color: var(--text-2); }
.d-prod ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--sky); }
.d-link { font-weight: 650; text-decoration: none; }
.d-link:hover { text-decoration: underline; }
@media (min-width: 64rem) { .d-products__grid { grid-template-columns: repeat(4, 1fr); } }

.d-screens { margin-top: var(--space-2xl); }
.d-screens__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-bottom: var(--space-m); }
.d-screens__tabs [role="tab"] { min-height: 2.75rem; padding: 0 1.2rem; border-radius: var(--radius-pill); border: 1px solid var(--border-control); font-weight: 600; font-size: var(--step--1); color: var(--text-2); background: #fff; }
.d-screens__tabs [role="tab"][aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.d-screens__panel[hidden] { display: none; }
.d-frame--light { box-shadow: var(--shadow-3), 0 0 0 1px var(--border); max-width: max(80rem, 62vw); margin-inline: auto; }
.d-screens figcaption { text-align: center; margin-top: var(--space-s); color: var(--text-muted); font-size: var(--step--1); }

/* Inspection band */
.d-inspect { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--cool); border-block: 1px solid var(--border); }
.d-inspect__photo img { width: 100%; height: 100%; max-height: 30rem; object-fit: cover; object-position: center 30%; }
.d-inspect__body { padding: var(--space-2xl) var(--gutter); display: grid; gap: var(--space-m); align-content: center; max-width: 44rem; }
.d-inspect__body h2 { font-size: var(--step-3); }
.d-qa { display: grid; gap: var(--space-s); }
.d-qa > div { padding: var(--space-s) var(--space-m); background: #fff; border-radius: var(--radius-m); border-left: 4px solid var(--sky); box-shadow: var(--shadow-1); }
.d-qa dt { font-weight: 700; }
.d-qa dd { color: var(--text-2); font-size: var(--step--1); margin-top: 0.15rem; }
.d-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.d-controls li { padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--tint); color: #0a5a7e; font-size: var(--step--2); font-weight: 650; }
@media (min-width: 64rem) {
    .d-inspect { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .d-inspect__photo img { max-height: none; min-height: 100%; }
    .d-inspect__body { padding-inline: var(--space-2xl); }
}

/* Follow one batch */
.d-flow { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); counter-reset: none; }
.d-flow li { position: relative; padding: var(--space-m); border-radius: var(--radius-l); background: #fff; border: 1px solid var(--border); }
.d-flow__n { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--tint); color: var(--blue); font-weight: 700; font-size: var(--step--1); }
.d-flow h3 { font-size: var(--step-1); margin-block: 0.6rem 0.3rem; }
.d-flow p { font-size: var(--step--1); color: var(--text-2); }
@media (min-width: 64rem) { .d-flow { grid-template-columns: repeat(3, 1fr); } }

/* Industries */
.d-industries { background: var(--cool); border-top: 1px solid var(--border); }
.d-split-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-m); margin-bottom: var(--space-xl); }
.d-split-head > div > * + * { margin-top: var(--space-xs); }
.d-split-head h2 { max-width: 22ch; }
.d-ind__grid { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.d-ind a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); color: #fff; text-decoration: none; background: var(--navy); }
.d-ind img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.d-ind a:hover img { transform: scale(1.05); }
.d-ind a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(22 27 51 / 0.95) 0%, rgb(22 27 51 / 0.55) 38%, transparent 65%); }
.d-ind__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 0.25rem; padding: var(--space-m); }
.d-ind__body strong { font-size: var(--step-1); }
.d-ind__body span { font-size: var(--step--1); color: #dfe4f2; }
@media (min-width: 64rem) { .d-ind__grid { grid-template-columns: repeat(4, 1fr); } }

/* Regions */
.d-regions__grid { display: grid; gap: var(--space-xl); align-items: center; }
.d-regions__grid > div > * + * { margin-top: var(--space-s); }
.d-regions__list { display: grid; gap: 0.5rem; }
.d-regions__list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "r arrow" "s arrow"; align-items: center; gap: 0.1rem var(--space-s); padding: var(--space-s) var(--space-m); border: 1px solid var(--border); border-radius: var(--radius-m); background: #fff; color: var(--text); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.d-regions__list a > span:first-child { grid-area: r; font-size: var(--step--1); color: var(--text-muted); }
.d-regions__list strong { grid-area: s; }
.d-arrow { grid-area: arrow; color: var(--blue); font-weight: 700; }
.d-regions__list a:hover { border-color: var(--blue); box-shadow: var(--shadow-2); }
@media (min-width: 64rem) { .d-regions__grid { grid-template-columns: 1fr 1fr; } }

/* Testimonials */
.d-quotes { background: var(--cool); border-top: 1px solid var(--border); }
.d-quotes__grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.d-quote { display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-l) var(--space-m); background: #fff; border-radius: var(--radius-l); border-top: 4px solid var(--sky); box-shadow: var(--shadow-1); }
.d-quote blockquote { display: grid; gap: var(--space-xs); align-content: start; flex: 1; color: var(--text-2); font-size: var(--step--1); }
.d-quote__head { font-size: var(--step-1); font-weight: 700; color: var(--text); line-height: 1.3; }
.d-quote figcaption { display: flex; align-items: center; gap: var(--space-s); }
.d-quote figcaption > span:last-child { display: grid; font-size: var(--step--1); }
.d-quote figcaption > span:last-child span { color: var(--text-muted); font-size: var(--step--2); }
.d-quote__logo { display: grid; place-items: center; min-width: 3.25rem; height: 3.25rem; flex: none; border-radius: var(--radius-m); }
.d-quote__logo--name { max-width: 7.5rem; padding: 0 0.7rem; background: var(--tint); border: 1px solid var(--border); color: var(--navy); font-size: 0.8rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-align: center; }
.d-quote__logo--img { padding: 0.35rem; background: #fff; border: 1px solid var(--border); }
.d-quote__logo--img img { max-width: 7rem; max-height: 2.5rem; width: auto; height: auto; object-fit: contain; }

/* Roadmap */
.d-road__list { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.d-road__list li { padding: var(--space-m); border-radius: var(--radius-l); background: linear-gradient(180deg, var(--tint), #fff 70%); border: 1px solid var(--border); }
.d-road__list li > span { font-size: var(--step--1); font-weight: 700; color: var(--blue); }
.d-road__list h3 { font-size: var(--step-1); margin-block: 0.35rem; }
.d-road__list p { font-size: var(--step--1); color: var(--text-2); }

/* CTA */
.d-cta { color: var(--text); padding-block: var(--space-2xl); background: radial-gradient(40rem 20rem at 100% 0%, rgb(1 160 222 / 0.35), transparent 70%), linear-gradient(135deg, var(--navy), var(--navy-deep)); }
.d-cta__inner { display: grid; gap: var(--space-l); align-items: center; }
.d-cta h2 { font-size: var(--step-4); color: #fff; }
.d-cta p { color: var(--text-2); font-size: var(--step-1); margin-top: var(--space-xs); max-width: 40rem; }
.d-cta__actions { display: grid; gap: var(--space-s); }
.d-cta__actions .d-email { margin-top: 0 !important; }
.d-cta__alt { color: var(--sky-text); font-weight: 600; }
@media (min-width: 64rem) { .d-cta__inner { grid-template-columns: 1.2fr 1fr; } }

@media (max-width: 40rem) { .d-ind a { aspect-ratio: 16 / 10; } }

/* =============================================================================
   Motion layer. Everything here is decorative and is disabled by prefers-reduced-motion;
   the "Pause motion" button adds .motion-paused to <html>, which freezes all CSS animations (WCAG 2.2.2).
   ============================================================================= */

/* Activity feed over the hero screenshot (default = final state, so no-JS / reduced motion still shows it) */
.d-feed { position: absolute; left: -1.25rem; bottom: 7%; display: grid; gap: 0.5rem; width: min(17rem, 70%); list-style: none; padding: 0; margin: 0; }
.d-feed__item { display: none; position: relative; gap: 0.1rem; padding: 0.65rem 0.9rem 0.65rem 2.6rem; background: #fff; color: var(--navy); border-radius: var(--radius-m); box-shadow: var(--shadow-3); font-size: var(--step--1); }
.d-feed__item:nth-last-child(-n+2) { display: grid; }
.d-feed__item strong { font-weight: 700; }
.d-feed__item span { color: #5a6482; font-size: var(--step--2); }
.d-feed__item::before { content: ""; position: absolute; left: 0.85rem; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); border-radius: 50%; background: var(--blue) center / 75% no-repeat; }
.d-feed__item--pass::before { background-color: #17663a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.d-feed__item--hold::before { background-color: #8a5a00; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.d-feed__item--info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6M8 5v6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (max-width: 40rem) { .d-feed { display: none; } }

/* Pause-motion button */
.d-motion { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: var(--space-m); padding: 0 0.9rem; border: 1px solid var(--border-control); border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--step--1); font-weight: 600; }
.d-motion:hover { color: #fff; border-color: #fff; }
.d-motion__icon { width: 0.7rem; height: 0.8rem; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.d-motion[aria-pressed="true"] .d-motion__icon { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Module marquee */
.d-marquee { overflow: hidden; background: var(--navy-deep); border-top: 1px solid #2b3357; padding-block: 0.9rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.d-marquee__track { display: flex; width: max-content; }
.d-marquee ul { display: flex; flex: none; gap: 2.25rem; padding-right: 2.25rem; }
.d-marquee li { display: inline-flex; align-items: center; gap: 2.25rem; color: #c9d0e6; font-weight: 600; font-size: var(--step--1); white-space: nowrap; }
.d-marquee li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }

/* Tab progress + toggle */
.d-screens__tabs [role="tab"] { position: relative; overflow: hidden; }
.d-screens__toggle { display: flex; align-items: center; gap: 0.5rem; margin: -0.25rem auto var(--space-m); min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border-control); border-radius: var(--radius-pill); background: #fff; color: var(--text-2); font-size: var(--step--1); font-weight: 600; }
.d-screens__toggle::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.38rem 0 0.38rem 0.6rem; border-color: transparent transparent transparent currentColor; }
.d-screens__toggle[aria-pressed="true"]::before { width: 0.6rem; height: 0.72rem; border: 0; border-inline: 0.2rem solid currentColor; }
.d-screens__toggle:hover { color: var(--blue); }

/* Industry card "Explore" */
.d-ind__more { font-style: normal; font-weight: 700; font-size: var(--step--1); color: var(--sky-text); }

/* Reveal stagger (base .reveal lives in base.css) */
.js .reveal { transition-delay: calc(var(--d, 0) * 90ms); }

/* Batch flow progress rail (static fallback = full) */
.d-flow__progress { height: 4px; margin-bottom: var(--space-l); border-radius: 4px; background: var(--tint); overflow: hidden; }
.d-flow__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky)); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {
    /* Hero entrance */
    .d-enter > * { animation: d-up 0.8s var(--ease-out) both; }
    .d-enter > :nth-child(1) { animation-delay: 0.05s; }
    .d-enter > :nth-child(2) { animation-delay: 0.15s; }
    .d-enter > :nth-child(3) { animation-delay: 0.28s; }
    .d-enter > :nth-child(4) { animation-delay: 0.4s; }
    .d-enter > :nth-child(5) { animation-delay: 0.52s; }
    .d-enter > :nth-child(6) { animation-delay: 0.64s; }
    /* The H1 is the LCP element: it slides in but is never invisible, so it paints with the first frame. */
    .d-enter > h1 { animation-name: d-up-solid; animation-delay: 0s; }
    .d-enter-visual { perspective: 1800px; }
    .d-enter-visual .d-frame { transform: rotateY(-9deg) rotateX(4deg); transform-origin: 60% 50%; animation: d-tilt-in 1.2s var(--ease-out) 0.25s backwards; transition: transform 0.9s var(--ease-out); }
    .d-enter-visual:hover .d-frame { transform: rotateY(-2deg) rotateX(1deg); }

    /* Drifting glow behind the hero */
    .d-hero::after { content: ""; position: absolute; width: 38rem; height: 38rem; right: -8rem; top: -10rem; border-radius: 50%; pointer-events: none;
        background: radial-gradient(circle, rgb(1 160 222 / 0.32), transparent 65%); filter: blur(10px); animation: d-drift 18s var(--ease-in-out) infinite alternate; }

    /* Rotating word + underline sweep */
    .d-rotate__word { display: inline-block; background: linear-gradient(var(--sky), var(--sky)) left 92% / 0% 0.08em no-repeat; animation: d-underline 1.1s var(--ease-out) 0.9s forwards; }
    .d-rotate__word.is-in { animation: d-word-in 0.5s var(--ease-out) both, d-underline 0.9s var(--ease-out) 0.15s forwards; }


    /* Marquee */
    .d-marquee__track { animation: d-marquee 45s linear infinite; }


    /* Product cards: accent bar grows on hover */
    .d-prod { position: relative; overflow: hidden; }
    .d-prod::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
    .d-prod:hover::before { transform: scaleX(1); }
    .d-prod:hover .d-prod__k { background: var(--blue); }

    /* Screen tabs: progress bar on the active tab while auto-playing; crossfade panels */
    .d-screens.is-playing [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sky); transform-origin: left; animation: d-progress var(--interval, 5s) linear both; }
    .d-screens__panel:not([hidden]) .d-frame { animation: d-fade 0.55s var(--ease-out) both; }

    /* Reveal from the right */
    .js .reveal--right { transform: translateX(28px); }
    .js .reveal--right.is-visible { transform: none; }

    /* Batch flow: number pops when its card reveals */
    .js .d-flow li.reveal .d-flow__n { transform: scale(0.4); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0) * 90ms + 0.15s); }
    .js .d-flow li.reveal.is-visible .d-flow__n { transform: none; }

    /* Industry cards: "Explore" slides up on hover */
    .d-ind__more { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
    .d-ind a:hover .d-ind__more, .d-ind a:focus-visible .d-ind__more { opacity: 1; transform: none; }

    /* CTA gradient drift */
    .d-cta { background-size: 160% 160%, 100% 100%; animation: d-bg 16s var(--ease-in-out) infinite alternate; }

    /* Scroll-driven extras (Chrome/Edge; other browsers simply skip them) */
    @supports (animation-timeline: view()) {
        .d-parallax { overflow: hidden; }
        .d-parallax img { animation: d-parallax linear both; animation-timeline: view(); }
        .d-flow__progress span { animation: d-grow linear both; animation-timeline: view(); animation-range: entry 10% exit 40%; }
    }
}

/* Freeze everything when the visitor pauses motion */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .d-marquee__track { animation: none !important; }

@keyframes d-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes d-up-solid { from { transform: translateY(12px); } to { transform: none; } }
@keyframes d-tilt-in { from { opacity: 0; transform: translateX(40px) rotateY(-22deg) rotateX(8deg) scale(0.96); } }
@keyframes d-drift { to { transform: translate(-14rem, 9rem) scale(1.15); } }
@keyframes d-word-in { from { opacity: 0; transform: translateY(0.45em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes d-underline { to { background-size: 100% 0.08em; } }
@keyframes d-marquee { to { transform: translateX(-50%); } }
@keyframes d-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes d-fade { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes d-parallax { from { transform: scale(1.18) translateY(-6%); } to { transform: scale(1.18) translateY(6%); } }
@keyframes d-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes d-bg { to { background-position: 100% 100%, 0 0; } }

/* Reduced motion: the module strip becomes a wrapped, centred list instead of a frozen, clipped marquee */
@media (prefers-reduced-motion: reduce) {
    .d-marquee { -webkit-mask-image: none; mask-image: none; }
    .d-marquee__track { width: auto; justify-content: center; }
    .d-marquee ul { flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; padding-inline: var(--gutter); }
    .d-marquee ul[aria-hidden="true"] { display: none; }
    .d-marquee li { gap: 1.5rem; }
}

/* =============================================================================
   Motion layer 2: system map, live console, spotlight, pointer tilt, word reveal, glow border,
   reverse marquee, scroll progress, smart header, film grain. Same rules: off under reduced motion,
   frozen by .motion-paused.
   ============================================================================= */

/* ---- Animated system map ---- */
.d-map { background: linear-gradient(180deg, #fff 0%, var(--cool) 100%); border-top: 1px solid var(--border); overflow: hidden; }
.d-map__stage { position: relative; display: grid; gap: var(--space-l); }
.d-map__svg { width: 100%; max-width: 76rem; margin-inline: auto; overflow: visible; }
.d-map__ring { fill: none; stroke: #c9d6ea; stroke-width: 1; stroke-dasharray: 3 7; }
.d-map__ring--2 { stroke: #dde6f3; }
.d-map__line { fill: none; stroke: url(#mapLine); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 10; }
.d-map__line--loop { stroke: #c9d6ea; stroke-width: 1.5; stroke-dasharray: 2 8; }
.d-map__packets circle { fill: #38b6e8; }
.d-map__packets circle.alt { fill: #0a6a94; }
.d-map__pulse { fill: none; stroke: #38b6e8; stroke-opacity: 0.35; stroke-width: 2; transform-origin: 500px 260px; }
.d-map__core-t { fill: #fff; font: 700 21px var(--font-sans); letter-spacing: -0.01em; }
.d-map__core-s { fill: #9fdcf5; font: 600 13px var(--font-sans); letter-spacing: 0.04em; }
.d-map__node rect { fill: #fff; stroke: #cfd8ea; stroke-width: 1.5; filter: drop-shadow(0 10px 24px rgb(33 40 67 / 0.12)); transition: stroke 0.3s; }
.d-map__node:hover rect { stroke: #01a0de; }
.d-map__node-t { fill: var(--navy); font: 800 24px var(--font-sans); letter-spacing: -0.02em; }
.d-map__node-s { fill: #5a6482; font: 500 14px var(--font-sans); }

/* ---- Live audit-trail console ---- */
.d-console { width: min(100%, 40rem); margin-inline: auto; border-radius: var(--radius-l); overflow: hidden; background: #0f1428; box-shadow: var(--shadow-3), 0 0 0 1px #2b3357; font-family: var(--font-mono); font-size: var(--step--2); }
.d-console__bar { display: flex; align-items: center; gap: 6px; padding: 0.55rem 0.8rem; background: #161b33; border-bottom: 1px solid #2b3357; }
.d-console__bar span { width: 9px; height: 9px; border-radius: 50%; background: #3a4468; }
.d-console__bar span:nth-child(1) { background: #ff5f57; } .d-console__bar span:nth-child(2) { background: #febc2e; } .d-console__bar span:nth-child(3) { background: #28c840; }
.d-console__bar em { margin-left: auto; font-style: normal; color: #8a93ad; display: inline-flex; align-items: center; gap: 0.45rem; }
.d-console__bar em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #28c840; box-shadow: 0 0 0 3px rgb(40 200 64 / 0.2); }
.d-console__log { list-style: none; margin: 0; padding: 0.6rem 0.9rem; height: 11.6rem; overflow: hidden; display: grid; align-content: start; gap: 0.15rem; }
.d-console__log li { display: grid; grid-template-columns: 5.2rem 3.4rem 1fr; gap: 0.5rem; padding: 0.22rem 0; color: #c9d0e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-console__log li > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* clean "…" instead of a half-cut character */
.d-console__log time { color: #6f7aa0; }
.d-console__log b { font-weight: 700; } .d-console__log b.q { color: #38b6e8; } .d-console__log b.m { color: #b39dfa; } .d-console__log b.d { color: #f2c14e; } .d-console__log b.e { color: #6fcf8e; } .d-console__log b.r { color: #ff8fb0; }
@media (max-width: 40rem) { .d-map__svg { display: none; } .d-console__log li { grid-template-columns: 4.6rem 3rem 1fr; } }
@media (min-width: 64rem) {
    .d-map__stage { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); }
    .d-console { width: 100%; }
}

/* ---- Spotlight following the pointer ---- */
.d-spot { position: relative; isolation: isolate; }
.d-spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease-out);
    background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgb(1 160 222 / 0.12), transparent 60%); }
.d-spot:hover::after { opacity: 1; }

/* ---- Scroll progress bar ---- */
.d-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; pointer-events: none; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--blue), var(--sky), #8fd3f2); }

/* ---- Smart header ---- */

/* ---- Film grain on the hero (very low opacity SVG noise) ---- */
.d-hero__grid::before { content: ""; position: absolute; inset: -40rem -100vw; pointer-events: none; opacity: 0.06; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.d-hero__grid { position: relative; z-index: 0; }

/* ---- Reverse marquee row ---- */
.d-marquee__track--rev { margin-top: 0.75rem; }
.d-marquee__track--rev li { color: #8fd3f2; font-weight: 500; }
.d-marquee__track--rev li::after { background: #3a4468; }


@media (prefers-reduced-motion: no-preference) {
    .d-map__line { animation: d-dash 1.6s linear infinite; }
    .d-map__line--loop { animation-duration: 3s; }
    .d-map__pulse { animation: d-pulse 2.8s var(--ease-out) infinite; }
    .d-map__node { transform-box: fill-box; transform-origin: center; animation: d-float 6s var(--ease-in-out) infinite; }
    .d-map__node:nth-of-type(2) { animation-delay: -1.5s; } .d-map__node:nth-of-type(3) { animation-delay: -3s; } .d-map__node:nth-of-type(4) { animation-delay: -4.5s; }

    .d-console__log li { transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
    .d-console__log li.is-leaving { opacity: 0; transform: translateY(-8px); }
    .d-console__log li.is-new { animation: d-console-new 1.2s var(--ease-out); }

    .d-hero .d-enter-visual[data-tilt] .d-frame,
    .d-hero .d-enter-visual[data-tilt]:hover .d-frame { transform: rotateY(var(--ry, -9deg)) rotateX(var(--rx, 4deg)); transition: transform 0.6s var(--ease-out); }

    .js [data-words] h2 .w { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(6px);
        transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), filter 0.6s var(--ease-out); transition-delay: calc(var(--wi) * 55ms + 0.1s); }
    .js [data-words].is-visible h2 .w { opacity: 1; transform: none; filter: none; }


    @supports (animation-timeline: scroll()) {
        .d-progress { animation: d-grow linear both; animation-timeline: scroll(root); }
    }
    .d-marquee__track--rev { animation: d-marquee-rev 55s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .d-marquee__track--rev { display: none; }
    .d-progress { display: none; }
}
.motion-paused .d-marquee__track--rev { animation: none !important; }

@keyframes d-dash { to { stroke-dashoffset: -36; } }
@keyframes d-pulse { 0% { transform: scale(0.85); stroke-opacity: 0.6; } 100% { transform: scale(1.35); stroke-opacity: 0; } }
@keyframes d-float { 50% { transform: translateY(-7px); } }
@keyframes d-console-new { from { background: rgb(56 182 232 / 0.18); } to { background: transparent; } }
@keyframes d-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---- Calm, solid demo form (replaces the rotating glow) ---- */
.d-email { box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 18px 40px -18px rgb(0 0 0 / 0.55); }
.d-email:focus-within { box-shadow: 0 0 0 3px rgb(56 182 232 / 0.45), 0 18px 40px -18px rgb(0 0 0 / 0.55); }
.d-email .btn { transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.d-email .btn:active { transform: translateY(1px); }

/* ---- Hero module ticker chip ---- */
.d-chip { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.9rem 0.3rem 0.35rem; }
.d-chip__label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); background: var(--sky); color: var(--navy-deep); font-weight: 700; white-space: nowrap; }
.d-chip__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--navy-deep); }
.d-ticker { display: inline-block; min-width: 13.5em; overflow: hidden; white-space: nowrap; color: #fff; font-weight: 600; }
.d-ticker__item { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
    .d-chip__dot { animation: d-blink 1.8s ease-in-out infinite; }
    .d-ticker__item.is-in { animation: d-tick-in 0.45s var(--ease-out) both; }
}
@keyframes d-tick-in { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes d-blink { 50% { opacity: 0.35; } }
@media (max-width: 26rem) { .d-ticker { min-width: 0; } }

/* ---- Activity feed v2: two fixed slots, transform/opacity only (no layout shift) ---- */
@media (prefers-reduced-motion: no-preference) {
    .d-feed.is-playing { display: block; height: 9.6rem; }
    .d-feed.is-playing .d-feed__item { display: grid; position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(70%) scale(0.96);
        transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
    .d-feed.is-playing .d-feed__item.is-bottom { opacity: 1; transform: none; }
    .d-feed.is-playing .d-feed__item.is-top { opacity: 1; transform: translateY(calc(-100% - 0.5rem)); }
    .d-feed.is-playing .d-feed__item.is-out { opacity: 0; transform: translateY(calc(-200% - 1rem)) scale(0.96); }
}

/* ---- Stats: tabular digits so counting never changes the layout; soft glow when a count lands ---- */
.d-stats dd { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
    .d-stats dd.is-counted { animation: d-count-land 0.8s var(--ease-out); }
}
@keyframes d-count-land { 0% { text-shadow: 0 0 0 rgb(56 182 232 / 0); } 30% { text-shadow: 0 0 24px rgb(56 182 232 / 0.65); } 100% { text-shadow: 0 0 0 rgb(56 182 232 / 0); } }

/* =============================================================================
   Product showcase effects (dashboard / eBMR / batch release)
   ============================================================================= */
.d-screens__tabs [role="tab"] { display: inline-flex; align-items: center; gap: 0.5rem; }
.d-tabicon { flex: none; opacity: 0.8; }
.d-stage { position: relative; max-width: max(80rem, 62vw); margin-inline: auto; }
.d-stage::before { /* brand glow behind the frame */
    content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 40px; filter: blur(48px); opacity: 0.55;
    background: radial-gradient(40% 60% at 25% 40%, rgb(1 160 222 / 0.55), transparent 70%), radial-gradient(40% 60% at 80% 60%, rgb(33 40 67 / 0.45), transparent 70%); }
.d-screens .d-frame--light { box-shadow: 0 40px 90px -30px rgb(22 27 51 / 0.45), 0 0 0 1px rgb(33 40 67 / 0.08); }
.d-frame__bar { align-items: center; }
.d-frame__url { margin-left: 0.9rem; padding: 0.15rem 0.8rem; border-radius: var(--radius-pill); background: #fff; border: 1px solid #dfe4ef; color: #5a6482; font-style: normal; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-shot { position: relative; overflow: hidden; }
.d-shot img { display: block; transform-origin: var(--origin, 50% 50%); }

/* Hotspots */
.d-hot { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 0.5rem; transform: translate(-0.55rem, -50%); pointer-events: none; }
.d-hot__dot { position: relative; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgb(1 160 222 / 0.5); }
.d-hot__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sky); opacity: 0; }
.d-hot__label { padding: 0.35rem 0.7rem; border-radius: var(--radius-s); background: var(--navy); color: #fff; font-size: 0.78rem; font-weight: 650; white-space: nowrap; box-shadow: 0 10px 24px -8px rgb(22 27 51 / 0.6); }
.d-hot--l { flex-direction: row-reverse; transform: translate(calc(-100% + 0.55rem), -50%); }
.d-hot--b { flex-direction: column; align-items: flex-start; transform: translate(-0.55rem, -0.55rem); }
@media (max-width: 48rem) { .d-hot__label { display: none; } .d-hot { transform: translate(-50%, -50%); } }

@media (prefers-reduced-motion: no-preference) {
    /* 3D rise as the showcase scrolls into view (Chrome/Edge; others show it flat) */
    @supports (animation-timeline: view()) {
        .d-screens { perspective: 1600px; }
        .d-stage { transform-origin: 50% 100%; animation: d-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    }
    /* slow zoom on the active screenshot */
    .d-screens__panel:not([hidden]) .d-shot img { animation: d-kenburns 9s var(--ease-in-out) both alternate infinite; }
    /* hotspots pop in one after another, then pulse */
    .d-screens__panel:not([hidden]) .d-hot { animation: d-hot-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 0.45s + 0.5s); }
    .d-screens__panel:not([hidden]) .d-hot__dot::after { animation: d-ring 2s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.45s + 1s); }
    .d-stage::before { animation: d-glow-breathe 7s var(--ease-in-out) infinite alternate; }
}
@keyframes d-rise { from { transform: rotateX(22deg) scale(0.9) translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes d-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes d-hot-in { from { opacity: 0; translate: 0 10px; scale: 0.6; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes d-ring { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes d-glow-breathe { from { opacity: 0.4; transform: scale(0.97); } to { opacity: 0.7; transform: scale(1.03); } }

/* =============================================================================
   Showcase v2: smooth cross-fade deck, slower, softer hotspots
   ============================================================================= */
.d-screens__deck { display: grid; grid-template-columns: minmax(0, 1fr); }
.d-screens__deck > .d-screens__panel { grid-area: 1 / 1; }
.d-screens.is-crossfade .d-screens__panel { opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.975); filter: blur(6px);
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out), visibility 0s linear 1.1s; }
.d-screens.is-crossfade .d-screens__panel.is-active { opacity: 1; visibility: visible; transform: none; filter: none; z-index: 1;
    transition: opacity 1s var(--ease-out) 0.15s, transform 1.1s var(--ease-out) 0.15s, filter 1s var(--ease-out) 0.15s, visibility 0s; }
/* the old fade-on-show animation is replaced by the cross-fade */
.d-screens__panel:not([hidden]) .d-frame { animation: none; }

@media (prefers-reduced-motion: no-preference) {
    /* slow zoom only on the active screen, restarting each time it becomes active */
    .d-screens__panel:not([hidden]) .d-shot img { animation: none; }
    .d-screens.is-crossfade .d-screens__panel.is-active .d-shot img { animation: d-kenburns 12s var(--ease-in-out) both; }
    /* hotspots: calm fade-and-rise, one by one, readable before the next screen */
    .d-screens__panel:not([hidden]) .d-hot { animation: none; opacity: 0; }
    .d-screens.is-crossfade .d-screens__panel.is-active .d-hot { animation: d-hot-soft 0.8s var(--ease-out) both; animation-delay: calc(var(--i) * 0.9s + 1.1s); }
    .d-screens__panel:not([hidden]) .d-hot__dot::after { animation: none; }
    .d-screens.is-crossfade .d-screens__panel.is-active .d-hot__dot::after { animation: d-ring 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.9s + 1.9s); }
}
@media (prefers-reduced-motion: reduce) {
    .d-screens.is-crossfade .d-screens__panel { transition: none; filter: none; transform: none; }
}
@keyframes d-hot-soft { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* =============================================================================
   Inspection Q&A: continuous inspector-question cycle (replaces the slide-in fade)
   ============================================================================= */
.d-qa__item { position: relative; overflow: hidden; padding: var(--space-s) var(--space-m); background: #fff; border-radius: var(--radius-m); border-left: 4px solid var(--sky); box-shadow: var(--shadow-1); }
.d-qa__item dt { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 700; }
.d-qa__icon { flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--tint); color: var(--blue); font-size: 0.75rem; font-weight: 800; transform: translateY(0.1rem); }
.d-qa__item dd { margin: 0.2rem 0 0 1.95rem; color: var(--text-2); font-size: var(--step--1); }
.d-qa__src { display: none; }
.d-qa__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; }

/* photo badge */
.d-inspect__photo { position: relative; }
.d-inspect__badge { position: absolute; left: var(--space-m); top: clamp(1.5rem, 18%, 9rem); z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-m); background: rgb(22 27 51 / 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; box-shadow: var(--shadow-3); max-width: calc(100% - 2 * var(--space-m)); }
.d-inspect__badge > span:last-child { display: grid; }
.d-inspect__badge strong { font-size: var(--step--1); }
.d-inspect__badge em { font-style: normal; font-size: var(--step--2); color: #9fdcf5; }
.d-inspect__live { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #28c840; box-shadow: 0 0 0 4px rgb(40 200 64 / 0.25); }

@media (prefers-reduced-motion: no-preference) {
    .d-qa.is-cycling .d-qa__item { border-left-color: #cfd8ea;
        transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), border-color 0.7s var(--ease-out), background-color 0.7s var(--ease-out); }
    /* inactive = AA-safe muted colours (not opacity, which would break contrast) */
    .d-qa.is-cycling .d-qa__item dt { transition: color 0.7s var(--ease-out); color: #4b5574; }
    .d-qa.is-cycling .d-qa__item dd { transition: color 0.7s var(--ease-out); color: #5a6482; }
    .d-qa.is-cycling .d-qa__item.is-active { transform: translateX(8px); border-left-color: var(--sky); box-shadow: 0 18px 40px -18px rgb(22 27 51 / 0.35); }
    .d-qa.is-cycling .d-qa__item.is-active dt { color: var(--navy); }
    .d-qa.is-cycling .d-qa__item.is-active dd { color: var(--text-2); }
    .d-qa.is-cycling .d-qa__item.is-active .d-qa__icon { background: var(--sky); color: var(--navy-deep); animation: d-q-pop 0.6s var(--ease-out); }
    /* answer "types" in */
    .d-qa.is-cycling .d-qa__item.is-active .d-qa__answer { display: inline-block; animation: d-wipe 1.3s steps(36, end) 0.35s both; }
    /* progress bar for the time this question stays active */
    .d-qa.is-running .d-qa__item.is-active .d-qa__bar { animation: d-progress var(--cycle, 5s) linear both; }
    .d-inspect__badge em.is-in { animation: d-tick-in 0.5s var(--ease-out) both; }
    .d-inspect__live { animation: d-blink 1.6s ease-in-out infinite; }
}
@keyframes d-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d-q-pop { 40% { transform: translateY(0.1rem) scale(1.25); } }

/* =============================================================================
   Continuous motion for every remaining block. Pattern: [data-cycle] marks one child .is-active at a time
   (JS also sets --ci / --cn on the list and its parent). Only colours, transforms and opacity change, so nothing
   shifts. Everything sits inside prefers-reduced-motion: no-preference and freezes with .motion-paused.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {

    /* ---- Trusted by: a slow light sweep across each name in turn (large bold text, ≥ 3:1 throughout) ---- */
    /* (customer strip: shimmer removed 2026-11-03 — it left names half-faded; see .d-trust cards above) */

    /* ---- Products: spotlight cycle + bullets tick into checkmarks ---- */
    .d-products__grid.is-cycling .d-prod { transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), border-color 0.7s var(--ease-out); }
    .d-products__grid.is-cycling .d-prod.is-active { transform: translateY(-8px); box-shadow: 0 30px 60px -28px rgb(22 27 51 / 0.35); border-color: #9fdcf5; }
    .d-products__grid.is-running .d-prod.is-active::before { transform: none; animation: d-progress var(--cycle, 4.5s) linear both; }
    .d-products__grid.is-cycling .d-prod.is-active .d-prod__k { background: var(--blue); }
    .d-products__grid.is-cycling .d-prod.is-active ul li::before { animation: d-tick 0.5s var(--ease-out) both; }
    .d-products__grid.is-cycling .d-prod.is-active ul li:nth-child(1)::before { animation-delay: 0.3s; }
    .d-products__grid.is-cycling .d-prod.is-active ul li:nth-child(2)::before { animation-delay: 0.6s; }
    .d-products__grid.is-cycling .d-prod.is-active ul li:nth-child(3)::before { animation-delay: 0.9s; }
    .d-products__grid.is-cycling .d-prod.is-active ul li:nth-child(4)::before { animation-delay: 1.2s; }

    /* ---- Follow one batch: token travels the rail, current step lights up ---- */
    .has-cycle > .d-flow__progress span { animation: none; transform: none; width: calc((var(--ci, 0) + 1) / var(--cn, 9) * 100%); transition: width 0.9s var(--ease-out); position: relative; }
    .d-flow.is-cycling li { transition: border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), transform 0.6s var(--ease-out), background-color 0.6s var(--ease-out); }
    .d-flow.is-cycling li.is-past { border-color: #b9dff1; }
    .d-flow.is-cycling li.is-past .d-flow__n { background: var(--tint); color: var(--blue); }
    .d-flow.is-cycling li.is-active { border-color: var(--sky); box-shadow: 0 22px 44px -24px rgb(1 160 222 / 0.55); transform: translateY(-4px); background: linear-gradient(180deg, #f2fafe, #fff 60%); }
    .d-flow.is-cycling li.is-active .d-flow__n { background: var(--navy); color: #fff; animation: d-q-pop 0.6s var(--ease-out); }
}
/* batch token sits at the end of the rail fill (static fallback hides it) */
.d-flow__progress { overflow: visible; position: relative; margin-bottom: calc(var(--space-l) + 1.2rem); }
.d-flow__token { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .has-cycle > .d-flow__progress .d-flow__token { display: block; position: absolute; right: 0; top: 50%; transform: translate(calc((1 - var(--ci, 0) / (var(--cn, 9) - 1)) * 50%), -50%); transition: transform 0.9s var(--ease-out); padding: 0.25rem 0.65rem; border-radius: var(--radius-pill);
        background: var(--navy); color: #fff; font-style: normal; font-size: 0.72rem; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 4px #fff, 0 6px 16px rgb(1 160 222 / 0.45); }
    .has-cycle > .d-flow__progress .d-flow__token::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.4rem; border-radius: 50%; background: var(--sky); animation: d-blink 1.4s ease-in-out infinite; }

    /* ---- Industries: continuous slow drift on every photo + featured card in turn ---- */
    .d-ind img { animation: d-drift-photo 16s var(--ease-in-out) infinite alternate; }
    .d-ind:nth-child(2) img { animation-delay: -4s; } .d-ind:nth-child(3) img { animation-delay: -8s; } .d-ind:nth-child(4) img { animation-delay: -12s; }
    .d-ind__grid.is-cycling .d-ind a { transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
    .d-ind__grid.is-cycling .d-ind.is-active a { transform: translateY(-8px); box-shadow: 0 30px 60px -26px rgb(22 27 51 / 0.55), 0 0 0 2px var(--sky); }
    .d-ind__grid.is-cycling .d-ind.is-active .d-ind__more { opacity: 1; transform: none; }

    /* ---- Compliance regions: one highlighted at a time ---- */
    .d-regions__list.is-cycling a { transition: border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), background-color 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
    .d-regions__list.is-cycling li.is-active a { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--sky), var(--shadow-2); background: #f6fbfe; transform: translateX(6px); }
    .d-regions__list.is-cycling li.is-active .d-arrow { animation: d-nudge 1.2s var(--ease-in-out) infinite; }

    /* ---- Testimonials: featured quote with reading-time bar ---- */
    .d-quote { position: relative; overflow: hidden; }
    .d-quote::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left; }
    .d-quotes__grid.is-cycling .d-quote { transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
    .d-quotes__grid.is-cycling .d-quote.is-active { transform: translateY(-8px); box-shadow: 0 30px 60px -28px rgb(22 27 51 / 0.35); }
    .d-quotes__grid.is-running .d-quote.is-active::before { animation: d-progress var(--cycle, 6.5s) linear both; }
    .d-quotes__grid.is-cycling .d-quote.is-active .d-quote__head { color: var(--blue); transition: color 0.6s var(--ease-out); }

    /* ---- Roadmap: rail fills phase by phase ---- */
    .d-road__list.is-cycling li { transition: border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
    .d-road__list.is-cycling li.is-past { border-color: #b9dff1; }
    .d-road__list.is-cycling li.is-active { border-color: var(--sky); box-shadow: 0 22px 44px -24px rgb(1 160 222 / 0.5); transform: translateY(-6px); }
    .d-road__list.is-cycling li.is-active > span { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--blue); color: #fff; animation: d-q-pop 0.6s var(--ease-out); }

    /* ---- Final CTA: faint grid drifting behind the copy ---- */
    .d-cta { position: relative; overflow: hidden; }
    .d-cta::before { content: ""; position: absolute; inset: -60px; pointer-events: none; opacity: 0.18;
        background-image: linear-gradient(rgb(255 255 255 / 0.25) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.25) 1px, transparent 1px);
        background-size: 48px 48px; mask-image: radial-gradient(60% 80% at 70% 50%, #000, transparent); -webkit-mask-image: radial-gradient(60% 80% at 70% 50%, #000, transparent);
        animation: d-grid-drift 24s linear infinite; }
    .d-cta > .container { position: relative; }
}
/* roadmap rail (static = full) */
.d-road__rail { height: 4px; margin-bottom: var(--space-m); border-radius: 4px; background: var(--tint); overflow: hidden; }
.d-road__rail span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--sky)); }
@media (prefers-reduced-motion: no-preference) {
    .has-cycle > .d-road__rail span { width: calc((var(--ci, 0) + 1) / var(--cn, 4) * 100%); transition: width 0.9s var(--ease-out); }
}

@keyframes d-shine { 0%, 15% { background-position: 120% 0; } 55%, 100% { background-position: -20% 0; } }
@keyframes d-tick { 0% { transform: scale(1); } 40% { transform: scale(1.8); background: var(--blue); } 100% { transform: scale(1.4); background: #17663a; } }
@keyframes d-drift-photo { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -2%); } }
@keyframes d-nudge { 50% { transform: translateX(5px); } }
@keyframes d-grid-drift { to { background-position: 48px 48px, 48px 48px; } }

/* ---- Error pages (404 / 410) ---- */
.d-error { min-height: 62vh; display: grid; align-items: center; }
.d-error__inner { position: relative; display: grid; gap: var(--space-m); justify-items: start; }
.d-error__inner > * { max-width: 46rem; }
.d-error h1 { font-size: var(--step-5); line-height: 1.05; color: #fff; }

/* Follow one batch — real screen of the active step (Phase 12) */
.d-batch__screens { max-width: max(80rem, 62vw); margin: var(--space-l) auto 0; }
.d-batch__screen[hidden] { display: none; }
.d-batch__screen img { width: 100%; height: auto; display: block; }
.d-batch__screen figcaption { margin-top: 0.75rem; text-align: center; color: var(--text-2); font-size: var(--step--1); }
.d-hero__tour { margin-top: 0.85rem; font-size: var(--step--1); }
.d-hero__tour a { color: var(--sky-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.d-hero__tour a:hover { color: #fff; }
@media (min-width: 64rem) {
    .d-batch__layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: var(--space-l); align-items: start; }
    .d-batch__layout .d-flow { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
    .d-batch__layout .d-flow > li { padding: 0.9rem 1.1rem; }
    .d-batch__layout .d-flow > li p { font-size: var(--step--1); }
    .d-batch__layout .d-batch__screens { position: sticky; top: 6rem; margin-top: 0; }
}

/* ---- Customer strip (2026-11-03): readable cards — name + who they are — instead of the shimmer text ---- */
.d-trust { padding-block: var(--space-l); }
.d-trust__inner { gap: var(--space-m); }
.d-trust h2 { font-size: var(--step-0); color: var(--text); text-align: center; }
.d-trust ul.d-trust__names { display: grid; gap: var(--space-s); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .d-trust ul.d-trust__names { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .d-trust__inner { grid-template-columns: minmax(0, 1fr); } .d-trust ul.d-trust__names { justify-content: initial; } }
.d-trust ul.d-trust__names li { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); color: var(--text); font-size: var(--step-0); letter-spacing: 0; }
.d-trust__mark { display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tint); color: var(--blue); font-weight: 700; font-size: 0.85rem; }
.d-trust__who { display: grid; line-height: 1.3; }
.d-trust__who strong { font-weight: 700; color: var(--navy); }
.d-trust__who span { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }