.system {
    --system-bridge: 0;
    position: relative;
    z-index: 12;
    margin-top: -14svh;
    padding-top: 14svh;
    overflow: clip;
    background:
        radial-gradient(circle at 70% 34%, rgba(22, 100, 105, 0.13), transparent 34%),
        radial-gradient(circle at 44% 76%, rgba(235, 102, 51, 0.06), transparent 28%),
        linear-gradient(180deg, rgba(1, 3, 4, 0) 0%, rgba(1, 5, 7, 0.54) 14%, #02090b 42%, #010708 100%);
}


.system-scroll {
    position: relative;
    min-height: 540svh;
}


.system-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
    isolation: isolate;
}


.system-atmosphere,
.system-canvas,
.system-copy {
    position: absolute;
    inset: 0;
}


.system-atmosphere {
    z-index: 1;
    pointer-events: none;
}


.system-grid {
    position: absolute;
    inset: 0;
    opacity: calc(0.03 + (var(--system-bridge) * 0.08));
    background-image:
        linear-gradient(rgba(112, 224, 218, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 224, 218, 0.025) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(ellipse at 58% 56%, #000, transparent 75%);
}


.system-halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform, opacity;
}


.system-halo-a {
    left: 67%;
    top: 54%;
    width: min(52vw, 780px);
    height: min(52vw, 780px);
    opacity: calc(0.10 + (var(--system-bridge) * 0.12));
    transform: translate(-50%, -50%) scale(calc(0.84 + (var(--system-bridge) * 0.24)));
    background: radial-gradient(circle, rgba(53, 177, 174, 0.20), rgba(17, 79, 86, 0.04) 50%, transparent 75%);
}


.system-halo-b {
    left: 32%;
    top: 28%;
    width: min(34vw, 510px);
    height: min(34vw, 510px);
    opacity: calc(0.07 + (var(--system-bridge) * 0.08));
    transform: translate(-50%, -50%) scale(calc(0.86 + (var(--system-bridge) * 0.18)));
    background: radial-gradient(circle, rgba(110, 209, 242, 0.14), rgba(110, 209, 242, 0.02) 46%, transparent 74%);
}


.system-halo-c {
    left: 54%;
    top: 76%;
    width: min(44vw, 620px);
    height: min(44vw, 620px);
    opacity: calc(0.05 + (var(--system-bridge) * 0.09));
    transform: translate(-50%, -50%) scale(calc(0.88 + (var(--system-bridge) * 0.22)));
    background: radial-gradient(circle, rgba(255, 124, 76, 0.12), rgba(255, 124, 76, 0.02) 48%, transparent 76%);
}


.system-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 34%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0.80) 100%);
}


.system-noise {
    position: absolute;
    inset: 0;
    opacity: 0.024;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


.system-canvas {
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: calc(0.28 + (var(--system-bridge) * 0.72));
    filter: blur(calc((1 - var(--system-bridge)) * 6px));
    pointer-events: none;
}


.system-copy {
    z-index: 7;
    pointer-events: none;
}


.system-headline {
    --system-headline-glow: 111, 255, 242;
    --system-headline-glow-alt: 255, 101, 53;
    position: absolute;
    top: max(15svh, 118px);
    left: 5vw;
    width: min(42vw, 740px);
    color: rgba(246, 251, 255, 0.98);
    text-align: left;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity, filter;
}


.system-headline.is-right {
    right: 5vw;
    left: auto;
    text-align: right;
}


.system-headline.is-center {
    top: max(14svh, 104px);
    right: 0;
    left: 0;
    width: min(70vw, 980px);
    margin: 0 auto;
    text-align: center;
}


.system-headline.is-intro {
    top: 18svh;
    width: min(53vw, 820px);
}


.system-headline.is-summit {
    top: max(16svh, 130px);
    width: min(42vw, 650px);
}


.system-line {
    display: block;
    margin: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.012em;
    line-height: 0.82;
    color: rgba(246, 251, 255, 0.98);
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.08),
        0 18px 54px rgba(var(--system-headline-glow), 0.14),
        0 36px 86px rgba(var(--system-headline-glow-alt), 0.06);
}


.system-line + .system-line {
    margin-top: 0.14em;
}


.system-line-primary,
.system-line-secondary,
.system-line-tertiary {
    font-size: clamp(56px, 7.3vw, 132px);
}


.system-line.is-hidden {
    display: none;
}


.system-subheadline {
    max-width: 32rem;
    margin: 1.15rem 0 0;
    color: rgba(223, 235, 236, 0.86);
    font-family: "Barlow", sans-serif;
    font-size: clamp(16px, 1.25vw, 21px);
    font-weight: 400;
    letter-spacing: 0.012em;
    line-height: 1.48;
    text-transform: none;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.30);
}


.system-subheadline.is-hidden {
    display: none;
}


.system-headline.is-intro .system-line {
    white-space: nowrap;
    line-height: 0.84;
    font-size: clamp(52px, 6.6vw, 118px);
}


.system-headline.is-intro .system-line-tertiary {
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.10),
        0 0 18px rgba(111, 255, 242, 0.10),
        0 18px 58px rgba(111, 255, 242, 0.18),
        0 34px 90px rgba(255, 101, 53, 0.07);
}


.system-headline.is-summit .system-line-primary {
    font-size: clamp(43px, 5.3vw, 88px);
}


.system-headline.is-summit .system-line-secondary {
    font-size: clamp(60px, 7vw, 116px);
}


.system-headline.is-summit .system-line-tertiary {
    margin-top: 0.28em;
    font-size: clamp(24px, 2vw, 38px);
    letter-spacing: 0.08em;
    line-height: 1;
}


.system-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


@media (max-width: 1100px) {
    .system-scroll {
        min-height: 500svh;
    }

    .system-headline {
        width: min(44vw, 620px);
    }
}


@media (max-width: 900px) {
    .system {
        margin-top: -10svh;
        padding-top: 10svh;
    }

    .system-scroll {
        min-height: 470svh;
    }

    .system-grid {
        background-size: 72px 72px;
    }

    .system-headline {
        left: 28px;
        width: min(46vw, 460px);
    }

    .system-headline.is-right {
        right: 28px;
        left: auto;
    }

    .system-headline.is-intro {
        width: min(50vw, 540px);
    }

    .system-headline.is-intro .system-line {
        font-size: clamp(40px, 6vw, 78px);
    }
}


@media (max-width: 640px) {
    .system {
        margin-top: -7svh;
        padding-top: 7svh;
    }

    .system-scroll {
        min-height: 420svh;
    }

    .system-canvas {
        filter: blur(calc((1 - var(--system-bridge)) * 8px));
    }

    .system-headline,
    .system-headline.is-right,
    .system-headline.is-center,
    .system-headline.is-summit {
        right: auto;
        left: var(--page-padding-mobile);
        width: calc(100vw - (var(--page-padding-mobile) * 2));
        text-align: left;
    }

    .system-line-primary,
    .system-line-secondary,
    .system-line-tertiary {
        font-size: clamp(40px, 12.2vw, 66px);
        line-height: 0.86;
    }

    .system-headline.is-intro .system-line {
        white-space: normal;
    }
}