.home {
    background:#000;
}


.hero {
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:
        clamp(9.5rem,14vh,12rem)
        var(--side)
        clamp(7rem,10vh,9rem);

    overflow:hidden;

    background:
        radial-gradient(
            65rem 42rem at 76% 43%,
            rgba(0,122,255,.13),
            transparent 68%
        ),
        #000;
}


.hero::after {
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:14rem;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.018)
        );
}


.hero-inner {
    position:relative;
    z-index:2;

    width:min(54rem,66vw);
    margin-left:max(
        calc((100vw - var(--shell-wide)) / 2),
        0rem
    );
}


.hero h1 {
    max-width:53rem;

    margin:1.3rem 0 0;

    color:var(--label);

    font-size:
        clamp(
            4.4rem,
            7.45vw,
            8.4rem
        );

    line-height:.88;

    font-weight:700;
    letter-spacing:-.058em;

    text-wrap:balance;
}


.hero-lead {
    max-width:43rem;

    margin:2rem 0 0;

    color:rgba(235,235,245,.62);

    font-size:
        clamp(
            1.05rem,
            1.45vw,
            1.28rem
        );

    line-height:1.48;
    letter-spacing:-.006em;
}


.hero-actions {
    display:flex;
    align-items:center;
    gap:.65rem;

    margin-top:2rem;
}


.hero-direct {
    margin:1.2rem 0 0;

    color:rgba(235,235,245,.36);

    font-size:.78rem;
    line-height:1.4;
    letter-spacing:.01em;
}


.hero-direct a {
    margin-left:.25rem;

    color:rgba(245,245,247,.72);

    transition:
        color 160ms var(--ease-out),
        opacity 100ms var(--ease-out);
}


.hero-direct a:hover {
    color:#fff;
}


.hero-direct a:active {
    opacity:.5;
}


.hero-signal {
    position:absolute;
    z-index:3;

    width:min(22rem,27vw);

    right:max(
        calc((100vw - var(--shell-wide)) / 2),
        2rem
    );

    top:50%;

    transform:translateY(-46%);

    padding:
        1.8rem
        0
        1.15rem
        1.7rem;

    border-left:.5px solid rgba(255,255,255,.16);

    color:var(--label);
}


.hero-signal > span {
    display:block;

    color:rgba(235,235,245,.34);

    font-family:var(--font-mono);
    font-size:.67rem;
    line-height:1.35;
    letter-spacing:.015em;
}


.hero-signal > strong {
    display:block;

    margin-top:.38rem;

    color:rgba(245,245,247,.88);

    font-family:var(--font-mono);
    font-size:.87rem;
    line-height:1.35;
    font-weight:500;
    letter-spacing:-.015em;
}


.signal-line {
    width:100%;
    height:.5px;

    margin:1.15rem 0;

    background:linear-gradient(
        to right,
        rgba(255,255,255,.13),
        transparent
    );
}


.signal-answer {
    position:relative;

    margin-top:1.55rem;
    padding-left:1rem;

    color:rgba(245,245,247,.68);

    font-size:.76rem;
    line-height:1.45;
}


.signal-answer i {
    position:absolute;

    width:.32rem;
    height:.32rem;

    left:0;
    top:.48em;

    border-radius:50%;

    background:var(--blue-bright);
}


.money-section {
    position:relative;

    padding:
        clamp(8rem,12vw,11rem)
        var(--side);

    background:#08080a;
}


.section-intro {
    width:min(62rem,100%);
}


.section-intro h2 {
    max-width:58rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3.1rem,
            5.65vw,
            6rem
        );

    line-height:.94;

    font-weight:700;
    letter-spacing:-.047em;

    text-wrap:balance;
}


.loss-list {
    margin-top:
        clamp(
            5rem,
            8vw,
            7.5rem
        );

    border-top:.5px solid var(--separator);
}


.loss-row {
    min-height:9rem;

    display:grid;

    grid-template-columns:
        minmax(18rem,.92fr)
        minmax(22rem,1fr)
        minmax(7rem,.25fr);

    align-items:center;
    gap:clamp(2rem,5vw,5rem);

    border-bottom:.5px solid var(--separator);

    transition:
        background 200ms var(--ease-out),
        padding 260ms var(--ease-out);
}


.loss-row:hover {
    padding-left:.8rem;
    padding-right:.8rem;

    background:rgba(255,255,255,.018);
}


.loss-question {
    max-width:26rem;

    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2.35rem
        );

    line-height:1.03;
    font-weight:650;
    letter-spacing:-.03em;
}


.loss-result {
    max-width:31rem;

    color:rgba(235,235,245,.52);

    font-size:.94rem;
    line-height:1.52;
}


.loss-cost {
    justify-self:end;

    color:var(--blue-bright);

    font-family:var(--font-mono);
    font-size:.68rem;
    line-height:1.2;

    letter-spacing:.025em;
    text-transform:uppercase;
}


.context-section {
    padding:
        clamp(9rem,13vw,12rem)
        var(--side);

    background:#000;
}


.context-layout {
    display:grid;

    grid-template-columns:
        minmax(22rem,.78fr)
        minmax(30rem,1fr);

    align-items:center;

    gap:
        clamp(
            5rem,
            10vw,
            10rem
        );
}


.context-copy h2 {
    max-width:31rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3rem,
            4.8vw,
            5.1rem
        );

    line-height:.94;

    font-weight:700;
    letter-spacing:-.047em;

    text-wrap:balance;
}


.context-copy > p:not(.eyebrow) {
    max-width:32rem;

    margin:1.35rem 0 0;

    color:rgba(235,235,245,.55);

    font-size:
        clamp(
            .98rem,
            1.25vw,
            1.08rem
        );

    line-height:1.55;
}


.context-copy > p + p {
    color:rgba(245,245,247,.78);
}


.context-console {
    position:relative;

    min-height:36rem;

    overflow:hidden;

    border-radius:var(--r-xl);

    background:#101012;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 0 .5px rgba(255,255,255,.055),
        0 2rem 7rem rgba(0,0,0,.54);
}


.context-console::after {
    content:"";

    position:absolute;

    width:22rem;
    height:22rem;

    right:-11rem;
    bottom:-12rem;

    border-radius:50%;

    background:rgba(0,122,255,.13);
    filter:blur(6rem);

    pointer-events:none;
}


.console-bar {
    min-height:3.35rem;

    display:flex;
    align-items:center;

    gap:.42rem;

    padding:0 1rem;

    border-bottom:.5px solid rgba(255,255,255,.075);
}


.console-bar > span {
    width:.52rem;
    height:.52rem;

    border-radius:50%;

    background:rgba(235,235,245,.18);
}


.console-bar > span:nth-child(1) {
    background:rgba(255,69,58,.7);
}


.console-bar > span:nth-child(2) {
    background:rgba(255,214,10,.65);
}


.console-bar > span:nth-child(3) {
    background:rgba(48,209,88,.58);
}


.console-bar p {
    margin:0 0 0 .5rem;

    color:rgba(235,235,245,.32);

    font-family:var(--font-mono);
    font-size:.63rem;
    letter-spacing:.015em;
}


.context-data {
    padding:1.55rem 1.4rem;
}


.context-data > div {
    min-height:2.6rem;

    display:grid;
    grid-template-columns:9rem minmax(0,1fr);

    align-items:center;

    border-bottom:.5px solid rgba(255,255,255,.055);
}


.context-data > div:last-child {
    border-bottom:0;
}


.context-data span,
.context-question > span,
.context-response > span {
    color:rgba(235,235,245,.29);

    font-family:var(--font-mono);
    font-size:.64rem;
    line-height:1.3;
    letter-spacing:.012em;
}


.context-data strong {
    min-width:0;

    color:rgba(245,245,247,.76);

    font-family:var(--font-mono);
    font-size:.72rem;
    line-height:1.3;
    font-weight:500;

    overflow:hidden;
    text-overflow:ellipsis;
}


.context-question,
.context-response {
    margin:0 1.4rem;
    padding:1.25rem 0;
}


.context-question {
    border-top:.5px solid rgba(255,255,255,.075);
}


.context-question p,
.context-response p {
    max-width:30rem;

    margin:.55rem 0 0;

    font-size:.82rem;
    line-height:1.48;
}


.context-question p {
    color:rgba(235,235,245,.55);
}


.context-response {
    position:relative;

    margin-top:.25rem;
    padding:
        1.3rem
        1.2rem;

    border-radius:var(--r-medium);

    background:rgba(255,255,255,.055);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 0 0 .5px rgba(255,255,255,.055);
}


.context-response > span {
    color:#64d2ff;
}


.context-response p {
    color:rgba(245,245,247,.88);
}


.implementation-section {
    padding:
        clamp(9rem,13vw,12rem)
        var(--side);

    background:
        linear-gradient(
            180deg,
            #09090b 0%,
            #111114 48%,
            #09090b 100%
        );
}


.implementation-heading {
    width:min(60rem,100%);
}


.implementation-heading h2 {
    max-width:57rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3.2rem,
            5.8vw,
            6.2rem
        );

    line-height:.93;

    font-weight:700;
    letter-spacing:-.05em;

    text-wrap:balance;
}


.implementation-heading > p:not(.eyebrow) {
    max-width:39rem;

    margin:1.5rem 0 0;

    color:rgba(235,235,245,.54);

    font-size:1rem;
    line-height:1.52;
}


.implementation-section .code-window {
    margin-top:
        clamp(
            4rem,
            7vw,
            6.5rem
        );
}


.implementation-bottom {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:3rem;

    margin-top:1.8rem;
}


.implementation-bottom > div {
    max-width:38rem;
}


.implementation-bottom strong {
    display:block;

    color:var(--label);

    font-size:
        clamp(
            1.65rem,
            2.8vw,
            2.7rem
        );

    line-height:1.02;

    font-weight:650;
    letter-spacing:-.032em;
}


.implementation-bottom p {
    max-width:34rem;

    margin:.7rem 0 0;

    color:rgba(235,235,245,.5);

    font-size:.91rem;
    line-height:1.48;
}


.implementation-section .code-window-small {
    width:min(48rem,82%);

    margin-top:4rem;
    margin-left:auto;
}


.capability-section {
    padding:
        clamp(9rem,13vw,12rem)
        var(--side);

    background:#000;
}


.capability-heading {
    width:min(60rem,100%);
}


.capability-heading h2 {
    max-width:55rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3.1rem,
            5.55vw,
            5.8rem
        );

    line-height:.94;

    font-weight:700;
    letter-spacing:-.048em;

    text-wrap:balance;
}


.capability-flow {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    border-top:.5px solid var(--separator);
}


.capability-flow article {
    min-height:10.5rem;

    display:grid;

    grid-template-columns:
        minmax(8rem,.26fr)
        minmax(18rem,.75fr)
        minmax(22rem,1fr);

    align-items:center;

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    border-bottom:.5px solid var(--separator);
}


.capability-label {
    color:var(--blue-bright);

    font-family:var(--font-mono);
    font-size:.65rem;
    line-height:1.2;
    letter-spacing:.045em;
}


.capability-flow h3 {
    max-width:23rem;

    margin:0;

    font-size:
        clamp(
            1.75rem,
            2.7vw,
            2.75rem
        );

    line-height:1;

    font-weight:650;
    letter-spacing:-.034em;
}


.capability-flow p {
    max-width:34rem;

    margin:0;

    color:rgba(235,235,245,.52);

    font-size:.94rem;
    line-height:1.52;
}


.capability-link {
    display:flex;
    justify-content:flex-end;

    margin-top:1.4rem;
}


.capability-link a {
    min-height:44px;

    display:inline-flex;
    align-items:center;

    gap:.42rem;

    color:rgba(245,245,247,.75);

    font-size:.86rem;
    font-weight:600;
}


.capability-link a span {
    color:var(--blue-bright);

    transition:transform 200ms var(--ease-out);
}


.capability-link a:hover span {
    transform:translateX(.22rem);
}


.control-section {
    padding:
        clamp(9rem,13vw,12rem)
        var(--side);

    background:#0a0a0c;
}


.control-layout {
    display:grid;

    grid-template-columns:
        minmax(28rem,1fr)
        minmax(22rem,.66fr);

    gap:
        clamp(
            5rem,
            11vw,
            11rem
        );
}


.control-main h2 {
    max-width:47rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3.3rem,
            5.8vw,
            6.2rem
        );

    line-height:.92;

    font-weight:700;
    letter-spacing:-.052em;

    text-wrap:balance;
}


.control-copy {
    align-self:end;

    padding-bottom:.45rem;
}


.control-copy p {
    max-width:32rem;

    margin:0;

    color:rgba(235,235,245,.53);

    font-size:1rem;
    line-height:1.55;
}


.control-copy p + p {
    margin-top:1.25rem;
}


.control-copy p:nth-of-type(3) {
    color:rgba(245,245,247,.8);
}


.comparison-section {
    padding:
        clamp(8.5rem,12vw,11rem)
        var(--side);

    background:#000;
}


.comparison-heading {
    max-width:63rem;
}


.comparison-heading h2 {
    max-width:61rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3rem,
            5.25vw,
            5.5rem
        );

    line-height:.94;

    font-weight:700;
    letter-spacing:-.047em;

    text-wrap:balance;
}


.comparison-table {
    margin-top:
        clamp(
            4.5rem,
            7vw,
            6.5rem
        );

    border-top:.5px solid rgba(255,255,255,.13);
}


.comparison-row {
    min-height:5.3rem;

    display:grid;

    grid-template-columns:
        minmax(12rem,.62fr)
        minmax(15rem,.8fr)
        minmax(17rem,1fr);

    align-items:center;

    gap:2rem;

    border-bottom:.5px solid var(--separator);
}


.comparison-row > span {
    color:rgba(245,245,247,.84);

    font-size:.84rem;
    line-height:1.3;
    font-weight:600;
}


.comparison-row > strong {
    color:rgba(235,235,245,.4);

    font-size:.83rem;
    line-height:1.4;
    font-weight:500;
}


.comparison-row > strong:last-child {
    color:rgba(245,245,247,.84);
}


.comparison-head {
    min-height:3.8rem;
}


.comparison-head > strong {
    color:rgba(235,235,245,.27);

    font-family:var(--font-mono);
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.025em;

    text-transform:uppercase;
}


.comparison-head > strong:last-child {
    color:rgba(100,210,255,.65);
}


.live-product-section {
    position:relative;

    padding:
        clamp(9rem,13vw,12rem)
        var(--side);

    overflow:hidden;

    background:#09090b;
}


.live-product-section::before {
    content:"";

    position:absolute;

    width:44rem;
    height:32rem;

    left:16%;
    bottom:-25rem;

    border-radius:50%;

    background:rgba(0,122,255,.11);
    filter:blur(7rem);

    pointer-events:none;
}


.live-product-layout {
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(28rem,1fr)
        minmax(20rem,.58fr);

    align-items:end;

    gap:
        clamp(
            5rem,
            11vw,
            11rem
        );
}


.live-product-layout h2 {
    max-width:50rem;

    margin:1.15rem 0 0;

    font-size:
        clamp(
            3.2rem,
            5.65vw,
            6rem
        );

    line-height:.93;

    font-weight:700;
    letter-spacing:-.05em;

    text-wrap:balance;
}


.live-product-copy p {
    margin:0;

    color:rgba(235,235,245,.53);

    font-size:.98rem;
    line-height:1.53;
}


.live-product-copy p + p {
    margin-top:1.2rem;

    color:rgba(245,245,247,.76);
}


.closing-section {
    position:relative;

    margin:.75rem;

    padding:
        clamp(8rem,13vw,12rem)
        var(--side);

    overflow:hidden;

    border-radius:
        clamp(
            2rem,
            4.5vw,
            4rem
        );

    background:
        radial-gradient(
            50rem 34rem at 50% 55%,
            rgba(0,122,255,.15),
            transparent 68%
        ),
        #050506;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 0 0 .5px rgba(255,255,255,.07);
}


.closing-inner {
    position:relative;
    z-index:2;

    width:min(64rem,100%);

    margin:0 auto;

    text-align:center;
}


.closing-section h2 {
    max-width:63rem;

    margin:1.25rem auto 0;

    font-size:
        clamp(
            3.7rem,
            6.7vw,
            7.2rem
        );

    line-height:.91;

    font-weight:700;
    letter-spacing:-.053em;

    text-wrap:balance;
}


.closing-copy {
    max-width:37rem;

    margin:1.8rem auto 0;

    color:rgba(235,235,245,.55);

    font-size:1rem;
    line-height:1.52;
}


.closing-actions {
    display:flex;
    align-items:center;
    justify-content:center;

    gap:.65rem;

    margin-top:2rem;
}


.closing-contact {
    display:flex;
    align-items:center;
    justify-content:center;

    gap:.55rem;

    margin-top:2rem;

    color:rgba(235,235,245,.34);

    font-size:.76rem;
    line-height:1.3;
}


.closing-contact a {
    color:rgba(245,245,247,.78);

    transition:
        color 160ms var(--ease-out),
        opacity 100ms var(--ease-out);
}


.closing-contact a:hover {
    color:#fff;
}


.closing-contact a:active {
    opacity:.5;
}


@media (max-width:1120px) {
    .hero-inner {
        width:min(47rem,65vw);
    }

    .hero h1 {
        font-size:clamp(4rem,7vw,6.8rem);
    }

    .hero-signal {
        width:24vw;
        min-width:16rem;

        right:2rem;
    }

    .loss-row {
        grid-template-columns:
            minmax(16rem,.9fr)
            minmax(18rem,1fr)
            auto;

        gap:2rem;
    }

    .context-layout {
        gap:5rem;
    }

    .capability-flow article {
        grid-template-columns:
            7rem
            minmax(15rem,.72fr)
            minmax(18rem,1fr);

        gap:2.5rem;
    }
}


@media (max-width:920px) {
    .hero {
        min-height:auto;

        padding-top:10rem;
    }

    .hero-inner {
        width:min(45rem,72vw);

        margin-left:0;
    }

    .hero h1 {
        font-size:clamp(3.8rem,7.8vw,6.1rem);
    }

    .hero-signal {
        width:15rem;

        right:1.5rem;
    }

    .money-section,
    .context-section,
    .implementation-section,
    .capability-section,
    .control-section,
    .comparison-section,
    .live-product-section {
        padding-left:1.5rem;
        padding-right:1.5rem;
    }

    .loss-row {
        min-height:8.5rem;

        grid-template-columns:
            minmax(14rem,.85fr)
            minmax(17rem,1fr)
            auto;

        gap:1.5rem;
    }

    .context-layout {
        grid-template-columns:
            minmax(19rem,.75fr)
            minmax(25rem,1fr);

        gap:3rem;
    }

    .context-console {
        min-height:34rem;
    }

    .implementation-bottom {
        align-items:flex-end;
    }

    .capability-flow article {
        grid-template-columns:
            6rem
            minmax(13rem,.75fr)
            minmax(17rem,1fr);

        gap:1.8rem;
    }

    .control-layout,
    .live-product-layout {
        gap:4rem;
    }

    .comparison-row {
        grid-template-columns:
            minmax(10rem,.52fr)
            minmax(13rem,.8fr)
            minmax(15rem,1fr);

        gap:1.25rem;
    }
}


@media (prefers-contrast:more) {
    .loss-list,
    .capability-flow,
    .comparison-table {
        border-top-color:rgba(255,255,255,.35);
    }

    .loss-row,
    .capability-flow article,
    .comparison-row {
        border-bottom-color:rgba(255,255,255,.28);
    }

    .context-console,
    .closing-section {
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.35);
    }
}


@media (prefers-reduced-transparency:reduce) {
    .context-console {
        background:#111114;
    }
}


@media (prefers-reduced-motion:reduce) {
    .loss-row:hover {
        padding-left:0;
        padding-right:0;
    }

    .text-link span,
    .capability-link a span {
        transform:none !important;
    }
}