:root {
    --page: #f7f9fc;
    --surface: #ffffff;
    --surface-soft: #f0f4f8;
    --ink: #0c1624;
    --ink-soft: #354357;
    --muted: #68778b;
    --line: #dce4ec;
    --navy: #07111e;
    --navy-2: #0d1b2a;
    --teal: #0d8c7f;
    --teal-dark: #087166;
    --teal-soft: #dff7f2;
    --blue: #4169e1;
    --red: #d94d55;
    --red-soft: #fff0f1;
    --amber: #b8770b;
    --amber-soft: #fff7df;
    --green: #168257;
    --green-soft: #e9f9f1;
    --purple: #7558d6;
    --shadow-sm: 0 12px 32px rgba(8, 21, 36, .08);
    --shadow: 0 30px 90px rgba(8, 21, 36, .14);
    --shadow-dark: 0 35px 100px rgba(2, 10, 20, .32);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Manrope", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
}

.page, .content {
    min-height: 100vh;
}

.content {
    padding: 0;
}

.landing-page {
    min-height: 100vh;
    overflow: hidden;
    background: var(--page);
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    width: 100%;
    padding: 18px clamp(22px, 6vw, 96px);
    border-bottom: 1px solid transparent;
    transition: .25s ease;
}

    .site-header.is-scrolled {
        padding-top: 12px;
        padding-bottom: 12px;
        background: rgba(255,255,255,.88);
        border-color: rgba(220,228,236,.9);
        backdrop-filter: blur(18px);
        box-shadow: 0 8px 28px rgba(8,21,36,.07);
    }

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.08rem;
}

.brand-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
}

    .brand-icon img {
        width: 38px;
        height: 38px;
        object-fit: contain;
    }

.site-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
}

    .site-nav a {
        color: var(--ink-soft);
        text-decoration: none;
        font-size: .91rem;
        font-weight: 700;
        transition: color .18s ease;
    }

        .site-nav a:hover {
            color: var(--teal);
        }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 47px;
    padding: 0 20px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

    .btn:hover {
        transform: translateY(-2px);
    }

.btn-primary {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 14px 30px rgba(7,17,30,.18);
}

    .btn-primary:hover {
        background: #13253a;
        color: #fff;
        box-shadow: 0 18px 36px rgba(7,17,30,.24);
    }

.btn-secondary {
    background: rgba(255,255,255,.8);
    color: var(--ink);
    border: 1px solid var(--line);
}

    .btn-secondary:hover {
        border-color: #b7c5d3;
        background: #fff;
    }

.btn-white {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 18px 44px rgba(0,0,0,.2);
}

.btn-large {
    min-height: 56px;
    padding: 0 26px;
    border-radius: 14px;
}

.btn-compact {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: .9rem;
}

.hero-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(580px, 1.18fr);
    align-items: center;
    gap: clamp(42px, 6vw, 92px);
    min-height: 100vh;
    padding: 130px clamp(22px, 6vw, 96px) 82px;
    background: radial-gradient(circle at 75% 24%, rgba(53, 182, 166, .13), transparent 32%), radial-gradient(circle at 16% 15%, rgba(65, 105, 225, .10), transparent 25%), linear-gradient(180deg, #fbfdff 0%, #f3f7fa 100%);
}

    .hero-section::after {
        position: absolute;
        inset: auto 0 0;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, var(--line), transparent);
    }

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.hero-orb-one {
    width: 440px;
    height: 440px;
    right: -180px;
    top: 80px;
    background: rgba(44,191,173,.08);
}

.hero-orb-two {
    width: 300px;
    height: 300px;
    left: -160px;
    bottom: 40px;
    background: rgba(65,105,225,.07);
}

.hero-copy {
    position: relative;
    z-index: 3;
    max-width: 780px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 9px 13px;
    border: 1px solid #cde7e2;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: var(--teal-dark);
    font-size: .82rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25b993;
    box-shadow: 0 0 0 5px rgba(37,185,147,.12);
    animation: statusPulse 2.1s infinite;
}

.hero-copy h1 {
    outline:none;
    margin: 0;
    max-width: 850px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(4rem, 6.2vw, 7.4rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .92;
}

    .hero-copy h1 span {
        color: var(--teal);
    }

.hero-lede {
    max-width: 720px;
    margin: 28px 0 0;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 30px;
    color: var(--muted);
    font-size: .79rem;
    font-weight: 800;
}

    .hero-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

        .hero-trust span::before {
            content: "✓";
            color: var(--teal);
        }

.hero-enter {
    opacity: 0;
    animation: heroEnter .75s var(--ease) forwards;
}

.hero-enter-1 {
    animation-delay: .05s;
}

.hero-enter-2 {
    animation-delay: .14s;
}

.hero-enter-3 {
    animation-delay: .24s;
}

.hero-enter-4 {
    animation-delay: .34s;
}

.hero-enter-5 {
    animation-delay: .44s;
}

.hero-product {
    position: relative;
    z-index: 2;
    width: min(780px, 100%);
    justify-self: end;
    perspective: 1400px;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
}

.browser-shell {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: #081321;
    box-shadow: var(--shadow-dark);
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
    transition: transform .18s ease;
}

.browser-topbar {
    display: grid;
    grid-template-columns: 90px 1fr 30px;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 16px;
    background: #111e2d;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.window-dots {
    display: flex;
    gap: 6px;
}

    .window-dots i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #405064;
    }

        .window-dots i:first-child {
            background: #f46b6b;
        }

        .window-dots i:nth-child(2) {
            background: #e8b84a;
        }

        .window-dots i:nth-child(3) {
            background: #43bd82;
        }

.browser-address {
    justify-self: center;
    width: min(280px,100%);
    padding: 6px 14px;
    border-radius: 7px;
    background: rgba(255,255,255,.06);
    color: #93a1b4;
    font-size: .68rem;
    text-align: center;
}

.shield-mini {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg,#20b4a3,#386add);
    color: #fff;
    font-weight: 900;
    font-size: .7rem;
}

.dashboard-shell {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 490px;
}

.dashboard-sidebar {
    padding: 20px 12px;
    background: #0b1725;
    border-right: 1px solid rgba(255,255,255,.06);
    color: #8ea0b5;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: #fff;
    font-size: .79rem;
}

    .sidebar-brand span {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border-radius: 8px;
        background: var(--teal);
    }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
    padding: 10px;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 700;
}

    .sidebar-link.active {
        background: rgba(52,190,174,.13);
        color: #6be1d2;
    }

.dashboard-main {
    padding: 22px;
    background: #0e1a29;
    color: #fff;
}

.dashboard-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

    .dashboard-heading span {
        color: #7990a8;
        font-size: .6rem;
    }

    .dashboard-heading h2 {
        margin: 4px 0 0;
        font-size: 1.15rem;
    }

    .dashboard-heading button {
        padding: 8px 10px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 8px;
        background: #142437;
        color: #a9b8c8;
        font-size: .6rem;
    }

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 20px;
}

.dash-metric {
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: #132235;
}

    .dash-metric span, .dash-metric small, .dash-metric strong {
        display: block;
    }

    .dash-metric span {
        color: #8699ae;
        font-size: .58rem;
    }

    .dash-metric strong {
        margin: 7px 0 3px;
        font-size: 1.5rem;
    }

    .dash-metric small {
        color: #4ec7a9;
        font-size: .5rem;
    }

    .dash-metric.danger small {
        color: #f1787f;
    }

    .dash-metric.warning small {
        color: #f1bd59;
    }

.dashboard-content-grid {
    display: grid;
    grid-template-columns: 1.45fr .8fr;
    gap: 10px;
    margin-top: 10px;
}

.activity-panel, .risk-panel {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: #132235;
}

.panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    font-size: .6rem;
}

    .panel-title span {
        color: #58cdbc;
    }

.activity-row {
    display: grid;
    grid-template-columns: 29px 1fr auto;
    gap: 9px;
    align-items: center;
    min-height: 55px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

    .activity-row.activity-highlight {
        margin: 0 -5px;
        padding: 8px 5px;
        border-radius: 8px;
        background: rgba(218,74,84,.05);
    }

.file-icon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 7px;
    font-size: .58rem;
    font-weight: 900;
}

.file-xlsx {
    background: #194d3a;
    color: #65d89f;
}

.file-doc {
    background: #1c3f72;
    color: #7db0ff;
}

.file-pdf {
    background: #632e38;
    color: #ff8b97;
}

.activity-row strong, .activity-row span {
    display: block;
}

.activity-row strong {
    font-size: .58rem;
}

.activity-row div span {
    margin-top: 3px;
    color: #768ba1;
    font-size: .48rem;
}

.pill {
    padding: 5px 6px;
    border-radius: 999px;
    font-size: .47rem;
}

    .pill.blocked {
        background: #48252d;
        color: #ff8991;
    }

    .pill.pending {
        background: #48391b;
        color: #f6ca69;
    }

    .pill.approved {
        background: #173f35;
        color: #66d7ad;
    }

.risk-ring {
    position: relative;
    display: grid;
    width: 98px;
    height: 98px;
    place-items: center;
    margin: 18px auto 14px;
    border-radius: 50%;
    background: conic-gradient(#2cc5ae 0 52%,#617fe1 52% 75%,#c77ce9 75% 90%,#2d3d52 90%);
}

    .risk-ring::after {
        position: absolute;
        inset: 11px;
        content: "";
        border-radius: 50%;
        background: #132235;
    }

    .risk-ring div {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .risk-ring strong, .risk-ring span {
        display: block;
    }

    .risk-ring strong {
        font-size: 1.25rem;
    }

    .risk-ring span {
        color: #71879d;
        font-size: .48rem;
    }

.risk-legend {
    display: grid;
    gap: 7px;
}

    .risk-legend span {
        display: grid;
        grid-template-columns: 6px 1fr auto;
        gap: 6px;
        align-items: center;
        color: #8092a6;
        font-size: .48rem;
    }

    .risk-legend i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #2cc5ae;
    }

    .risk-legend span:nth-child(2) i {
        background: #617fe1;
    }

    .risk-legend span:nth-child(3) i {
        background: #c77ce9;
    }

    .risk-legend span:nth-child(4) i {
        background: #48596d;
    }

    .risk-legend b {
        color: #dfe8f1;
    }

.floating-alert {
    position: absolute;
    right: -24px;
    bottom: 34px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    min-width: 310px;
    padding: 13px;
    border: 1px solid #f4bec1;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 22px 50px rgba(9,18,30,.2);
    animation: floatAlert 5s ease-in-out infinite;
}

.alert-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 11px;
    background: var(--red-soft);
    color: var(--red);
    font-weight: 900;
}

.floating-alert span, .floating-alert strong {
    display: block;
}

.floating-alert span {
    color: var(--muted);
    font-size: .58rem;
}

.floating-alert strong {
    margin-top: 3px;
    font-size: .7rem;
}

.floating-alert b {
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--red-soft);
    color: var(--red);
    font-size: .55rem;
}

.platform-marquee {
    padding: 28px 0 32px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

    .platform-marquee > p {
        margin: 0 0 20px;
        color: #8290a1;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

.marquee-window {
    overflow: hidden;
    mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.platform-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 28px;
    color: #263548;
    font-family: "Space Grotesk";
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

    .platform-logo span {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #f8fafc;
        color: var(--teal);
        font-family: "Manrope";
        font-size: .8rem;
    }

.section-pad {
    padding: clamp(80px, 9vw, 140px) clamp(22px, 7vw, 112px);
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--teal);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-heading {
    max-width: 800px;
    margin-bottom: 50px;
}

    .section-heading.centered {
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .section-heading h2, .story-heading h2, .showcase-copy h2, .scenario-copy h2, .faq-intro h2, .final-cta h2 {
        margin: 0;
        font-family: "Space Grotesk";
        font-size: clamp(2.6rem,5vw,5.1rem);
        letter-spacing: -.055em;
        line-height: 1.02;
    }

    .section-heading p:last-child {
        max-width: 720px;
        margin: 20px auto 0;
        color: var(--muted);
        font-size: 1.05rem;
        line-height: 1.75;
    }

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .75s var(--ease),transform .75s var(--ease);
    transition-delay: var(--reveal-delay,0ms);
}

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

.story-section {
    background: #fff;
}

.story-heading {
    max-width: 1050px;
}

    .story-heading h2 span {
        color: #8794a4;
    }

.upload-stage {
    display: grid;
    grid-template-columns: .8fr 1.2fr .8fr 1fr;
    align-items: center;
    gap: 28px;
    max-width: 1380px;
    min-height: 400px;
    margin: 70px auto 0;
    padding: 46px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: linear-gradient(145deg,#f8fbfd,#eef5f4);
    box-shadow: var(--shadow-sm);
}

.upload-source {
    text-align: center;
}

.employee-avatar {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg,#17324c,#386add);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 16px 32px rgba(23,50,76,.22);
}

.upload-source span, .upload-source strong {
    display: block;
}

.upload-source span {
    color: var(--muted);
    font-size: .75rem;
}

.upload-source strong {
    margin-top: 5px;
    font-size: .9rem;
}

.upload-flow {
    position: relative;
    min-height: 250px;
}

.flow-line {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg,#a9b7c5,#42bfae);
}

    .flow-line::after {
        position: absolute;
        right: -1px;
        top: -5px;
        content: "";
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid #42bfae;
    }

.moving-file {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    font-size: .68rem;
    font-weight: 800;
    animation: fileMove 5.4s ease-in-out infinite;
}

    .moving-file i {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border-radius: 7px;
        background: #e2f6eb;
        color: #168257;
        font-style: normal;
    }

.file-one {
    top: 32px;
}

.file-two {
    top: 108px;
    animation-delay: .8s;
}

    .file-two i {
        background: #e5efff;
        color: #4169e1;
    }

.file-three {
    top: 184px;
    animation-delay: 1.6s;
}

    .file-three i {
        background: #fff0f1;
        color: #d94d55;
    }

.shield-gate {
    position: relative;
    z-index: 2;
    text-align: center;
}

.gate-rings {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%,-58%);
}

    .gate-rings span {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(13,140,127,.18);
        border-radius: 50%;
        animation: ringPulse 3s ease-out infinite;
    }

        .gate-rings span:nth-child(2) {
            inset: 18px;
            animation-delay: .45s
        }

        .gate-rings span:nth-child(3) {
            inset: 36px;
            animation-delay: .9s
        }

.gate-core {
    position: relative;
    display: grid;
    width: 76px;
    height: 86px;
    margin: 0 auto 18px;
    place-items: center;
    clip-path: polygon(50% 0,92% 17%,84% 74%,50% 100%,16% 74%,8% 17%);
    background: linear-gradient(145deg,#1fc2ae,#3466d7);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    box-shadow: 0 20px 44px rgba(13,140,127,.24);
}

.shield-gate strong, .shield-gate > span {
    position: relative;
    z-index: 2;
    display: block;
}

.shield-gate strong {
    font-size: .85rem;
}

.shield-gate > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: .63rem;
}

.decision-stack {
    display: grid;
    gap: 12px;
}

.decision-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(8,21,36,.06);
}

    .decision-card i {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 10px;
        font-style: normal;
        font-weight: 900;
    }

    .decision-card span, .decision-card strong {
        display: block;
    }

    .decision-card span {
        font-size: .63rem;
    }

    .decision-card strong {
        margin-top: 3px;
        font-size: .78rem;
    }

    .decision-card.blocked i {
        background: var(--red-soft);
        color: var(--red);
    }

    .decision-card.blocked span {
        color: var(--red);
    }

    .decision-card.review i {
        background: var(--amber-soft);
        color: var(--amber);
    }

    .decision-card.review span {
        color: var(--amber);
    }

    .decision-card.allowed i {
        background: var(--green-soft);
        color: var(--green);
    }

    .decision-card.allowed span {
        color: var(--green);
    }

.product-story {
    background: var(--navy);
    color: #fff;
}

    .product-story .section-heading p:last-child {
        color: #9aabbd;
    }

.wide-product-frame {
    max-width: 1360px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 26px;
    background: #101e2e;
    box-shadow: var(--shadow-dark);
}

.wide-frame-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: #111e2c;
}

    .wide-frame-top div {
        display: flex;
        gap: 6px;
    }

        .wide-frame-top div span {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #415064;
        }

    .wide-frame-top p {
        margin: 0;
        color: #92a3b5;
        font-size: .68rem;
    }

    .wide-frame-top small {
        justify-self: end;
        color: #5bd7c2;
    }

.attempts-layout {
    display: grid;
    grid-template-columns: 190px 1fr;
    min-height: 630px;
}

.attempts-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 18px;
    border-right: 1px solid rgba(255,255,255,.07);
    background: #0c1825;
}

    .attempts-sidebar strong {
        margin-bottom: 22px;
        font-family: "Space Grotesk";
        font-size: 1.05rem;
    }

    .attempts-sidebar span {
        padding: 11px 12px;
        border-radius: 9px;
        color: #7f91a5;
        font-size: .68rem;
        font-weight: 700;
    }

        .attempts-sidebar span.active {
            background: rgba(39,190,170,.12);
            color: #69d6c7;
        }

.attempts-main {
    padding: 34px;
}

.attempts-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .attempts-title small {
        color: #5ed2c2;
        font-size: .55rem;
        letter-spacing: .1em;
    }

    .attempts-title h3 {
        margin: 5px 0 0;
        font-size: 1.6rem;
    }

    .attempts-title button {
        padding: 9px 13px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 9px;
        background: #18283a;
        color: #c0ccda;
        font-size: .65rem;
    }

.filter-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(3,.7fr);
    gap: 9px;
    margin-top: 28px;
}

    .filter-row span {
        padding: 12px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 9px;
        background: #132234;
        color: #7d91a6;
        font-size: .62rem;
    }

.attempt-table {
    margin-top: 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    overflow: hidden;
}

.attempt-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr .9fr .65fr .55fr;
    align-items: center;
    min-height: 75px;
    padding: 0 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}

    .attempt-row:first-child {
        border-top: 0;
    }

    .attempt-row.table-head {
        min-height: 42px;
        background: #132234;
        color: #6f8499;
        font-size: .52rem;
        font-weight: 900;
    }

    .attempt-row > span {
        color: #aebdcb;
        font-size: .65rem;
    }

    .attempt-row b, .attempt-row small {
        display: block;
    }

    .attempt-row b {
        color: #f1f5f8;
        font-size: .68rem;
    }

    .attempt-row small {
        margin-top: 4px;
        color: #6f8399;
        font-size: .54rem;
    }

.file-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .file-cell i {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 9px;
        font-style: normal;
        font-weight: 900;
    }

.file-green {
    background: #174636;
    color: #70d6a6
}

.file-blue {
    background: #183c6b;
    color: #7fb2ff
}

.file-red {
    background: #572b34;
    color: #ff8e98
}

.file-purple {
    background: #352b64;
    color: #b7a0ff
}

.table-status {
    display: inline-flex;
    padding: 6px 8px;
    border-radius: 999px;
    font-style: normal;
    font-size: .55rem;
    font-weight: 800;
}

    .table-status.blocked {
        background: #47242b;
        color: #ff8991
    }

    .table-status.pending {
        background: #48381b;
        color: #f2c966
    }

    .table-status.approved {
        background: #163f33;
        color: #68dab0
    }

.feature-showcase {
    display: grid;
    gap: 150px;
    background: #fff;
}

.showcase-row {
    display: grid;
    grid-template-columns: minmax(0,.75fr) minmax(560px,1.25fr);
    gap: clamp(50px,8vw,120px);
    align-items: center;
    max-width: 1380px;
    margin: 0 auto;
}

    .showcase-row.reverse .showcase-copy {
        order: 2;
    }

.showcase-copy {
    max-width: 560px;
}

.feature-kicker {
    display: block;
    margin-bottom: 16px;
    color: var(--teal);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.showcase-copy h2 {
    font-size: clamp(2.6rem,4.5vw,4.8rem);
}

.showcase-copy p {
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.8;
}

.showcase-copy ul {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.showcase-copy li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    font-weight: 700;
}

    .showcase-copy li::before {
        display: grid;
        width: 24px;
        height: 24px;
        place-items: center;
        content: "✓";
        border-radius: 50%;
        background: var(--teal-soft);
        color: var(--teal);
        font-size: .72rem;
    }

.product-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #f4f7fa;
    box-shadow: var(--shadow);
}

.endpoint-visual {
    padding: 32px;
    background: linear-gradient(145deg,#eaf1f8,#f7fafc);
}

.endpoint-browser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-radius: 13px 13px 0 0;
    background: #fff;
    color: #8290a1;
    font-size: .7rem;
}

.chat-window {
    display: grid;
    min-height: 390px;
    place-content: center;
    text-align: center;
    background: #fff;
}

.chat-logo {
    margin: auto;
    color: #111;
    font-size: 2rem;
}

.chat-window h3 {
    margin: 12px 0 30px;
    font-size: 1.4rem;
}

.chat-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 340px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: #8794a4;
    font-size: .75rem;
}

.blocked-overlay {
    position: absolute;
    right: 30px;
    bottom: 28px;
    width: 360px;
    padding: 22px;
    border: 1px solid #e4ebf2;
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 25px 60px rgba(12,22,36,.2);
}

.shield-check {
    position: absolute;
    right: 20px;
    top: 18px;
    display: grid;
    width: 38px;
    height: 42px;
    place-items: center;
    clip-path: polygon(50% 0,92% 17%,84% 74%,50% 100%,16% 74%,8% 17%);
    background: var(--teal);
    color: #fff;
    font-weight: 900;
}

.blocked-overlay > span {
    color: var(--teal);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.blocked-overlay h3 {
    max-width: 250px;
    margin: 10px 0;
    font-size: 1.05rem;
}

.blocked-overlay p {
    margin: 0;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.55;
}

.blocked-overlay button {
    width: 100%;
    margin-top: 18px;
    padding: 11px;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    font-size: .72rem;
}

.approval-visual {
    padding: 32px;
    background: #fff;
}

.approval-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

    .approval-header small, .approval-grid small, .reason-box small {
        color: #8290a1;
        font-size: .6rem;
        font-weight: 900;
        letter-spacing: .08em;
    }

    .approval-header h3 {
        margin: 6px 0 0;
        font-size: 1.45rem;
    }

    .approval-header > span {
        padding: 7px 9px;
        border-radius: 999px;
        background: var(--amber-soft);
        color: var(--amber);
        font-size: .62rem;
        font-weight: 900;
    }

.approval-file {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

    .approval-file i {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 12px;
        background: #e4efff;
        color: var(--blue);
        font-style: normal;
        font-weight: 900;
    }

    .approval-file strong, .approval-file span {
        display: block;
    }

    .approval-file span {
        margin-top: 4px;
        color: var(--muted);
        font-size: .68rem;
    }

.approval-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-top: 18px;
}

    .approval-grid div {
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .approval-grid strong {
        display: block;
        margin-top: 7px;
        font-size: .75rem;
    }

.reason-box {
    margin-top: 18px;
    padding: 17px;
    border-radius: 12px;
    background: #f1f6f7;
}

    .reason-box p {
        margin: 8px 0 0;
        color: var(--ink-soft);
        font-size: .76rem;
        line-height: 1.55;
    }

.approval-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

    .approval-actions button {
        padding: 11px 18px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        font-size: .72rem;
        font-weight: 800;
    }

        .approval-actions button:last-child {
            border-color: var(--navy);
            background: var(--navy);
            color: #fff;
        }

.insights-visual {
    padding: 32px;
    background: #0e1a29;
    color: #fff;
}

.insight-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .insight-title small {
        color: #5ccfbe;
        font-size: .58rem;
        letter-spacing: .1em;
    }

    .insight-title h3 {
        margin: 6px 0 0;
        font-size: 1.3rem;
    }

    .insight-title > span {
        padding: 8px 10px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 9px;
        color: #99a9ba;
        font-size: .62rem;
    }

.bar-chart {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    height: 310px;
    margin-top: 36px;
    padding: 0 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: repeating-linear-gradient(to top,rgba(255,255,255,.05) 0 1px,transparent 1px 64px);
}

.bar-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.bar-value {
    position: relative;
    width: 65%;
    height: var(--bar-height);
    min-height: 30px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg,#38cbb6,#2877c9);
    box-shadow: 0 10px 25px rgba(31,177,161,.14);
    animation: barGrow 1.1s var(--ease) both;
    transform-origin: bottom;
}

    .bar-value span {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: .63rem;
        font-weight: 800;
    }

.bar-column small {
    margin-top: 11px;
    color: #8799ac;
    font-size: .57rem;
}

.insight-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    color: #8294a8;
    font-size: .63rem;
}

    .insight-footer span {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .insight-footer i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #35c6b3;
    }

    .insight-footer strong {
        color: #d7e1eb;
    }

.workflow-section {
    background: linear-gradient(180deg,#f2f7f7,#fff);
}

.workflow-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    max-width: 1380px;
    margin: 70px auto 0;
}

.timeline-progress {
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,var(--teal),#7692e6);
}

.timeline-step {
    position: relative;
    z-index: 2;
    text-align: center;
}

    .timeline-step > span {
        display: inline-flex;
        padding: 5px 8px;
        border-radius: 999px;
        background: #fff;
        color: var(--muted);
        font-size: .58rem;
        font-weight: 900;
        box-shadow: var(--shadow-sm);
    }

.timeline-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 12px auto 24px;
    place-items: center;
    border: 7px solid #f2f7f7;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(7,17,30,.2);
}

.timeline-step small {
    color: var(--teal);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.timeline-step h3 {
    margin: 10px 0;
    font-size: 1.1rem;
}

.timeline-step p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.65;
}

.live-scenario {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(50px,8vw,120px);
    align-items: center;
    background: #fff;
}

.scenario-copy {
    max-width: 560px;
}

    .scenario-copy h2 {
        font-size: clamp(2.7rem,4.6vw,4.9rem);
    }

    .scenario-copy > p:not(.eyebrow) {
        margin: 24px 0 28px;
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.8;
    }

.scenario-terminal {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #0d1927;
    color: #fff;
    box-shadow: var(--shadow-dark);
}

.terminal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #b4c0ce;
    font-size: .7rem;
    font-weight: 800;
}

    .terminal-top b {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5bd4bc;
    }

    .terminal-top i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #3ad7a9;
        box-shadow: 0 0 0 5px rgba(58,215,169,.1);
    }

.scenario-events {
    padding: 22px;
}

.scenario-event {
    position: relative;
    display: grid;
    grid-template-columns: 90px 40px 1fr;
    gap: 14px;
    min-height: 92px;
    align-items: start;
}

    .scenario-event:not(:last-child)::after {
        position: absolute;
        left: 110px;
        top: 44px;
        bottom: -5px;
        width: 1px;
        content: "";
        background: rgba(255,255,255,.1);
    }

    .scenario-event time {
        padding-top: 11px;
        color: #6f8298;
        font-size: .55rem;
    }

    .scenario-event > i {
        position: relative;
        z-index: 2;
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid rgba(92,210,190,.26);
        border-radius: 12px;
        background: #14293a;
        color: #5bd4bc;
        font-style: normal;
        font-weight: 900;
    }

    .scenario-event div {
        padding: 9px 14px 17px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .scenario-event strong, .scenario-event span {
        display: block;
    }

    .scenario-event strong {
        font-size: .78rem;
    }

    .scenario-event span {
        margin-top: 6px;
        color: #8295aa;
        font-size: .67rem;
        line-height: 1.55;
    }

    .scenario-event.success > i {
        background: #1b6b55;
        color: #7ae8bb;
    }

    .scenario-event.success strong {
        color: #77dfb5;
    }

.trust-section {
    background: #f3f7f9;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    max-width: 1300px;
    margin: 0 auto;
}

.trust-card {
    min-height: 230px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(8,21,36,.05);
    transition: transform .25s ease,box-shadow .25s ease;
}

    .trust-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-sm);
    }

    .trust-card > span {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        border-radius: 14px;
        background: var(--teal-soft);
        color: var(--teal);
        font-size: 1.15rem;
        font-weight: 900;
    }

    .trust-card h3 {
        margin: 22px 0 10px;
        font-size: 1.05rem;
    }

    .trust-card p {
        margin: 0;
        color: var(--muted);
        font-size: .82rem;
        line-height: 1.65;
    }

.faq-section {
    background: #fff;
}

.faq-layout {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(50px,8vw,120px);
    max-width: 1300px;
    margin: 0 auto;
}

.faq-intro {
    position: sticky;
    top: 130px;
    align-self: start;
}

    .faq-intro h2 {
        font-size: clamp(2.5rem,4vw,4.3rem);
    }

    .faq-intro > p:last-child {
        margin: 24px 0 0;
        color: var(--muted);
        line-height: 1.75;
    }

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
}

    .faq-item summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 22px 24px;
        cursor: pointer;
        font-weight: 800;
        list-style: none;
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary span {
            display: grid;
            width: 30px;
            height: 30px;
            place-items: center;
            border-radius: 9px;
            background: #f1f5f7;
            color: var(--teal);
            font-size: 1.1rem;
            transition: transform .2s ease;
        }

    .faq-item[open] summary span {
        transform: rotate(45deg);
    }

    .faq-item p {
        margin: 0;
        padding: 0 24px 24px;
        color: var(--muted);
        font-size: .87rem;
        line-height: 1.7;
    }

.final-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 60px;
    min-height: 560px;
    padding: 100px clamp(22px,8vw,130px);
    overflow: hidden;
    background: radial-gradient(circle at 80% 20%,rgba(45,199,177,.18),transparent 28%),linear-gradient(135deg,#07111e,#0e2235);
    color: #fff;
}

.cta-glow {
    position: absolute;
    left: 18%;
    bottom: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(57,107,219,.13);
    filter: blur(10px);
}

.final-cta-copy {
    position: relative;
    z-index: 2;
    max-width: 870px;
}

.final-cta .eyebrow {
    color: #68d8c8;
}

.final-cta h2 {
    font-size: clamp(3.5rem,6vw,6.9rem);
}

.final-cta p:not(.eyebrow) {
    max-width: 700px;
    margin: 24px 0 32px;
    color: #aab9c8;
    font-size: 1.08rem;
    line-height: 1.75;
}

.cta-shield {
    position: relative;
    display: grid;
    width: 240px;
    height: 275px;
    place-items: center;
    clip-path: polygon(50% 0,92% 17%,84% 74%,50% 100%,16% 74%,8% 17%);
    background: linear-gradient(145deg,rgba(43,202,180,.9),rgba(56,100,216,.9));
    box-shadow: 0 40px 90px rgba(26,168,152,.24);
}

    .cta-shield::before, .cta-shield::after {
        position: absolute;
        inset: 18px;
        content: "";
        clip-path: inherit;
        border: 1px solid rgba(255,255,255,.28);
    }

    .cta-shield::after {
        inset: 38px;
    }

    .cta-shield span {
        font-size: 4rem;
        font-weight: 900;
    }

.site-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 30px clamp(22px,6vw,96px);
    background: #050c15;
    color: #77889b;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .72rem;
}

.footer-brand {
    color: #fff;
}

.site-footer p {
    margin: 0;
    text-align: center;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(3,10,18,.75);
    backdrop-filter: blur(10px);
    animation: fadeIn .18s ease both;
}

.lead-modal {
    position: relative;
    width: min(620px,100%);
    max-height: 92vh;
    overflow: auto;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 35px 100px rgba(0,0,0,.3);
    animation: modalIn .32s var(--ease) both;
}

    .lead-modal h2 {
        margin: 0;
        font-family: "Space Grotesk";
        font-size: 2.3rem;
        letter-spacing: -.04em;
    }

    .lead-modal > p:not(.eyebrow) {
        color: var(--muted);
        line-height: 1.65;
    }

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: #eef3f5;
    color: var(--ink);
    font-size: 1.2rem;
    cursor: pointer;
}

.lead-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: .77rem;
    font-weight: 800;
}

.form-control {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #ccd7e1;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}

    .form-control:focus {
        border-color: var(--teal);
        outline: 3px solid rgba(13,140,127,.1);
    }

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.success-mark {
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 18px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 1.6rem;
    font-weight: 900;
}

@keyframes heroEnter {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,185,147,.3)
    }

    70%,100% {
        box-shadow: 0 0 0 9px rgba(37,185,147,0)
    }
}

@keyframes floatAlert {
    0%,100% {
        transform: translateY(0)
    }

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

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

@keyframes fileMove {
    0%,12% {
        transform: translateX(0);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    72% {
        opacity: 1
    }

    88%,100% {
        transform: translateX(calc(100% + 38px));
        opacity: 0
    }
}

@keyframes ringPulse {
    0% {
        transform: scale(.7);
        opacity: 0
    }

    35% {
        opacity: 1
    }

    100% {
        transform: scale(1.15);
        opacity: 0
    }
}

@keyframes barGrow {
    from {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (max-width: 1180px) {
    .site-nav {
        display: none;
    }

    .site-header {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .hero-section {
        grid-template-columns: 1fr;
        padding-top: 140px;
    }

    .hero-copy {
        max-width: 900px;
    }

        .hero-copy h1 {
            max-width: 1000px;
        }

    .hero-product {
        justify-self: center;
        width: min(900px,100%);
    }

    .upload-stage {
        grid-template-columns: 1fr 1.2fr 1fr;
    }

    .upload-source {
        grid-column: 1
    }

    .upload-flow {
        grid-column: 2
    }

    .shield-gate {
        grid-column: 3
    }

    .decision-stack {
        grid-column: 1/-1;
        grid-template-columns: repeat(3,1fr);
    }

    .showcase-row, .live-scenario, .faq-layout {
        grid-template-columns: 1fr;
    }

    .showcase-copy, .scenario-copy {
        max-width: 760px;
    }

    .showcase-row.reverse .showcase-copy {
        order: 0;
    }

    .faq-intro {
        position: static;
    }

    .trust-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 840px) {
    .hero-copy h1 {
        font-size: clamp(3.4rem,13vw,5.8rem);
    }

    .dashboard-shell {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        display: none;
    }

    .dashboard-main {
        padding: 14px;
    }

    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }

    .risk-panel {
        display: none;
    }

    .floating-alert {
        right: 8px;
        bottom: -34px;
        min-width: 280px;
    }

    .upload-stage {
        display: block;
        padding: 30px;
    }

    .upload-flow {
        min-height: 260px;
        margin: 20px 0;
    }

    .shield-gate {
        margin: 40px 0;
    }

    .decision-stack {
        grid-template-columns: 1fr;
    }

    .attempts-layout {
        grid-template-columns: 1fr;
    }

    .attempts-sidebar {
        display: none;
    }

    .attempts-main {
        padding: 20px;
    }

    .filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .attempt-row {
        grid-template-columns: 1.4fr 1fr .8fr;
    }

        .attempt-row > span:nth-child(3), .attempt-row.table-head span:nth-child(3) {
            display: none;
        }

        .attempt-row > span:nth-child(4), .attempt-row.table-head span:nth-child(4) {
            display: none;
        }

    .attempts-layout {
        min-height: auto;
    }

    .showcase-row {
        grid-template-columns: 1fr;
    }

    .product-card {
        min-height: 480px;
    }

    .workflow-timeline {
        grid-template-columns: repeat(2,1fr);
    }

    .timeline-progress {
        display: none;
    }

    .final-cta {
        grid-template-columns: 1fr;
    }

    .cta-shield {
        display: none;
    }

    .site-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        justify-self: center;
    }
}

@media (max-width: 600px) {
    .site-header {
        padding-left: 18px;
        padding-right: 18px;
    }

    .brand-mark > span:last-child {
        display: none;
    }

    .hero-section {
        padding: 118px 18px 72px;
    }

    .hero-actions {
        flex-direction: column;
    }

        .hero-actions .btn {
            width: 100%;
        }

    .hero-trust {
        gap: 11px;
        flex-direction: column;
    }

    .browser-topbar {
        grid-template-columns: 62px 1fr 26px;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr 1fr;
    }

        .dashboard-metrics .dash-metric:last-child {
            display: none;
        }

    .activity-row {
        grid-template-columns: 28px 1fr;
    }

        .activity-row .pill {
            display: none;
        }

    .floating-alert {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 12px;
        min-width: 0;
    }

    .section-pad {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section-heading h2, .story-heading h2, .showcase-copy h2, .scenario-copy h2, .faq-intro h2 {
        font-size: 2.55rem;
    }

    .wide-product-frame {
        border-radius: 16px;
    }

    .attempts-main {
        padding: 14px;
    }

    .attempts-title {
        align-items: flex-start;
    }

        .attempts-title button {
            display: none;
        }

    .filter-row {
        grid-template-columns: 1fr;
    }

        .filter-row span:not(:first-child) {
            display: none;
        }

    .attempt-row {
        grid-template-columns: 1.4fr .7fr;
        min-height: 68px;
        padding: 0 10px;
    }

        .attempt-row > span:nth-child(2), .attempt-row.table-head span:nth-child(2) {
            display: none;
        }

    .file-cell i {
        display: none;
    }

    .feature-showcase {
        gap: 90px;
    }

    .product-card {
        min-height: 430px;
        border-radius: 18px;
    }

    .endpoint-visual, .approval-visual, .insights-visual {
        padding: 18px;
    }

    .chat-input {
        width: 260px;
    }

    .blocked-overlay {
        right: 14px;
        bottom: 14px;
        width: calc(100% - 28px);
    }

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

    .bar-chart {
        height: 250px;
        gap: 5px;
    }

    .bar-value {
        width: 75%;
    }

    .workflow-timeline, .trust-grid {
        grid-template-columns: 1fr;
    }

    .timeline-step {
        padding-bottom: 20px;
    }

    .scenario-events {
        padding: 14px;
    }

    .scenario-event {
        grid-template-columns: 34px 1fr;
    }

        .scenario-event time {
            display: none;
        }

        .scenario-event:not(:last-child)::after {
            left: 20px;
        }

    .lead-form-grid {
        grid-template-columns: 1fr;
    }

    .lead-modal {
        padding: 28px 20px;
    }

    .modal-buttons {
        flex-direction: column;
    }

        .modal-buttons .btn {
            width: 100%;
        }

    .final-cta {
        min-height: auto;
        padding: 80px 18px;
    }

        .final-cta h2 {
            font-size: 3.25rem;
        }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 100%;
    padding: .75rem 1.25rem;
    background: #fff3cd;
    color: #000;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}

    #blazor-error-ui .dismiss {
        position: absolute;
        top: .5rem;
        right: 1rem;
        cursor: pointer;
    }

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 4rem;
    background: #b32121;
    color: #fff;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }
/* ==========================================================
   Blog Layout
========================================================== */

.blog-page {
    background: linear-gradient(180deg,#f7fafc 0%,#eef6f4 40%,#ffffff 100%);
    min-height: 100vh;
    padding: 60px 20px 100px;
}

.blog-container {
    max-width: 900px;
    margin: 0 auto;
}

.blog-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    color: var(--teal);
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

    .blog-back:hover {
        color: var(--dark);
        text-decoration: none;
    }

.blog-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 64px;
    box-shadow: var(--shadow);
}

.blog-category {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.blog-card h1 {
    outline: none;
    margin: 0 0 24px;
    color: var(--ink);
    font-size: clamp(2.6rem,5vw,4rem);
    font-weight: 900;
    line-height: 1.05;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 36px;
    color: var(--muted);
    font-size: .95rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
}

.blog-card h2 {
    margin-top: 60px;
    margin-bottom: 18px;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1.2;
}

.blog-card h3 {
    margin-top: 42px;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 1.4rem;
}

.blog-card p {
    margin: 0 0 24px;
    color: var(--ink-soft);
    font-size: 1.12rem;
    line-height: 1.9;
}

.blog-card ul,
.blog-card ol {
    margin: 0 0 28px;
    padding-left: 28px;
}

.blog-card li {
    margin-bottom: 14px;
    color: var(--ink-soft);
    font-size: 1.08rem;
    line-height: 1.8;
}

.blog-card strong {
    color: var(--ink);
}

.blog-card a {
    color: var(--teal);
    font-weight: 700;
}

    .blog-card a:hover {
        color: var(--dark);
    }

.blog-card img {
    width: 100%;
    border-radius: 12px;
    margin: 36px 0;
}

.blog-callout {
    margin: 40px 0;
    padding: 28px;
    border-left: 5px solid var(--teal);
    border-radius: 12px;
    background: #f8fbfc;
}

    .blog-callout h3 {
        margin-top: 0;
    }

    .blog-callout p:last-child {
        margin-bottom: 0;
    }

.blog-cta {
    margin-top: 70px;
    padding: 42px;
    border-radius: 16px;
    background: var(--dark);
    text-align: center;
}

    .blog-cta h2 {
        margin-top: 0;
        color: #ffffff;
    }

    .blog-cta p {
        color: rgba(255,255,255,.85);
    }

    .blog-cta .btn {
        margin-top: 20px;
    }

.blog-divider {
    margin: 60px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

@media (max-width:900px) {

    .blog-card {
        padding: 40px 28px;
        border-radius: 14px;
    }

        .blog-card h1 {
            font-size: 2.5rem;
        }

        .blog-card h2 {
            font-size: 1.8rem;
        }

        .blog-card p,
        .blog-card li {
            font-size: 1.05rem;
            line-height: 1.8;
        }

    .blog-cta {
        padding: 32px 24px;
    }
}

@media (max-width:600px) {

    .blog-page {
        padding: 30px 14px 70px;
    }

    .blog-card {
        padding: 28px 20px;
    }

        .blog-card h1 {
            font-size: 2.1rem;
        }

        .blog-card h2 {
            font-size: 1.6rem;
        }

    .blog-meta {
        flex-direction: column;
        gap: 8px;
    }

    .blog-card p,
    .blog-card li {
        font-size: 1rem;
    }
}




/* ==========================================================
   Blazor Error UI
========================================================== */

#blazor-error-ui {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 99999;
    display: none;
    width: min(650px, calc(100% - 32px));
    padding: 18px 24px;
    border: 1px solid #f2c7cb;
    border-radius: 16px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: var(--shadow);
    animation: modalIn .25s var(--ease);
}

    #blazor-error-ui::before {
        content: "⚠";
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        margin-right: 14px;
        border-radius: 10px;
        background: var(--red-soft);
        color: var(--red);
        font-weight: 900;
        float: left;
    }

    #blazor-error-ui .dismiss {
        position: absolute;
        top: 16px;
        right: 18px;
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--muted);
        cursor: pointer;
        transition: color .2s ease;
    }

        #blazor-error-ui .dismiss:hover {
            color: var(--red);
        }

    #blazor-error-ui .reload {
        margin-left: 8px;
        color: var(--teal);
        font-weight: 700;
        text-decoration: none;
    }

        #blazor-error-ui .reload:hover {
            text-decoration: underline;
        }

.blazor-error-boundary {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid #f2c7cb;
    background: linear-gradient(180deg,#fff5f6,#ffffff);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

    .blazor-error-boundary::before {
        content: "⚠ Component Error";
        display: inline-block;
        margin-bottom: 14px;
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--red-soft);
        color: var(--red);
        font-size: .8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .blazor-error-boundary::after {
        content: "Something went wrong while rendering this part of the page. Please refresh the page or try again later.";
        display: block;
        margin-top: 10px;
        color: var(--ink-soft);
        font-size: 1rem;
        line-height: 1.6;
    }





.pricing-section {
    background: #fff;
}

.pricing-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1300px;
    margin: auto;
}

.pricing-card,
.pricing-features {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 36px;
    box-shadow: var(--shadow-sm);
}

    .pricing-card h3,
    .pricing-features h3 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 1.6rem;
    }

    .pricing-card p,
    .pricing-features p {
        color: var(--muted);
    }

.device-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 36px 0 18px;
}

    .device-count strong {
        font-size: 2rem;
    }

.pricing-card input[type=range] {
    width: 100%;
    margin-bottom: 28px;
}

.price-summary {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 28px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
}

    .price-row:not(:last-child) {
        border-bottom: 1px solid var(--line);
    }

    .price-row.total strong {
        font-size: 2rem;
        color: var(--teal);
    }

    .price-row.savings strong {
        color: #16a34a;
    }

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

    .pricing-table td {
        padding: 14px;
        border-bottom: 1px solid var(--line);
    }

        .pricing-table td:last-child {
            text-align: right;
            font-weight: 700;
        }

    .pricing-table tr.active {
        background: rgba(13,140,127,.08);
    }

.pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.pricing-features li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

@media (max-width:900px) {

    .pricing-layout {
        grid-template-columns: 1fr;
    }
}