@font-face {
    font-family: "Inter";
    src: url("fonts/inter-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #1d1d1f;
    --soft: #f5f5f7;
    --white: #ffffff;
    --accent: #1e3a8a;
    --page-width: 1180px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--white);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.modal-open {
    overflow: hidden;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

img {
    display: block;
    max-width: 100%;
}

.skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 1000;
    padding: 12px 18px;
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
}

.skip-link:focus {
    top: 16px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 56px;
    border-bottom: 1px solid rgba(29, 29, 31, .08);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: saturate(180%) blur(18px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 40px), var(--page-width));
    height: 100%;
    margin: 0 auto;
}

.brand img {
    width: 112px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 13px;
}

.site-nav>a {
    opacity: .78;
    transition: opacity .2s ease;
}

.site-nav>a:hover {
    opacity: 1;
}

.site-nav>a:focus-visible {
    opacity: 1 !important;
    background: var(--white) !important;
    outline: 3px solid var(--accent) !important;
    outline-offset: 4px;
    border-radius: 4px;
}

.brand:focus-visible {
    background: var(--white) !important;
    outline: 3px solid var(--accent) !important;
    outline-offset: 4px;
    border-radius: 4px;
}

.menu-toggle {
    display: none;
}

.menu-backdrop {
    display: none;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    color: var(--white);
    background: var(--accent);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform .25s var(--ease), filter .25s ease;
}

.button:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
}

.button-small {
    min-height: 32px;
    padding: 0 16px;
    font-size: 12px;
}

.button-block {
    width: 100%;
}

.text-link {
    position: relative;
    font-size: 17px;
    font-weight: 600;
}

.text-link::before {
    position: absolute;
    inset: -12px -14px;
    content: "";
}

.text-link span {
    display: inline-block;
    margin-left: 4px;
    transition: transform .25s var(--ease);
}

.text-link:hover span {
    transform: translateY(3px);
}

.eyebrow {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.hero {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: max(620px, calc(100svh - 56px));
    padding: 100px 20px 40px;
    /* Aligned with YouTube video width (20px margins) */
    color: var(--white);
    background: #0d0d0d;
    text-align: left;
}

.hero-layout-wrapper {
    position: relative;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
}

.hero-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
}

.hero-text {
    flex: 1;
    max-width: 840px;
    text-shadow: 0 10px 50px rgba(0, 0, 0, 0.40), 0 20px 100px rgba(0, 0, 0, 0.25);
    /* Ultra-soft, highly scattered text shadow */
}

.hero h1,
.section-heading h2,
.story-copy h2,
.writing-copy h2,
.final-cta h2 {
    margin: 0;
    font-size: clamp(54px, 7vw, 96px);
    line-height: .98;
    letter-spacing: -.065em;
    text-wrap: balance;
}

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

.hero-intro {
    width: 100%;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.35;
    letter-spacing: -.025em;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
}

.hero .button {
    background: var(--white);
    color: var(--ink);
}

.hero .button:hover {
    background: #e8e8ed;
}

.hero .text-link {
    color: var(--white);
}

/* HERO VIDEO BACKGROUND -------------------------------------------------- */
.hero-video-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-video-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(13, 13, 13, 0.95) 0%,
            rgba(13, 13, 13, 0.70) 15%,
            rgba(13, 13, 13, 0.40) 30%,
            rgba(13, 13, 13, 0.40) 100%);
    /* Linear gradient upward: dark at the bottom 1/4, blending into 40% overlay */
    z-index: 1;
}

.hero-video-container video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ai-video-label {
    position: absolute;
    top: 40px;
    right: 32px;
    z-index: 10;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: var(--white);
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    pointer-events: none;
}

/* HERO VIDEO TOGGLE BUTTON ------------------------------------------------ */
.hero-video-toggle {
    position: absolute;
    top: 80px; /* 24px below the 56px sticky header */
    right: 32px; /* Floats near the right screen edge */
    z-index: 10;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--white);
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.hero-video-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

html:not(.is-using-mouse) .hero-video-toggle:focus-visible,
.hero-video-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    transform: scale(1.05);
}

html:not(.is-using-mouse) .hero .button:focus-visible,
html:not(.is-using-mouse) .hero .text-link:focus-visible,
.hero .button:focus-visible,
.hero .text-link:focus-visible {
    position: relative;
    outline: none !important;
    box-shadow: none !important;
}

/* Floating double-ring focus frame using pseudo-elements */
html:not(.is-using-mouse) .hero-video-toggle:focus-visible::before,
html:not(.is-using-mouse) .hero .button:focus-visible::before,
html:not(.is-using-mouse) .hero .text-link:focus-visible::before,
.hero-video-toggle:focus-visible::before,
.hero .button:focus-visible::before,
.hero .text-link:focus-visible::before {
    content: '';
    position: absolute;
    inset: -7px; /* Positioned outside the element */
    border: 3px solid var(--accent); /* Outer blue ring */
    box-shadow: inset 0 0 0 2px #ffffff; /* Inner white ring */
    border-radius: inherit; /* Inherits the pill/circle shape of the parent */
    pointer-events: none;
    z-index: 5;
}

.hero .text-link:focus-visible {
    border-radius: 4px;
}

.hero-video-toggle svg {
    width: 14px;
    height: 14px;
}

.hero-video-toggle[data-playing="true"] .icon-play {
    display: none !important;
}

.hero-video-toggle[data-playing="true"] .icon-pause {
    display: block !important;
}

.hero-video-toggle[data-playing="false"] .icon-play {
    display: block !important;
}

.hero-video-toggle[data-playing="false"] .icon-pause {
    display: none !important;
}

/* ------------------------------------------------------------------------ */



.film-section,
.benefits,
.setup {
    padding: 150px 20px;
}

.film-section {
    --video-heading-opacity: 1;
    --video-heading-shift: 0px;
    padding-top: 130px;
    background: linear-gradient(180deg,
            #1e3a8a 0%,
            #1e3a8a 25%,
            #2f58c7 42%,
            #6385f2 55%,
            #ebf1fe 70%,
            #ffffff 80%,
            #ffffff 100%);
}

.film-section .eyebrow {
    color: rgba(255, 255, 255, .78);
}

.film-section .section-heading h2 {
    color: var(--white);
}

.film-section .section-heading>p:last-child {
    color: rgba(255, 255, 255, .72);
}

.film-section .section-heading.is-visible {
    opacity: var(--video-heading-opacity);
    transform: translateY(var(--video-heading-shift));
    will-change: opacity, transform;
}

.benefits {
    background: var(--white);
}

.section-heading {
    width: min(100%, var(--page-width));
    margin: 0 auto 70px;
}

.section-heading h2,
.story-copy h2,
.writing-copy h2,
.final-cta h2 {
    font-size: clamp(48px, 6.2vw, 82px);
}

/* Typografische Hierarchie der großen Seitenkapitel. */
.hero h1,
.security-heading h2 {
    font-size: clamp(82px, 7vw, 96px);
}

.film-section .section-heading h2,
.story-copy h2,
.writing-copy h2,
.benefits .section-heading h2 {
    font-size: clamp(68px, 6.2vw, 82px);
}

.setup .section-heading h2 {
    font-size: clamp(68px, 6.2vw, 82px);
}

.use-cases .section-heading h2 {
    font-size: clamp(56px, 5vw, 64px);
}

.section-heading>p:last-child,
.story-copy>p:last-child,
.writing-copy>p:last-child,
.final-cta>div>p {
    width: min(100%, 700px);
    margin: 28px 0 0;
    color: rgba(29, 29, 31, .64);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.42;
    letter-spacing: -.02em;
}

.video-stage {
    position: relative;
    height: calc(100svh + clamp(260px, 26vw, 440px));
}

.video-shell {
    --video-scale: .91;
    --video-radius: 30px;
    --video-shadow-y: 15px;
    --video-shadow-blur: 45px;
    --video-shadow-opacity: .08;
    position: sticky;
    top: max(72px, calc((100svh - min(54vw, 877px)) / 2));
    overflow: hidden;
    width: min(calc(100vw - 40px), 1560px);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: var(--video-radius);
    background: var(--white);
    box-shadow: 0 var(--video-shadow-y) var(--video-shadow-blur) rgba(29, 29, 31, var(--video-shadow-opacity));
    transform: scale(var(--video-scale));
    transform-origin: center center;
    will-change: transform, border-radius, box-shadow;
}

.video-poster,
.video-shell iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-shell iframe {
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
}

.video-poster {
    z-index: 2;
    overflow: hidden;
    padding: 0;
    border: 0;
    color: var(--white);
    cursor: pointer;
    background: #080b12;
}

.video-preview-image {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.video-poster::after {
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(7, 31, 79, .18), transparent 23%);
    content: "";
}

.video-art {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(55, 89, 191, .24), transparent 30%),
        radial-gradient(circle at 7% 8%, rgba(30, 58, 138, .2), transparent 28%),
        linear-gradient(145deg, #11182b 0%, #080b12 48%, #0b0d12 100%);
}

.video-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at center, #000 10%, transparent 72%);
}

.video-glow {
    position: absolute;
    border-radius: 50%;
    opacity: .5;
    filter: blur(55px);
}

.video-glow-one {
    top: -18%;
    right: 12%;
    width: 35%;
    aspect-ratio: 1;
    background: rgba(64, 102, 210, .21);
}

.video-glow-two {
    bottom: -30%;
    left: 15%;
    width: 38%;
    aspect-ratio: 1;
    background: rgba(30, 58, 138, .18);
}

.video-document {
    --document-rotation: 0deg;
    position: absolute;
    z-index: 1;
    display: flex;
    width: 23%;
    aspect-ratio: 1.42;
    flex-direction: column;
    gap: 9%;
    padding: 2.4%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    opacity: .58;
    background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
    box-shadow: 0 25px 75px rgba(0, 0, 0, .28);
    backdrop-filter: blur(12px);
    transform: rotate(var(--document-rotation));
    animation: video-document-float 7s ease-in-out infinite alternate;
}

.video-document-one {
    --document-rotation: -7deg;
    top: 17%;
    left: 5%;
}

.video-document-two {
    --document-rotation: 6deg;
    right: 4.5%;
    bottom: 14%;
    animation-delay: -3.2s;
}

.video-document-top {
    display: flex;
    gap: 6px;
}

.video-document-top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .34);
}

.video-document-line {
    display: block;
    width: 72%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
}

.video-document-line-long {
    width: 92%;
}

.video-document-line-short {
    width: 54%;
}

.video-code-copy {
    position: absolute;
    z-index: 3;
    top: 41%;
    left: 50%;
    display: flex;
    width: min(72%, 900px);
    align-items: center;
    flex-direction: column;
    color: var(--white);
    text-align: center;
    transform: translate(-50%, -50%);
}

.video-code-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .68);
    font-size: clamp(12px, 1.2vw, 15px);
    font-weight: 600;
    letter-spacing: .015em;
}

.video-code-brand img {
    width: 19px;
    height: 21px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.video-code-copy strong {
    font-size: clamp(40px, 5vw, 76px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.052em;
}

.video-code-subline {
    margin-top: 20px;
    color: rgba(255, 255, 255, .64);
    font-size: clamp(15px, 1.55vw, 21px);
    font-weight: 400;
    letter-spacing: -.02em;
}

.video-code-note {
    position: absolute;
    right: 30px;
    bottom: 26px;
    color: rgba(255, 255, 255, .46);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .015em;
}

.video-shell.is-playing .video-poster {
    display: none;
}

.play-button {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: rgba(30, 58, 138, .96);
    box-shadow: 0 10px 34px rgba(7, 31, 79, .34), 0 0 0 1px rgba(255, 255, 255, .18);
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease);
}

@keyframes video-document-float {
    from {
        transform: translate3d(0, 4px, 0) rotate(var(--document-rotation));
    }

    to {
        transform: translate3d(0, -10px, 0) rotate(var(--document-rotation));
    }
}

@media (max-width: 700px) {
    .video-grid {
        background-size: 38px 38px;
    }

    .video-document {
        width: 35%;
        padding: 4%;
        border-radius: 12px;
        opacity: .38;
    }

    .video-document-one {
        top: 10%;
        left: -8%;
    }

    .video-document-two {
        right: -8%;
        bottom: 5%;
    }

    .video-code-copy {
        top: 40%;
        width: 88%;
    }

    .video-code-brand {
        gap: 6px;
        margin-bottom: 10px;
        font-size: 10px;
    }

    .video-code-brand img {
        width: 13px;
        height: 15px;
    }

    .video-code-copy strong {
        font-size: clamp(24px, 7.8vw, 31px);
        letter-spacing: -.045em;
    }

    .video-code-subline {
        margin-top: 8px;
        font-size: 12px;
    }

    .video-code-note {
        display: none;
    }

    .play-button {
        top: 50%;
        width: 54px;
        height: 54px;
    }

    .play-button svg {
        width: 24px;
    }
}

.video-poster:hover .play-button {
    transform: translate(-50%, -50%) scale(1.06);
}

.video-poster:focus-visible {
    outline: none;
}

.video-poster:focus-visible .play-button {
    box-shadow: 0 10px 34px rgba(7, 31, 79, .34), 0 0 0 1px rgba(255, 255, 255, .18);
    transform: translate(-50%, -50%) scale(1.04);
}

.video-poster:focus-visible .play-button::before {
    content: '';
    position: absolute;
    inset: -7px;
    border: 3px solid var(--accent);
    box-shadow: inset 0 0 0 2px #ffffff;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
}

.play-button svg {
    width: 32px;
    fill: currentColor;
    transform: translateX(-1px);
}

.story {
    padding: 170px 20px;
}

.story-dark,
.security,
.use-cases {
    color: var(--ink);
}

.story-dark {
    background: linear-gradient(180deg, var(--white) 0%, #fafafb 100%);
}

.security {
    background: var(--white);
}

.use-cases {
    background: linear-gradient(180deg, #F5F5F7 0%, #FFFFFF 100%);
}

.story-inner,
.security-inner,
.use-cases-inner {
    width: min(100%, var(--page-width));
    margin: 0 auto;
}

.story-copy {
    width: min(100%, 850px);
}

.story-copy>p:last-child,
.section-heading-light>p:last-child {
    color: #6e6e70;
}

.answer-demo {
    width: min(100%, 920px);
    margin: 90px 0 0 auto;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid rgba(29, 29, 31, .12);
    border-radius: 28px;
    background: var(--soft);
}

.demo-label {
    margin: 0 0 12px;
    color: #6e6e70;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.demo-question,
.demo-answer {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 42px);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.demo-answer {
    font-weight: 600;
}

.demo-divider {
    height: 1px;
    margin: 40px 0;
    background: rgba(29, 29, 31, .12);
}

.source-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(29, 29, 31, .1);
    color: #6e6e70;
    background: var(--white);
    font-size: 13px;
}

.source-chip svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.writing-section {
    overflow: hidden;
    padding: 150px 20px;
    background: linear-gradient(180deg, #fafafb 0%, var(--soft) 180px, var(--soft) 100%);
}

.writing-inner {
    width: min(100%, var(--page-width));
    margin: 0 auto;
}

.writing-copy {
    width: min(100%, 880px);
    margin-left: max(0px, calc((100% - var(--page-width)) / 2));
}

.writer-frame {
    overflow: hidden;
    margin-top: 80px;
    border: 1px solid rgba(29, 29, 31, .1);
    border-radius: 28px;
    background: var(--white);
    box-shadow: 0 35px 90px rgba(29, 29, 31, .12);
}

.writer-frame img {
    width: 100%;
    height: auto;
}

.benefit-grid {
    display: grid;
    overflow: hidden;
    width: min(100%, var(--page-width));
    margin: 0 auto;
    border: 1px solid rgba(29, 29, 31, .16);
    border-radius: 30px;
    background: var(--white);
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.benefit-card {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    padding: clamp(30px, 5vw, 58px);
    background: var(--white);
}

.benefit-card-wide {
    min-height: 550px;
    border-bottom: 1px solid rgba(29, 29, 31, .16);
    grid-column: 1 / -1;
}

.benefit-card:nth-child(2) {
    border-right: 1px solid rgba(29, 29, 31, .16);
    background: var(--soft);
}

.benefit-card-device {
    display: flex;
    flex-direction: column;
}

.device-compatibility {
    width: min(100%, 440px);
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(29, 29, 31, .11);
}

.device-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.device-item {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
}

.device-item svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.device-note {
    display: block;
    margin-top: 18px;
    color: rgba(29, 29, 31, .56);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -.01em;
    text-align: center;
}

.card-meta {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    gap: 14px;
}

.benefit-index {
    padding-right: 14px;
    border-right: 1px solid rgba(29, 29, 31, .2);
    color: #6e6e70;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.card-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.benefit-card h3 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(28px, 3.8vw, 48px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.048em;
}

.benefit-card>p {
    max-width: 620px;
    margin: 22px 0 0;
    color: rgba(29, 29, 31, .62);
    font-size: 18px;
    line-height: 1.55;
}

.search-visual {
    position: absolute;
    right: 6%;
    bottom: 60px;
    left: 6%;
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 1px solid #a8adb5;
    border-radius: 16px;
    color: #62646a;
    background: var(--white);
    font-size: 1rem;
    box-shadow: none;
}

.search-placeholder {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    padding: 0 8px 0 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-submit {
    display: flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(5, 17, 106, .1) 0%, rgba(4, 9, 45, .16) 100%);
    box-shadow: 0 0 0 1px rgba(200, 200, 200, .1), 0 2px 8px 1px rgba(0, 0, 0, .05);
}

.search-submit-inner {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    background: rgba(30, 58, 138, .4);
}

.search-submit-inner svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.source-stack {
    position: absolute;
    right: 48px;
    bottom: 55px;
    left: 48px;
    display: grid;
    gap: 12px;
}

.source-stack span {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(29, 29, 31, .13);
    border-radius: 6px;
    background: var(--white);
    color: rgba(29, 29, 31, .65);
    font-size: 14px;
    gap: 12px;
}

.source-stack span::before {
    color: #6e6e70;
    content: "PDF";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}

.phone-image {
    position: static;
    align-self: flex-end;
    width: min(62%, 350px);
    height: auto;
    margin-top: 44px;
    margin-right: -2%;
    margin-bottom: -3%;
    filter: drop-shadow(0 30px 30px rgba(29, 29, 31, .16));
}

.security {
    position: relative;
    overflow: hidden;
    padding: 0 20px 130px;
    background: var(--white);
}

.security-intro {
    --security-green-1: rgb(255, 255, 255);
    --security-green-2: rgb(112, 198, 141);
    --security-green-3: rgb(30, 138, 40);
    --security-green-4: rgb(16, 94, 28);
    --security-green-5: rgb(8, 48, 14);
    --security-stop-2: 26.92%;
    --security-stop-3: 53.85%;
    --security-stop-4: 74.04%;
    position: relative;
    display: grid;
    min-height: clamp(520px, 62vw, 720px);
    margin-right: -20px;
    margin-left: -20px;
    padding: 120px 20px;
    place-items: center;
    background: radial-gradient(ellipse at 50% 100%,
            var(--security-green-5) 0%,
            var(--security-green-4) 40%,
            var(--security-green-3) 70%,
            var(--security-green-2) 88%,
            var(--security-green-1) 100%);
}

.section-heading.security-heading {
    margin: 0 auto;
    color: var(--white);
    text-align: center;
}

.security-heading .eyebrow {
    color: #ffffff;
}

.security-heading h2 {
    color: var(--white);
    text-wrap: balance;
}

.section-heading.security-heading>p.security-description {
    margin: 28px auto 0;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.security-inner {
    position: relative;
}

.security-description {
    width: min(100%, 760px);
    margin: 90px auto 0;
    color: rgba(29, 29, 31, .64);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.42;
    letter-spacing: -.02em;
    text-align: center;
}

.security-hardware-photo {
    position: relative;
    display: grid;
    min-height: 720px;
    place-items: center;
    margin: 70px auto 90px;
}

.security-hardware-photo::after {
    position: absolute;
    right: 28%;
    bottom: 4%;
    left: 28%;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    filter: blur(24px);
    content: "";
}

.security-hardware-photo img {
    position: relative;
    z-index: 1;
    width: auto;
    height: min(680px, 68vw);
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 32px 42px rgba(0, 0, 0, .38));
}

.security-facts {
    display: grid;
    padding-top: 72px;
    border-top: 1px solid rgba(29, 29, 31, .14);
    grid-template-columns: repeat(3, 1fr);
    gap: 64px;
}

.security-facts div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.security-facts strong {
    color: #1C9D63;
    font-size: clamp(82px, 7vw, 96px);
    font-weight: 600;
    line-height: .88;
    letter-spacing: -.07em;
}

.security-facts span {
    max-width: 250px;
    color: #6e6e70;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.25;
}

.setup {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
}

.setup-steps {
    position: relative;
    display: grid;
    width: min(100%, var(--page-width));
    margin: 0 auto;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.setup-steps::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(29, 29, 31, .18);
    content: "";
}

.setup-steps li {
    position: relative;
    padding-top: 26px;
}

.setup-steps li::before {
    position: absolute;
    top: -4px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    content: "";
}

.setup-steps span {
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.setup-steps h3 {
    margin: 38px 0 14px;
    font-size: 30px;
    letter-spacing: -.035em;
}

.setup-steps p {
    margin: 0;
    color: rgba(29, 29, 31, .62);
    font-size: 18px;
    line-height: 1.55;
}

.use-cases {
    padding: 160px 20px;
}

.use-case-list {
    display: grid;
    margin-top: 56px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.use-case {
    display: flex;
    min-height: 350px;
    padding: 32px;
    border: 1px solid rgba(29, 29, 31, .09);
    border-radius: 24px;
    background: var(--white);
    flex-direction: column;
}


.use-case span {
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}


.use-case h3,
.use-case p {
    margin: 0;
}

.use-case h3 {
    margin-top: 42px;
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: -.04em;
}

.use-case p {
    margin-top: auto;
    padding-top: 36px;
    color: #6e6e70;
    font-size: 18px;
    line-height: 1.5;
}



.founder-section {
    padding: 170px 20px;
    background: linear-gradient(180deg, var(--white) 0%, #fafafb 100%);
}

.founder-inner {
    display: grid;
    width: min(100%, 1280px);
    margin: 0 auto;
    align-items: stretch;
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    gap: clamp(64px, 8vw, 120px);
}

.founder-portrait {
    overflow: hidden;
    min-height: 680px;
    border-radius: 28px;
    background: var(--ink);
}

.founder-portrait picture,
.founder-portrait img {
    width: 100%;
    height: 100%;
}

.founder-portrait img {
    object-fit: cover;
    object-position: center top;
}

.founder-copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.founder-copy h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -.06em;
    text-wrap: balance;
}

.founder-quote {
    max-width: 720px;
    margin: 44px 0 0;
    color: #6f6f70;
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.48;
    letter-spacing: -.025em;
}

.founder-quote p {
    margin: 0;
}

.founder-quote p+p {
    margin-top: 22px;
}

.founder-person {
    display: flex;
    max-width: 720px;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 52px;
    padding-top: 24px;
    border-top: 1px solid rgba(29, 29, 31, .16);
    gap: 28px;
}

.founder-person>div {
    display: grid;
    gap: 5px;
}

.founder-person strong {
    color: var(--ink);
    font-size: 18px;
}

.founder-person span {
    color: #6f6f70;
    font-size: 15px;
}

.founder-person a {
    position: relative;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    transition: opacity .2s ease;
}

.founder-person a:hover {
    opacity: 0.8;
}

.founder-person a::before {
    position: absolute;
    inset: -12px;
    content: "";
}

.founder-person a span {
    display: inline-block;
    margin-left: 3px;
    color: inherit;
    transition: transform .2s ease;
}

.founder-person a:hover span {
    transform: translate(2px, -2px);
}

.final-cta {
    padding: 180px 20px;
    text-align: center;
}

.final-cta>div {
    width: min(100%, 900px);
    margin: 0 auto;
}

.final-cta>div>p {
    margin-right: auto;
    margin-left: auto;
}

.final-cta .button {
    margin-top: 36px;
}

.final-cta small {
    display: block;
    margin-top: 16px;
    color: #6e6e70;
}

.site-footer {
    position: relative;
    overflow: hidden;
    padding: 84px 20px 30px;
    color: var(--white);
    background: var(--ink);
}

.footer-inner {
    display: grid;
    width: min(100%, var(--page-width));
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 70px 90px;
}

.footer-brand img {
    width: 118px;
    filter: grayscale(1) brightness(0) invert(1);
}

.footer-status {
    display: flex;
    align-items: center;
    margin: 30px 0 0;
    color: #858585;
    font-size: 13px;
    font-weight: 600;
}

.footer-brand .footer-statement {
    max-width: 720px;
    margin: 26px 0 0;
    color: var(--white);
    font-size: clamp(36px, 4.5vw, 62px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.footer-main-nav {
    display: grid;
    align-self: end;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.footer-main-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: #858585;
    font-size: 17px;
    font-weight: 600;
    transition: color .2s ease, padding .25s var(--ease);
}

.footer-main-nav a::after {
    content: "›";
    color: #858585;
    font-size: 22px;
    font-weight: 400;
}

.footer-main-nav a:hover,
.footer-main-nav a[aria-current="page"] {
    padding-right: 8px;
    color: var(--white);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1 / -1;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    gap: 30px;
}

.footer-bottom .copyright {
    margin: 0;
    color: #858585;
    font-size: 12px;
}

.footer-legal-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 24px;
}

.footer-legal-nav a {
    color: #858585;
    font-size: 12px;
}

.footer-legal-nav a:hover {
    color: var(--white);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    place-items: center;
    padding: 20px;
}

.modal.is-open {
    display: grid;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(29, 29, 31, .62);
    backdrop-filter: blur(12px);
}

.modal-card {
    position: relative;
    z-index: 1;
    overflow: auto;
    width: min(100%, 620px);
    max-height: calc(100vh - 40px);
    padding: clamp(30px, 5vw, 54px);
    border-radius: 28px;
    background: var(--white);
    box-shadow: 0 40px 100px rgba(29, 29, 31, .3);
}

.modal-card:focus {
    outline: none;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: var(--soft);
    cursor: pointer;
}

.modal-close svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.modal-card h2 {
    margin: 0;
    font-size: clamp(36px, 6vw, 54px);
    line-height: 1;
    letter-spacing: -.055em;
}

.modal-card>p:not(.eyebrow) {
    margin: 20px 0 0;
    color: #6e6e70;
    font-size: 17px;
    line-height: 1.5;
}

.modal-card>.modal-email-alternative {
    margin-top: 9px;
    font-size: 14px;
}

.modal-email-alternative a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.modal form {
    display: grid;
    margin-top: 34px;
    gap: 10px;
}

.modal label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
}

.modal label span {
    color: #6e6e70;
    font-weight: 400;
}

.modal input,
.modal textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #858585;
    border-radius: 12px;
    color: var(--ink);
    background: var(--white);
    outline: none;
}

.modal textarea {
    resize: vertical;
}

.modal .field-control {
    position: relative;
}

.modal .field-error {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1;
    color: #c62828;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    visibility: hidden;
}

.modal .field-error.is-visible {
    visibility: visible;
}

.modal input:focus,
.modal textarea:focus {
    border-color: #858585;
    box-shadow: none;
}

.modal input:focus-visible,
.modal textarea:focus-visible,
.modal select:focus-visible {
    outline: none;
}

.keyboard-navigation .modal input:focus,
.keyboard-navigation .modal textarea:focus,
.keyboard-navigation .modal select:focus {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-color: var(--accent);
    box-shadow: none;
}

.modal form .button {
    margin-top: 18px;
}

.modal form small {
    color: #6e6e70;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

.modal form small a {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .modal-card {
        padding: 24px 20px;
        border-radius: 20px;
        max-height: 85dvh;
    }

    .modal form {
        margin-top: 24px;
        gap: 8px;
    }

    .modal input,
    .modal textarea {
        padding: 12px 14px;
    }

    .modal .field-error {
        top: calc(100% + 1px);
    }
}

.honeypot {
    position: absolute !important;
    left: -10000px !important;
}

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

.reveal-delay {
    transition-delay: .12s;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

.skip-focused {
    position: relative;
    outline: none !important;
}

.skip-focused::after {
    content: '';
    position: absolute;
    inset: -9px;
    border: 3px solid var(--accent);
    box-shadow: inset 0 0 0 2px #ffffff;
    border-radius: 12px;
    pointer-events: none;
    z-index: 5;
}

.site-footer :focus-visible {
    outline-color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
    .video-stage {
        height: auto;
    }

    .video-shell {
        position: relative;
        top: auto;
        transform: none;
    }

    .film-section .section-heading.is-visible {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 820px) {
    .site-header {
        height: 52px;
    }

    .header-inner {
        width: min(calc(100% - 32px), var(--page-width));
    }

    .menu-toggle {
        position: relative;
        z-index: 2;
        display: block;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .menu-toggle span {
        position: absolute;
        left: 8px;
        width: 20px;
        height: 1px;
        background: var(--ink);
        transition: transform .25s var(--ease), top .25s var(--ease);
    }

    .menu-toggle span:first-child {
        top: 14px;
    }

    .menu-toggle span:last-child {
        top: 21px;
    }

    .menu-toggle[aria-expanded="true"] span:first-child {
        top: 18px;
        transform: rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:last-child {
        top: 18px;
        transform: rotate(-45deg);
    }

    .site-nav {
        position: fixed;
        top: 52px;
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        padding: 24px 20px 30px;
        border-bottom: 1px solid rgba(29, 29, 31, .1);
        background: var(--white);
        flex-direction: column;
        gap: 0;
        font-size: 22px;
    }

    .site-nav.is-open {
        display: flex;
    }

    .menu-backdrop {
        position: fixed;
        z-index: 90;
        inset: 52px 0 0;
        display: block;
        visibility: hidden;
        padding: 0;
        border: 0;
        opacity: 0;
        background: rgba(29, 29, 31, .48);
        transition: opacity .22s ease, visibility .22s ease;
    }

    .menu-backdrop.is-open {
        visibility: visible;
        opacity: 1;
    }

    .site-nav>a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(29, 29, 31, .08);
    }

    .site-nav .button {
        margin-top: 22px;
    }

    .hero {
        min-height: max(650px, calc(100svh - 52px));
        padding: 85px 16px 100px;
        text-align: left;
    }

    .hero-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 34px;
    }

    .hero-actions {
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .hero-video-toggle {
        top: 68px; /* 16px below the 52px mobile sticky header */
        right: 16px;
    }

    .ai-video-label {
        top: 28px;
        right: 16px;
    }


    .video-stage {
        height: auto;
    }

    .video-shell {
        position: relative;
        top: auto;
        width: min(100%, 1320px);
        transform: none;
    }

    .film-section .section-heading.is-visible {
        opacity: 1;
        transform: none;
    }

    .film-section,
    .benefits,
    .writing-section,
    .setup,
    .story,
    .security,
    .use-cases,
    .founder-section,
    .final-cta {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .film-section {
        background: linear-gradient(180deg,
                #1e3a8a 0%,
                #1e3a8a 50%,
                #2f58c7 70%,
                #6385f2 85%,
                #ebf1fe 93%,
                #ffffff 98%,
                #ffffff 100%);
    }

    .security {
        padding-top: 0;
    }

    .security-intro {
        min-height: 560px;
    }

    .security-description {
        margin-top: 70px;
    }

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

    .benefit-card-wide {
        grid-column: auto;
    }

    .benefit-card:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(29, 29, 31, .16);
    }

    .benefit-card {
        min-height: 570px;
    }

    .security-facts,
    .setup-steps {
        grid-template-columns: 1fr;
    }

    .security-facts {
        gap: 38px;
    }

    .security-facts strong {
        font-size: clamp(52px, 14.5vw, 64px);
    }

    .setup-steps {
        gap: 44px;
    }

    .setup-steps::before {
        display: none;
    }

    .desktop-only-break {
        display: none;
    }

    .setup-steps li {
        border-top: 1px solid rgba(29, 29, 31, .18);
    }

    .setup-steps h3 {
        margin-top: 24px;
    }

    .use-case-list {
        grid-template-columns: 1fr;
    }

    .use-case {
        min-height: 300px;
        padding: 28px;
    }

    .founder-inner {
        grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
        gap: 48px;
    }

    .founder-portrait {
        min-height: 560px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .footer-main-nav {
        gap: 0;
    }

    .footer-legal-nav {
        flex-wrap: wrap;
        gap: 16px 22px;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: max(680px, calc(100svh - 52px));
        padding: 76px 18px 140px;
    }

    .hero h1 {
        font-size: clamp(52px, 15vw, 76px);
        line-height: 1.05;
    }

    .hero-intro {
        font-size: 21px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 22px;
        align-items: flex-start;
    }

    .film-section,
    .benefits,
    .writing-section,
    .setup,
    .story,
    .security,
    .use-cases,
    .founder-section,
    .final-cta {
        padding-right: 18px;
        padding-left: 18px;
    }

    .section-heading {
        margin-bottom: 48px;
    }

    .security-intro {
        min-height: 430px;
        margin-right: -18px;
        margin-left: -18px;
        padding: 90px 18px;
    }

    .security-description {
        margin-top: 58px;
        text-align: left;
    }

    .section-heading h2,
    .story-copy h2,
    .writing-copy h2,
    .founder-copy h2,
    .final-cta h2 {
        font-size: clamp(44px, 13vw, 62px);
    }

    .security-heading h2 {
        font-size: clamp(68px, 6.2vw, 82px);
    }

    .security-facts strong {
        font-size: clamp(68px, 6.2vw, 82px);
    }

    .founder-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .founder-copy h2 {
        font-size: clamp(40px, 11vw, 52px);
    }

    .founder-portrait {
        min-height: 0;
        aspect-ratio: 4 / 5;
        border-radius: 20px;
    }

    .founder-copy .eyebrow {
        margin-bottom: 14px;
    }

    .founder-quote {
        margin-top: 34px;
        font-size: 19px;
    }

    .founder-person {
        margin-top: 38px;
    }

    .video-shell {
        border-radius: 18px;
    }

    .writer-frame {
        margin-top: 54px;
        border-radius: 18px;
    }

    .play-button {
        width: 54px;
        height: 54px;
    }

    .answer-demo {
        margin-top: 60px;
        border-radius: 20px;
    }

    .benefit-grid {
        border-radius: 22px;
        gap: 0;
    }

    .benefit-card {
        min-height: 520px;
        border-radius: 0;
    }

    .benefit-card-wide {
        min-height: auto;
    }

    .benefit-card h3 {
        font-size: 38px;
    }

    .search-visual {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        margin-top: 30px;
        font-size: .84rem;
    }

    .source-stack {
        right: 28px;
        bottom: 32px;
        left: 28px;
    }

    .phone-image {
        width: min(62%, 280px);
        margin-right: -2%;
        margin-bottom: -2%;
        filter: drop-shadow(0 12px 16px rgba(29, 29, 31, .09));
    }

    .security-hardware-photo {
        min-height: 500px;
        margin: 65px auto 70px;
    }

    .security-hardware-photo img {
        height: min(500px, 118vw);
        filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .2));
    }

    .security-hardware-photo::after {
        right: 34%;
        bottom: 7%;
        left: 34%;
        height: 20px;
        background: rgba(0, 0, 0, .34);
        filter: blur(18px);
    }

    .site-footer {
        padding-top: 68px;
    }

    .footer-brand .footer-statement {
        font-size: clamp(32px, 8.8vw, 42px);
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 24px;
    }

    .footer-legal-nav {
        justify-content: flex-start;
    }


}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

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

/* BENEFIT STORY ---------------------------------------------------------- */
.benefits {
    overflow: clip;
    padding: 140px 20px 190px;
    background:
        radial-gradient(circle at 18% 14%, rgba(30, 58, 138, .055), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

.benefits-inner {
    width: min(100%, var(--page-width));
    margin: 0 auto;
}

.benefits .benefits-intro {
    width: min(100%, 1040px);
    margin: 0 0 72px;
}

.benefits .benefits-intro h2 {
    font-size: clamp(56px, 6.2vw, 82px);
}

.benefits .benefits-intro>p:last-child {
    width: min(100%, 760px);
    margin-top: 30px;
    color: rgba(29, 29, 31, .64);
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.42;
    letter-spacing: -.025em;
}

.benefit-story {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.benefit-moment {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 570px;
    flex-direction: column;
    padding: clamp(38px, 4.8vw, 64px);
    border-radius: 36px;
    isolation: isolate;
}

.benefit-copy {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.benefit-kicker {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.benefit-copy h3 {
    margin: 0;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.benefit-copy>p:last-child {
    max-width: 540px;
    margin: 24px 0 0;
    font-size: clamp(17px, 1.55vw, 21px);
    line-height: 1.48;
    letter-spacing: -.02em;
}

.benefit-moment-time {
    display: grid;
    min-height: 620px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
    align-items: center;
    color: #f7f8ff;
    background:
        radial-gradient(circle at 81% 45%, rgba(116, 153, 255, .54), transparent 27%),
        radial-gradient(circle at 68% 82%, rgba(80, 66, 214, .34), transparent 38%),
        linear-gradient(135deg, #050816 0%, #0b1639 54%, #173277 100%);
}

.benefit-moment-time::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 8%;
    width: min(48vw, 520px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(255, 255, 255, .035),
        0 0 0 88px rgba(255, 255, 255, .018);
    content: "";
    transform: translateY(-50%);
}

.benefit-moment-time .benefit-kicker {
    color: rgba(255, 255, 255, .67);
}

.benefit-moment-time .benefit-copy>p:last-child {
    color: rgba(255, 255, 255, .72);
}

.benefit-signal {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 520px);
    min-height: 390px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    justify-self: end;
    padding: clamp(34px, 4vw, 58px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 40px 100px rgba(0, 0, 0, .22);
    backdrop-filter: blur(20px);
}

.benefit-signal-overline,
.benefit-signal-foot {
    color: rgba(255, 255, 255, .62);
    font-size: clamp(13px, 1.2vw, 16px);
    font-weight: 600;
    letter-spacing: -.01em;
}

.benefit-signal strong {
    display: block;
    margin: 20px 0 24px;
    font-size: clamp(42px, 4.2vw, 62px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.06em;
}

.benefit-moment-proof {
    grid-column: span 5;
    color: var(--ink);
    background:
        radial-gradient(circle at 90% 100%, rgba(30, 58, 138, .08), transparent 42%),
        #f1f2f5;
}

.benefit-moment-proof .benefit-kicker {
    color: #4f5980;
}

.benefit-moment-proof .benefit-copy>p:last-child {
    color: rgba(29, 29, 31, .64);
}

.benefit-proof {
    position: relative;
    z-index: 1;
    display: grid;
    margin-top: auto;
    padding: 28px;
    border: 1px solid rgba(29, 29, 31, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 30px 70px rgba(34, 45, 74, .1);
    backdrop-filter: blur(16px);
    gap: 10px;
}

.benefit-proof-check {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 50%;
    color: var(--white);
    background: var(--accent);
    place-items: center;
}

.benefit-proof-check svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.benefit-proof strong {
    font-size: clamp(31px, 3vw, 42px);
    font-weight: 600;
    letter-spacing: -.05em;
}

.benefit-proof>span:last-child {
    overflow: hidden;
    color: rgba(29, 29, 31, .52);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.benefit-moment-team {
    grid-column: span 7;
    color: #102352;
    background:
        radial-gradient(circle at 76% 74%, rgba(92, 125, 235, .36), transparent 34%),
        linear-gradient(145deg, #eef3ff 0%, #dfe8ff 100%);
}

.benefit-moment-team .benefit-kicker {
    color: #435fba;
}

.benefit-moment-team .benefit-copy>p:last-child {
    color: rgba(16, 35, 82, .68);
}

.benefit-orbit {
    position: relative;
    z-index: 1;
    min-height: 230px;
    margin-top: auto;
}

.benefit-orbit::before {
    position: absolute;
    right: 9%;
    bottom: -34%;
    width: 340px;
    aspect-ratio: 1;
    border: 1px solid rgba(30, 58, 138, .15);
    border-radius: 50%;
    box-shadow:
        0 0 0 42px rgba(255, 255, 255, .18),
        0 0 0 92px rgba(255, 255, 255, .1);
    content: "";
}

.benefit-orbit strong {
    position: absolute;
    z-index: 1;
    right: 8%;
    bottom: 2%;
    font-size: clamp(39px, 3.7vw, 54px);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.055em;
}

@media (max-width: 900px) {
    .benefits {
        padding: 110px 18px 150px;
    }

    .benefits .benefits-intro {
        margin-bottom: 56px;
    }

    .benefit-moment-time {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .benefit-signal {
        width: min(100%, 480px);
        min-height: 350px;
        justify-self: center;
    }

    .benefit-moment-proof,
    .benefit-moment-team {
        grid-column: 1 / -1;
    }

    .benefit-orbit {
        min-height: 270px;
    }
}

@media (max-width: 600px) {
    .benefits {
        padding: 94px 16px 120px;
    }

    .benefits .benefits-intro {
        margin-bottom: 42px;
    }

    .benefits .benefits-intro h2 {
        font-size: clamp(40px, 11vw, 52px);
        line-height: .98;
    }

    .benefits .benefits-intro>p:last-child {
        margin-top: 24px;
        font-size: 19px;
    }

    .benefit-story {
        gap: 16px;
    }

    .benefit-moment {
        min-height: 0;
        padding: 30px 26px;
        border-radius: 26px;
    }

    .benefit-copy h3 {
        font-size: clamp(36px, 10vw, 46px);
    }

    .benefit-copy>p:last-child {
        margin-top: 20px;
        font-size: 17px;
    }

    .benefit-moment-time {
        gap: 38px;
    }

    .benefit-moment-time::before {
        right: -32%;
        width: 120vw;
    }

    .benefit-signal {
        width: 100%;
        min-height: 286px;
        padding: 32px;
    }

    .benefit-signal strong {
        font-size: clamp(39px, 11.5vw, 52px);
    }

    .benefit-proof {
        margin-top: 54px;
        padding: 24px;
        border-radius: 20px;
    }

    .benefit-proof strong {
        font-size: 32px;
    }

    .benefit-orbit {
        min-height: 330px;
        margin-top: 34px;
    }

    .benefit-orbit::before {
        right: -36%;
        bottom: -24%;
        width: 330px;
    }

    .benefit-orbit strong {
        right: auto;
        bottom: 7%;
        left: 0;
        font-size: clamp(38px, 11vw, 48px);
    }

}

/* END BENEFIT STORY ------------------------------------------------------ */

/* HIGHLIGHTS CAROUSEL — restored ---------------------------------------- */
.benefits {
    overflow: hidden;
    padding: 120px 0 220px;
    background: #ffffff;
}

.benefits-heading-row {
    width: min(calc(100% - 40px), var(--page-width));
    margin: 0 auto 70px;
}

.benefits-heading-row .section-heading {
    width: auto;
    margin: 0;
}

.benefits .section-heading h2 {
    font-size: clamp(48px, 4.6vw, 64px);
}

.benefits .benefit-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin: 0;
    padding: 0 max(20px, calc((100vw - var(--page-width)) / 2));
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 24px;
    scroll-behavior: smooth;
    scroll-padding-inline: max(20px, calc((100vw - var(--page-width)) / 2));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.benefits .benefit-grid::-webkit-scrollbar {
    display: none;
}

.benefits .benefit-grid:focus-visible {
    position: relative;
    outline: none !important;
}

.benefits .benefit-grid:focus-visible::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--accent);
    pointer-events: none;
    z-index: 10; /* Draw on top of all card elements */
}

.benefits .benefit-card {
    position: relative;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    min-height: clamp(520px, 36vw, 610px);
    flex: 0 0 min(82vw, 1360px);
    flex-direction: column;
    padding: clamp(38px, 4vw, 58px);
    border: 0;
    border-radius: 32px;
    background: #f5f5f7;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.benefits .benefit-card-answer,
.benefits .benefit-card-source {
    color: #f5f5f7;
    background: #02040a;
}

.benefits .benefit-card h3 {
    position: absolute;
    z-index: 3;
    top: clamp(38px, 4vw, 58px);
    left: clamp(38px, 4vw, 58px);
    width: 38%;
    max-width: 720px;
    margin: 0;
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-align: left;
}

.answer-scene,
.source-scene,
.device-scene {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: 0;
}

.benefits .benefit-media.answer-scene {
    background: #02040a;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.network-topology {
    position: relative;
    width: 80%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.network-laptops {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    width: 100%;
}

.icon-laptop,
.icon-pc {
    width: clamp(32px, 4vw, 48px);
    height: clamp(32px, 4vw, 48px);
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: #02040a;
}

.network-pc {
    display: flex;
    justify-content: center;
    width: 100%;
}

.network-lines {
    position: absolute;
    top: calc(clamp(32px, 4vw, 48px) / 2);
    left: 0;
    width: 100%;
    height: calc(100% - clamp(32px, 4vw, 48px));
    pointer-events: none;
    z-index: -1;
}

.base-line {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 2;
}

.animated-dot {
    stroke: rgb(112, 198, 141);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 100;
    animation: dashAnim 2s infinite linear;
}

@keyframes dashAnim {
    0% {
        stroke-dashoffset: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

.source-scene {
    background: #F5F5F7;
}

.source-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/laptop_v2.webp") center / 88% no-repeat;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .15)) drop-shadow(0 44px 54px rgba(0, 0, 0, .25));
    pointer-events: none;
    z-index: 2;
}



.device-scene .phone-image {
    position: absolute;
    z-index: 2;
    right: -3%;
    bottom: -15%;
    width: auto;
    max-width: 62%;
    height: clamp(430px, 82%, 640px);
    margin: 0;
    filter: drop-shadow(0 42px 48px rgba(0, 0, 0, .45));
}

.benefit-controls {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    gap: 12px;
}

.benefit-controls button {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    background: var(--ink);
    cursor: pointer;
    place-items: center;
    transition: opacity .25s ease, transform .25s ease;
}

.benefit-controls button:hover:not([aria-disabled="true"]) {
    transform: scale(1.06);
}

.benefit-controls button[aria-disabled="true"] {
    background: rgba(29, 29, 31, 0.22);
    color: #ffffff;
    cursor: default;
}

.benefit-controls svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@media (max-width: 820px) {
    .benefits {
        padding: 95px 0 160px;
    }

    .benefits-heading-row {
        width: min(calc(100% - 36px), var(--page-width));
        margin-bottom: 48px;
    }

    .benefits .benefit-grid {
        padding-right: 18px;
        padding-left: 18px;
        scroll-padding-inline: 18px;
        gap: 16px;
    }

    .benefits .benefit-card {
        min-height: 560px;
        flex-basis: 88vw;
        padding: 34px;
        border-radius: 26px;
    }

    .benefits .benefit-card h3 {
        top: 34px;
        left: 34px;
        width: 42%;
        font-size: clamp(28px, 5.5vw, 34px);
    }

    .device-scene .phone-image {
        right: -4%;
        bottom: -13%;
        max-width: 62%;
        height: 82%;
    }
}

@media (max-width: 560px) {
    .benefits-heading-row {
        margin-bottom: 38px;
    }

    .benefits .benefit-card {
        min-height: 520px;
        padding: 28px;
        border-radius: 24px;
    }

    .benefits .benefit-card h3 {
        top: 28px;
        left: 28px;
        width: calc(100% - 56px);
        font-size: 30px;
    }

    .device-scene .phone-image {
        right: -12%;
        bottom: -12%;
        max-width: 72%;
        height: 80%;
    }

    .benefit-controls button {
        width: 42px;
        height: 42px;
    }
}

/* END HIGHLIGHTS CAROUSEL ----------------------------------------------- */

/* COMPACT BENEFIT CARDS ------------------------------------------------- */
.benefits {
    padding: 120px 0 170px;
}

.benefits .benefit-grid {
    align-items: flex-start;
    gap: 24px;
}

.benefits .benefit-card {
    display: block;
    overflow: visible;
    min-height: 0;
    flex: 0 0 clamp(520px, 46vw, 680px);
    padding: 0;
    border-radius: 0;
    color: var(--ink);
    background: transparent;
}

.benefits .benefit-card-answer,
.benefits .benefit-card-source {
    color: var(--ink);
    background: transparent;
}

.benefits .benefit-media {
    position: relative;
    inset: auto;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3.2;
    margin: 0;
    border-radius: 24px;
}



.benefits .device-scene {
    background: #F5F5F7;
}

.benefits .accessibility-scene {
    display: grid;
    background: linear-gradient(155deg, #3b66db 0%, var(--accent) 100%);
    place-items: center;
}

.accessibility-symbol {
    width: 66%;
    height: 66%;
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6;
}

.benefits .device-scene .phone-image {
    right: 50%;
    bottom: -2%;
    width: auto;
    height: auto;
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
    transform: translateX(50%);
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .15)) drop-shadow(0 44px 54px rgba(0, 0, 0, .25));
}

.benefit-description {
    margin: 26px 4px 0;
    color: rgba(29, 29, 31, .64);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: -.018em;
}

.benefit-description strong {
    color: var(--ink);
    font-weight: 600;
}

.benefit-controls {
    width: min(calc(100% - 40px), var(--page-width));
    justify-content: flex-end;
    margin: 42px auto 0;
}

@media (max-width: 820px) {
    .benefits {
        padding: 95px 0 135px;
    }

    .benefits .benefit-card {
        min-height: 0;
        flex-basis: min(76vw, 360px);
        padding: 0;
        border-radius: 0;
    }

    .benefits .benefit-media {
        aspect-ratio: 3 / 4;
    }

    .benefit-description {
        margin-top: 22px;
        font-size: 16px;
    }

    .benefit-controls {
        width: calc(100% - 36px);
        margin-top: 34px;
    }
}

@media (max-width: 560px) {
    .benefits .benefit-card {
        min-height: 0;
        flex-basis: 82vw;
        padding: 0;
        border-radius: 0;
    }

    .benefits .benefit-media {
        border-radius: 22px;
    }
}

/* END COMPACT BENEFIT CARDS -------------------------------------------- */