/*--------------------------------------------------------------
# DotInventa - public landing page
#
# Loaded by Views/Pages/Landing.cshtml only, on top of dotinventa.css, whose
# tokens every colour here comes from so both themes stay in sync.
#
# Three rules this file keeps to:
#
#   1. Depth is CSS, not a library. The hero is a perspective stage: a ring
#      carries the channel tiles around the core and each tile counter-rotates
#      by the same amount, so it orbits in 3D while its face keeps looking at
#      the reader.
#
#   2. Motion is a courtesy. Every animation here is switched off under
#      prefers-reduced-motion, and the page is readable and complete without a
#      single frame of it.
#
#   3. Nothing is hidden unless the script that reveals it is running.
#      landing.js marks the document first; the reveal styles hang off that
#      mark, so a visitor with no JavaScript gets the whole page at once.
--------------------------------------------------------------*/

.di-landing {
    --dl-wrap: 1180px;
    --dl-glass: color-mix(in srgb, var(--surface-color) 72%, transparent);
    --dl-glass-line: var(--hairline-strong);
    --dl-radius: 18px;

    background: var(--background-color);
    color: var(--default-color);
    overflow-x: hidden;
}

html[data-theme="light"] .di-landing {
    --dl-glass: color-mix(in srgb, #ffffff 78%, transparent);
}

.di-landing .dl-wrap {
    width: 100%;
    max-width: var(--dl-wrap);
    margin-inline: auto;
    padding-inline: 24px;
}

.di-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--surface-color);
    color: var(--text-strong);
    border-radius: 0 0 10px 0;
}

.di-skip:focus { left: 0; }

/* ======================================================================= top ==== */

.dl-top {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--background-color) 72%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
}

.dl-top.is-stuck {
    border-bottom-color: var(--hairline);
    background: color-mix(in srgb, var(--background-color) 88%, transparent);
}

.dl-top-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 68px;
}

.dl-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 0 0 auto;
}

.dl-brand .wordmark,
.dl-foot-brand .wordmark {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-strong);
    letter-spacing: -.01em;
}

.dl-brand .wordmark span,
.dl-foot-brand .wordmark span { color: var(--emerald); }

.dl-links {
    display: flex;
    gap: 6px;
    margin-inline: auto;
}

.dl-links a {
    font-family: var(--nav-font);
    font-size: .92rem;
    color: var(--text-soft);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color .2s ease, background .2s ease;
}

.dl-links a:hover {
    color: var(--text-strong);
    background: var(--hover-bg);
}

.dl-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.dl-cta { white-space: nowrap; }

/* ====================================================================== hero ==== */

.dl-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(48px, 7vw, 104px) clamp(56px, 8vw, 120px);
    overflow: hidden;
}

.dl-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(24px, 3.4vw, 56px);
    align-items: center;
}

/* Past this width the scene may lean into the page's own margin, which is where it looks its best
   and costs the copy nothing. */
@media (min-width: 1260px) {
    .dl-hero-inner { margin-right: -5%; }
}

/* ---- background: slow aurora and a perspective floor ---- */

.dl-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 120%;
    z-index: -2;
    pointer-events: none;
    filter: blur(60px);
    opacity: .75;
}

.dl-aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.dl-aurora .a1 {
    width: 46vw; height: 46vw;
    left: 42%; top: 2%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-color) 45%, transparent), transparent 68%);
    animation: dl-drift-a 26s ease-in-out infinite alternate;
}

.dl-aurora .a2 {
    width: 34vw; height: 34vw;
    left: 4%; top: 28%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--emerald) 34%, transparent), transparent 70%);
    animation: dl-drift-b 32s ease-in-out infinite alternate;
}

.dl-aurora .a3 {
    width: 28vw; height: 28vw;
    right: 2%; bottom: 4%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--status-info) 24%, transparent), transparent 72%);
    animation: dl-drift-a 38s ease-in-out infinite alternate-reverse;
}

html[data-theme="light"] .dl-aurora { opacity: .5; }

.dl-grid-floor {
    position: absolute;
    inset: auto 0 -10% 0;
    height: 46%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--hairline) 1px, transparent 1px),
        linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(62deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}

/* ---- copy ---- */

.dl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 7px 14px 7px 11px;
    border: 1px solid var(--dl-glass-line);
    border-radius: 999px;
    background: var(--dl-glass);
    color: var(--text-soft);
    font-family: var(--nav-font);
    font-size: .82rem;
    letter-spacing: .01em;
}

.dl-eyebrow .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--emerald) 70%, transparent);
    animation: dl-pulse 2.6s ease-out infinite;
}

.dl-hero h1 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(2.3rem, 5.4vw, 4.05rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    color: var(--text-strong);
    margin: 0 0 20px;
}

.dl-hero h1 .grad {
    background: linear-gradient(100deg, var(--emerald), var(--accent-color) 55%, color-mix(in srgb, var(--status-info) 70%, var(--emerald)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dl-lede {
    max-width: 48ch;
    margin: 0 0 28px;
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.68;
    color: var(--text-soft);
}

.dl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.di-landing .btn-lg {
    font-size: 1rem;
    padding: 13px 24px;
    border-radius: 12px;
}

.di-landing .btn-brand.btn-lg { box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-color) 22%, transparent); }

.dl-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nav-font);
    font-size: .88rem;
    color: var(--text-muted);
}

.dl-trust i { font-size: 1.05rem; color: var(--text-soft); }

/* ---- the 3D stage ---- */

.dl-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 340px;
    perspective: 1250px;
    perspective-origin: 50% 46%;
    display: grid;
    place-items: center;

    /* The scene is sized from this box rather than from the viewport, so the orbit stays inside its
       own column at every width instead of being tuned breakpoint by breakpoint. */
    container-type: inline-size;
    --dl-orbit-r: min(198px, 36cqi);
    --dl-tile-w: min(148px, 27cqi);
    --dl-core-w: min(150px, 29cqi);

    /* How far the orbit sits below the core. A length, not a percentage: the ring is a 1px point,
       so a percentage of it would move nothing. */
    --dl-ring-drop: min(92px, 17cqi);
}

.dl-stage-tilt {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;

    /* Set by landing.js from the pointer, within a few degrees. The base tilt is what makes the
       ring read as an ellipse rather than a line. */
    --dl-tilt-x: 0deg;
    --dl-tilt-y: 0deg;
    transform: rotateX(calc(-11deg + var(--dl-tilt-y))) rotateY(var(--dl-tilt-x));
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.dl-core,
.dl-ring,
.dl-orbit-floor {
    position: absolute;
    inset: 0;
    margin: auto;
    transform-style: preserve-3d;
}

/* The core floats above the ring rather than sitting in it, so the tile passing nearest the reader
   crosses below it instead of covering it. */
.dl-core {
    width: var(--dl-core-w);
    height: var(--dl-core-w);
    transform: translateY(-48%) translateZ(26px);
}

.dl-core-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    padding: 14px;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--emerald) 34%, var(--dl-glass-line));
    background:
        radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
        var(--dl-glass);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--accent-color) 18%, transparent), inset 0 1px 0 var(--hairline-strong);
    backdrop-filter: blur(8px);
    transform: rotateX(11deg);
}

.dl-core-label {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-strong);
}

.dl-core-sub {
    font-family: var(--nav-font);
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dl-core-halo {
    position: absolute;
    inset: -36%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--emerald) 26%, transparent), transparent 62%);
    filter: blur(14px);
    animation: dl-breathe 7s ease-in-out infinite;
}

.dl-core-ring {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--emerald) 40%, transparent);
    animation: dl-spin 24s linear infinite;
}

/* The orbit: ring spins, each tile counters it so its face stays square to the reader. */

.dl-ring {
    width: 1px;
    height: 1px;
    transform: translateY(var(--dl-ring-drop));
    animation: dl-orbit 34s linear infinite;
}

.dl-sat {
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transform: rotateY(var(--angle)) translateZ(var(--dl-orbit-r));

    /* Every turn in this chain is about the ring's own axis, not about the middle of whatever box
       the browser sized for the tile. Without it the counter-rotations swing each tile half a tile
       sideways and the orbit reaches well past the stage. */
    transform-origin: 0 0;
}

.dl-sat-fix,
.dl-sat-spin {
    transform-style: preserve-3d;
    transform-origin: 0 0;
}

/* Undo this tile's own place on the ring, then undo the ring's turn, so the tile rides the orbit
   with its face square to the reader. Both animations start together and share a duration, which is
   what keeps them in step. */
.dl-sat-fix { transform: rotateY(calc(-1 * var(--angle))); }

.dl-sat-spin { animation: dl-orbit-back 34s linear infinite; }

.dl-tile {
    width: var(--dl-tile-w);
    transform: translate(-50%, -50%) rotateX(11deg);   /* centred on its orbit point, squared to the stage */
    display: grid;
    gap: 7px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--dl-glass-line);
    background: var(--dl-glass);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);

    /* Depth. A tile fades as it swings to the far side of the orbit, which is what stops the back
       tile from reading as a second card stuck to the core. --t is the tile's place on the ring as a
       fraction of a turn: a negative delay of that fraction puts every tile at its own point of the
       one shared fade. --dim is the same value standing still, for when the animation is off. */
    opacity: var(--dim, 1);
    animation: dl-depth 34s linear infinite;
    animation-delay: calc(var(--t, 0) * -34s);
}

.dl-tile .ico {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--emerald) 16%, transparent);
    color: var(--emerald);
    font-size: 1.05rem;
}

.dl-tile strong {
    font-family: var(--heading-font);
    font-size: .98rem;
    color: var(--text-strong);
}

/* "kv", not "row": Bootstrap owns .row globally and would hand every child width: 100%, which puts
   the value outside the tile. Same reason the icon badge is .ico rather than .mark. */
.dl-tile .kv {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: var(--nav-font);
    font-size: .78rem;
}

.dl-tile .k { color: var(--text-muted); white-space: nowrap; }
.dl-tile .v { color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-tile .v.win { color: var(--status-good-text); font-weight: 600; }

.dl-orbit-floor {
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 58%);
    transform: translateY(150px) rotateX(78deg);
    filter: blur(6px);
}

.dl-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--dl-glass-line);
    background: var(--dl-glass);
    backdrop-filter: blur(8px);
    font-family: var(--nav-font);
    font-size: .76rem;
    color: var(--text-soft);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
}

.dl-chip i { color: var(--emerald); }
/* Parked at the corners, where the orbit does not reach. */
.dl-chip.c1 { left: 1%;  top: 9%; transform: translateZ(80px); animation: dl-float-a 9s ease-in-out infinite; }
.dl-chip.c2 { right: 1%; top: 1%;  transform: translateZ(60px); animation: dl-float-b 11s ease-in-out infinite; }
.dl-chip.c3 { left: 3%;   bottom: 3%; transform: translateZ(100px); animation: dl-float-b 8s ease-in-out infinite reverse; }

/* ================================================================== sections ==== */

.dl-section {
    position: relative;
    padding-block: clamp(60px, 8vw, 116px);
}

.dl-section-alt {
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-deep) 70%, transparent) 14%, color-mix(in srgb, var(--surface-deep) 70%, transparent) 86%, transparent);
}

.dl-head {
    max-width: 760px;
    margin: 0 auto clamp(34px, 5vw, 60px);
    text-align: center;
}

.dl-kicker {
    margin: 0 0 12px;
    font-family: var(--nav-font);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--emerald);
}

.dl-section h2,
.dl-close h2 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.3vw, 2.5rem);
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--text-strong);
    margin: 0 0 14px;
}

.dl-sub {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-soft);
}

/* ---- how it works ---- */

.dl-flow {
    display: grid;

    /* Six columns for five steps: three take two columns each, then the last two take three, so the
       final row fills its width instead of leaving the hole a sixth step would have filled. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dl-step;
}

.dl-step {
    position: relative;
    grid-column: span 2;
    padding: 22px;
    border-radius: var(--dl-radius);
    border: 1px solid var(--hairline);
    background: var(--dl-glass);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.dl-step:nth-child(4),
.dl-step:nth-child(5) { grid-column: span 3; }

/* The art scales with the card, so on the two wide ones it is held back to roughly the width it
   has in the first row. Two illustrations twice the size of the other three read as a mistake. */
.dl-step:nth-child(4) .art,
.dl-step:nth-child(5) .art { max-width: 420px; margin-inline: auto; }

/* Two across, with the odd one out taking the full width. */
@media (max-width: 1023px) {
    .dl-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dl-step,
    .dl-step:nth-child(4) { grid-column: span 1; }
    .dl-step:nth-child(5) { grid-column: span 2; }
}

.dl-step:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--emerald) 34%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.dl-step .n {
    position: absolute;
    top: -14px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(160deg, var(--accent-color), var(--emerald));
    color: #04150a;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .92rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.dl-step .art {
    margin: 12px 0 16px;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--surface-deep) 60%, transparent);
    overflow: hidden;
}

.dl-step .art svg {
    display: block;
    width: 100%;
    height: auto;
}

.dl-step h3 {
    font-family: var(--heading-font);
    font-size: 1.1rem;
    color: var(--text-strong);
    margin: 0 0 8px;
}

.dl-step p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.66;
    color: var(--text-soft);
}

/* ---- the step illustrations ---- */

.dl-step svg .s-win { fill: color-mix(in srgb, var(--surface-color) 90%, transparent); stroke: var(--hairline-strong); }
.dl-step svg .s-bar { fill: color-mix(in srgb, var(--emerald) 10%, transparent); }
.dl-step svg .s-dot { fill: var(--text-faint); }
.dl-step svg .s-img { fill: color-mix(in srgb, var(--emerald) 14%, transparent); stroke: var(--hairline); }
.dl-step svg .s-line { fill: var(--hairline-strong); }
.dl-step svg .s-fill { fill: var(--emerald); }
.dl-step svg .s-chip { fill: color-mix(in srgb, var(--emerald) 18%, transparent); stroke: var(--emerald); }
.dl-step svg .s-knob { fill: var(--emerald); animation: dl-slide 6s ease-in-out infinite; }

.dl-step svg .s-pick rect {
    fill: color-mix(in srgb, var(--accent-color) 18%, transparent);
    stroke: var(--emerald);
    stroke-dasharray: 3 3;
    animation: dl-dash 4s linear infinite;
}

.dl-step svg .s-pick text,
.dl-step svg .s-formula {
    fill: var(--text-strong);
    font-family: var(--nav-font);
    font-size: 8px;
    font-weight: 600;
}

.dl-step svg .s-formula { font-size: 10px; }
.dl-step svg .s-formula.sm { font-size: 9px; fill: var(--text-soft); }

.dl-step svg .s-scan {
    stroke: var(--emerald);
    stroke-width: 1.5;
    opacity: .7;
    animation: dl-scan 4.5s ease-in-out infinite;
}

.dl-step svg .s-shield path { fill: color-mix(in srgb, var(--emerald) 20%, transparent); stroke: var(--emerald); }
.dl-step svg .s-shield .tick { fill: none; stroke: var(--emerald); stroke-width: 2; stroke-linecap: round; }

.dl-step svg .s-wire {
    fill: none;
    stroke: var(--emerald);
    stroke-width: 1.6;
    stroke-dasharray: 5 7;
    opacity: .75;
    animation: dl-flow 3s linear infinite;
}

.dl-step svg .s-wire.d2 { animation-delay: .3s; }
.dl-step svg .s-wire.d3 { animation-delay: .6s; }
.dl-step svg .s-wire.d4 { animation-delay: .9s; }

.dl-step svg .s-node { fill: color-mix(in srgb, var(--emerald) 30%, transparent); stroke: var(--emerald); animation: dl-blink 3s ease-in-out infinite; }
.dl-step svg .s-node.d2 { animation-delay: .3s; }
.dl-step svg .s-node.d3 { animation-delay: .6s; }
.dl-step svg .s-node.d4 { animation-delay: .9s; }

.dl-step svg .s-band {
    fill: color-mix(in srgb, var(--emerald) 8%, transparent);
    stroke: color-mix(in srgb, var(--emerald) 30%, transparent);
    stroke-dasharray: 4 4;
}

.dl-step svg .s-price {
    fill: none;
    stroke: var(--emerald);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: dl-draw 5s ease-in-out infinite;
}

.dl-step svg .s-head { fill: var(--emerald); animation: dl-blink 2.4s ease-in-out infinite; }
.dl-step svg .s-cap { fill: var(--text-muted); font-family: var(--nav-font); font-size: 7px; }
.dl-step svg .s-parcel rect { fill: color-mix(in srgb, var(--accent-color) 16%, transparent); stroke: var(--emerald); }
.dl-step svg .s-parcel .tape { stroke: var(--emerald); stroke-width: 1.4; opacity: .8; }

.dl-step svg .s-parcel .track {
    stroke: var(--emerald);
    stroke-width: 1.6;
    stroke-dasharray: 4 6;
    animation: dl-flow 2.4s linear infinite;
}

.dl-step svg rect,
.dl-step svg circle,
.dl-step svg path { stroke-width: 1; }

.dl-step svg .s-win,
.dl-step svg .s-img,
.dl-step svg .s-chip,
.dl-step svg .s-band { stroke-width: 1.2; }

/* ---- channels ---- */

.dl-channels {
    display: grid;

    /* Four channels, so the count is fixed rather than fitted: two by two, and four across once
       there is room for all of them. auto-fit drops to three and leaves Walmart on a row of its own. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (min-width: 1140px) {
    .dl-channels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dl-chan {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--dl-radius);
    border: 1px solid var(--hairline);
    background: var(--dl-glass);

    --dl-rx: 0deg;
    --dl-ry: 0deg;
    transform: perspective(900px) rotateX(var(--dl-rx)) rotateY(var(--dl-ry));
    transform-style: preserve-3d;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.dl-chan:hover {
    border-color: color-mix(in srgb, var(--emerald) 38%, transparent);
    box-shadow: 0 22px 50px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.dl-chan .shine {
    position: absolute;
    inset: -40% -10%;
    background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--emerald) 14%, transparent) 50%, transparent 60%);
    opacity: 0;
    transition: opacity .3s ease, transform .6s ease;
    transform: translateX(-30%);
    pointer-events: none;
}

.dl-chan:hover .shine { opacity: 1; transform: translateX(30%); }

.dl-chan header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dl-chan header i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--emerald) 14%, transparent);
    color: var(--emerald);
    font-size: 1.2rem;
}

.dl-chan h3 {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 1.15rem;
    color: var(--text-strong);
}

.dl-chan p {
    margin: 0 0 16px;
    font-size: .94rem;
    line-height: 1.64;
    color: var(--text-soft);
}

.dl-chan .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-chan .tags li {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--hairline-strong);
    background: color-mix(in srgb, var(--surface-deep) 60%, transparent);
    font-family: var(--nav-font);
    font-size: .74rem;
    color: var(--text-muted);
}

/* ---- freshness split ---- */

.dl-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
}

.dl-split h2 { text-align: left; }

.dl-points {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.dl-points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .96rem;
    color: var(--text-soft);
}

.dl-points i { color: var(--emerald); font-size: 1.05rem; line-height: 1.5; }

.dl-panel {
    padding: 18px;
    border-radius: var(--dl-radius);
    border: 1px solid var(--hairline-strong);
    background: var(--dl-glass);
    box-shadow: var(--shadow-lg);
}

.dl-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dl-panel-top .t {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--text-strong);
}

.dl-mock {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nav-font);
}

.dl-mock td {
    padding: 12px 8px;
    border-top: 1px solid var(--hairline);
    font-size: .88rem;
    color: var(--text-soft);
    vertical-align: middle;
}

.dl-mock tr:first-child td { border-top: 0; }
.dl-mock strong { display: block; color: var(--text-strong); font-weight: 600; }
.dl-mock .sub { font-size: .76rem; color: var(--text-muted); }
.dl-mock .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); }

.dl-mock tr.held {
    background: color-mix(in srgb, var(--status-warn) 8%, transparent);
    box-shadow: inset 2px 0 0 var(--status-warn-text);
}

.dl-mock .pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .74rem;
    white-space: nowrap;
}

.dl-mock .pill.fresh { background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good-text); animation: dl-blink 3.4s ease-in-out infinite; }
.dl-mock .pill.aging { background: color-mix(in srgb, var(--status-warn) 15%, transparent); color: var(--status-warn-text); }
.dl-mock .pill.stale { background: color-mix(in srgb, var(--status-bad) 15%, transparent); color: var(--status-bad-text); }

.dl-panel-note {
    display: flex;
    gap: 9px;
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--status-warn) 10%, transparent);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.dl-panel-note i { color: var(--status-warn-text); }

/* ---- features ---- */

.dl-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.dl-features article {
    padding: 24px;
    border-radius: var(--dl-radius);
    border: 1px solid var(--hairline);
    background: var(--dl-glass);
    transition: transform .3s ease, border-color .3s ease;
}

.dl-features article:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--emerald) 30%, transparent);
}

.dl-features i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--emerald) 13%, transparent);
    color: var(--emerald);
    font-size: 1.2rem;
}

.dl-features h3 {
    margin: 0 0 8px;
    font-family: var(--heading-font);
    font-size: 1.06rem;
    color: var(--text-strong);
}

.dl-features p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.64;
    color: var(--text-soft);
}

/* ---- closing ---- */

.dl-close {
    position: relative;
    padding-block: clamp(64px, 9vw, 130px);
    overflow: hidden;
}

.dl-close-inner {
    position: relative;
    text-align: center;
}

.dl-close-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(780px, 90vw);
    height: 420px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 66%);
    filter: blur(40px);
    z-index: -1;
    animation: dl-breathe 9s ease-in-out infinite;
}

.dl-close p {
    max-width: 62ch;
    margin: 0 auto 26px;
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--text-soft);
}

.dl-close .dl-hero-actions { justify-content: center; margin-bottom: 0; }

/* ==================================================================== footer ==== */

.dl-foot {
    border-top: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--surface-deep) 70%, transparent);
    padding-block: 32px;
}

.dl-foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}

.dl-foot-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dl-foot-brand .line {
    display: block;
    font-family: var(--nav-font);
    font-size: .8rem;
    color: var(--text-muted);
}

.dl-foot-links {
    display: flex;
    gap: 18px;
    margin-inline: auto;
}

.dl-foot-links a {
    font-family: var(--nav-font);
    font-size: .88rem;
    color: var(--text-soft);
    text-decoration: none;
}

.dl-foot-links a:hover { color: var(--emerald); }

.dl-foot-note {
    margin: 0;
    font-family: var(--nav-font);
    font-size: .8rem;
    color: var(--text-faint);
}

/* ================================================================== reveals ==== */

/* Only once the script is in charge: no JavaScript means no hidden sections. */
html.dl-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--step-delay, 0ms);
}

html.dl-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* =================================================================== motion ==== */

@keyframes dl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* The drop rides in the keyframes because an animation replaces the element's own transform
   outright: a translateY on .dl-ring alone would be thrown away for as long as this runs. */
@keyframes dl-orbit {
    from { transform: translateY(var(--dl-ring-drop)) rotateY(0deg); }
    to   { transform: translateY(var(--dl-ring-drop)) rotateY(360deg); }
}
@keyframes dl-orbit-back { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }

@keyframes dl-depth {
    0%   { opacity: 1; }
    50%  { opacity: .34; }
    100% { opacity: 1; }
}

@keyframes dl-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--emerald) 60%, transparent); }
    70%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes dl-breathe {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: .95; transform: scale(1.06); }
}

@keyframes dl-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-6%, 5%, 0) scale(1.12); }
}

@keyframes dl-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.08); }
    100% { transform: translate3d(7%, -6%, 0) scale(1); }
}

@keyframes dl-float-a {
    0%, 100% { transform: translateZ(80px) translateY(0); }
    50%      { transform: translateZ(80px) translateY(-14px); }
}

@keyframes dl-float-b {
    0%, 100% { transform: translateZ(60px) translateY(0); }
    50%      { transform: translateZ(60px) translateY(12px); }
}

@keyframes dl-dash { to { stroke-dashoffset: -12; } }
@keyframes dl-flow { to { stroke-dashoffset: -24; } }

@keyframes dl-scan {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: .8; }
    85%  { opacity: .8; }
    100% { transform: translateY(46px); opacity: 0; }
}

@keyframes dl-slide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(22px); }
}

@keyframes dl-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

@keyframes dl-draw {
    0%   { stroke-dashoffset: 220; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

/* ================================================================ responsive ==== */

@media (max-width: 991px) {
    .dl-hero-inner,
    .dl-split { grid-template-columns: minmax(0, 1fr); }

    .dl-links { display: none; }
    .dl-brand { margin-inline-end: auto; }

    /* The copy leads on a narrow screen: a square of orbit above it would push the headline, which
       is the whole point of the page, below the first screenful.
       width, because auto inline margins beat stretch alignment and leave the stage at its
       shrink-to-fit size - and every layer in it is absolutely positioned, so that size is zero and
       only min-height holds the box up. */
    .dl-stage {
        width: 100%;
        min-height: 300px;
        max-width: 480px;
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .di-landing .dl-wrap { padding-inline: 16px; }

    .dl-hero { padding-block: 28px 56px; }

    .dl-stage {
        min-height: 250px;
        --dl-orbit-r: min(158px, 37cqi);
        --dl-tile-w: min(116px, 27cqi);
        --dl-core-w: min(112px, 26cqi);
        --dl-ring-drop: min(96px, 22cqi);
    }

    .dl-tile { padding: 11px; border-radius: 13px; }
    .dl-tile .ico { width: 26px; height: 26px; font-size: .9rem; }
    .dl-tile strong { font-size: .84rem; }
    .dl-tile .kv { font-size: .69rem; }
    .dl-core-face { border-radius: 20px; }
    .dl-core-face img { width: 36px; height: 36px; }
    .dl-core-label { font-size: .84rem; }
    .dl-core-sub { display: none; }
    .dl-chip { font-size: .7rem; padding: 6px 10px; }
    /* Further in than on a wide screen: translateZ pushes a chip outward from the middle of the
       stage, and at this size that is enough to put it under the edge of the page. */
    .dl-chip.c1 { top: 2%; left: 6%; }
    .dl-chip.c2 { right: 6%; top: 0; }
    .dl-chip.c3 { bottom: 0; left: 8%; }

    .di-landing .btn-lg { padding: 12px 18px; font-size: .95rem; }
    .dl-hero-actions .btn-brand,
    .dl-hero-actions .btn-ghost { flex: 1 1 auto; justify-content: center; }

    /* One column, so no step or channel is left spanning two of them. */
    .dl-flow,
    .dl-channels { grid-template-columns: minmax(0, 1fr); }

    .dl-step,
    .dl-step:nth-child(4),
    .dl-step:nth-child(5) { grid-column: span 1; }

    .dl-foot-inner { flex-direction: column; align-items: flex-start; }
    .dl-foot-links { margin-inline: 0; }
}

/* Taller phones in landscape and anything short: the orbit must not crowd the copy. */
@media (max-height: 560px) and (max-width: 991px) {
    .dl-stage { min-height: 220px; }
}

/* ========================================================== reduced motion ==== */

@media (prefers-reduced-motion: reduce) {
    .di-landing *,
    .di-landing *::before,
    .di-landing *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }

    .dl-stage-tilt { transition: none; }

    /* The ring is frozen, so the tiles are placed where they read as a group rather than
       wherever frame zero happened to leave them. */
    .dl-ring { animation: none; }
    .dl-sat-spin { animation: none; }

    .dl-step svg .s-price { stroke-dashoffset: 0; }
    .dl-step svg .s-scan { opacity: .6; }

    html.dl-reveal [data-reveal] { opacity: 1; transform: none; }
}