:root {
    --bg: #0b0f14;
    --panel: rgba(255, 255, 255, .04);
    --panel2: rgba(255, 255, 255, .02);
    --text: rgba(255, 255, 255, .92);
    --muted: rgba(255, 255, 255, .64);
    --border: rgba(255, 255, 255, .12);
    --shadow: 0 18px 60px rgba(0, 0, 0, .35);
    --shadow2: 0 10px 30px rgba(0, 0, 0, .12);
    --accent: #7c5cff;
    --accent2: #00e5a8;
    --radius: 18px;
    --max: 1120px;
    --navbg: color-mix(in oklab, var(--panel) 80%, transparent);
    --navline: var(--border);

    --ok: #2ee59d;
    --warn: #ffcc66;
    --bad: #ff5c7a;
    --ink: rgba(255, 255, 255, .10);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f8fb;
        --panel: rgba(0, 0, 0, .04);
        --panel2: rgba(0, 0, 0, .02);
        --text: rgba(0, 0, 0, .9);
        --muted: rgba(0, 0, 0, .6);
        --border: rgba(0, 0, 0, .12);
        --shadow: 0 18px 60px rgba(0, 0, 0, .10);
        --shadow2: 0 10px 30px rgba(0, 0, 0, .08);
        --navbg: color-mix(in oklab, var(--panel) 80%, transparent);
        --navline: var(--border);
        --ink: rgba(0, 0, 0, .10);
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    letter-spacing: .2px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bgfx {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(900px 500px at 18% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
        radial-gradient(900px 500px at 82% 10%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 55%),
        radial-gradient(900px 700px at 50% 115%, color-mix(in oklab, var(--bad) 10%, transparent), transparent 62%);
    opacity: .55;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(var(--max), calc(100% - 48px));
    margin: 0 auto;
}

/* NAV */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    backdrop-filter: blur(12px);
    background: linear-gradient(to bottom, var(--navbg), color-mix(in oklab, var(--navbg) 20%, transparent));
    box-shadow: 0 1px 0 var(--navline);
}

.nav-inner {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .6px;
}

.brand small {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .2px;
}

.nav-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pill {
    padding: 10px 14px;
    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--panel) 65%, transparent);
    box-shadow: var(--shadow2), 0 4px 12px color-mix(in oklab, var(--accent) 14%, transparent);
    color: var(--text);
    font-weight: 750;
    font-size: 14px;
    transition: transform .15s ease, filter .15s ease;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}

.pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.pill.primary {
    background: color-mix(in oklab, var(--accent) 18%, var(--panel));
}

@media (prefers-color-scheme: light) {
    .pill {
        background: color-mix(in oklab, var(--panel) 50%, var(--accent));
        border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
        box-shadow:
            0 6px 18px rgba(0, 0, 0, .12),
            inset 0 1px 0 color-mix(in oklab, var(--accent) 35%, var(--panel));
    }

    .pill.primary {
        background: color-mix(in oklab, var(--accent) 30%, var(--panel));
        border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
        color: var(--text);
    }
}

/* HERO */
.hero {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 64px;
}

.hero-inner {
    width: min(var(--max), calc(100% - 48px));
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
    align-items: center;
}

.kicker {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 20px color-mix(in oklab, var(--accent) 30%, transparent);
}

h1 {
    margin: 14px 0 12px;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.02;
    letter-spacing: -.6px;
}

.sub {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
    max-width: 56ch;
}

/* VIDEO */
.video-zone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-shell {
    width: 100%;
    max-width: 520px;
}

.video-wrap {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #000;
    position: relative;
}

video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 5%, black 100%);
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 5%, black 100%);
    mask-composite: intersect;

    filter: saturate(1.05) contrast(1.05);
}

video.face-feed {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-composite: initial;
    mask-composite: add;
    background: none;
    filter: none;
}

/* Afterline CSS-only */
.afterline {
    margin-top: 12px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    letter-spacing: .2px;
    color: color-mix(in oklab, var(--text) 92%, transparent);
    position: relative;
    overflow: hidden;
}

.afterline span {
    position: absolute;
    opacity: 0;
    transform: translateY(8px);
    animation: msg 12s ease-in-out infinite;
    padding: 0 10px;
}

.afterline span:nth-child(1) {
    animation-delay: 0s;
}

.afterline span:nth-child(2) {
    animation-delay: 4s;
}

.afterline span:nth-child(3) {
    animation-delay: 8s;
}

@keyframes msg {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    28% {
        opacity: 1;
        transform: translateY(0);
    }

    38% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 0;
    }
}

/* Sections */
section {
    padding: 88px 0;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

h2 {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing: -.4px;
}

.lead {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 15px;
}

/* Panels */
.panel {
    background: var(--panel);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    overflow: hidden;
}

.tiny {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.mt-6 {
    margin-top: 6px;
}

/* =========================
PROBLEM (scan)
========================= */
.problem {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: stretch;
    background: color-mix(in oklab, var(--panel) 70%, var(--panel2));
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 6px);
    padding: 16px;
    box-shadow: var(--shadow2);
}

.scanbox {
    padding: 16px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
}

.face-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.face-feed {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 14px;
    background: #000;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    z-index: 1;
    display: block;
}

.forger-note {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--panel2) 90%, transparent);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    display: inline-block;
    max-width: 100%;
}

.forger-note b {
    color: var(--text);
}

.forger-note p {
    margin: 6px 0 0;
}

.forger-note p:first-child {
    margin-top: 0;
}

.problem-copy {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.problem-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.problem-copy ul {
    list-style: disc;
    padding-left: 20px;
    margin: 12px 0;
}

.problem-copy li {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.callout {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg,
            color-mix(in oklab, var(--panel) 86%, var(--panel2)),
            color-mix(in oklab, var(--panel2) 92%, transparent));
    border: 1px solid var(--border);
    box-shadow: var(--shadow2);
    font-size: 14px;
    table-layout: fixed;
}

.callout thead th {
    background: color-mix(in oklab, var(--panel) 92%, var(--panel2));
    color: var(--text);
    font-weight: 900;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}

.callout th,
.callout td {
    padding: 12px 14px;
    vertical-align: top;
    border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    word-break: break-word;
}

.callout tr:first-child th,
.callout tr:first-child td {
    border-top: 0;
}

.callout th {
    width: 220px;
    text-align: left;
    color: var(--muted);
    font-weight: 850;
    letter-spacing: .02em;
}

.callout td {
    color: var(--text);
}

.callout tbody tr:nth-child(odd) td {
    background: color-mix(in oklab, var(--panel2) 85%, transparent);
}

.callout-wrap {
    width: 100%;
    display: grid;
    gap: 8px;
    overflow-x: auto;
}

.callout-wide {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {

    .callout {
        font-size: 13px;
        display: table;
        table-layout: auto;
        min-width: 640px;
    }

    .callout th {
        position: sticky;
        left: 0;
        z-index: 2;
        background: color-mix(in oklab, var(--panel) 92%, var(--panel2));
    }
}

.callout-text {
    border-radius: 16px;
    background: color-mix(in oklab, var(--panel) 75%, transparent);
    box-shadow: var(--shadow2);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.callout-text b {
    color: color-mix(in oklab, var(--text) 92%, transparent);
    font-weight: 950;
}

.news-list {
    margin: 6px 0 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================
SOLVE blocks
========================= */
.solve {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
}

.card {
    border: 0;
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow2);
    padding: 16px;
    overflow: hidden;
    position: relative;
}

.card h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.mini-anim {
    margin-top: 12px;
    border-radius: 16px;
    min-height: 140px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Privacy shield anim */
.ea {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            color-mix(in oklab, var(--panel) 85%, transparent),
            color-mix(in oklab, var(--panel) 55%, transparent));
    color: var(--text);
    letter-spacing: 2px;
    overflow: hidden;
    isolation: isolate;
}

.ea::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(520px 260px at 18% 18%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
        radial-gradient(520px 260px at 86% 74%, color-mix(in oklab, var(--accent2) 16%, transparent), transparent 62%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 4px),
        url("../img/docguard/data-flow.svg");
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 200% 200%, 200% 200%, 100% 10px, 46px 92px;
    background-position: 20% 22%, 82% 70%, 0 0, 0 0;
    filter: blur(.2px) saturate(1.05);
    opacity: .85;
    animation: dataFlow 9s linear infinite;
    z-index: 0;
    mask-image: radial-gradient(120% 120% at 50% 40%, rgba(0, 0, 0, .85), transparent 80%);
}

.ea .label {
    position: relative;
    z-index: 1;
    font-weight: 900;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--text) 92%, transparent);
    text-shadow:
        0 10px 28px rgba(0, 0, 0, .35),
        0 0 18px color-mix(in oklab, var(--accent) 18%, transparent);
}

@keyframes dataFlow {
    0% {
        background-position: 20% 22%, 82% 70%, 0 0, 0 0;
    }

    50% {
        background-position: 14% 18%, 78% 76%, 0 6px, -10px 24px;
    }

    100% {
        background-position: 10% 24%, 74% 68%, 0 12px, -20px 48px;
    }
}

/* Spectrum analyzer anim */
.sa::before {
    content: "";
    position: absolute;
    inset: -40%;
    opacity: .65;
    filter: blur(10px);
    animation: drift 5.2s ease-in-out infinite;
    z-index: 0;
}

@keyframes drift {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(10px)
    }
}

.sa .scope {
    position: absolute;
    inset: 14px;
    border-radius: 14px;
    background: linear-gradient(180deg,
            color-mix(in oklab, var(--panel) 82%, transparent),
            color-mix(in oklab, var(--panel) 55%, transparent));
    border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
    overflow: hidden;
    z-index: 1;
}

.sa .grid {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            color-mix(in oklab, var(--text) 12%, transparent) 0 1px,
            transparent 1px 22px),
        repeating-linear-gradient(0deg,
            color-mix(in oklab, var(--text) 8%, transparent) 0 1px,
            transparent 1px 18px);
    opacity: .35;
    mix-blend-mode: soft-light;
}

.sa .bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 14px;
    z-index: 1;
}

.sa .bars span {
    flex: 1;
    min-width: 4px;
    height: 100%;
    border-radius: 8px 8px 6px 6px;
    background: linear-gradient(180deg,
            color-mix(in oklab, var(--accent2) 74%, transparent) 0%,
            color-mix(in oklab, var(--accent) 68%, transparent) 100%);
    transform-origin: center bottom;
    animation: bar 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.08s);
    opacity: .95;
    box-shadow: 0 10px 20px color-mix(in oklab, var(--accent2) 20%, transparent);
}

.sa .bars span:nth-child(1) {
    --i: 0;
    --peak: 1.35;
}

.sa .bars span:nth-child(2) {
    --i: 1;
    --peak: 1.6;
}

.sa .bars span:nth-child(3) {
    --i: 2;
    --peak: 1.12;
}

.sa .bars span:nth-child(4) {
    --i: 3;
    --peak: 1.48;
}

.sa .bars span:nth-child(5) {
    --i: 4;
    --peak: 1.72;
}

.sa .bars span:nth-child(6) {
    --i: 5;
    --peak: 1.26;
}

.sa .bars span:nth-child(7) {
    --i: 6;
    --peak: 1.08;
}

.sa .bars span:nth-child(8) {
    --i: 7;
    --peak: 1.55;
}

.sa .bars span:nth-child(9) {
    --i: 8;
    --peak: 1.30;
}

.sa .bars span:nth-child(10) {
    --i: 9;
    --peak: 1.68;
}

.sa .bars span:nth-child(11) {
    --i: 10;
    --peak: 1.05;
}

.sa .bars span:nth-child(12) {
    --i: 11;
    --peak: 1.44;
}

.sa .bars span:nth-child(13) {
    --i: 12;
    --peak: 1.60;
}

.sa .bars span:nth-child(14) {
    --i: 13;
    --peak: 1.14;
}

.sa .bars span:nth-child(15) {
    --i: 14;
    --peak: 1.36;
}

.sa .bars span:nth-child(16) {
    --i: 15;
    --peak: 1.78;
}

.sa .bars span.alt {
    background: linear-gradient(180deg,
            color-mix(in oklab, var(--accent) 72%, transparent) 0%,
            color-mix(in oklab, var(--bad) 60%, transparent) 100%);
}

.sa .bars span.dim {
    opacity: .78;
    filter: saturate(.9);
}


@keyframes bar {
    0% {
        transform: scaleY(.26);
    }

    32% {
        transform: scaleY(var(--peak, 1.1));
    }

    64% {
        transform: scaleY(.40);
    }

    100% {
        transform: scaleY(.28);
    }
}

@keyframes energyShift {
    0% {
        background-position:
            0 0,
            0 6px,
            0 -8px,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    40% {
        background-position:
            -10px 8px,
            8px 2px,
            -6px -14px,
            6px 6px,
            -4px 4px,
            6px -6px,
            -6px 6px,
            0 0;
    }

    70% {
        background-position:
            6px -6px,
            -8px 10px,
            10px -4px,
            -6px 12px,
            4px -4px,
            -8px 8px,
            8px -6px,
            0 0;
    }

    100% {
        background-position:
            0 0,
            0 6px,
            0 -8px,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }
}

@keyframes gridShift {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    50% {
        background-position: 6px 0, 0 4px, 0 8px;
    }

    100% {
        background-position: 0 0, 0 0, 0 0;
    }
}

@keyframes scanlineSlide {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: translateY(-2px);
    }

    50% {
        background-position: 0 6px, 0 10px, 0 4px;
        transform: translateY(1px);
    }

    100% {
        background-position: 0 12px, 0 18px, 0 8px;
        transform: translateY(-2px);
    }
}

@keyframes noiseDrift {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    50% {
        background-position: 12px -10px, -8px 8px, 6px 10px;
    }

    100% {
        background-position: 0 0, 0 0, 0 0;
    }
}

@keyframes traceWave {
    0% {
        transform: translateY(-2px) translateX(0);
    }

    25% {
        transform: translateY(2px) translateX(-3px);
    }

    50% {
        transform: translateY(0) translateX(3px);
    }

    75% {
        transform: translateY(-3px) translateX(-2px);
    }

    100% {
        transform: translateY(-2px) translateX(0);
    }
}

.sa .legend {
    position: absolute;
    left: 16px;
    bottom: 12px;
    display: flex;
    gap: 8px;
    z-index: 3;
}

.sa .legend span {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--panel) 75%, transparent);
    color: var(--muted);
    font-weight: 900;
    box-shadow: var(--shadow2);
    white-space: nowrap;
}

@media (prefers-color-scheme: light) {
    .sa .legend span {
        background: color-mix(in oklab, var(--panel) 90%, var(--panel2));
        color: color-mix(in oklab, var(--text) 95%, transparent);
        box-shadow: var(--shadow2), 0 4px 12px rgba(0, 0, 0, .12);
    }
}

/* DOC analysis anim */
.da::before {
    content: "";
    position: absolute;
    inset: -30%;
    opacity: .6;
    filter: blur(12px);
    z-index: 0;
}

/* PAGE: add photo square + blurred data lines */
.da .page {
    position: absolute;
    width: 54%;
    max-width: 200px;
    height: 68%;
    left: 44%;
    top: 50%;
    border-radius: 14px;
    background: color-mix(in oklab, var(--panel) 85%, transparent);
    box-shadow: var(--shadow2);
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    transform: translate(-55%, -50%) rotate(-2deg);
    z-index: 1;
    overflow: hidden;
}

.da .page::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 55%),
        linear-gradient(135deg, color-mix(in oklab, var(--text) 16%, transparent), transparent);
    box-shadow: var(--shadow2);
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    opacity: .95;
}

.da .page::after {
    content: "";
    position: absolute;
    left: 62px;
    right: 14px;
    top: 18px;
    bottom: 14px;
    border-radius: 10px;
    background:
        linear-gradient(to bottom,
            color-mix(in oklab, var(--text) 18%, transparent) 0 8px,
            transparent 8px 18px,
            color-mix(in oklab, var(--text) 14%, transparent) 18px 24px,
            transparent 24px 34px,
            color-mix(in oklab, var(--text) 12%, transparent) 34px 40px,
            transparent 40px 52px,
            color-mix(in oklab, var(--text) 12%, transparent) 52px 58px,
            transparent 58px 70px,
            color-mix(in oklab, var(--text) 10%, transparent) 70px 76px,
            transparent 76px 100%);
    filter: blur(2.6px);
    opacity: .85;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35));
}

.da .page2 {
    position: absolute;
    width: 54%;
    height: 68%;
    max-width: 200px;
    left: 50%;
    top: 50%;
    border-radius: 14px;
    background: var(--panel);
    box-shadow: var(--shadow2);
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    transform: translate(-50%, -50%) rotate(2deg);
    z-index: 2;
    overflow: hidden;
}

.da .page2::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 55% 45%, color-mix(in oklab, var(--accent2) 22%, transparent), var(--panel) 55%),
        linear-gradient(135deg, color-mix(in oklab, var(--text) 16%, var(--panel)), var(--panel));
    box-shadow: var(--shadow2);
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    opacity: .95;
}

.da .page2::after {
    content: "";
    position: absolute;
    left: 62px;
    right: 14px;
    top: 18px;
    bottom: 14px;
    border-radius: 10px;
    background:
        linear-gradient(to bottom,
            color-mix(in oklab, var(--text) 18%, var(--panel)) 0 10px,
            color-mix(in oklab, var(--panel2) 60%, transparent) 10px 22px,
            color-mix(in oklab, var(--text) 14%, var(--panel)) 22px 28px,
            color-mix(in oklab, var(--panel2) 60%, transparent) 28px 42px,
            color-mix(in oklab, var(--text) 12%, var(--panel)) 42px 48px,
            color-mix(in oklab, var(--panel2) 60%, transparent) 48px 62px,
            color-mix(in oklab, var(--text) 12%, var(--panel)) 62px 68px,
            color-mix(in oklab, var(--panel2) 60%, transparent) 68px 100%);
    filter: blur(3.2px);
    opacity: 1;
    mask-image: none;
}

.da .scan {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 22%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent2) 80%, transparent), transparent);
    box-shadow: 0 0 26px color-mix(in oklab, var(--accent2) 22%, transparent);
    animation: dscan 2.3s ease-in-out infinite;
    z-index: 3;
}

@keyframes dscan {
    0% {
        transform: translateY(0);
        opacity: .0;
    }

    15% {
        opacity: .85;
    }

    70% {
        opacity: .85;
    }

    100% {
        transform: translateY(88px);
        opacity: 0;
    }
}

/* =========================
Impact stats
========================= */
.impact {
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    display: grid;
    gap: 16px;
}

.impact-card {
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    background: color-mix(in oklab, var(--panel) 88%, var(--panel2));
    box-shadow: var(--shadow2);
    display: grid;
    gap: 10px;
    align-content: start;
}

.impact-card h4 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.02em;
}

.glass-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.glass-card {
    position: relative;
    border-radius: 22px;
    background: color-mix(in oklab, var(--panel) 80%, var(--panel2));
    border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
    box-shadow:
        var(--shadow2),
        inset 0 1px 0 color-mix(in oklab, var(--text) 8%, transparent);
    overflow: hidden;
    padding: 14px 14px 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: auto auto -120px -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, color-mix(in oklab, var(--text) 18%, transparent), transparent 60%);
    pointer-events: none;
    opacity: .35;
}

.glass-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    color: color-mix(in oklab, var(--text) 92%, transparent);
    margin-bottom: 8px;
}

.glass-title {
    opacity: .75;
}

.glass-change {
    opacity: .9;
    color: color-mix(in oklab, var(--accent2) 90%, var(--text));
}

.glass-change.bad {
    color: color-mix(in oklab, var(--bad) 90%, var(--text));
}

.glass-spark {
    width: 100%;
    height: auto;
    aspect-ratio: 18/8;
    display: block;
}

.glass-baseline {
    stroke: color-mix(in oklab, var(--text) 28%, transparent);
    stroke-width: 2;
    stroke-dasharray: 6 6;
}

.glass-area {
    fill: url(#glassArea1);
}

.glass-area.alt {
    fill: url(#glassArea2);
}

.glass-line {
    fill: none;
    stroke: color-mix(in oklab, var(--accent2) 82%, var(--accent));
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15));
}

.glass-line.alt {
    stroke: color-mix(in oklab, var(--accent) 82%, var(--accent2));
}

.glass-line.negative {
    stroke: var(--bad);
}

.glass-card.line-only .glass-area,
.glass-card.line-only .glass-area.alt {
    display: none;
}

.glass-value {
    text-align: center;
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .5px;
    color: color-mix(in oklab, var(--text) 78%, transparent);
    margin-top: 2px;
}

.glass-value.bad {
    color: color-mix(in oklab, var(--bad) 80%, var(--text));
}

.glass-sub {
    text-align: center;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

footer {
    padding: 28px 0 40px;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 980px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .video-wrap {
        max-width: 680px;
    }

    .problem {
        grid-template-columns: 1fr;
    }

    .solve {
        grid-template-columns: 1fr;
    }

    .nav-cta {
        gap: 8px;
    }

    .pill {
        padding: 10px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- THE CTA LINK (container) ---------- */
.who-title{
cursor: pointer;
position: relative;
width: 100%;
height: 100vh;
margin: 40px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}

/* ---------- THE BACKGROUND "!!!" BAND ---------- */
.who-title .qband{
position: absolute;
width: 100vw;
left: 50%;
transform: translateX(-50%);
height: 200px;
overflow: hidden;
pointer-events: none;
}

.who-title .qband .qm{
position: absolute;
font-size: clamp(40px, 6vw, 74px);
font-weight: 700;
color: color-mix(in oklab, var(--accent) 28%, var(--text) 18%);
text-shadow:
    0 6px 18px rgba(0, 0, 0, .25),
    0 0 18px color-mix(in oklab, var(--accent2) 18%, transparent);
opacity: .62;
animation: qmPulse 3s ease-in-out infinite; /* <- needed animation */
}

/* positions + stagger */
.who-title .qband .q1{ top: 16px; left: 12%; animation-delay: 0s; }
.who-title .qband .q2{ top: 40px; left: 32%; animation-delay: .5s; }
.who-title .qband .q3{ top: -4px; left: 52%; animation-delay: 1s; }
.who-title .qband .q4{ top: 50px; left: 68%; animation-delay: 1.5s; }
.who-title .qband .q5{ top: 12px; left: 82%; animation-delay: 2s; }
.who-title .qband .q6{ top: 72px; left: 24%; animation-delay: 2.4s; }

/* ---------- THE CENTER TEXT ---------- */
.center-title{
text-align: center;
margin: 0;
font-size: clamp(24px, 3.6vw, 32px);
letter-spacing: -0.01em;
}

.center-title .protect-cta{
position: relative;
display: inline-block;
padding: 0 6px;
border-radius: 12px;
transition: color .15s ease, transform .18s ease;
}

.center-title .protect-cta::after{
content: "";
position: absolute;
inset: -4px;
border-radius: 14px;
border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent);
opacity: 0;
transform: scale(0.9);
}

/* hover/focus highlight */
.who-title:hover .protect-cta,
.who-title:focus .protect-cta,
.who-title:focus-visible .protect-cta{
color: color-mix(in oklab, var(--accent) 90%, var(--text));
transform: translateY(-1px);
}

/* animate CTA only if motion allowed */
@media (prefers-reduced-motion: no-preference){
.who-title .protect-cta::after{
    animation: protect-click 1.6s ease infinite;
}
.who-title .protect-cta{
    animation: protect-pop 1.6s ease infinite;
}
}

/* ---------- KEYFRAMES NEEDED ---------- */
@keyframes protect-click{
0%{
    opacity: .35;
    transform: scale(0.92);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 35%, transparent);
}
60%{
    opacity: .22;
    transform: scale(1.12);
    box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 18%, transparent);
}
100%{
    opacity: 0;
    transform: scale(1.25);
    box-shadow: 0 0 0 16px transparent;
}
}

@keyframes protect-pop{
0%{ transform: translateY(0); }
50%{ transform: translateY(-2px); }
100%{ transform: translateY(0); }
}

/* This keyframe is referenced by .qm; define it (wasn't in your paste) */
@keyframes qmPulse{
0%{   transform: translateY(0) scale(1);    filter: saturate(1);   }
50%{  transform: translateY(-6px) scale(1.03); filter: saturate(1.15); }
100%{ transform: translateY(0) scale(1);    filter: saturate(1);   }
}

/* ---------- REDUCED MOTION SAFETY ---------- */
@media (prefers-reduced-motion: reduce){
.who-title .protect-cta,
.who-title .protect-cta::after,
.who-title .qband .qm{
    animation: none !important;
}
}