/* ================================================================
   AP NEURAL WEB — SaaS / PRODUCT SYSTEM V1
================================================================ */

.page-service-saas {
    background: #08090B;
    overflow-x: clip;
}

.saas-main {
    position: relative;
    z-index: 2;
}


/* ================================================================
   BACKGROUND / SVG PRODUCT CORE V3 — AP WINE

   SVG original.
   Paleta del mecanismo adaptada a AP Neural Web.
   SAAS conserva el cian de la referencia.
================================================================ */

.saas-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 67% 46%,
            rgba(181,32,74,.15),
            transparent 18rem
        ),

        radial-gradient(
            circle at 63% 48%,
            rgba(139,21,56,.075),
            transparent 34rem
        ),

        linear-gradient(
            135deg,
            #08090B 0%,
            #10080C 37%,
            #160A10 66%,
            #08090B 100%
        );
}


/* ================================================================
   RESPLANDOR DEL MECANISMO
================================================================ */

.saas-field::before {

    content: "";

    position: absolute;

    z-index: 1;

    left: 59%;
    top: 53%;

    width:
        clamp(16rem,32vw,34rem);

    aspect-ratio:
        1;

    transform:
        translate(-50%,-50%);

    background:

        radial-gradient(
            circle,
            rgba(181,32,74,.15) 0%,
            rgba(139,21,56,.075) 30%,
            rgba(88,11,35,.035) 50%,
            transparent 70%
        );

    filter:
        blur(7px);

    animation:
        saasSvgAmbientPulse
        7s
        ease-in-out
        infinite;
}


/* ================================================================
   VIGNETTE

   Hero izquierdo limpio.
   Mecanismo visible sin dominar la lectura.
================================================================ */

.saas-field::after {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(8,9,11,.86) 0%,
            rgba(8,9,11,.63) 23%,
            rgba(8,9,11,.20) 43%,
            rgba(8,9,11,.055) 68%,
            rgba(8,9,11,.30) 100%
        ),

        linear-gradient(
            180deg,
            rgba(8,9,11,.18) 0%,
            transparent 39%,
            rgba(8,9,11,.38) 100%
        );

    pointer-events:
        none;
}


/* ================================================================
   SVG
================================================================ */

.saas-field__art {

    position: absolute;

    z-index: 2;

    left: 58%;
    top: 49%;

    width:
        min(105vw,96rem);

    max-width:
        none;

    height:
        auto;

    transform:
        translate(-50%,-50%)
        scale(1.03);

    transform-origin:
        center;

    /*
    Ahora la profundidad corresponde a la marca.
    No se aplica filter de hue porque SAAS debe seguir cian.
    */

    filter:

        drop-shadow(
            0 0 8px
            rgba(181,32,74,.10)
        )

        drop-shadow(
            0 0 22px
            rgba(139,21,56,.08)
        );

    animation:
        saasSvgFloat
        10s
        ease-in-out
        infinite;

    will-change:
        transform;
}


/* ================================================================
   MOTION
================================================================ */

@keyframes saasSvgFloat {

    0%,
    100% {

        transform:
            translate(-50%,-50%)
            scale(1.03);
    }

    50% {

        transform:
            translate(
                -50%,
                calc(-50% - 5px)
            )
            scale(1.045);
    }

}


@keyframes saasSvgAmbientPulse {

    0%,
    100% {

        opacity: .52;

        transform:
            translate(-50%,-50%)
            scale(.96);
    }

    50% {

        opacity: .82;

        transform:
            translate(-50%,-50%)
            scale(1.055);
    }

}


/* ================================================================
   TABLET
================================================================ */

@media (max-width:1000px) {

    .saas-field__art {

        left: 55%;
        top: 46%;

        width:
            max(124vw,60rem);
    }


    .saas-field::after {

        background:

            linear-gradient(
                90deg,
                rgba(8,9,11,.78) 0%,
                rgba(8,9,11,.49) 30%,
                rgba(8,9,11,.13) 62%,
                rgba(8,9,11,.29) 100%
            ),

            linear-gradient(
                180deg,
                rgba(8,9,11,.20),
                transparent 42%,
                rgba(8,9,11,.40)
            );
    }

}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width:767px) {

    .saas-field {

        background:

            radial-gradient(
                circle at 50% 32%,
                rgba(181,32,74,.13),
                transparent 15rem
            ),

            linear-gradient(
                180deg,
                #10080C,
                #08090B
            );
    }


    .saas-field__art {

        left: 50%;
        top: 35%;

        width:
            54rem;

        transform:
            translate(-50%,-50%)
            scale(.94);

        filter:

            drop-shadow(
                0 0 7px
                rgba(181,32,74,.08)
            );
    }


    .saas-field::before {

        left: 54%;
        top: 35%;

        width:
            22rem;

        opacity:
            .44;
    }


    .saas-field::after {

        background:

            linear-gradient(
                180deg,
                rgba(8,9,11,.49) 0%,
                rgba(8,9,11,.18) 30%,
                rgba(8,9,11,.13) 49%,
                rgba(8,9,11,.61) 78%,
                rgba(8,9,11,.84) 100%
            );
    }


    @keyframes saasSvgFloat {

        0%,
        100% {

            transform:
                translate(-50%,-50%)
                scale(.94);
        }

        50% {

            transform:
                translate(
                    -50%,
                    calc(-50% - 3px)
                )
                scale(.95);
        }

    }

}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width:479px) {

    .saas-field__art {

        top: 33%;

        width: 48rem;
    }

}


/* ================================================================
   REDUCED MOTION
================================================================ */

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

    .saas-field__art,
    .saas-field::before {

        animation:
            none !important;
    }

}




/* ================================================================
   HERO
================================================================ */

.saas-hero {
    min-height:
        min(100svh,62rem);

    display: flex;

    align-items: center;

    padding-top:
        clamp(8rem,13vw,11rem);
}

.saas-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(20rem,.58fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: end;
}

.saas-hero h1 {
    max-width: 10.5ch;

    margin-bottom: 2rem;

    font-size:
        clamp(3.7rem,7.3vw,7.8rem);

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;

    text-wrap: balance;
}

.saas-hero h1 span {
    display: block;

    color: #B5204A;
}

.saas-hero__lead {
    max-width: 43rem;

    margin-bottom: 2rem;

    color:
        var(--color-text-soft);

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

    line-height: 1.75;
}

.saas-hero__actions,
.saas-cta__actions {
    display: flex;

    flex-wrap: wrap;

    gap: .75rem;
}


/* ================================================================
   BUTTONS / RELEASE EFFECT
================================================================ */

.saas-main
.saas-button {
    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    text-align: center;

    overflow: hidden;
}

.saas-main
.saas-button > span {
    position: relative;

    z-index: 5;

    width: 100%;

    text-align: center;
}


/*
Barra de release que solo aparece en hover.
*/

.saas-button--release > i {
    position: absolute;

    z-index: 2;

    left: .65rem;
    right: .65rem;
    bottom: .45rem;

    height: 2px;

    overflow: hidden;

    background:
        rgba(243,243,241,.08);

    opacity: 0;

    transition:
        opacity 180ms ease;
}

.saas-button--release > i::after {
    content: "";

    position: absolute;

    left: -35%;

    width: 32%;
    height: 100%;

    background: #F3F3F1;

    box-shadow:
        0 0 .5rem
        rgba(181,32,74,.24);

    transition:
        left
        560ms
        cubic-bezier(.22,1,.36,1);
}

.saas-button--track > i {
    position: absolute;

    z-index: 2;

    inset: .45rem;

    border:
        1px solid
        rgba(181,32,74,.0);

    clip-path:
        inset(0 100% 0 0);

    transition:
        clip-path
        470ms
        cubic-bezier(.22,1,.36,1),
        border-color 220ms ease;
}

@media (hover:hover) and (pointer:fine) {

    .saas-button--release:hover > i {
        opacity: .9;
    }

    .saas-button--release:hover > i::after {
        left: 103%;
    }

    .saas-button--track:hover > i {
        clip-path:
            inset(0 0 0 0);

        border-color:
            rgba(181,32,74,.34);
    }
}


/* ================================================================
   RELEASE CONSOLE
================================================================ */

.saas-release {
    position: relative;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.14);

    background:
        rgba(10,11,14,.80);

    backdrop-filter:
        blur(10px);

    overflow: hidden;

    transition:
        transform 340ms cubic-bezier(.22,1,.36,1),
        border-color 280ms ease;
}

.saas-release::before {
    content: "";

    position: absolute;

    left: -1px;
    bottom: -1px;

    width: 3rem;
    height: 3rem;

    border-left:
        1px solid #B5204A;

    border-bottom:
        1px solid #B5204A;
}

.saas-release__top {
    display: flex;

    justify-content:
        space-between;

    gap: 1rem;

    padding-bottom: .9rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .58rem;

    letter-spacing: .10em;
}

.saas-release__top strong {
    color: #B5204A;
}

.saas-release__window {
    position: relative;

    display: grid;

    grid-template-columns:
        4rem 1fr;

    min-height: 23rem;

    margin: 1rem 0;

    border:
        1px solid
        rgba(151,154,162,.10);

    overflow: hidden;

    background:
        rgba(8,9,11,.58);
}

.saas-release__sidebar {
    display: grid;

    align-content: start;

    gap: .7rem;

    padding:
        1rem .7rem;

    border-right:
        1px solid
        rgba(151,154,162,.10);
}

.saas-release__sidebar i {
    height: 1.4rem;

    border:
        1px solid
        rgba(151,154,162,.11);
}

.saas-release__sidebar i:nth-child(2) {
    background:
        rgba(139,21,56,.14);

    border-color:
        rgba(181,32,74,.26);
}

.saas-release__content {
    display: grid;

    align-content: center;

    padding:
        1.1rem;
}

.saas-release__title {
    width: 68%;
    height: .8rem;

    background:
        rgba(243,243,241,.73);
}

.saas-release__subtitle {
    width: 44%;
    height: .45rem;

    margin-top: .55rem;

    background:
        rgba(151,154,162,.36);
}

.saas-release__stats {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: .5rem;

    margin-top: 2rem;
}

.saas-release__stats i {
    height: 4rem;

    border:
        1px solid
        rgba(151,154,162,.11);
}

.saas-release__stats i:nth-child(2) {
    border-color:
        rgba(181,32,74,.24);

    background:
        rgba(139,21,56,.07);
}

.saas-release__blocks {
    display: grid;

    grid-template-columns:
        1fr .75fr;

    gap: .5rem;

    margin-top: .5rem;
}

.saas-release__blocks span {
    height: 6rem;

    border:
        1px solid
        rgba(151,154,162,.11);
}

.saas-release__scan {
    position: absolute;

    left: 0;
    right: 0;

    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #B5204A,
            rgba(243,243,241,.50),
            #B5204A,
            transparent
        );

    animation:
        saasReleaseScan
        5.3s ease-in-out infinite;
}

.saas-release__bottom {
    display: grid;

    gap: .7rem;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .57rem;
}

.saas-release__progress {
    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(151,154,162,.08);
}

.saas-release__progress i {
    position: absolute;

    left: -24%;

    width: 23%;
    height: 100%;

    background: #B5204A;

    animation:
        saasReleaseProgress
        3.5s linear infinite;
}

@media (hover:hover) and (pointer:fine) {

    .saas-release:hover {
        transform:
            translateY(-4px);

        border-color:
            rgba(181,32,74,.28);
    }
}


/* ================================================================
   SERVICES NAV
================================================================ */

.saas-service-nav {
    position: relative;

    z-index: 3;

    border-top:
        1px solid
        rgba(151,154,162,.08);

    border-bottom:
        1px solid
        rgba(151,154,162,.08);

    background:
        rgba(8,9,11,.84);

    backdrop-filter:
        blur(12px);
}

.saas-service-nav__inner {
    display: grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));
}

.saas-service-nav a {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: .35rem;

    min-width: 0;

    padding: 1rem .8rem;

    color:
        var(--color-text-muted);

    border-right:
        1px solid
        rgba(151,154,162,.08);

    font-size: .76rem;

    transition:
        color 220ms ease,
        background 220ms ease;
}

.saas-service-nav a:last-child {
    border-right: 0;
}

.saas-service-nav a span {
    color:
        rgba(181,32,74,.70);

    font-family:
        var(--font-mono);

    font-size: .55rem;
}

.saas-service-nav
a[aria-current="page"] {
    color: #F3F3F1;

    background:
        rgba(139,21,56,.075);
}

.saas-service-nav
a[aria-current="page"]::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: #B5204A;
}


/* ================================================================
   COMMON HEADINGS
================================================================ */

.saas-principle h2,
.saas-engine h2,
.saas-parts h2,
.saas-mvp h2,
.saas-decision h2,
.saas-cta h2 {
    font-size:
        clamp(2.7rem,5vw,5.4rem);

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;

    text-wrap: balance;
}

.saas-principle h2 span,
.saas-engine h2 span,
.saas-parts h2 span,
.saas-mvp h2 span,
.saas-decision h2 span,
.saas-cta h2 span {
    color: #B5204A;
}


/* ================================================================
   PRINCIPLE
================================================================ */

.saas-principle__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,.72fr);

    gap:
        clamp(3rem,8vw,8rem);
}

.saas-principle__copy {
    padding-left:
        clamp(1.3rem,3vw,2.8rem);

    border-left:
        1px solid
        rgba(181,32,74,.30);
}

.saas-principle__copy p {
    color:
        var(--color-text-soft);

    line-height: 1.8;
}

.saas-principle__copy strong {
    display: block;

    margin-top: 2rem;

    color: #F3F3F1;

    line-height: 1.6;
}


/* ================================================================
   ENGINE HEAD
================================================================ */

.saas-engine {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.saas-engine__head,
.saas-decision__head {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(18rem,.48fr);

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

    align-items: end;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}

.saas-engine__head > p,
.saas-decision__head > p {
    margin: 0;

    color:
        var(--color-text-muted);

    line-height: 1.75;
}


/* ================================================================
   TABS
================================================================ */

.saas-console__tabs {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    border:
        1px solid
        rgba(151,154,162,.11);

    border-bottom: 0;
}

.saas-tab {
    position: relative;

    display: grid;

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

    gap: .7rem;

    min-width: 0;
    min-height: 7rem;

    padding: 1rem;

    color: inherit;

    text-align: left;

    border: 0;

    border-right:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(11,12,15,.72);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 280ms cubic-bezier(.22,1,.36,1),
        background 260ms ease;
}

.saas-tab:last-child {
    border-right: 0;
}


/*
Indicador de versión asciende desde abajo.
*/

.saas-tab::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #B5204A;

    transform:
        translateY(3px);

    opacity: 0;

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        opacity 220ms ease;
}

.saas-tab.is-active::after {
    transform:
        translateY(0);

    opacity: 1;
}

.saas-tab > span {
    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .61rem;
}

.saas-tab small {
    display: block;

    margin-bottom: .4rem;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .54rem;

    letter-spacing: .10em;
}

.saas-tab strong {
    text-transform: uppercase;
}

.saas-tab.is-active {
    background:
        rgba(139,21,56,.075);
}

.saas-tab.is-active > span {
    color: #B5204A;
}

@media (hover:hover) and (pointer:fine) {

    .saas-tab:hover {
        transform:
            translateY(-3px);

        background:
            rgba(139,21,56,.045);
    }
}


/* ================================================================
   VIEW
================================================================ */

.saas-view {
    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(9,10,13,.84);
}

.saas-view__top {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 1rem;

    padding: .9rem 1.1rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    font-family:
        var(--font-mono);

    font-size: .6rem;

    letter-spacing: .11em;
}

.saas-view__top > div {
    display: flex;

    gap: 1rem;
}

.saas-view__top span {
    color:
        var(--color-text-muted);
}

.saas-view__top strong {
    color: #B5204A;
}

.saas-view__body {
    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(25rem,1fr);
}

.saas-view__copy {
    padding:
        clamp(2rem,4vw,4rem);

    border-right:
        1px solid
        rgba(151,154,162,.10);
}

.saas-view__copy h3 {
    max-width: 10ch;

    margin-bottom: 1.4rem;

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

    line-height: .96;

    letter-spacing: -.045em;

    text-transform: uppercase;
}

.saas-view__copy > p {
    color:
        var(--color-text-soft);

    line-height: 1.75;
}

.saas-view__objective {
    margin-top: 2rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.48);
}

.saas-view__objective span {
    display: block;

    margin-bottom: .6rem;

    color: #B5204A;

    font-family:
        var(--font-mono);

    font-size: .58rem;

    letter-spacing: .11em;
}


/* ================================================================
   PRODUCT STACK
================================================================ */

.saas-stack {
    position: relative;

    display: grid;

    align-content: center;

    gap: .65rem;

    min-height: 32rem;

    padding:
        clamp(1.5rem,3vw,2.5rem);

    background:
        linear-gradient(
            rgba(151,154,162,.027) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(151,154,162,.027) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

    overflow: hidden;
}

.saas-stack__layer {
    position: relative;

    display: grid;

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

    gap: .8rem;

    align-items: center;

    min-height: 4.5rem;

    padding: .8rem 1rem;

    border:
        1px solid
        rgba(151,154,162,.12);

    background:
        rgba(10,11,14,.91);

    transition:
        transform 360ms cubic-bezier(.22,1,.36,1),
        border-color 280ms ease,
        background 280ms ease;
}

.saas-stack__layer:nth-child(1) {
    margin-right: 18%;
}

.saas-stack__layer:nth-child(2) {
    margin-right: 12%;
    margin-left: 6%;
}

.saas-stack__layer:nth-child(3) {
    margin-right: 6%;
    margin-left: 12%;
}

.saas-stack__layer:nth-child(4) {
    margin-left: 18%;
}

.saas-stack__layer span {
    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .57rem;
}

.saas-stack__layer strong {
    text-transform: uppercase;

    font-size: .8rem;
}

.saas-stack__layer.is-active {
    border-color:
        rgba(181,32,74,.48);

    background:
        rgba(139,21,56,.10);

    transform:
        translateX(.5rem);
}

.saas-stack__layer.is-active span {
    color: #B5204A;
}

.saas-stack__version {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 1rem;

    align-items: center;

    margin-top: 1.3rem;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .55rem;
}

.saas-stack__version span,
.saas-stack__version strong {
    color: #B5204A;
}

.saas-stack__version i {
    position: relative;

    height: 1px;

    overflow: hidden;

    background:
        rgba(151,154,162,.10);
}

.saas-stack__version i::after {
    content: "";

    position: absolute;

    left: -22%;

    width: 20%;
    height: 100%;

    background: #B5204A;

    animation:
        saasStackVersion
        3.4s linear infinite;
}

.saas-view.is-changing
.saas-view__copy {
    animation:
        saasCopyChange
        470ms cubic-bezier(.22,1,.36,1);
}

.saas-view.is-changing
.saas-stack__layer {
    animation:
        saasLayerChange
        520ms cubic-bezier(.22,1,.36,1);
}


/* ================================================================
   PRODUCT PARTS
================================================================ */

.saas-parts {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.saas-parts__head {
    max-width: 72rem;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}

.saas-parts__grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: .7rem;
}

.saas-part {
    position: relative;

    min-height: 22rem;

    padding: 1.35rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(12,13,16,.68);

    overflow: hidden;

    transition:
        transform 330ms cubic-bezier(.22,1,.36,1),
        border-color 260ms ease,
        background 260ms ease;
}

.saas-part > span {
    display: block;

    margin-bottom:
        clamp(3.5rem,6vw,5.5rem);

    color: #B5204A;

    font-family:
        var(--font-mono);

    font-size: .62rem;
}

.saas-part > small {
    display: block;

    margin-bottom: .65rem;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .55rem;

    letter-spacing: .10em;
}

.saas-part h3 {
    margin-bottom: .8rem;

    font-size:
        clamp(1.3rem,2vw,1.8rem);

    line-height: 1.05;

    text-transform: uppercase;
}

.saas-part p {
    margin: 0;

    color:
        var(--color-text-muted);

    font-size: .84rem;

    line-height: 1.7;
}


/*
Tres capas internas desplazándose.
*/

.saas-part__shelves i {
    position: absolute;

    left: 1rem;
    right: 1rem;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(181,32,74,.48),
            transparent
        );

    transform:
        translateX(-120%);

    opacity: 0;

    transition:
        transform
        520ms
        cubic-bezier(.22,1,.36,1),
        opacity 200ms ease;
}

.saas-part__shelves i:nth-child(1) {
    bottom: 3rem;
}

.saas-part__shelves i:nth-child(2) {
    bottom: 2.2rem;

    transition-delay: 60ms;
}

.saas-part__shelves i:nth-child(3) {
    bottom: 1.4rem;

    transition-delay: 120ms;
}

@media (hover:hover) and (pointer:fine) {

    .saas-part:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(181,32,74,.25);

        background:
            rgba(139,21,56,.045);
    }

    .saas-part:hover
    .saas-part__shelves i {
        transform:
            translateX(0);

        opacity: 1;
    }
}


/* ================================================================
   MVP
================================================================ */

.saas-mvp {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.saas-mvp__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.84fr)
        minmax(22rem,.76fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: center;
}

.saas-mvp__copy p {
    max-width: 44rem;

    color:
        var(--color-text-soft);

    line-height: 1.8;
}

.saas-mvp__release {
    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.12);

    background:
        rgba(10,11,14,.76);
}

.saas-mvp__release-head,
.saas-mvp__release-foot {
    display: flex;

    justify-content:
        space-between;

    gap: 1rem;

    padding: .8rem 0;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .56rem;

    letter-spacing: .09em;
}

.saas-mvp__release-head {
    padding-top: 0;

    border-bottom:
        1px solid
        rgba(151,154,162,.09);
}

.saas-mvp__release-head strong {
    color: #B5204A;
}

.saas-mvp__release-foot {
    padding-bottom: 0;

    border-top:
        1px solid
        rgba(151,154,162,.09);
}

.saas-mvp__versions {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    gap: .6rem;

    align-items: center;

    padding:
        2rem 0;
}

.saas-mvp__versions > div {
    display: grid;

    gap: .35rem;

    min-width: 0;

    padding: .8rem;

    text-align: center;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.55);
}

.saas-mvp__versions > div span {
    color: #B5204A;

    font-family:
        var(--font-mono);

    font-size: .56rem;
}

.saas-mvp__versions > div strong {
    text-transform: uppercase;

    font-size: .75rem;
}

.saas-mvp__versions > div small {
    color:
        var(--color-text-muted);

    font-size: .62rem;
}

.saas-mvp__versions
> div.is-current {
    border-color:
        rgba(181,32,74,.42);

    background:
        rgba(139,21,56,.08);
}

.saas-mvp__versions > i {
    width: 1rem;
    height: 1px;

    background:
        rgba(181,32,74,.34);
}


/* ================================================================
   DECISION
================================================================ */

.saas-decision {
    border-top:
        1px solid
        rgba(151,154,162,.08);
}

.saas-decision__list {
    border-top:
        1px solid
        rgba(151,154,162,.12);
}

.saas-decision__list article {
    position: relative;

    display: grid;

    grid-template-columns:
        3rem minmax(0,1fr) auto;

    gap: 1rem;

    align-items: center;

    padding:
        1.5rem .7rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    overflow: hidden;

    transition:
        padding-left
        320ms
        cubic-bezier(.22,1,.36,1),
        background 280ms ease;
}

.saas-decision__list article > span {
    color: #B5204A;

    font-family:
        var(--font-mono);

    font-size: .61rem;
}

.saas-decision__list article small {
    color:
        var(--color-text-muted);

    padding: .35rem .55rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    font-family:
        var(--font-mono);

    font-size: .53rem;

    letter-spacing: .08em;
}

.saas-decision__list article > i {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #B5204A,
            transparent
        );

    transition:
        width
        440ms
        cubic-bezier(.22,1,.36,1);
}

@media (hover:hover) and (pointer:fine) {

    .saas-decision__list article:hover {
        padding-left: 1.15rem;

        background:
            rgba(139,21,56,.035);
    }

    .saas-decision__list article:hover > i {
        width: 42%;
    }
}


/* ================================================================
   CTA
================================================================ */

.saas-cta__inner {
    display: grid;

    grid-template-columns:
        minmax(11rem,.31fr)
        minmax(0,1fr);

    gap:
        clamp(3rem,7vw,7rem);

    align-items: center;
}

.saas-cta__versions {
    display: grid;

    gap: .55rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(10,11,14,.66);
}

.saas-cta__versions span {
    display: grid;

    place-items: center;

    min-height: 3.5rem;

    border:
        1px solid
        rgba(151,154,162,.09);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size: .58rem;
}

.saas-cta__versions span:nth-of-type(2) {
    color: #B5204A;

    border-color:
        rgba(181,32,74,.24);
}

.saas-cta__versions i {
    width: 1px;
    height: .7rem;

    justify-self: center;

    background:
        rgba(181,32,74,.35);
}

.saas-cta__copy p {
    max-width: 45rem;

    margin:
        1.5rem 0 2rem;

    color:
        var(--color-text-muted);

    line-height: 1.75;
}


/* ================================================================
   FOOTER
================================================================ */

.saas-footer {
    position: relative;

    z-index: 3;

    padding:
        clamp(3.5rem,6vw,5.5rem)
        0
        1.5rem;

    background: #08090B;

    border-top:
        1px solid
        rgba(52,54,61,.55);
}

.saas-footer::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width:
        min(8rem,28vw);

    height: 1px;

    transform:
        translateX(-50%);

    background: #B5204A;
}

.saas-footer
.site-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: start;
}

.saas-footer
.site-footer__brand {
    display: flex;

    align-items: flex-start;

    gap: 1rem;
}

.saas-footer
.site-footer__brand > div {
    display: flex;

    flex-direction: column;

    gap: .4rem;
}

.saas-footer
.site-footer__brand strong {
    font-family:
        var(--font-display);

    text-transform: uppercase;
}

.saas-footer
.site-footer__brand > div span {
    color:
        var(--color-text-muted);

    font-size: .82rem;
}

.saas-footer
.site-footer__nav {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 2rem;
}

.saas-footer
.site-footer__nav > div {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}

.saas-footer
.site-footer__nav strong {
    margin-bottom: .25rem;

    color: #B5204A;

    font-family:
        var(--font-mono);

    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.saas-footer
.site-footer__nav a {
    position: relative;

    width: fit-content;

    max-width: 100%;

    color:
        var(--color-text-muted);

    font-size: .87rem;
}

/*
No ::after local.
Activo controlado por components.css.
*/

.saas-footer
.site-footer__bottom {
    display: flex;

    justify-content:
        space-between;

    gap: 1rem;

    margin-top: 4rem;

    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(52,54,61,.48);

    color:
        rgba(151,154,162,.58);

    font-family:
        var(--font-mono);

    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ================================================================
   TABLET
================================================================ */

@media (max-width:1050px) {

    .saas-parts__grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .saas-view__body {
        grid-template-columns: 1fr;
    }

    .saas-view__copy {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.10);
    }

    .saas-stack {
        min-height: 26rem;
    }
}


/* ================================================================
   <= 900
================================================================ */

@media (max-width:900px) {

    .saas-hero__grid,
    .saas-principle__grid,
    .saas-engine__head,
    .saas-mvp__grid,
    .saas-decision__head,
    .saas-cta__inner,
    .saas-footer
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .saas-release {
        max-width: 40rem;
    }

    .saas-service-nav__inner {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .saas-service-nav a {
        border-bottom:
            1px solid
            rgba(151,154,162,.08);
    }

    .saas-console__tabs {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .saas-tab:nth-child(2) {
        border-right: 0;
    }
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width:767px) {

    .saas-field__svg {
        width:
            max(190vw,59rem);

        opacity: .28;
    }

    .saas-field::after {
        opacity: .14;
    }

    .saas-hero {
        min-height: 0;

        padding-top: 8rem;
    }

    .saas-hero h1 {
        max-width: 10ch;

        font-size:
            clamp(3rem,15vw,5.2rem);
    }

    .saas-hero__actions,
    .saas-cta__actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .saas-hero__actions .ap-button,
    .saas-cta__actions .ap-button {
        width: 100%;

        min-width: 0;

        justify-content: center;
    }

    .saas-main
    .saas-button > span {
        white-space: normal;

        text-wrap: balance;
    }

    .saas-service-nav__inner {
        grid-template-columns: 1fr;
    }

    .saas-service-nav a {
        border-right: 0;
    }

    .saas-principle__copy {
        padding-left: 1rem;
    }

    .saas-console__tabs {
        grid-template-columns: 1fr;
    }

    .saas-tab {
        min-height: 5.7rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.10);
    }

    .saas-tab:last-child {
        border-bottom: 0;
    }

    .saas-view__top {
        align-items: flex-start;
    }

    .saas-view__top > div {
        flex-direction: column;

        gap: .2rem;
    }

    .saas-view__copy {
        padding:
            1.5rem 1rem;
    }

    .saas-stack {
        min-height: 0;

        padding: 1rem;
    }

    .saas-stack__layer:nth-child(n) {
        margin-left: 0;
        margin-right: 0;
    }

    .saas-parts__grid {
        grid-template-columns: 1fr;
    }

    .saas-part {
        min-height: 17rem;
    }

    .saas-mvp__versions {
        grid-template-columns: 1fr;
    }

    .saas-mvp__versions > i {
        width: 1px;
        height: 1rem;

        justify-self: center;
    }

    .saas-decision__list article {
        grid-template-columns:
            2rem minmax(0,1fr);
    }

    .saas-decision__list article small {
        grid-column:
            2 / -1;

        justify-self: start;
    }

    .saas-footer
    .site-footer__nav {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            2rem 1.4rem;
    }

    .saas-footer
    .site-footer__bottom {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }
}


/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width:479px) {

    .saas-release__window {
        grid-template-columns:
            3rem 1fr;
    }

    .saas-release__stats {
        grid-template-columns: 1fr;
    }

    .saas-release__stats i {
        height: 2.8rem;
    }

    .saas-footer
    .site-footer__nav {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   KEYFRAMES
================================================================ */

@keyframes saasLaneFlow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -120;
    }
}

@keyframes saasRouteFlow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }
}

@keyframes saasCoreFrame {
    0%,
    100% {
        stroke:
            rgba(181,32,74,.18);
    }

    50% {
        stroke:
            rgba(181,32,74,.48);
    }
}

@keyframes saasReleasePulse {
    0%,
    100% {
        opacity: .30;
    }

    50% {
        opacity: .92;
    }
}

@keyframes saasFieldScanner {
    0%,
    100% {
        left: 17%;

        opacity: 0;
    }

    10% {
        opacity: .24;
    }

    50% {
        left: 83%;

        opacity: .38;
    }

    90% {
        opacity: .24;
    }
}

@keyframes saasReleaseScan {
    0%,
    100% {
        top: 0;

        opacity: .2;
    }

    50% {
        top:
            calc(100% - 1px);

        opacity: 1;
    }
}

@keyframes saasReleaseProgress {
    from {
        left: -24%;
    }

    to {
        left: 102%;
    }
}

@keyframes saasStackVersion {
    from {
        left: -22%;
    }

    to {
        left: 102%;
    }
}

@keyframes saasCopyChange {
    from {
        opacity: .2;

        transform:
            translateY(.55rem);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes saasLayerChange {
    0% {
        opacity: .25;

        transform:
            translateX(-.6rem);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* ================================================================
   REDUCED MOTION
================================================================ */

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

    .saas-field__frames rect,
    .saas-field__lanes path,
    .saas-field__release rect,
    .saas-field__route,
    .saas-field::after,
    .saas-release__scan,
    .saas-release__progress i,
    .saas-stack__version i::after {
        animation: none !important;
    }

    .saas-field__traveler {
        display: none;
    }

    .saas-view.is-changing
    .saas-view__copy,

    .saas-view.is-changing
    .saas-stack__layer {
        animation: none !important;
    }

    .saas-release,
    .saas-tab,
    .saas-part,
    .saas-decision__list article {
        transition: none !important;
    }
}