/* DataEarners animated landing pages (/journey, /scan). Dark "HUD" theme on top of site.css.
   Prefix dl-. Every animation has a static end state under prefers-reduced-motion. */
body.dl { background: #04182e; color: #dbe6f7; }
body.dl main { overflow-x: clip; }
.dl { --dl-bg: #04182e; --dl-panel: rgba(13, 51, 96, .55); --dl-edge: rgba(120, 170, 255, .16); --dl-teal: #009D8D; --dl-teal-hi: #08BEC8; --dl-violet: #0874C9; --dl-red: #ff5d7a; --dl-amber: #ffb547; --dl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Header and footer go dark on these pages. */
body.dl .de-header { background: rgba(4, 24, 46, .72); border-bottom-color: var(--dl-edge); }
body.dl .de-header .nav-link { color: #c9d6ee; }
body.dl .de-header .nav-link:hover, body.dl .de-header .nav-link.active { background: rgba(0, 157, 141, .12); color: #fff; }
body.dl .de-logo { color: #fff !important; --de-mark-wallet: #fff; --de-mark-hole: #04182e; }
body.dl .navbar-toggler { filter: invert(1); }
body.dl .de-footer { background: #040919; border-top: 1px solid var(--dl-edge); }

/* ---------- Shared bits ---------- */
.dl-kicker { display: inline-flex; align-items: center; gap: .6rem; font: 600 .76rem/1 var(--dl-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dl-teal-hi); }
.dl-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dl-teal-hi); box-shadow: 0 0 0 0 rgba(8, 190, 200, .7); animation: dl-ping 1.8s infinite; }
@keyframes dl-ping { 70% { box-shadow: 0 0 0 10px rgba(8, 190, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(8, 190, 200, 0); } }
.dl h1, .dl h2, .dl h3 { color: #fff; }
.dl-grad { background: linear-gradient(92deg, var(--dl-teal-hi), #4f9fe0 60%, #0874C9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dl-muted { color: #93a5c6; }
.dl-glass { background: var(--dl-panel); border: 1px solid var(--dl-edge); border-radius: 22px; backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); }
.dl-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--dl-edge); background: rgba(255, 255, 255, .03); font-size: .85rem; color: #c9d6ee; }
.dl-chip i { color: var(--dl-teal-hi); }
.dl-note { font-size: .8rem; color: #7f91b3; }
.dl .btn-teal { box-shadow: 0 0 0 1px rgba(8, 190, 200, .4), 0 10px 40px -8px rgba(0, 157, 141, .7); position: relative; overflow: hidden; }
.dl .btn-teal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: dl-sheen 3.6s ease-in-out infinite; }
@keyframes dl-sheen { 60%, 100% { transform: translateX(120%); } }
.dl .btn-ghost { color: #dbe6f7; border-color: rgba(201, 214, 238, .35); }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].in { opacity: 1; transform: none; }

/* Terminal */
.dl-term { font: 500 .86rem/1.65 var(--dl-mono); color: #9ee4e9; background: rgba(2, 8, 22, .75); border: 1px solid var(--dl-edge); border-radius: 14px; padding: 1rem 1.1rem; min-height: 3.3rem; }
.dl-term .bar { display: flex; gap: 6px; margin-bottom: .6rem; }
.dl-term .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3a63; }
.dl-term .bar i:first-child { background: #ff5d7a; } .dl-term .bar i:nth-child(2) { background: #ffb547; } .dl-term .bar i:nth-child(3) { background: #08BEC8; }
.dl-term .ln { white-space: pre-wrap; }
.dl-term .ln .ok { color: var(--dl-teal-hi); } .dl-term .ln .warn { color: var(--dl-amber); } .dl-term .ln .dim { color: #5f7397; }
.dl-caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: var(--dl-teal-hi); animation: dl-blink 1s steps(2) infinite; }
@keyframes dl-blink { 50% { opacity: 0; } }

/* ---------- Hero ---------- */
.dl-hero { position: relative; min-height: calc(100vh - 70px); display: flex; align-items: center; padding: 5rem 0 4rem; isolation: isolate; }
.dl-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.dl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 25% 50%, rgba(4, 24, 46, .92), rgba(4, 24, 46, .25) 70%, transparent), linear-gradient(to bottom, transparent 70%, var(--dl-bg)); }
.dl-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; margin: 1.1rem 0 1.3rem; }
.dl-hero .lead { color: #b5c4de; font-size: 1.2rem; max-width: 38rem; }
.dl-hero .dl-term { max-width: 30rem; margin-top: 2rem; }
.dl-hud { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.dl-scrollcue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); font: .7rem var(--dl-mono); letter-spacing: .2em; color: #6f83a8; text-transform: uppercase; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.dl-scrollcue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--dl-teal-hi), transparent); animation: dl-drip 2s infinite; }
@keyframes dl-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Stages ---------- */
.dl-stage { position: relative; padding: 7rem 0; }
.dl-stage + .dl-stage { border-top: 1px solid rgba(120, 170, 255, .07); }
.dl-stage-num { font: 700 .8rem var(--dl-mono); letter-spacing: .2em; color: var(--dl-teal-hi); display: flex; align-items: center; gap: .8rem; }
.dl-stage-num::after { content: ""; flex: 0 0 60px; height: 1px; background: linear-gradient(90deg, var(--dl-teal-hi), transparent); }
.dl-stage h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; margin: 1rem 0 1.2rem; }
.dl-stage p { color: #a9b9d6; font-size: 1.06rem; }
.dl-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(8, 190, 200, .18), transparent); pointer-events: none; }

/* 01 — Redaction scanner */
.dl-scanner { position: relative; padding: 1.4rem; overflow: hidden; }
.dl-scanner-head { display: flex; justify-content: space-between; align-items: center; font: .75rem var(--dl-mono); color: #7f91b3; letter-spacing: .08em; margin-bottom: 1rem; text-transform: uppercase; }
.dl-scanner-head .live { color: var(--dl-red); } .dl-scanner.done .dl-scanner-head .live { color: var(--dl-teal-hi); }
.dl-rec { font: .86rem/1.5 var(--dl-mono); color: #c9d6ee; padding: .7rem .85rem; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .04); margin-bottom: .55rem; }
.dl-rec .k { color: #5f7397; }
.dl-pii { position: relative; display: inline-block; padding: 0 .2em; border-radius: 4px; transition: background .25s, color .25s; }
.dl-pii.hit { background: rgba(255, 93, 122, .22); color: #ffd0d9; box-shadow: 0 0 0 1px rgba(255, 93, 122, .6); animation: dl-glitch .35s steps(3) 1; }
.dl-pii.gone { background: rgba(0, 157, 141, .14); color: var(--dl-teal-hi); box-shadow: 0 0 0 1px rgba(8, 190, 200, .35); font-weight: 600; }
@keyframes dl-glitch { 33% { transform: translateX(-2px); filter: hue-rotate(90deg); } 66% { transform: translateX(2px); } }
.dl-beam { position: absolute; left: 0; right: 0; height: 70px; top: -80px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(8, 190, 200, .16) 70%, rgba(8, 190, 200, .9) 98%, transparent); mix-blend-mode: screen; }
.dl-scanner.run .dl-beam { animation: dl-beam 2.6s cubic-bezier(.5, 0, .5, 1) 2 alternate; }
@keyframes dl-beam { to { top: 100%; } }
.dl-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1rem; }
.dl-counter { padding: .8rem; border-radius: 12px; background: rgba(2, 8, 22, .55); border: 1px solid var(--dl-edge); text-align: center; }
.dl-counter b { display: block; font: 700 1.6rem var(--dl-mono); color: #fff; }
.dl-counter span { font-size: .72rem; color: #7f91b3; text-transform: uppercase; letter-spacing: .08em; }
.dl-counter.red b { color: var(--dl-red); } .dl-counter.teal b { color: var(--dl-teal-hi); }
.dl-replay { background: none; border: 1px solid var(--dl-edge); color: #93a5c6; border-radius: 999px; font: .72rem var(--dl-mono); padding: .25rem .7rem; }
.dl-replay:hover { color: #fff; border-color: var(--dl-teal); }

/* 02 — Structure matrix */
.dl-matrix-wrap { position: relative; padding: 1.4rem; }
.dl-matrix { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; }
.dl-matrix i { aspect-ratio: 1; border-radius: 4px; background: rgba(8, 116, 201, .1); transform: scale(.4); opacity: .25; }
.dl-matrix-wrap.in .dl-matrix i { animation: dl-cell 2.4s calc(var(--d) * 1ms) cubic-bezier(.2, .8, .2, 1) forwards; }
.dl-matrix i.c1 { --to: #009D8D; } .dl-matrix i.c2 { --to: #0874C9; } .dl-matrix i.c3 { --to: #08BEC8; } .dl-matrix i.c4 { --to: #2c4a8f; }
@keyframes dl-cell { 0% { transform: scale(.4) rotate(45deg); opacity: .2; background: #ff5d7a; } 45% { transform: scale(1.15); opacity: 1; background: #fff; } 100% { transform: scale(1); opacity: 1; background: var(--to); box-shadow: 0 0 12px -2px var(--to); } }
.dl-schema { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.dl-schema span { font: .78rem var(--dl-mono); padding: .3rem .65rem; border-radius: 8px; border: 1px dashed rgba(8, 190, 200, .35); color: #9ee4e9; opacity: 0; transform: translateY(8px); transition: .5s; }
.dl-matrix-wrap.in .dl-schema span { opacity: 1; transform: none; transition-delay: calc(1.6s + var(--i) * .15s); }

/* 03 — Value signal */
.dl-value { padding: 1.6rem; }
.dl-core { position: relative; width: min(280px, 70vw); aspect-ratio: 1; margin: 0 auto 1.5rem; }
.dl-core svg { width: 100%; height: 100%; overflow: visible; }
.dl-core .ring { fill: none; stroke: rgba(8, 116, 201, .15); stroke-width: 10; }
.dl-core .arc { fill: none; stroke: url(#dlArc); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 565; stroke-dashoffset: 565; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 2.4s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 10px rgba(8, 190, 200, .7)); }
.dl-value.in .dl-core .arc { stroke-dashoffset: 70; }
.dl-core .orbit { fill: none; stroke: rgba(8, 190, 200, .25); stroke-dasharray: 2 8; animation: dl-spin 30s linear infinite; transform-origin: 50% 50%; }
.dl-core .orbit.r { animation-direction: reverse; animation-duration: 45s; stroke: rgba(8, 116, 201, .3); }
@keyframes dl-spin { to { transform: rotate(360deg); } }
.dl-core .hex { fill: rgba(0, 157, 141, .12); stroke: var(--dl-teal-hi); stroke-width: 1.5; transform-origin: 50% 50%; animation: dl-breathe 3.4s ease-in-out infinite; }
@keyframes dl-breathe { 50% { transform: scale(1.06); fill: rgba(0, 157, 141, .22); } }
.dl-core-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dl-core-label b { font: 700 1.2rem var(--de-font); color: #fff; letter-spacing: .02em; }
.dl-core-label span { font: .68rem var(--dl-mono); color: #7f91b3; letter-spacing: .18em; text-transform: uppercase; }
.dl-bar { margin-bottom: .85rem; }
.dl-bar-top { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .35rem; color: #c9d6ee; }
.dl-bar-top em { font: normal .75rem var(--dl-mono); color: var(--dl-teal-hi); }
.dl-bar-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.dl-bar-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--dl-violet), var(--dl-teal-hi)); box-shadow: 0 0 14px rgba(8, 190, 200, .6); transition: width 1.8s cubic-bezier(.2, .8, .2, 1); }
.dl-value.in .dl-bar-fill { width: var(--v); }
.dl-bar:nth-child(2) .dl-bar-fill { transition-delay: .15s; } .dl-bar:nth-child(3) .dl-bar-fill { transition-delay: .3s; } .dl-bar:nth-child(4) .dl-bar-fill { transition-delay: .45s; } .dl-bar:nth-child(5) .dl-bar-fill { transition-delay: .6s; }

/* 04 — Secure line */
.dl-tunnel { padding: 1.4rem; }
.dl-tunnel svg { width: 100%; height: auto; display: block; }
.dl-tunnel .pipe { fill: none; stroke: rgba(8, 190, 200, .18); stroke-width: 18; stroke-linecap: round; }
.dl-tunnel .pipe-core { fill: none; stroke: rgba(8, 190, 200, .6); stroke-width: 1.5; stroke-dasharray: 6 8; animation: dl-flow 1.4s linear infinite; }
@keyframes dl-flow { to { stroke-dashoffset: -28; } }
.dl-tunnel .node circle.halo { fill: rgba(0, 157, 141, .08); stroke: rgba(8, 190, 200, .45); transform-box: fill-box; transform-origin: center; animation: dl-halo 2.6s ease-out infinite; }
@keyframes dl-halo { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.dl-tunnel .node circle.core { fill: #092849; stroke: var(--dl-teal-hi); stroke-width: 2; }
.dl-tunnel .node text { fill: #c9d6ee; font: 600 13px Inter, sans-serif; text-anchor: middle; }
.dl-tunnel .node text.sub { fill: #6f83a8; font: 10px var(--dl-mono); letter-spacing: .1em; }
.dl-tunnel .packet { fill: var(--dl-teal-hi); filter: drop-shadow(0 0 6px var(--dl-teal-hi)); }
.dl-tunnel .packet.v { fill: #b4bbff; filter: drop-shadow(0 0 6px #0874C9); }
.dl-tunnel text.icon, .dl-tunnel .node text.icon { fill: #fff; font: 900 18px "Font Awesome 6 Free"; text-anchor: middle; dominant-baseline: central; }
.dl-tunnel .dl-term { margin-top: 1rem; min-height: 11.5rem; }
.dl-team { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.dl-avatars { display: flex; }
.dl-avatars span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin-left: -10px; border: 2px solid #04182e; font: 700 .8rem var(--de-font); color: #04182e; }
.dl-avatars span:first-child { margin-left: 0; }

/* ---------- Apply (journey) ---------- */
.dl-apply { position: relative; padding: 7rem 0 6rem; background: radial-gradient(900px 500px at 80% 20%, rgba(0, 157, 141, .14), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(8, 116, 201, .14), transparent 60%); }
.dl-timeline { list-style: none; padding: 0; margin: 2rem 0; position: relative; }
.dl-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--dl-teal-hi), rgba(8, 116, 201, .3)); }
.dl-timeline li { position: relative; padding-left: 3rem; margin-bottom: 1.4rem; }
.dl-timeline li::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #092849; border: 2px solid var(--dl-teal-hi); font: 700 .8rem var(--dl-mono); color: var(--dl-teal-hi); }
.dl-timeline b { color: #fff; display: block; } .dl-timeline span { color: #93a5c6; font-size: .95rem; }
.dl-form { padding: 2rem; }
.dl-form .form-label { color: #c9d6ee; font-size: .88rem; font-weight: 500; }
.dl-form .form-control, .dl-form .form-select { background-color: rgba(2, 8, 22, .6); border: 1px solid rgba(120, 170, 255, .2); color: #fff; border-radius: 12px; padding: .65rem .85rem; }
.dl-form .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a5c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.dl-form .form-select option { background: #092849; }
.dl-form .form-control::placeholder { color: #5f7397; }
.dl-form .form-control:focus, .dl-form .form-select:focus { border-color: var(--dl-teal); box-shadow: 0 0 0 3px rgba(0, 157, 141, .25); background-color: rgba(2, 8, 22, .8); color: #fff; }
.dl-form .de-check { display: flex; gap: .55rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(120, 170, 255, .15); background: rgba(255, 255, 255, .02); color: #c9d6ee; cursor: pointer; transition: .2s; height: 100%; }
.dl-form .de-check:has(input:checked) { border-color: var(--dl-teal); background: rgba(0, 157, 141, .12); color: #fff; box-shadow: 0 0 18px -6px var(--dl-teal); }
.dl-form .form-check-label, .dl-form .de-note { color: #93a5c6; }
.dl-form .form-check-input { background-color: rgba(2, 8, 22, .6); border-color: rgba(120, 170, 255, .35); }
.dl-form .form-check-input:checked { background-color: var(--dl-teal); border-color: var(--dl-teal); }
.dl-form-sec { font: 600 .72rem var(--dl-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dl-teal-hi); margin: 1.6rem 0 .9rem; display: flex; align-items: center; gap: .7rem; }
.dl-form-sec::after { content: ""; flex: 1; height: 1px; background: var(--dl-edge); }
.dl-meter { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(2, 8, 22, .5); border: 1px solid var(--dl-edge); margin-bottom: 1.2rem; font-size: .82rem; color: #93a5c6; }
.dl-meter .dl-bar-track { flex: 1; }
.dl-meter .dl-bar-fill { width: var(--v, 0%); transition: width .6s; }
.dl-meter b { font: 700 .82rem var(--dl-mono); color: var(--dl-teal-hi); min-width: 3.2em; text-align: right; }
.dl-seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.dl-seg label { flex: 1 1 0; min-width: 110px; }
.dl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.dl-seg span { display: block; text-align: center; padding: .65rem .6rem; border-radius: 12px; border: 1px solid rgba(120, 170, 255, .2); color: #c9d6ee; cursor: pointer; font-size: .9rem; transition: .2s; }
.dl-seg span i { display: block; font-size: 1.05rem; margin-bottom: .25rem; color: #6f83a8; }
.dl-seg input:checked + span { border-color: var(--dl-teal); background: rgba(0, 157, 141, .14); color: #fff; box-shadow: 0 0 20px -6px var(--dl-teal); }
.dl-seg input:checked + span i { color: var(--dl-teal-hi); }
.dl-seg input:focus-visible + span { outline: 2px solid var(--dl-teal-hi); outline-offset: 2px; }
.dl-secure { display: flex; align-items: center; justify-content: center; gap: .5rem; font: .74rem var(--dl-mono); color: #6f83a8; margin-top: .9rem; }
.dl-secure i { color: var(--dl-teal-hi); }

/* Sticky CTA */
.dl-sticky { position: fixed; left: 50%; bottom: 1rem; z-index: 40; transform: translate(-50%, 140%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); display: flex; align-items: center; gap: 1rem; padding: .55rem .55rem .55rem 1.2rem; border-radius: 999px; background: rgba(5, 26, 49, .88); border: 1px solid var(--dl-edge); backdrop-filter: blur(12px); box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .8); white-space: nowrap; }
.dl-sticky.show { transform: translate(-50%, 0); }
.dl-sticky small { color: #c9d6ee; font-size: .85rem; }
.dl-sticky .btn { padding: .55rem 1.1rem; }
@media (max-width: 575px) { .dl-sticky small { display: none; } }

/* ---------- Scan wizard ---------- */
.dl-scan { position: relative; min-height: calc(100vh - 70px); padding: 3.5rem 0 5rem; isolation: isolate; }
.dl-scan canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
.dl-scan-head { text-align: center; max-width: 46rem; margin: 0 auto 2.2rem; }
.dl-scan-head h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.05; margin: 1rem 0; }
.dl-wiz { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; }
@media (max-width: 991px) { .dl-wiz { grid-template-columns: 1fr; } .dl-side { order: -1; } }
.dl-steps { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.dl-steps span { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.dl-steps span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dl-violet), var(--dl-teal-hi)); transform: scaleX(0); transform-origin: left; transition: transform .6s; }
.dl-steps span.on::after { transform: none; }
.dl-step { padding: 2rem; }
.js .dl-step:not(.active) { display: none; }
.dl-step.active { animation: dl-in .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes dl-in { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); } }
.dl-step h2 { font-size: 1.6rem; margin: .4rem 0 .4rem; }
.dl-step-tag { font: .72rem var(--dl-mono); letter-spacing: .16em; color: var(--dl-teal-hi); text-transform: uppercase; }
.dl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; margin-top: 1.3rem; }
.dl-tiles label { position: relative; }
.dl-tiles input { position: absolute; opacity: 0; pointer-events: none; }
.dl-tiles .t { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1rem; border-radius: 14px; border: 1px solid rgba(120, 170, 255, .16); background: rgba(255, 255, 255, .02); cursor: pointer; transition: .2s; color: #c9d6ee; font-size: .9rem; font-weight: 500; }
.dl-tiles .t i { font-size: 1.25rem; color: #6f83a8; transition: .2s; }
.dl-tiles .t:hover { border-color: rgba(8, 190, 200, .45); transform: translateY(-2px); }
.dl-tiles input:checked + .t { border-color: var(--dl-teal); background: linear-gradient(160deg, rgba(0, 157, 141, .2), rgba(8, 116, 201, .08)); color: #fff; box-shadow: 0 0 30px -8px var(--dl-teal); }
.dl-tiles input:checked + .t i { color: var(--dl-teal-hi); text-shadow: 0 0 12px var(--dl-teal-hi); }
.dl-tiles input:focus-visible + .t { outline: 2px solid var(--dl-teal-hi); outline-offset: 2px; }
.dl-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; gap: 1rem; }
.dl-back { background: none; border: 0; color: #93a5c6; font-weight: 500; }
.dl-back:hover { color: #fff; }
.dl-err { color: #ff9fb1; font-size: .85rem; min-height: 1.2em; margin-top: .6rem; }
.dl-side { padding: 1.4rem; align-self: start; position: sticky; top: 90px; }
.dl-side h3 { font: 600 .72rem var(--dl-mono); letter-spacing: .16em; text-transform: uppercase; color: #7f91b3; margin-bottom: 1rem; }
.dl-radar { position: relative; width: 170px; aspect-ratio: 1; margin: 0 auto 1.2rem; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 24px, rgba(8, 190, 200, .14) 24px 25px), radial-gradient(circle, rgba(0, 157, 141, .1), transparent 70%); border: 1px solid rgba(8, 190, 200, .3); overflow: hidden; }
.dl-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(8, 190, 200, .55), transparent 25%); animation: dl-spin 3s linear infinite; }
.dl-radar b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--dl-teal-hi); box-shadow: 0 0 10px var(--dl-teal-hi); animation: dl-pulse 2s ease-in-out infinite; }
@keyframes dl-pulse { 50% { opacity: .35; } }
.dl-sig { list-style: none; padding: 0; margin: 0; font: .78rem/1.5 var(--dl-mono); }
.dl-sig li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed rgba(120, 170, 255, .12); color: #7f91b3; }
.dl-sig li b { color: #fff; font-weight: 600; text-align: right; }
.dl-sig li.on b { color: var(--dl-teal-hi); }
.dl-scanning { text-align: center; padding: 1rem 0; }
.dl-scanning .dl-term { text-align: left; min-height: 12rem; }
.dl-results { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.dl-results li { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--dl-edge); background: rgba(255, 255, 255, .025); opacity: 0; transform: translateX(-12px); animation: dl-slide .5s forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes dl-slide { to { opacity: 1; transform: none; } }
.dl-results i { color: var(--dl-teal-hi); font-size: 1.1rem; margin-top: .15rem; width: 1.3rem; text-align: center; }
.dl-results b { color: #fff; display: block; font-weight: 600; }
.dl-results span { color: #93a5c6; font-size: .9rem; }

/* Thanks page call badge */
.dl-callcard { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.2rem; border-radius: 16px; background: var(--de-teal-soft); margin: 1.4rem auto; max-width: 30rem; }
.dl-callcard i { font-size: 1.4rem; color: var(--de-teal-2); animation: dl-ring 1.6s ease-in-out infinite; }
@keyframes dl-ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }

@media (prefers-reduced-motion: reduce) {
    .dl *, .dl *::before, .dl *::after { animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .dl-matrix i { transform: none; opacity: 1; background: var(--to); }
    .dl-schema span { opacity: 1; transform: none; }
    .dl-core .arc { stroke-dashoffset: 70; }
    .dl-bar-fill { width: var(--v); }
    .dl-results li { opacity: 1; transform: none; }
}