/* /Components/Auth/SignInHeaderLink.razor.rz.scp.css */
/* Shared wrapper keeps the control to the right of the nav */
.signin-header[b-epcbvgjq5m] {
    display: inline-flex;
    align-items: center;
    width: max-content;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 0.5rem;
}

/* ---- Logged out: ghost "Sign in" button ---------------------------------- */
.signin-header--signin[b-epcbvgjq5m] {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    padding: 0.32rem 0.95rem;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.signin-header--signin:hover[b-epcbvgjq5m] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.signin-header--signin:focus-visible[b-epcbvgjq5m] {
    outline: 2px solid #7fa6ff;
    outline-offset: 2px;
}

/* ---- Logged in: avatar + dropdown ---------------------------------------- */
.signin-header--authed[b-epcbvgjq5m] {
    /* inherits shared rules */
}

.signin-header__avatar-wrap[b-epcbvgjq5m] {
    position: relative;
    display: inline-flex;
}

.signin-header__avatar[b-epcbvgjq5m] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #1e88e5;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: border-color 180ms ease, transform 160ms ease;
}

.signin-header__avatar:hover[b-epcbvgjq5m] {
    border-color: rgba(255, 255, 255, 0.45);
}

.signin-header__avatar:focus-visible[b-epcbvgjq5m] {
    outline: 2px solid #7fa6ff;
    outline-offset: 2px;
}

/* Dropdown panel */
.signin-header__dropdown[b-epcbvgjq5m] {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 15rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(205, 224, 255, 0.28);
    background: linear-gradient(140deg, rgba(5, 16, 39, 0.92), rgba(11, 31, 83, 0.9), rgba(22, 62, 143, 0.82));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(8, 20, 48, 0.38);
    padding: 0.4rem;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms ease, visibility 220ms ease;
}

/* Invisible hover bridge so moving the mouse from avatar to dropdown doesn't close it */
.signin-header__dropdown[b-epcbvgjq5m]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.55rem;
    height: 0.55rem;
}

.signin-header__avatar-wrap:hover .signin-header__dropdown[b-epcbvgjq5m],
.signin-header__avatar-wrap:focus-within .signin-header__dropdown[b-epcbvgjq5m] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.signin-header__dropdown-header[b-epcbvgjq5m] {
    padding: 0.6rem 0.7rem 0.7rem;
    border-bottom: 1px solid rgba(205, 224, 255, 0.18);
    margin-bottom: 0.3rem;
}

.signin-header__name[b-epcbvgjq5m] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #edf3ff;
    line-height: 1.25;
    margin-bottom: 0.15rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signin-header__email[b-epcbvgjq5m] {
    font-size: 0.78rem;
    color: #9aa6ca;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signin-header__form[b-epcbvgjq5m] {
    margin: 0;
    padding: 0;
}

.signin-header__dropdown-item[b-epcbvgjq5m] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    color: #edf3ff;
    background: transparent;
    border: 0;
    border-radius: 0.35rem;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
}

.signin-header__dropdown-item:hover[b-epcbvgjq5m] {
    background: rgba(255, 255, 255, 0.12);
}

.signin-header__dropdown-item--danger[b-epcbvgjq5m] {
    color: #f6a39a;
}

.signin-header__dropdown-item--danger:hover[b-epcbvgjq5m] {
    background: rgba(245, 138, 127, 0.14);
    color: #ffc1b8;
}

.signin-header__dropdown-item:focus-visible[b-epcbvgjq5m] {
    outline: 2px solid #7fa6ff;
    outline-offset: -2px;
}

/* ---- Logged out modal ---------------------------------------------------- */
.signin-dialog[b-epcbvgjq5m] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(5, 12, 30, 0.55);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    color: inherit;
    animation: signin-dialog-pop-b-epcbvgjq5m 180ms ease-out;
}

@keyframes signin-dialog-pop-b-epcbvgjq5m {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.signin-dialog__card[b-epcbvgjq5m] {
    position: relative;
    width: min(440px, 100%);
    background: linear-gradient(155deg, rgba(15, 31, 72, 0.98), rgba(11, 24, 58, 0.96));
    color: #dde5f8;
    border: 1px solid rgba(205, 224, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
}

.signin-dialog__close[b-epcbvgjq5m] {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #9aa6ca;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: background-color 140ms ease, color 140ms ease;
}

.signin-dialog__close:hover[b-epcbvgjq5m] {
    background: rgba(255, 255, 255, 0.08);
    color: #edf3ff;
}

.signin-dialog__close:focus-visible[b-epcbvgjq5m] {
    outline: 2px solid #7fa6ff;
    outline-offset: 2px;
}

.signin-dialog__lock[b-epcbvgjq5m] {
    color: #7fa6ff;
    margin-bottom: 0.5rem;
}

.signin-dialog__title[b-epcbvgjq5m] {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #eef3ff;
    margin: 0 0 0.55rem;
    line-height: 1.3;
}

.signin-dialog__lede[b-epcbvgjq5m] {
    margin: 0 0 1.25rem;
    color: #b7c2e2;
    font-size: 0.92rem;
    line-height: 1.55;
}

.signin-dialog__buttons[b-epcbvgjq5m] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.signin-dialog__button[b-epcbvgjq5m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    background: #ffffff;
    color: #1b1b1b;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    border: 1px solid transparent;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.signin-dialog__button:hover[b-epcbvgjq5m] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.signin-dialog__button:focus-visible[b-epcbvgjq5m] {
    outline: 2px solid #7fa6ff;
    outline-offset: 3px;
}

.signin-dialog__consent[b-epcbvgjq5m] {
    font-size: 0.8rem;
    color: #aab5d3;
    line-height: 1.5;
    margin: 0;
}

.signin-dialog__consent a[b-epcbvgjq5m] {
    color: #b6c9ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signin-dialog__consent a:hover[b-epcbvgjq5m] {
    color: #d7e1ff;
}

@media (max-width: 540px) {
    .signin-dialog__card[b-epcbvgjq5m] {
        padding: 1.6rem 1.15rem 1.25rem;
    }
    .signin-dialog__title[b-epcbvgjq5m] {
        font-size: 1.1rem;
    }
}
/* /Components/Auth/SignInOverlay.razor.rz.scp.css */
.signin-overlay[b-14a6rm035n] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(ellipse at center,
        rgba(8, 20, 48, 0.45) 0%,
        rgba(8, 20, 48, 0.6) 70%,
        rgba(8, 20, 48, 0.75) 100%);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    z-index: 100;
}

.signin-overlay__card[b-14a6rm035n] {
    background: linear-gradient(155deg, rgba(15, 31, 72, 0.88), rgba(11, 24, 58, 0.82));
    color: #dde5f8;
    border: 1px solid rgba(205, 224, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 480px;
    width: 100%;
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
}

.signin-overlay__lock[b-14a6rm035n] {
    color: #7fa6ff;
    margin-bottom: 0.5rem;
}

.signin-overlay__title[b-14a6rm035n] {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #eef3ff;
    margin: 0 0 0.65rem;
    line-height: 1.3;
}

.signin-overlay__lede[b-14a6rm035n] {
    margin: 0 0 1.5rem;
    color: #b7c2e2;
    font-size: 0.95rem;
    line-height: 1.55;
}

.signin-overlay__notice[b-14a6rm035n] {
    background: rgba(255, 184, 77, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.45);
    color: #ffcf91;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: left;
}

.signin-overlay__buttons[b-14a6rm035n] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.signin-overlay__button[b-14a6rm035n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
    border: 1px solid transparent;
}

.signin-overlay__button--microsoft[b-14a6rm035n] {
    background: #ffffff;
    color: #1b1b1b;
}

.signin-overlay__button--google[b-14a6rm035n] {
    background: #ffffff;
    color: #1b1b1b;
}

.signin-overlay__button:hover[b-14a6rm035n] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.signin-overlay__button:focus-visible[b-14a6rm035n] {
    outline: 2px solid #7fa6ff;
    outline-offset: 3px;
}

.signin-overlay__consent[b-14a6rm035n] {
    font-size: 0.82rem;
    color: #aab5d3;
    line-height: 1.55;
    margin: 0;
    text-align: left;
}

.signin-overlay__consent a[b-14a6rm035n] {
    color: #b6c9ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signin-overlay__consent a:hover[b-14a6rm035n] {
    color: #d7e1ff;
}

@media (max-width: 540px) {
    .signin-overlay[b-14a6rm035n] {
        padding: 0.75rem;
    }
    .signin-overlay__card[b-14a6rm035n] {
        padding: 1.5rem 1.1rem 1.25rem;
    }
    .signin-overlay__title[b-14a6rm035n] {
        font-size: 1.1rem;
    }
}
/* /Components/Auth/SignInPopup.razor.rz.scp.css */
.signin-popup[b-h7ehbqdnm8] {
    background: linear-gradient(155deg, rgba(15, 31, 72, 0.96), rgba(11, 24, 58, 0.94));
    color: #dde5f8;
    border: 1px solid rgba(205, 224, 255, 0.22);
    border-radius: 12px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 300px;
    max-width: calc(100vw - 1.5rem);
    padding: 1rem 1rem 0.9rem;
    text-align: center;
}

.signin-popup__lock[b-h7ehbqdnm8] {
    color: #7fa6ff;
    margin-bottom: 0.25rem;
}

.signin-popup__title[b-h7ehbqdnm8] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #eef3ff;
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.signin-popup__lede[b-h7ehbqdnm8] {
    margin: 0 0 0.85rem;
    color: #b7c2e2;
    font-size: 0.82rem;
    line-height: 1.5;
}

.signin-popup__notice[b-h7ehbqdnm8] {
    background: rgba(255, 184, 77, 0.12);
    border: 1px solid rgba(255, 184, 77, 0.45);
    color: #ffcf91;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
    margin-bottom: 0.65rem;
    text-align: left;
}

.signin-popup__buttons[b-h7ehbqdnm8] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.signin-popup__button[b-h7ehbqdnm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
    border: 1px solid transparent;
    background: #ffffff;
    color: #1b1b1b;
}

.signin-popup__button:hover[b-h7ehbqdnm8] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.signin-popup__button:focus-visible[b-h7ehbqdnm8] {
    outline: 2px solid #7fa6ff;
    outline-offset: 3px;
}

.signin-popup__consent[b-h7ehbqdnm8] {
    font-size: 0.72rem;
    color: #aab5d3;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.signin-popup__consent a[b-h7ehbqdnm8] {
    color: #b6c9ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signin-popup__consent a:hover[b-h7ehbqdnm8] {
    color: #d7e1ff;
}
/* /Components/FeaturesHmiSection.razor.rz.scp.css */
.features-hmi[b-foqd28ve42] {
    padding: calc(var(--section-pad-y) * var(--pad-scale-tight)) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.features-hmi[b-foqd28ve42]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 32% 55% at 4% 35%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 32% 55% at 96% 65%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 50% 100%, rgba(31, 156, 216, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.features-hmi > .container[b-foqd28ve42] {
    position: relative;
    z-index: 1;
}

.features-hmi-head[b-foqd28ve42] {
    margin-bottom: clamp(1.9rem, 3vw, 2.6rem);
}

.features-hmi-head .section-h2 span[b-foqd28ve42] {
    display: block;
}

.features-hmi-content[b-foqd28ve42] {
    width: min(760px, 92vw);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.6vw, 1.4rem);
    text-align: left;
}

.features-hmi-content p[b-foqd28ve42] {
    margin: 0;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
}

.features-hmi-payoff[b-foqd28ve42] {
    margin-top: clamp(0.8rem, 1.6vw, 1.2rem) !important;
    padding-top: clamp(1.2rem, 1.8vw, 1.6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.12rem, 1.5vw, 1.32rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
    position: relative;
}

.features-hmi-payoff[b-foqd28ve42]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: clamp(120px, 26%, 220px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.45) 0%,
        rgba(31, 156, 216, 0.75) 45%,
        rgba(124, 236, 255, 0.35) 90%,
        transparent 100%);
}

/* ── Demonstration visual ──────────────────────────────────────── */
.features-hmi-demo[b-foqd28ve42] {
    width: min(1100px, 94vw);
    margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.3vw, 1rem);
}

.features-hmi-demo-frame[b-foqd28ve42] {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(17, 34, 58, 0.9) 0%, rgba(13, 27, 47, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    isolation: isolate;
}

/* Accent ribbon along the top of the demo frame — same red→blue→cyan
   gradient used in the other Home sections for tonal continuity. */
.features-hmi-demo-frame[b-foqd28ve42]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.45) 12%,
        rgba(31, 156, 216, 0.8) 50%,
        rgba(124, 236, 255, 0.45) 88%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.features-hmi-demo-frame[b-foqd28ve42]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 60% at 25% 50%, rgba(31, 156, 216, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 45% 60% at 75% 50%, rgba(124, 236, 255, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.features-hmi-demo-chrome[b-foqd28ve42] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 1;
}

.features-hmi-demo-dot[b-foqd28ve42] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.features-hmi-demo-dot:first-child[b-foqd28ve42] { background: rgba(226, 7, 23, 0.5); }
.features-hmi-demo-dot:nth-child(2)[b-foqd28ve42] { background: rgba(242, 163, 40, 0.45); }
.features-hmi-demo-dot:nth-child(3)[b-foqd28ve42] { background: rgba(59, 170, 53, 0.45); }

.features-hmi-demo-title[b-foqd28ve42] {
    margin-left: 0.7rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(239, 243, 255, 0.5);
}

.features-hmi-demo-split[b-foqd28ve42] {
    position: relative;
    display: grid;
    /* Center column holds the drag chip, arrow, "Bound to model" label and
       the friction-removing no-ops list — give it a fixed, narrow slot so
       the list wraps predictably and the side panes stay balanced. */
    grid-template-columns: minmax(0, 1fr) clamp(170px, 18vw, 215px) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(0.6rem, 1.6vw, 1.4rem);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    z-index: 1;
}

.features-hmi-pane[b-foqd28ve42] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.4vw, 1.1rem);
    padding: clamp(1rem, 1.8vw, 1.35rem);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(13, 27, 47, 0.55) 0%, rgba(10, 20, 36, 0.75) 100%);
    min-height: clamp(280px, 28vw, 340px);
}

.features-hmi-pane-label[b-foqd28ve42] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.features-hmi-pane-tag[b-foqd28ve42] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(239, 243, 255, 0.72);
}

.features-hmi-pane-sub[b-foqd28ve42] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(156, 192, 224, 0.6);
}

.features-hmi-pane--model .features-hmi-pane-tag[b-foqd28ve42] { color: rgba(124, 236, 255, 0.85); }
.features-hmi-pane--hmi .features-hmi-pane-tag[b-foqd28ve42] { color: rgba(242, 163, 40, 0.88); }

/* ── Model tree (left pane) ───────────────────────────────────── */
.features-hmi-tree-head[b-foqd28ve42] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.4rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.35rem;
}

.features-hmi-tree-head-title[b-foqd28ve42] {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(239, 243, 255, 0.72);
    letter-spacing: 0.02em;
}

.features-hmi-tree-head-hint[b-foqd28ve42] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.55);
}

.features-hmi-tree[b-foqd28ve42] {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0;
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(239, 243, 255, 0.82);
}

.ft-row[b-foqd28ve42] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.45rem;
    border-radius: 6px;
    white-space: nowrap;
}

.ft-row:hover[b-foqd28ve42] {
    background: rgba(255, 255, 255, 0.03);
}

.ft-guide[b-foqd28ve42] {
    flex: 0 0 auto;
    color: rgba(156, 192, 224, 0.35);
    letter-spacing: 0;
    user-select: none;
}

.ft-twist[b-foqd28ve42] {
    flex: 0 0 auto;
    width: 0.85rem;
    text-align: center;
    color: rgba(156, 192, 224, 0.65);
    font-size: 0.72rem;
    user-select: none;
}

.ft-icon[b-foqd28ve42] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: block;
}

.ft-icon--class[b-foqd28ve42]    { color: rgba(124, 236, 255, 0.9); }
.ft-icon--state[b-foqd28ve42]    { color: rgba(242, 163, 40, 0.9); }
.ft-icon--property[b-foqd28ve42] { color: rgba(31, 156, 216, 0.95); }
.ft-icon--folder[b-foqd28ve42]   { color: rgba(239, 243, 255, 0.7); }
.ft-icon--method[b-foqd28ve42]   { color: rgba(226, 7, 23, 0.8); }

.ft-name[b-foqd28ve42] {
    flex: 0 0 auto;
    color: rgba(239, 243, 255, 0.88);
    font-weight: 500;
}

.ft-row--class .ft-name[b-foqd28ve42] {
    color: #ffffff;
    font-weight: 600;
}

.ft-value[b-foqd28ve42] {
    flex: 1 1 auto;
    text-align: right;
    font-size: 0.78rem;
    color: rgba(156, 192, 224, 0.6);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-grab[b-foqd28ve42] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: rgba(124, 236, 255, 0.9);
}

.ft-grab svg[b-foqd28ve42] {
    width: 10px;
    height: 12px;
}

/* The dragging row and the drop zone on the right share
   `features-hmi-bind-pulse` so they flash their dashed outline
   in phase — the source and destination visually "breathe" together,
   making the binding moment unmistakable. */
.ft-row.is-dragging[b-foqd28ve42] {
    outline: 1px dashed rgba(124, 236, 255, 0.5);
    outline-offset: -1px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 236, 255, 0.08);
    transform: translateX(4px);
    animation:
        features-hmi-drag-hover-b-foqd28ve42 2.4s ease-in-out infinite,
        features-hmi-bind-pulse-b-foqd28ve42 2.4s ease-in-out infinite;
}

.ft-row.is-dragging .ft-name[b-foqd28ve42] {
    color: #ffffff;
}

.ft-row.is-dragging .ft-value[b-foqd28ve42] {
    color: rgba(124, 236, 255, 0.75);
}

@keyframes features-hmi-drag-hover-b-foqd28ve42 {
    0%, 100% { transform: translateX(4px); }
    50%      { transform: translateX(8px); }
}

@keyframes features-hmi-bind-pulse-b-foqd28ve42 {
    0%, 100% {
        outline-color: rgba(124, 236, 255, 0.4);
        background-color: rgba(31, 156, 216, 0.05);
    }
    50% {
        outline-color: rgba(124, 236, 255, 0.95);
        background-color: rgba(31, 156, 216, 0.14);
    }
}

/* ── HMI mock panel ────────────────────────────────────────────── */
.features-hmi-panel[b-foqd28ve42] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.3vw, 1rem);
    padding: clamp(0.9rem, 1.6vw, 1.15rem);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(6, 14, 28, 0.5);
}

.features-hmi-panel-row[b-foqd28ve42] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.features-hmi-panel-label[b-foqd28ve42] {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.62);
}

.features-hmi-state-pill[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 236, 255, 0.45);
    background: rgba(31, 156, 216, 0.14);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.features-hmi-state-pill-dot[b-foqd28ve42] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(124, 236, 255, 0.95);
    box-shadow: 0 0 8px rgba(124, 236, 255, 0.6);
    animation: features-hmi-pulse-b-foqd28ve42 1.8s ease-in-out infinite;
}

@keyframes features-hmi-pulse-b-foqd28ve42 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

.features-hmi-gauge[b-foqd28ve42] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 62%;
}

.features-hmi-gauge-bar[b-foqd28ve42] {
    position: relative;
    flex: 1 1 auto;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.features-hmi-gauge-fill[b-foqd28ve42] {
    position: absolute;
    inset: 0 38% 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.9) 0%, rgba(124, 236, 255, 0.9) 100%);
    box-shadow: 0 0 12px rgba(124, 236, 255, 0.35);
}

.features-hmi-gauge-value[b-foqd28ve42] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(239, 243, 255, 0.8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.features-hmi-panel-row--binding[b-foqd28ve42] {
    position: relative;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    outline: 1px dashed rgba(124, 236, 255, 0.5);
    outline-offset: 0;
    /* Shared keyframe with .ft-row.is-dragging — same 2.4s period,
       same phase → source + destination pulse together. */
    animation: features-hmi-bind-pulse-b-foqd28ve42 2.4s ease-in-out infinite;
}

.features-hmi-bound-badge[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.4rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 236, 255, 0.45);
    background: rgba(31, 156, 216, 0.18);
    color: rgba(124, 236, 255, 0.95);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.features-hmi-bound-badge svg[b-foqd28ve42] {
    width: 11px;
    height: 11px;
}

.features-hmi-panel-row--controls[b-foqd28ve42] {
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
}

/* Operational stats tiles below the controls — two side-by-side
   readouts so the HMI panel reads as a real operational interface,
   not a minimal demo. Thin top divider separates "live metrics" from
   the control buttons above. */
.features-hmi-panel-row--stats[b-foqd28ve42] {
    gap: 0.55rem;
    padding-top: 0.7rem;
    margin-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    align-items: stretch;
}

.features-hmi-stat[b-foqd28ve42] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.features-hmi-stat-label[b-foqd28ve42] {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.55);
}

.features-hmi-stat-value[b-foqd28ve42] {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(239, 243, 255, 0.92);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.features-hmi-btn[b-foqd28ve42] {
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(239, 243, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: default;
    pointer-events: none;
}

.features-hmi-btn--primary[b-foqd28ve42] {
    border-color: rgba(242, 163, 40, 0.55);
    background: rgba(242, 163, 40, 0.14);
    color: #f7cd7a;
}

.features-hmi-btn--stop[b-foqd28ve42] {
    border-color: rgba(226, 7, 23, 0.45);
    background: rgba(226, 7, 23, 0.1);
    color: rgba(255, 170, 170, 0.95);
}

/* ── Split connector ───────────────────────────────────────────── */
.features-hmi-demo-link[b-foqd28ve42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 clamp(0.2rem, 0.6vw, 0.5rem);
}

/* Marching-ant dashes — implies flow from tree → chip → arrow.
   Horizontal variant defined in the mobile breakpoint. */
.features-hmi-demo-link-line[b-foqd28ve42] {
    flex: 1 1 auto;
    width: 2px;
    min-height: 40px;
    background-image: linear-gradient(180deg,
        rgba(124, 236, 255, 0.8) 0 6px,
        transparent 6px 12px);
    background-size: 100% 12px;
    background-repeat: repeat-y;
    animation: features-hmi-flow-y-b-foqd28ve42 1.4s linear infinite;
}

@keyframes features-hmi-flow-y-b-foqd28ve42 {
    from { background-position-y: 0; }
    to   { background-position-y: 12px; }
}

.features-hmi-demo-link-badge[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    border: 1px dashed rgba(124, 236, 255, 0.7);
    background: rgba(13, 27, 47, 0.92);
    color: rgba(239, 243, 255, 0.95);
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(31, 156, 216, 0.22);
    transform: rotate(-1.5deg);
    animation: features-hmi-ghost-float-b-foqd28ve42 3s ease-in-out infinite;
}

@keyframes features-hmi-ghost-float-b-foqd28ve42 {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-4px) rotate(-1.5deg); }
}

.features-hmi-demo-link-grip[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    color: rgba(124, 236, 255, 0.85);
}

.features-hmi-demo-link-grip svg[b-foqd28ve42] {
    width: 10px;
    height: 12px;
}

.features-hmi-demo-link-badge-icon[b-foqd28ve42] {
    width: 13px;
    height: 13px;
    color: rgba(31, 156, 216, 0.95);
}

.features-hmi-demo-link-name[b-foqd28ve42] {
    color: #ffffff;
    letter-spacing: 0.01em;
}

/* Small bouncing chevron above the chip — disambiguates the marching-ant
   rail as a drag path rather than a visual separator. */
.features-hmi-demo-link-drop[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0.1rem 0;
    color: rgba(124, 236, 255, 0.9);
    animation: features-hmi-drop-hint-b-foqd28ve42 1.6s ease-in-out infinite;
}

.features-hmi-demo-link-drop svg[b-foqd28ve42] {
    width: 14px;
    height: 14px;
}

@keyframes features-hmi-drop-hint-b-foqd28ve42 {
    0%, 100% { transform: translateY(-2px); opacity: 0.7; }
    50%      { transform: translateY(3px);  opacity: 1; }
}

.features-hmi-demo-link-arrow[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: rgba(124, 236, 255, 0.9);
}

.features-hmi-demo-link-arrow svg[b-foqd28ve42] {
    width: 18px;
    height: 18px;
}

.features-hmi-demo-link-caption[b-foqd28ve42] {
    margin-top: 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(124, 236, 255, 0.85);
    white-space: nowrap;
    text-align: center;
}

/* The absence of work — the thing that makes this structurally different
   from every other HMI tool. Deliberately subtle so it reads as quiet
   confirmation, not as a pitch bullet list. */
.features-hmi-noops[b-foqd28ve42] {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    text-align: center;
}

.features-hmi-noops li[b-foqd28ve42] {
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    line-height: 1.45;
    color: rgba(210, 228, 246, 0.72);
    font-weight: 500;
    text-wrap: balance;
}

.features-hmi-demo-note[b-foqd28ve42] {
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: rgba(156, 192, 224, 0.62);
    margin: 0;
}

/* ── Secondary strip: "Or prompt the HMI" ────────────────────────
   Deliberately unchromed — no card, no border, no accent line. The
   width is narrower than the demo frame above, typography is one step
   down, and the prompt sample reads as a light inline code hint
   rather than a terminal panel. Everything centered so it lands as
   a quiet footnote to the main demo, not a second demo. */
.features-hmi-prompt[b-foqd28ve42] {
    width: min(720px, 92vw);
    margin: clamp(2rem, 3.6vw, 2.8rem) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.features-hmi-prompt-copy[b-foqd28ve42] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.features-hmi-prompt-kicker[b-foqd28ve42] {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(242, 163, 40, 0.55);
}

.features-hmi-prompt-line[b-foqd28ve42] {
    margin: 0;
    color: rgba(239, 243, 255, 0.78);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
}

.features-hmi-prompt-sample[b-foqd28ve42] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(6, 14, 28, 0.35);
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.78rem;
    color: rgba(239, 243, 255, 0.62);
    line-height: 1.5;
    max-width: 100%;
}

.features-hmi-prompt-sample-caret[b-foqd28ve42] {
    color: rgba(124, 236, 255, 0.6);
    font-weight: 700;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
    font-size: 0.74rem;
}

.features-hmi-prompt-sample-text[b-foqd28ve42] {
    flex: 1 1 auto;
    text-wrap: pretty;
    text-align: left;
}

.features-hmi-prompt-sample-cursor[b-foqd28ve42] {
    display: inline-block;
    width: 6px;
    height: 1em;
    background: rgba(124, 236, 255, 0.6);
    flex: 0 0 auto;
    animation: features-hmi-cursor-blink-b-foqd28ve42 1.1s steps(1) infinite;
}

@keyframes features-hmi-cursor-blink-b-foqd28ve42 {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ── Build-up animation ─────────────────────────────────────────
   On first viewport entry, the Razor component steps through the five
   tree nodes, fading each widget into the HMI panel as it is
   "placed". Nothing interactive - visitors always see a coherent
   mid-build or fully-built state. Without Blazor interactivity, the
   is-sequencing class is never added, so the static mock remains visible. */
.features-hmi-demo.is-sequencing .features-hmi-panel-row[b-foqd28ve42],
.features-hmi-demo.is-sequencing .features-hmi-btn[b-foqd28ve42] {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 600ms ease;
}

.features-hmi-demo.is-sequencing .features-hmi-panel-row.is-bound[b-foqd28ve42],
.features-hmi-demo.is-sequencing .features-hmi-btn.is-bound[b-foqd28ve42] {
    opacity: 1;
    transform: translateY(0);
}

/* Brief glow when a widget first binds — reinforces the "drop
   landed, connection made" moment. */
.features-hmi-demo.is-sequencing .features-hmi-panel-row.is-just-bound[b-foqd28ve42],
.features-hmi-demo.is-sequencing .features-hmi-btn.is-just-bound[b-foqd28ve42] {
    animation: features-hmi-just-bound-b-foqd28ve42 720ms ease-out;
}

@keyframes features-hmi-just-bound-b-foqd28ve42 {
    0%   { box-shadow: 0 0 0 0 rgba(124, 236, 255, 0.7), 0 0 18px rgba(124, 236, 255, 0.45); }
    100% { box-shadow: 0 0 0 10px rgba(124, 236, 255, 0),    0 0 0 rgba(124, 236, 255, 0); }
}

/* Middle-column chip mirrors the current step, fading in at settle. */
.features-hmi-demo.is-sequencing .features-hmi-demo-link-badge--drag[b-foqd28ve42] {
    opacity: 0;
    transform: translateY(4px) rotate(-1.5deg);
    transition: opacity 420ms ease, transform 420ms ease;
}

.features-hmi-demo.is-sequencing .features-hmi-demo-link-badge--drag.is-shown[b-foqd28ve42] {
    opacity: 1;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .features-hmi-demo-split[b-foqd28ve42] {
        /* Stack tree → link column → HMI vertically. The link column
           keeps its vertical layout: rails become natural connectors
           between the stacked panes, and the no-ops list flows cleanly
           under the caption without being squeezed into a row. */
        grid-template-columns: 1fr;
    }

    .features-hmi-demo-link[b-foqd28ve42] {
        padding: 0.4rem 0;
    }

    .features-hmi-demo-link-line[b-foqd28ve42] {
        min-height: 28px;
    }

    .features-hmi-pane[b-foqd28ve42] {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .features-hmi-gauge[b-foqd28ve42] {
        max-width: 55%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .features-hmi-state-pill-dot[b-foqd28ve42],
    .features-hmi-prompt-sample-cursor[b-foqd28ve42],
    .features-hmi-demo-link-badge[b-foqd28ve42],
    .features-hmi-demo-link-line[b-foqd28ve42],
    .features-hmi-demo-link-drop[b-foqd28ve42],
    .features-hmi-panel-row--binding[b-foqd28ve42],
    .ft-row.is-dragging[b-foqd28ve42],
    .features-hmi-demo.is-sequencing .features-hmi-panel-row.is-just-bound[b-foqd28ve42],
    .features-hmi-demo.is-sequencing .features-hmi-btn.is-just-bound[b-foqd28ve42] {
        animation: none;
    }

    /* Reduced motion: skip the staged reveal entirely — settle at
       the finished state without any transitions. */
    .features-hmi-demo.is-sequencing .features-hmi-panel-row[b-foqd28ve42],
    .features-hmi-demo.is-sequencing .features-hmi-btn[b-foqd28ve42],
    .features-hmi-demo.is-sequencing .features-hmi-demo-link-badge--drag[b-foqd28ve42] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* /Components/FeaturesStateTraceSection.razor.rz.scp.css */
.features-state-trace[b-o9fq2i0p9q] {
    padding: 0 0 calc(var(--section-pad-y) * var(--pad-scale-tight));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.features-state-trace[b-o9fq2i0p9q]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 32% 55% at 4% 65%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 32% 55% at 96% 35%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 65% 50% at 50% 0%, rgba(31, 156, 216, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.features-state-trace > .container[b-o9fq2i0p9q] {
    position: relative;
    z-index: 1;
}

.features-state-trace-head[b-o9fq2i0p9q] {
    margin-bottom: clamp(1.9rem, 3vw, 2.6rem);
}

.features-state-trace-head .section-h2 span[b-o9fq2i0p9q] {
    display: block;
}

.features-state-trace-content[b-o9fq2i0p9q] {
    width: min(760px, 92vw);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.6vw, 1.4rem);
    text-align: left;
}

.features-state-trace-content p[b-o9fq2i0p9q] {
    margin: 0;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
}

.features-state-trace-payoff[b-o9fq2i0p9q] {
    margin-top: clamp(0.8rem, 1.6vw, 1.2rem) !important;
    padding-top: clamp(1.2rem, 1.8vw, 1.6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.12rem, 1.5vw, 1.32rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
    position: relative;
}

.features-state-trace-payoff[b-o9fq2i0p9q]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: clamp(120px, 26%, 220px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.45) 0%,
        rgba(31, 156, 216, 0.75) 45%,
        rgba(124, 236, 255, 0.35) 90%,
        transparent 100%);
}

/* ── Demo frame ────────────────────────────────────────────────── */
.features-state-trace-demo[b-o9fq2i0p9q] {
    width: min(1180px, 94vw);
    margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.3vw, 1rem);
}

.features-state-trace-frame[b-o9fq2i0p9q] {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(17, 34, 58, 0.9) 0%, rgba(13, 27, 47, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    isolation: isolate;
}

.features-state-trace-frame[b-o9fq2i0p9q]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.45) 12%,
        rgba(31, 156, 216, 0.8) 50%,
        rgba(124, 236, 255, 0.45) 88%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.features-state-trace-frame[b-o9fq2i0p9q]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 60% at 28% 50%, rgba(31, 156, 216, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 45% 60% at 75% 50%, rgba(124, 236, 255, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.features-state-trace-chrome[b-o9fq2i0p9q] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 1;
}

.features-state-trace-dot[b-o9fq2i0p9q] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.features-state-trace-dot:nth-of-type(1)[b-o9fq2i0p9q] { background: rgba(226, 7, 23, 0.5); }
.features-state-trace-dot:nth-of-type(2)[b-o9fq2i0p9q] { background: rgba(242, 163, 40, 0.45); }
.features-state-trace-dot:nth-of-type(3)[b-o9fq2i0p9q] { background: rgba(59, 170, 53, 0.45); }

.features-state-trace-title[b-o9fq2i0p9q] {
    margin-left: 0.7rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(239, 243, 255, 0.5);
}

.features-state-trace-live[b-o9fq2i0p9q] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 236, 255, 0.35);
    background: rgba(31, 156, 216, 0.12);
    color: rgba(124, 236, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: features-state-trace-live-breath-b-o9fq2i0p9q 2s ease-in-out infinite;
}

.features-state-trace-live-dot[b-o9fq2i0p9q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(124, 236, 255, 0.95);
    box-shadow: 0 0 8px rgba(124, 236, 255, 0.6);
    animation: features-state-trace-live-pulse-b-o9fq2i0p9q 2s ease-in-out infinite;
}

@keyframes features-state-trace-live-pulse-b-o9fq2i0p9q {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

@keyframes features-state-trace-live-breath-b-o9fq2i0p9q {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

.features-state-trace-split[b-o9fq2i0p9q] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.25fr);
    gap: clamp(0.6rem, 1.6vw, 1.4rem);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    z-index: 1;
}

.features-state-trace-pane[b-o9fq2i0p9q] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.4vw, 1.1rem);
    padding: clamp(1rem, 1.8vw, 1.35rem);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(13, 27, 47, 0.55) 0%, rgba(10, 20, 36, 0.75) 100%);
    min-height: clamp(360px, 34vw, 440px);
}

.features-state-trace-pane-label[b-o9fq2i0p9q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.features-state-trace-pane-tag[b-o9fq2i0p9q] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(239, 243, 255, 0.72);
}

.features-state-trace-pane-sub[b-o9fq2i0p9q] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(156, 192, 224, 0.6);
}

.features-state-trace-pane--history .features-state-trace-pane-tag[b-o9fq2i0p9q] { color: rgba(124, 236, 255, 0.85); }
.features-state-trace-pane--diagram .features-state-trace-pane-tag[b-o9fq2i0p9q] { color: rgba(242, 163, 40, 0.88); }

/* ── History table (left pane) ────────────────────────────────── */
.features-state-trace-table[b-o9fq2i0p9q] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(6, 14, 28, 0.5);
    overflow: hidden;
}

.features-state-trace-table-head[b-o9fq2i0p9q],
.features-state-trace-row[b-o9fq2i0p9q] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
    gap: 0.75rem;
    padding: 0.55rem 0.95rem;
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.85rem;
    align-items: center;
}

.features-state-trace-table-head[b-o9fq2i0p9q] {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.62);
    background: rgba(255, 255, 255, 0.02);
}

.features-state-trace-table-body[b-o9fq2i0p9q] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(290px, 28vw, 360px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 236, 255, 0.25) transparent;
}

.features-state-trace-table-body[b-o9fq2i0p9q]::-webkit-scrollbar {
    width: 6px;
}

.features-state-trace-table-body[b-o9fq2i0p9q]::-webkit-scrollbar-thumb {
    background: rgba(124, 236, 255, 0.22);
    border-radius: 999px;
}

.features-state-trace-row[b-o9fq2i0p9q] {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: rgba(239, 243, 255, 0.82);
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease;
}

.features-state-trace-row:last-child[b-o9fq2i0p9q] {
    border-bottom: none;
}

.features-state-trace-row:hover[b-o9fq2i0p9q] {
    background: rgba(255, 255, 255, 0.03);
}

.features-state-trace-row:focus-visible[b-o9fq2i0p9q] {
    outline: 2px solid rgba(124, 236, 255, 0.75);
    outline-offset: -2px;
}

.features-state-trace-cell[b-o9fq2i0p9q] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.features-state-trace-cell--state[b-o9fq2i0p9q] {
    color: #ffffff;
    font-weight: 600;
}

.features-state-trace-cell--time[b-o9fq2i0p9q] {
    color: rgba(124, 236, 255, 0.7);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: 0.01em;
}

.features-state-trace-row.is-active[b-o9fq2i0p9q] {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.22) 0%, rgba(124, 236, 255, 0.08) 100%);
    box-shadow: inset 3px 0 0 rgba(124, 236, 255, 0.95);
}

.features-state-trace-row.is-active .features-state-trace-cell--state[b-o9fq2i0p9q] {
    color: #ffffff;
}

.features-state-trace-row.is-active .features-state-trace-cell--time[b-o9fq2i0p9q] {
    color: rgba(124, 236, 255, 0.95);
    font-weight: 600;
}

/* ── Branch chip (pass/fail indicator on Sampling rows) ──────── */
.features-state-trace-branch[b-o9fq2i0p9q] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.55rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: 'Inter', system-ui, sans-serif;
    vertical-align: 0.08em;
}

.features-state-trace-branch--pass[b-o9fq2i0p9q] {
    border-color: rgba(90, 200, 85, 0.45);
    background: rgba(59, 170, 53, 0.14);
    color: rgba(150, 220, 145, 0.98);
}

.features-state-trace-branch--fail[b-o9fq2i0p9q] {
    border-color: rgba(226, 100, 100, 0.45);
    background: rgba(226, 7, 23, 0.14);
    color: rgba(255, 175, 175, 0.98);
}

/* ── State machine diagram (right pane) ───────────────────────── */
.features-state-trace-diagram[b-o9fq2i0p9q] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(6, 14, 28, 0.5);
}

.features-state-trace-diagram svg[b-o9fq2i0p9q] {
    width: 100%;
    height: auto;
    max-height: 420px;
    display: block;
}

/* Branch labels on the diagram (PASS / FAIL / RETRY) */
.fst-branch-label[b-o9fq2i0p9q] {
    fill: rgba(156, 192, 224, 0.6);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.fst-branch-label--pass[b-o9fq2i0p9q] { fill: rgba(150, 220, 145, 0.92); }
.fst-branch-label--fail[b-o9fq2i0p9q] { fill: rgba(255, 170, 170, 0.92); }
.fst-branch-label--retry[b-o9fq2i0p9q] { fill: rgba(156, 192, 224, 0.72); }

/* Nodes */
.fst-node[b-o9fq2i0p9q] {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 250ms ease;
}

.fst-node rect[b-o9fq2i0p9q] {
    fill: rgba(13, 27, 47, 0.9);
    stroke: rgba(156, 192, 224, 0.3);
    stroke-width: 1.1;
    transition: fill 250ms ease, stroke 250ms ease, stroke-width 250ms ease, filter 250ms ease;
}

.fst-node text[b-o9fq2i0p9q] {
    fill: rgba(239, 243, 255, 0.78);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: fill 250ms ease;
    pointer-events: none;
}

/* Current active state — bright accent */
.fst-node.is-active rect[b-o9fq2i0p9q] {
    fill: rgba(31, 156, 216, 0.3);
    stroke: rgba(124, 236, 255, 0.98);
    stroke-width: 1.8;
    filter: drop-shadow(0 0 10px rgba(124, 236, 255, 0.45));
}

.fst-node.is-active text[b-o9fq2i0p9q] {
    fill: #ffffff;
}

/* Recent path states — dimmer accent tracing the trail the system took */
.fst-node.is-path rect[b-o9fq2i0p9q] {
    fill: rgba(31, 156, 216, 0.1);
    stroke: rgba(124, 236, 255, 0.45);
    stroke-width: 1.2;
}

.fst-node.is-path text[b-o9fq2i0p9q] {
    fill: rgba(239, 243, 255, 0.9);
}

/* Newly active pulse */
.fst-node.fst-pulse[b-o9fq2i0p9q] {
    animation: features-state-trace-node-pulse-b-o9fq2i0p9q 450ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}

@keyframes features-state-trace-node-pulse-b-o9fq2i0p9q {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Edges */
.fst-edge path[b-o9fq2i0p9q] {
    transition: stroke 300ms ease, stroke-width 300ms ease, filter 300ms ease, stroke-opacity 300ms ease;
}

/* Current transition — persistent highlight on the edge from the previous
   state into the active state. Mirrors .fst-node.is-active but applied
   to edges. Branch edges keep their pass/fail colour when active. */
.fst-edge.is-active path[b-o9fq2i0p9q] {
    stroke: rgba(124, 236, 255, 0.98) !important;
    stroke-width: 2 !important;
    marker-end: url(#fst-arrow-active);
    filter: drop-shadow(0 0 7px rgba(124, 236, 255, 0.6));
}

.fst-edge.is-active[data-branch="pass"] path[b-o9fq2i0p9q] {
    stroke: rgba(130, 230, 130, 0.98) !important;
    marker-end: url(#fst-arrow-pass-active);
    filter: drop-shadow(0 0 7px rgba(130, 230, 130, 0.6));
}

.fst-edge.is-active[data-branch="fail"] path[b-o9fq2i0p9q] {
    stroke: rgba(255, 140, 140, 0.98) !important;
    marker-end: url(#fst-arrow-fail-active);
    filter: drop-shadow(0 0 7px rgba(255, 140, 140, 0.6));
}

.features-state-trace-legend[b-o9fq2i0p9q] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding-top: 0.25rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.62);
}

.features-state-trace-legend-item[b-o9fq2i0p9q] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.features-state-trace-legend-swatch[b-o9fq2i0p9q] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(124, 236, 255, 0.45);
}

.features-state-trace-legend-swatch--active[b-o9fq2i0p9q] {
    background: rgba(31, 156, 216, 0.3);
    border-color: rgba(124, 236, 255, 0.98);
    box-shadow: 0 0 6px rgba(124, 236, 255, 0.4);
}

.features-state-trace-legend-swatch--path[b-o9fq2i0p9q] {
    background: rgba(31, 156, 216, 0.1);
    border-color: rgba(124, 236, 255, 0.45);
}

/* ── Navigation buttons ───────────────────────────────────────── */
.features-state-trace-nav[b-o9fq2i0p9q] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0 clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 2.4vw, 1.8rem);
    z-index: 1;
}

.features-state-trace-btn[b-o9fq2i0p9q] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(239, 243, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 120ms ease;
}

.features-state-trace-btn svg[b-o9fq2i0p9q] {
    width: 14px;
    height: 14px;
}

.features-state-trace-btn:hover:not(:disabled)[b-o9fq2i0p9q] {
    border-color: rgba(124, 236, 255, 0.55);
    background: rgba(31, 156, 216, 0.14);
    color: #ffffff;
}

.features-state-trace-btn:active:not(:disabled)[b-o9fq2i0p9q] {
    transform: translateY(1px);
}

.features-state-trace-btn:focus-visible[b-o9fq2i0p9q] {
    outline: 2px solid rgba(124, 236, 255, 0.85);
    outline-offset: 2px;
}

.features-state-trace-btn:disabled[b-o9fq2i0p9q] {
    opacity: 0.4;
    cursor: not-allowed;
}

.features-state-trace-note[b-o9fq2i0p9q] {
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: rgba(156, 192, 224, 0.62);
    margin: 0;
}

/* ── "Why this is different" callout ──────────────────────────── */
.features-state-trace-callout[b-o9fq2i0p9q] {
    width: min(1100px, 94vw);
    margin: clamp(1.5rem, 3vw, 2.4rem) auto 0;
    padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.6vw, 2.2rem);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.2vw, 1rem);
}

.features-state-trace-callout-kicker[b-o9fq2i0p9q] {
    margin: 0 0 clamp(0.2rem, 0.4vw, 0.4rem);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(242, 163, 40, 0.82);
}

.features-state-trace-callout p:not(.features-state-trace-callout-kicker)[b-o9fq2i0p9q] {
    margin: 0;
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.6;
    color: rgba(239, 243, 255, 0.78);
    text-wrap: pretty;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .features-state-trace-split[b-o9fq2i0p9q] {
        grid-template-columns: 1fr;
    }

    .features-state-trace-pane[b-o9fq2i0p9q] {
        min-height: auto;
    }

    .features-state-trace-table-body[b-o9fq2i0p9q] {
        max-height: 260px;
    }
}

@media (max-width: 560px) {
    .features-state-trace-table-head[b-o9fq2i0p9q],
    .features-state-trace-row[b-o9fq2i0p9q] {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
        font-size: 0.76rem;
        padding: 0.5rem 0.7rem;
        gap: 0.4rem;
    }

    .features-state-trace-branch[b-o9fq2i0p9q] {
        margin-left: 0.4rem;
        padding: 0.08rem 0.35rem;
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .features-state-trace-live-dot[b-o9fq2i0p9q],
    .features-state-trace-live[b-o9fq2i0p9q],
    .fst-node.fst-pulse[b-o9fq2i0p9q] {
        animation: none;
    }

    .features-state-trace-row[b-o9fq2i0p9q],
    .fst-node[b-o9fq2i0p9q],
    .fst-node rect[b-o9fq2i0p9q],
    .fst-node text[b-o9fq2i0p9q],
    .fst-edge path[b-o9fq2i0p9q],
    .features-state-trace-btn[b-o9fq2i0p9q] {
        transition: none;
    }
}
/* /Components/FeaturesTwinSection.razor.rz.scp.css */
.features-twin[b-xdwyduyppb] {
    padding: 0 0 calc(var(--section-pad-y) * var(--pad-scale-tight));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.features-twin[b-xdwyduyppb]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 32% 55% at 96% 30%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 32% 55% at 4% 70%, rgba(242, 163, 40, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 65% 50% at 50% 100%, rgba(31, 156, 216, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.features-twin > .container[b-xdwyduyppb] {
    position: relative;
    z-index: 1;
}

.features-twin-head[b-xdwyduyppb] {
    margin-bottom: clamp(1.9rem, 3vw, 2.6rem);
}

.features-twin-head .section-h2 span[b-xdwyduyppb] {
    display: block;
}

.features-twin-content[b-xdwyduyppb] {
    width: min(760px, 92vw);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 1.6vw, 1.4rem);
    text-align: left;
}

.features-twin-content p[b-xdwyduyppb] {
    margin: 0;
    font-size: var(--narrative-body);
    line-height: var(--narrative-lh);
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
}

.features-twin-payoff[b-xdwyduyppb] {
    margin-top: clamp(0.8rem, 1.6vw, 1.2rem) !important;
    padding-top: clamp(1.2rem, 1.8vw, 1.6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: clamp(1.12rem, 1.5vw, 1.32rem);
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
    position: relative;
}

.features-twin-payoff[b-xdwyduyppb]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: clamp(120px, 26%, 220px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.45) 0%,
        rgba(31, 156, 216, 0.75) 45%,
        rgba(124, 236, 255, 0.35) 90%,
        transparent 100%);
}

/* ── Demo frame ────────────────────────────────────────────────── */
.features-twin-demo[b-xdwyduyppb] {
    width: min(1220px, 96vw);
    margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.3vw, 1rem);
}

.features-twin-demo-frame[b-xdwyduyppb] {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(17, 34, 58, 0.9) 0%, rgba(13, 27, 47, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    isolation: isolate;
}

.features-twin-demo-frame[b-xdwyduyppb]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.45) 12%,
        rgba(31, 156, 216, 0.8) 50%,
        rgba(124, 236, 255, 0.45) 88%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.features-twin-demo-frame[b-xdwyduyppb]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 42% 60% at 22% 50%, rgba(31, 156, 216, 0.09) 0%, transparent 65%),
        radial-gradient(ellipse 52% 65% at 78% 55%, rgba(242, 163, 40, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.features-twin-demo-chrome[b-xdwyduyppb] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 1;
}

.features-twin-demo-dot[b-xdwyduyppb] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.features-twin-demo-dot:nth-of-type(1)[b-xdwyduyppb] { background: rgba(226, 7, 23, 0.5); }
.features-twin-demo-dot:nth-of-type(2)[b-xdwyduyppb] { background: rgba(242, 163, 40, 0.45); }
.features-twin-demo-dot:nth-of-type(3)[b-xdwyduyppb] { background: rgba(59, 170, 53, 0.45); }

.features-twin-demo-title[b-xdwyduyppb] {
    margin-left: 0.7rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(239, 243, 255, 0.5);
}

.features-twin-live[b-xdwyduyppb] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 236, 255, 0.35);
    background: rgba(31, 156, 216, 0.12);
    color: rgba(124, 236, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: features-twin-live-breath-b-xdwyduyppb 2s ease-in-out infinite;
}

.features-twin-live-dot[b-xdwyduyppb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(124, 236, 255, 0.95);
    box-shadow: 0 0 8px rgba(124, 236, 255, 0.6);
    animation: features-twin-live-pulse-b-xdwyduyppb 2s ease-in-out infinite;
}

@keyframes features-twin-live-pulse-b-xdwyduyppb {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

@keyframes features-twin-live-breath-b-xdwyduyppb {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Two-column split: dashboard on the left, twin stage on the right.
   The twin gets more room now that it has to show vertical Z travel
   too. Middle flow column removed per the new design. */
.features-twin-demo-split[b-xdwyduyppb] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: stretch;
    gap: clamp(0.8rem, 1.8vw, 1.6rem);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    z-index: 1;
}

.features-twin-pane[b-xdwyduyppb] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.4vw, 1.1rem);
    padding: clamp(1rem, 1.8vw, 1.35rem);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(13, 27, 47, 0.55) 0%, rgba(10, 20, 36, 0.75) 100%);
}

.features-twin-pane-label[b-xdwyduyppb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.features-twin-pane-tag[b-xdwyduyppb] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.features-twin-pane-sub[b-xdwyduyppb] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(156, 192, 224, 0.6);
}

.features-twin-pane--dash .features-twin-pane-tag[b-xdwyduyppb] { color: rgba(124, 236, 255, 0.85); }
.features-twin-pane--twin .features-twin-pane-tag[b-xdwyduyppb] { color: rgba(242, 163, 40, 0.88); }

/* ── Component selector ──────────────────────────────────────── */
.features-twin-field[b-xdwyduyppb] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.features-twin-field-label[b-xdwyduyppb] {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.62);
}

.features-twin-select-wrap[b-xdwyduyppb] {
    position: relative;
    display: flex;
    align-items: center;
}

.features-twin-component-select[b-xdwyduyppb] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.55rem 2.2rem 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(124, 236, 255, 0.3);
    background: linear-gradient(180deg, rgba(31, 156, 216, 0.14) 0%, rgba(31, 156, 216, 0.04) 100%);
    color: #ffffff;
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.features-twin-component-select:hover[b-xdwyduyppb] {
    border-color: rgba(124, 236, 255, 0.6);
    background: linear-gradient(180deg, rgba(31, 156, 216, 0.22) 0%, rgba(31, 156, 216, 0.08) 100%);
}

.features-twin-component-select:focus-visible[b-xdwyduyppb] {
    outline: none;
    border-color: rgba(124, 236, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(124, 236, 255, 0.2);
}

.features-twin-component-select option[b-xdwyduyppb] {
    background: #0b1628;
    color: #ffffff;
}

.features-twin-select-chevron[b-xdwyduyppb] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    color: rgba(156, 192, 224, 0.75);
    pointer-events: none;
}

/* Component views (swapped by Razor state) */
.features-twin-view[b-xdwyduyppb] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.3vw, 1.05rem);
}

.features-twin-view[hidden][b-xdwyduyppb] { display: none; }

.features-twin-section[b-xdwyduyppb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(6, 14, 28, 0.4);
}

.features-twin-section-head[b-xdwyduyppb] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(156, 192, 224, 0.7);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Commands ────────────────────────────────────────────────── */
.features-twin-cmd-row[b-xdwyduyppb] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.features-twin-cmd-row--with-param[b-xdwyduyppb] {
    align-items: stretch;
}

.features-twin-cmd-row--split > .features-twin-cmd[b-xdwyduyppb] {
    flex: 1 1 0;
}

.features-twin-cmd[b-xdwyduyppb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(239, 243, 255, 0.88);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.features-twin-cmd svg[b-xdwyduyppb] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.features-twin-cmd:hover:not(:disabled)[b-xdwyduyppb] {
    border-color: rgba(124, 236, 255, 0.55);
    background: rgba(31, 156, 216, 0.14);
    color: #ffffff;
}

.features-twin-cmd:active:not(:disabled)[b-xdwyduyppb] {
    transform: translateY(1px);
}

.features-twin-cmd:focus-visible[b-xdwyduyppb] {
    outline: 2px solid rgba(124, 236, 255, 0.8);
    outline-offset: 2px;
}

.features-twin-cmd:disabled[b-xdwyduyppb] {
    opacity: 0.45;
    cursor: not-allowed;
}

.features-twin-cmd--primary[b-xdwyduyppb] {
    border-color: rgba(124, 236, 255, 0.7);
    background: linear-gradient(180deg, rgba(31, 156, 216, 0.32) 0%, rgba(31, 156, 216, 0.14) 100%);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(124, 236, 255, 0.15);
}

.features-twin-cmd--primary:hover:not(:disabled)[b-xdwyduyppb] {
    background: linear-gradient(180deg, rgba(31, 156, 216, 0.45) 0%, rgba(31, 156, 216, 0.2) 100%);
    box-shadow: 0 0 18px rgba(124, 236, 255, 0.3);
}

/* Position parameter input: paired inline with the Move To button. */
.features-twin-param[b-xdwyduyppb] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: 7px;
    border: 1px solid rgba(124, 236, 255, 0.3);
    background: rgba(31, 156, 216, 0.08);
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.85rem;
    cursor: text;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.features-twin-param:focus-within[b-xdwyduyppb] {
    border-color: rgba(124, 236, 255, 0.9);
    background: rgba(31, 156, 216, 0.16);
    box-shadow: 0 0 0 3px rgba(124, 236, 255, 0.18);
}

.features-twin-param-label[b-xdwyduyppb] {
    color: rgba(156, 192, 224, 0.75);
    text-transform: uppercase;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    flex: 0 0 auto;
}

.features-twin-param-input[b-xdwyduyppb] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.features-twin-param-input[b-xdwyduyppb]::-webkit-outer-spin-button,
.features-twin-param-input[b-xdwyduyppb]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.features-twin-param-unit[b-xdwyduyppb] {
    color: rgba(156, 192, 224, 0.72);
    font-weight: 600;
    flex: 0 0 auto;
}

/* ── Settings (slider with fixed min/max) ────────────────────── */
.features-twin-setting[b-xdwyduyppb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.features-twin-setting-row[b-xdwyduyppb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.features-twin-setting-name[b-xdwyduyppb] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(239, 243, 255, 0.88);
    letter-spacing: 0.01em;
}

.features-twin-setting-value[b-xdwyduyppb] {
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(124, 236, 255, 0.98);
    font-variant-numeric: tabular-nums;
}

.features-twin-setting-unit[b-xdwyduyppb] {
    color: rgba(156, 192, 224, 0.7);
    font-weight: 500;
    margin-left: 0.1rem;
}

.features-twin-setting-range[b-xdwyduyppb] {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: rgba(156, 192, 224, 0.5);
    font-variant-numeric: tabular-nums;
    padding: 0 0.1rem;
}

.features-twin-slider[b-xdwyduyppb] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 18px;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.features-twin-slider[b-xdwyduyppb]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(124, 236, 255, 0.85) 0%,
        rgba(124, 236, 255, 0.85) var(--fill, 50%),
        rgba(255, 255, 255, 0.08) var(--fill, 50%),
        rgba(255, 255, 255, 0.08) 100%);
}

.features-twin-slider[b-xdwyduyppb]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.features-twin-slider[b-xdwyduyppb]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: rgba(124, 236, 255, 0.85);
}

.features-twin-slider[b-xdwyduyppb]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(124, 236, 255, 0.98);
    box-shadow: 0 0 10px rgba(124, 236, 255, 0.4);
    margin-top: -5px;
    cursor: grab;
    transition: transform 120ms ease, box-shadow 160ms ease;
}

.features-twin-slider[b-xdwyduyppb]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(124, 236, 255, 0.98);
    box-shadow: 0 0 10px rgba(124, 236, 255, 0.4);
    cursor: grab;
    transition: transform 120ms ease, box-shadow 160ms ease;
}

.features-twin-slider:hover[b-xdwyduyppb]::-webkit-slider-thumb {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(124, 236, 255, 0.6);
}

.features-twin-slider:active[b-xdwyduyppb]::-webkit-slider-thumb {
    cursor: grabbing;
}

.features-twin-slider:focus-visible[b-xdwyduyppb] {
    outline: none;
}

.features-twin-slider:focus-visible[b-xdwyduyppb]::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(124, 236, 255, 0.25), 0 0 14px rgba(124, 236, 255, 0.5);
}

.features-twin-slider:disabled[b-xdwyduyppb] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Observer (live status table) ────────────────────────────── */
.features-twin-observer[b-xdwyduyppb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.features-twin-observer-row[b-xdwyduyppb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: rgba(6, 14, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.features-twin-observer-name[b-xdwyduyppb] {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(239, 243, 255, 0.88);
    letter-spacing: 0.01em;
}

.features-twin-observer-type[b-xdwyduyppb] {
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.7rem;
    color: rgba(156, 192, 224, 0.55);
    letter-spacing: 0.02em;
    font-style: italic;
}

.features-twin-observer-value[b-xdwyduyppb] {
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: 0.01em;
}

.features-twin-observer-value--num[b-xdwyduyppb] {
    color: rgba(124, 236, 255, 0.98);
}

.features-twin-observer-value--bool.features-twin-observer-value--true[b-xdwyduyppb] {
    color: rgba(150, 220, 145, 0.95);
}

.features-twin-observer-value--bool.features-twin-observer-value--false[b-xdwyduyppb] {
    color: rgba(255, 150, 160, 0.85);
}

/* ── Digital Twin stage ──────────────────────────────────────── */
.features-twin-stage[b-xdwyduyppb] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(31, 156, 216, 0.06) 0%, transparent 65%),
        linear-gradient(180deg, rgba(8, 18, 34, 0.7) 0%, rgba(6, 14, 28, 0.85) 100%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
    min-height: clamp(320px, 42vw, 460px);
}

.features-twin-stage svg[b-xdwyduyppb] {
    width: 100%;
    height: auto;
    max-height: 460px;
    display: block;
}

.twin-scale-label[b-xdwyduyppb] {
    fill: rgba(156, 192, 224, 0.6);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.twin-zone-label[b-xdwyduyppb] {
    fill: rgba(156, 192, 224, 0.75);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    letter-spacing: 0.18em;
    font-weight: 700;
}

.twin-zone-label--active[b-xdwyduyppb] {
    fill: rgba(247, 205, 122, 0.98);
}

.twin-pos-value[b-xdwyduyppb] {
    fill: #ffffff;
    font-family: 'Consolas', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.twin-pos-value--z[b-xdwyduyppb] {
    font-size: 8.5px;
}

/* Machine group moves along X; Razor renders the transform during motion. */
.twin-machine[b-xdwyduyppb] {
    will-change: transform;
}

/* Gripper carriage slides along Z within the machine group; Razor renders
   its transform together with the arm extension line. */
.twin-gripper-carriage[b-xdwyduyppb] {
    will-change: transform;
}

/* Object transitions smoothly between resting positions (pick/drop/
   floor). While the object is following the gripper through an active
   X or Z move, the is-following class disables the transition so the
   Razor motion loop can drive transform frame-by-frame without lag. */
.twin-object[b-xdwyduyppb] {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

.twin-object.is-following[b-xdwyduyppb] {
    transition: none;
}

/* Gripper fingers — default is closed; adding is-open translates each
   finger outward so the jaw opens up. */
.twin-finger[b-xdwyduyppb] {
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.twin-gripper.is-open .twin-finger--left[b-xdwyduyppb]  { transform: translateX(-8px); }
.twin-gripper.is-open .twin-finger--right[b-xdwyduyppb] { transform: translateX(8px); }

/* Drop zone pulse — stops once the object is placed there. */
.twin-drop rect[b-xdwyduyppb] {
    transition: fill 300ms ease, stroke 300ms ease;
    animation: features-twin-drop-pulse-b-xdwyduyppb 2.2s ease-in-out infinite;
}

.twin-drop.is-filled rect[b-xdwyduyppb] {
    animation: none;
    fill: rgba(242, 163, 40, 0.22);
    stroke: rgba(242, 163, 40, 0.95);
}

.twin-drop.is-muted rect[b-xdwyduyppb] {
    animation: none;
    fill: rgba(242, 163, 40, 0.06);
    stroke: rgba(242, 163, 40, 0.45);
}

@keyframes features-twin-drop-pulse-b-xdwyduyppb {
    0%, 100% {
        fill: rgba(242, 163, 40, 0.08);
        stroke: rgba(242, 163, 40, 0.65);
    }
    50% {
        fill: rgba(242, 163, 40, 0.2);
        stroke: rgba(242, 163, 40, 0.98);
    }
}

.twin-pick rect[b-xdwyduyppb] {
    transition: fill 300ms ease, stroke 300ms ease;
}

.twin-pick.is-filled rect[b-xdwyduyppb] {
    fill: rgba(124, 236, 255, 0.08);
    stroke: rgba(124, 236, 255, 0.55);
    stroke-dasharray: none;
}

.twin-trajectory[b-xdwyduyppb] {
    animation: features-twin-trajectory-fade-b-xdwyduyppb 3s ease-in-out infinite;
}

@keyframes features-twin-trajectory-fade-b-xdwyduyppb {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.features-twin-demo-note[b-xdwyduyppb] {
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: rgba(156, 192, 224, 0.62);
    margin: 0;
}

/* ── "Why this is different" callout ────────────────────────── */
.features-twin-callout[b-xdwyduyppb] {
    width: min(1100px, 94vw);
    margin: clamp(1.5rem, 3vw, 2.4rem) auto 0;
    padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.6vw, 2.2rem);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.2vw, 1rem);
}

.features-twin-callout-kicker[b-xdwyduyppb] {
    margin: 0 0 clamp(0.2rem, 0.4vw, 0.4rem);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(124, 236, 255, 0.85);
}

.features-twin-callout p:not(.features-twin-callout-kicker)[b-xdwyduyppb] {
    margin: 0;
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.6;
    color: rgba(239, 243, 255, 0.78);
    text-wrap: pretty;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .features-twin-demo-split[b-xdwyduyppb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .features-twin-cmd-row--with-param[b-xdwyduyppb] {
        flex-direction: column;
    }

    .features-twin-observer-row[b-xdwyduyppb] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name value" "type type";
        gap: 0.15rem 0.75rem;
    }

    .features-twin-observer-name[b-xdwyduyppb]  { grid-area: name; }
    .features-twin-observer-value[b-xdwyduyppb] { grid-area: value; }
    .features-twin-observer-type[b-xdwyduyppb]  { grid-area: type; font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .features-twin-live[b-xdwyduyppb],
    .features-twin-live-dot[b-xdwyduyppb],
    .twin-drop rect[b-xdwyduyppb],
    .twin-trajectory[b-xdwyduyppb] {
        animation: none;
    }

    .twin-object[b-xdwyduyppb],
    .twin-finger[b-xdwyduyppb] {
        transition: none;
    }
}
/* /Components/HomeAssistantChat.razor.rz.scp.css */
.cordis-chat[b-gtzse74fnw] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
}

.cordis-chat__launcher[b-gtzse74fnw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border: 0;
    border-radius: 50%;
    color: #f6f9fc;
    background: linear-gradient(145deg, #0c2b55 0%, #081d3a 100%);
    box-shadow:
        0 14px 28px rgba(4, 16, 35, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 20px rgba(58, 104, 173, 0.18);
    transition:
        transform 160ms ease,
        filter 160ms ease,
        box-shadow 160ms ease;
}

.cordis-chat__launcher[b-gtzse74fnw]::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(90, 145, 221, 0.18) 0%, rgba(90, 145, 221, 0) 68%);
    opacity: 0.75;
    pointer-events: none;
}

.cordis-chat__launcher:hover[b-gtzse74fnw],
.cordis-chat__launcher:focus-visible[b-gtzse74fnw] {
    transform: translateY(-1px) scale(1.05);
    filter: brightness(1.08);
}

.cordis-chat__launcher:focus-visible[b-gtzse74fnw] {
    outline: 2px solid rgba(164, 193, 255, 0.88);
    outline-offset: 3px;
}

.cordis-chat__launcher-icon[b-gtzse74fnw] {
    position: relative;
    width: 30px;
    height: 30px;
}

.cordis-chat__panel[b-gtzse74fnw] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(500px, calc(100vw - 48px));
    height: min(80vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(18, 35, 62, 0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.99) 100%);
    box-shadow:
        0 28px 60px rgba(4, 16, 35, 0.18),
        0 8px 20px rgba(4, 16, 35, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transform-origin: bottom right;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
    backdrop-filter: blur(10px);
}

.cordis-chat.is-open .cordis-chat__panel[b-gtzse74fnw] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 0s;
}

.cordis-chat__header[b-gtzse74fnw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(16, 36, 68, 0.08);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.96) 0%, rgba(244, 247, 251, 0.88) 100%);
}

.cordis-chat__brand[b-gtzse74fnw] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cordis-chat__brand-logo[b-gtzse74fnw] {
    display: block;
    width: auto;
    height: 30px;
    flex: 0 0 auto;
    filter: saturate(0.95) contrast(1.02);
}

.cordis-chat__brand-copy[b-gtzse74fnw] {
    min-width: 0;
}

.cordis-chat__eyebrow[b-gtzse74fnw] {
    margin: 0 0 4px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #35567b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cordis-chat__header h2[b-gtzse74fnw] {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #10233f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.cordis-chat__header p[b-gtzse74fnw] {
    margin: 6px 0 0;
    color: rgba(16, 35, 63, 0.68);
    font-size: 0.84rem;
    line-height: 1.45;
}

.cordis-chat__close[b-gtzse74fnw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(16, 35, 63, 0.1);
    border-radius: 999px;
    color: #37557a;
    background: rgba(255, 255, 255, 0.82);
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.cordis-chat__controls[b-gtzse74fnw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cordis-chat__menu-wrap[b-gtzse74fnw] {
    position: relative;
}

.cordis-chat__menu-toggle[b-gtzse74fnw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(16, 35, 63, 0.1);
    border-radius: 999px;
    color: #37557a;
    background: rgba(255, 255, 255, 0.82);
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.cordis-chat__menu-toggle:hover[b-gtzse74fnw],
.cordis-chat__menu-toggle:focus-visible[b-gtzse74fnw] {
    transform: scale(1.03);
    background: #ffffff;
    border-color: rgba(16, 35, 63, 0.18);
}

.cordis-chat__menu-toggle:focus-visible[b-gtzse74fnw] {
    outline: 2px solid rgba(80, 123, 185, 0.44);
    outline-offset: 2px;
}

.cordis-chat__menu-toggle svg[b-gtzse74fnw] {
    width: 16px;
    height: 16px;
}

.cordis-chat__menu[b-gtzse74fnw] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 132px;
    padding: 6px;
    border: 1px solid rgba(18, 35, 62, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 36px rgba(4, 16, 35, 0.14);
    z-index: 2;
}

.cordis-chat__menu-item[b-gtzse74fnw] {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    text-align: left;
    color: #10233f;
    background: transparent;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 140ms ease, color 140ms ease;
}

.cordis-chat__menu-item:hover[b-gtzse74fnw],
.cordis-chat__menu-item:focus-visible[b-gtzse74fnw] {
    background: rgba(16, 35, 63, 0.06);
    color: #0f2444;
}

.cordis-chat__menu-item:focus-visible[b-gtzse74fnw] {
    outline: 2px solid rgba(80, 123, 185, 0.28);
    outline-offset: 2px;
}

.cordis-chat__close:hover[b-gtzse74fnw],
.cordis-chat__close:focus-visible[b-gtzse74fnw] {
    transform: scale(1.03);
    background: #ffffff;
    border-color: rgba(16, 35, 63, 0.18);
}

.cordis-chat__close:focus-visible[b-gtzse74fnw] {
    outline: 2px solid rgba(80, 123, 185, 0.44);
    outline-offset: 2px;
}

.cordis-chat__close svg[b-gtzse74fnw] {
    width: 16px;
    height: 16px;
}

.cordis-chat__thread[b-gtzse74fnw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 14px;
    overflow: auto;
    flex: 1 1 auto;
}

.cordis-chat__message[b-gtzse74fnw] {
    max-width: 100%;
    border-radius: 18px;
    padding: 12px 14px;
    color: #14263f;
}

.cordis-chat__message p[b-gtzse74fnw] {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.5;
}

.cordis-chat__message-text[b-gtzse74fnw] {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.93rem;
    line-height: 1.6;
    color: #14263f;
    white-space: normal;
    word-break: break-word;
}

.cordis-chat__message-text strong[b-gtzse74fnw] {
    color: #0f2444;
    font-weight: 700;
}

.cordis-chat__thinking[b-gtzse74fnw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
}

.cordis-chat__thinking-logo[b-gtzse74fnw] {
    width: 2rem;
    height: 2rem;
    color: #325177;
}

.cordis-chat__thinking-sector[b-gtzse74fnw] {
    transform-origin: 720px -680px;
    animation: cordisLogoSpin-b-gtzse74fnw 2s linear infinite;
}

.cordis-chat__message--system[b-gtzse74fnw] {
    padding: 0;
    color: #415873;
    background: transparent;
}

.cordis-chat__system-label[b-gtzse74fnw] {
    display: inline-flex;
    margin-bottom: 6px;
    color: #5b7391;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cordis-chat__message--assistant[b-gtzse74fnw] {
    align-self: flex-start;
    background: rgba(16, 35, 63, 0.04);
    border: 1px solid rgba(16, 35, 63, 0.06);
}

.cordis-chat__message--user[b-gtzse74fnw] {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(234, 240, 248, 0.98) 0%, rgba(224, 232, 243, 0.96) 100%);
    border: 1px solid rgba(16, 35, 63, 0.08);
}

.cordis-chat__footer[b-gtzse74fnw] {
    padding: 14px 18px 14px;
    margin-top: auto;
}

.cordis-chat__footer p[b-gtzse74fnw] {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: rgba(16, 35, 63, 0.58);
    font-size: 0.72rem;
    line-height: 1.45;
}

.cordis-chat__composer[b-gtzse74fnw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(16, 35, 63, 0.08);
    background: rgba(250, 252, 255, 0.96);
}

.cordis-chat__suggestions[b-gtzse74fnw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 12px;
}

.cordis-chat__suggestion[b-gtzse74fnw] {
    border: 1px solid rgba(16, 35, 63, 0.12);
    border-radius: 999px;
    padding: 8px 12px;
    color: #24405f;
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.cordis-chat__suggestion:hover[b-gtzse74fnw],
.cordis-chat__suggestion:focus-visible[b-gtzse74fnw] {
    transform: translateY(-1px);
    border-color: rgba(28, 56, 92, 0.2);
    background: #ffffff;
    color: #10233f;
}

.cordis-chat__suggestion:focus-visible[b-gtzse74fnw] {
    outline: 2px solid rgba(80, 123, 185, 0.32);
    outline-offset: 2px;
}

.cordis-chat__input[b-gtzse74fnw] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 1px solid rgba(16, 35, 63, 0.12);
    border-radius: 999px;
    padding: 0 16px;
    color: #10233f;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(16, 35, 63, 0.03);
}

.cordis-chat__input[b-gtzse74fnw]::placeholder {
    color: rgba(16, 35, 63, 0.45);
}

.cordis-chat__input:focus[b-gtzse74fnw] {
    border-color: rgba(68, 111, 170, 0.4);
    outline: none;
    box-shadow: 0 0 0 3px rgba(90, 130, 190, 0.12);
}

.cordis-chat__send[b-gtzse74fnw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    color: #f8fbff;
    background: linear-gradient(145deg, #17365f 0%, #0b2344 100%);
    box-shadow: 0 10px 20px rgba(8, 24, 46, 0.18);
    transition: transform 140ms ease, filter 140ms ease;
}

.cordis-chat__send:hover[b-gtzse74fnw],
.cordis-chat__send:focus-visible[b-gtzse74fnw] {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.cordis-chat__send:focus-visible[b-gtzse74fnw] {
    outline: 2px solid rgba(80, 123, 185, 0.38);
    outline-offset: 2px;
}

.cordis-chat__send:disabled[b-gtzse74fnw] {
    opacity: 0.65;
    cursor: wait;
    transform: none;
    filter: none;
}

.cordis-chat__send svg[b-gtzse74fnw] {
    width: 18px;
    height: 18px;
}

@keyframes cordisLogoSpin-b-gtzse74fnw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .cordis-chat[b-gtzse74fnw] {
        right: 12px;
        bottom: 12px;
    }

    .cordis-chat.is-open .cordis-chat__launcher[b-gtzse74fnw] {
        opacity: 0;
        pointer-events: none;
    }

    .cordis-chat__panel[b-gtzse74fnw] {
        position: fixed;
        inset: 0;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
        transform-origin: center;
        transform: translateY(12px) scale(0.99);
    }

    .cordis-chat.is-open .cordis-chat__panel[b-gtzse74fnw] {
        transform: translateY(0) scale(1);
    }
}
/* /Components/HomeBodySections.razor.rz.scp.css */
/* ─── Design tokens (mirrors hero) ─── */
.home-value-strip[b-c5msmkc18y],
.home-hiw[b-c5msmkc18y],
.home-statement[b-c5msmkc18y],
.home-platform[b-c5msmkc18y] {
    --hb-bg-start:  #031225;
    --hb-bg-mid:    #072847;
    --hb-bg-end:    #0d4570;
    --hb-text:      #f4fbff;
    --hb-text-soft: rgba(220, 240, 255, 0.72);
    --hb-border:    rgba(155, 225, 255, 0.14);
    --hb-cyan:      rgba(124, 236, 255, 0.75);
    --hb-panel-bg:  linear-gradient(180deg, rgba(9, 24, 46, 0.44) 0%, rgba(7, 18, 35, 0.66) 100%);
    --hb-node-size: clamp(3.6rem, 7vw, 5rem);
}

/* ════════════════════════════════════════════
   ACCESSIBILITY
════════════════════════════════════════════ */
.visually-hidden[b-c5msmkc18y] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ════════════════════════════════════════════
   SECTION 1 — VALUE CARDS
   Sits immediately after the leaders strip
   which ends at #031225 on the home page
════════════════════════════════════════════ */
.home-value-strip[b-c5msmkc18y] {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: linear-gradient(180deg, var(--hb-bg-start) 0%, var(--hb-bg-mid) 100%);
}

.home-value-strip__inner[b-c5msmkc18y] {
    width: min(1200px, 94vw);
    max-width: none;
}

.value-cards[b-c5msmkc18y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.value-card[b-c5msmkc18y] {
    background: var(--hb-panel-bg);
    border: 1px solid var(--hb-border);
    border-radius: 18px;
    padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.2rem, 2vw, 1.6rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 32px rgba(2, 8, 20, 0.12);
    transition:
        transform      0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow     0.4s ease,
        border-color   0.4s ease;
    cursor: default;
}

.value-card:hover[b-c5msmkc18y] {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(124, 236, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 20px 48px rgba(2, 8, 20, 0.28),
        0 0 0 1px rgba(124, 236, 255, 0.14),
        0 0 28px rgba(124, 236, 255, 0.07);
}

.value-card__icon[b-c5msmkc18y] {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.15rem;
    color: rgba(124, 236, 255, 0.78);
}

.value-card__icon svg[b-c5msmkc18y] {
    width: 100%;
    height: 100%;
}

.value-card h3[b-c5msmkc18y] {
    margin: 0 0 0.5rem;
    color: rgba(244, 251, 255, 0.92);
    font-size: clamp(0.88rem, 1.05vw, 0.98rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.value-card:first-child h3[b-c5msmkc18y] {
    color: #ffffff;
}

.value-card p[b-c5msmkc18y] {
    margin: 0;
    color: var(--hb-text-soft);
    font-size: clamp(0.78rem, 0.9vw, 0.86rem);
    line-height: 1.6;
}

/* ════════════════════════════════════════════
   SECTION 2 — HOW IT WORKS
════════════════════════════════════════════ */
.home-hiw[b-c5msmkc18y] {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: linear-gradient(180deg, var(--hb-bg-mid) 0%, var(--hb-bg-start) 100%);
}

.home-hiw__head[b-c5msmkc18y] {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.home-hiw__head h2[b-c5msmkc18y] {
    margin: 0 0 0.55rem;
    color: var(--hb-text);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.022em;
}

.home-hiw__head p[b-c5msmkc18y] {
    margin: 0;
    color: var(--hb-text-soft);
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
}

.hiw-flow[b-c5msmkc18y] {
    display: flex;
    align-items: flex-start;
    max-width: 860px;
    margin: 0 auto;
}

.hiw-step[b-c5msmkc18y] {
    flex: 0 0 auto;
    width: clamp(7rem, 13vw, 9.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hiw-step__node[b-c5msmkc18y] {
    width: var(--hb-node-size);
    height: var(--hb-node-size);
    flex-shrink: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 20%, rgba(124, 236, 255, 0.05), transparent 55%),
        var(--hb-panel-bg);
    border: 1px solid var(--hb-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 24px rgba(2, 8, 20, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfe3ff;
    margin-bottom: 0.9rem;
    transition:
        border-color  0.4s ease,
        box-shadow    0.4s ease;
}

.hiw-step:hover .hiw-step__node[b-c5msmkc18y] {
    border-color: rgba(124, 236, 255, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 36px rgba(2, 8, 20, 0.22),
        0 0 20px rgba(124, 236, 255, 0.1);
}

.hiw-step__node svg[b-c5msmkc18y] {
    width: 58%;
    height: 58%;
}

.hiw-step__label[b-c5msmkc18y] {
    color: rgba(244, 251, 255, 0.9);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 0.22rem;
}

.hiw-step__sub[b-c5msmkc18y] {
    margin: 0;
    color: rgba(180, 215, 255, 0.52);
    font-size: 0.76rem;
    line-height: 1.4;
}

.hiw-connector[b-c5msmkc18y] {
    flex: 1;
    height: 1px;
    background: rgba(124, 236, 255, 0.14);
    position: relative;
    margin-top: calc(var(--hb-node-size) / 2 - 0.5px);
}

.hiw-connector__pulse[b-c5msmkc18y] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(124, 236, 255, 0.95);
    box-shadow: 0 0 10px 3px rgba(124, 236, 255, 0.45);
    animation: hiw-travel-b-c5msmkc18y 8.4s ease-in-out infinite;
    opacity: 0;
}

@keyframes hiw-travel-b-c5msmkc18y {
    0%   { left: 0;                   opacity: 0; }
    7%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: calc(100% - 7px);    opacity: 0; }
}

/* ════════════════════════════════════════════
   SECTION 3 — CORE STATEMENT
════════════════════════════════════════════ */
.home-statement[b-c5msmkc18y] {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 10vw, 8rem) 0;
    background: var(--hb-bg-start);
    text-align: center;
}

.home-statement__bg[b-c5msmkc18y] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stmt-svg[b-c5msmkc18y] {
    width: 100%;
    height: 100%;
}

.stmt-line[b-c5msmkc18y] {
    animation: stmt-breathe-b-c5msmkc18y 14s ease-in-out infinite;
}

.stmt-line--b[b-c5msmkc18y] { animation-delay: -5s; }
.stmt-line--c[b-c5msmkc18y] { animation-delay: -10s; }

@keyframes stmt-breathe-b-c5msmkc18y {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1;    }
}

.stmt-dot[b-c5msmkc18y] {
    animation: stmt-dot-pulse-b-c5msmkc18y 7s ease-in-out infinite;
    transform-origin: center;
}

.stmt-dot--b[b-c5msmkc18y] { animation-delay: -2.3s; }
.stmt-dot--c[b-c5msmkc18y] { animation-delay: -4.6s; }

@keyframes stmt-dot-pulse-b-c5msmkc18y {
    0%, 100% { opacity: 0.28; transform: scale(0.75); }
    50%       { opacity: 1;    transform: scale(1.4);  }
}

.home-statement__inner[b-c5msmkc18y] {
    position: relative;
    z-index: 1;
}

.stmt-overline[b-c5msmkc18y] {
    margin: 0 0 1.1rem;
    color: rgba(124, 236, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-statement h2[b-c5msmkc18y] {
    margin: 0 0 1.4rem;
    color: var(--hb-text);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.028em;
}

.stmt-body[b-c5msmkc18y] {
    margin: 0 auto;
    color: var(--hb-text-soft);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    max-width: 44rem;
}

.stmt-br[b-c5msmkc18y] { display: block; }

/* ════════════════════════════════════════════
   SECTION 4 — STRATEGIC VALUE
════════════════════════════════════════════ */
.home-platform[b-c5msmkc18y] {
    padding: clamp(4.5rem, 9vw, 7rem) 0;
    background: linear-gradient(180deg, var(--hb-bg-start) 0%, #020d1e 100%);
}

.home-platform__inner[b-c5msmkc18y] {
    width: min(1100px, 92vw);
    max-width: none;
}

.home-platform__head[b-c5msmkc18y] {
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    max-width: 46rem;
}

.platform-overline[b-c5msmkc18y] {
    margin: 0 0 1rem;
    color: rgba(124, 236, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-platform h2[b-c5msmkc18y] {
    margin: 0 0 1rem;
    color: var(--hb-text);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.15;
}

.platform-sub[b-c5msmkc18y] {
    margin: 0;
    color: var(--hb-text-soft);
    font-size: clamp(0.9rem, 1.2vw, 1.02rem);
    line-height: 1.65;
}

.platform-values[b-c5msmkc18y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 2.8rem) clamp(2.5rem, 5vw, 4rem);
    margin: 0;
    padding: 0;
}

.platform-value[b-c5msmkc18y] {
    position: relative;
    padding-left: 1.1rem;
}

.platform-value[b-c5msmkc18y]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 2px;
    height: 1.1rem;
    background: linear-gradient(180deg, rgba(124, 236, 255, 0.7), rgba(124, 236, 255, 0.2));
    border-radius: 2px;
}

.platform-value dt[b-c5msmkc18y] {
    color: rgba(244, 251, 255, 0.9);
    font-size: clamp(0.88rem, 1vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
    display: block;
}

.platform-value dd[b-c5msmkc18y] {
    margin: 0;
    color: var(--hb-text-soft);
    font-size: clamp(0.8rem, 0.9vw, 0.86rem);
    line-height: 1.68;
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 860px) {
    .value-cards[b-c5msmkc18y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .platform-values[b-c5msmkc18y] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .value-cards[b-c5msmkc18y] {
        grid-template-columns: 1fr;
        max-width: 26rem;
        margin: 0 auto;
    }

    .platform-values[b-c5msmkc18y] {
        grid-template-columns: 1fr;
    }

    .hiw-flow[b-c5msmkc18y] {
        flex-direction: column;
        align-items: center;
        max-width: 18rem;
    }

    .hiw-step[b-c5msmkc18y] {
        width: 100%;
    }

    .hiw-connector[b-c5msmkc18y] {
        width: 1px;
        height: clamp(1.4rem, 4vw, 2rem);
        flex: 0 0 auto;
        margin-top: 0;
    }

    .hiw-connector__pulse[b-c5msmkc18y] {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        animation: hiw-travel-v-b-c5msmkc18y 8.4s ease-in-out infinite;
    }

    @keyframes hiw-travel-v-b-c5msmkc18y {
        0%   { top: 0;                 opacity: 0; }
        7%   { opacity: 1; }
        90%  { opacity: 1; }
        100% { top: calc(100% - 7px);  opacity: 0; }
    }

    .stmt-br[b-c5msmkc18y] { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .value-card[b-c5msmkc18y] { transition: none; }
    .hiw-connector__pulse[b-c5msmkc18y],
    .stmt-line[b-c5msmkc18y],
    .stmt-dot[b-c5msmkc18y] { animation: none; opacity: 1; }
}
/* /Components/HomeDataFoundationSection.razor.rz.scp.css */
/* ─── Section atmosphere ─── */
.home-data-foundation[b-0njmsjs4ap] {
    position: relative;
    overflow: hidden;
}

.home-data-foundation[b-0njmsjs4ap]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% -5%, rgba(31, 156, 216, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 28% 55% at 4% 55%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 96% 55%, rgba(124, 236, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ─── Section header ─── */
.data-foundation-header[b-0njmsjs4ap] {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.home-data-foundation .section-overline[b-0njmsjs4ap] {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.24em;
    font-size: 0.82rem;
    font-variant-caps: all-small-caps;
    margin-bottom: 0.5rem;
}

.data-foundation-h2[b-0njmsjs4ap] {
    font-size: clamp(2.5rem, 4.4vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    color: #ffffff !important;
}

/* ─── Three-column layout ─── */
.data-foundation-layout[b-0njmsjs4ap] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0 clamp(1.5rem, 2.5vw, 2.5rem);
    width: min(1700px, 98vw);
    margin: 0 auto;
    padding: 0 2vw;
    position: relative;
    z-index: 1;
}

/* ─── Image column ─── */
.data-foundation-media[b-0njmsjs4ap] {
    width: 100%;
    align-self: center;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Subtle halo behind the image */
.data-foundation-media[b-0njmsjs4ap]::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(31, 156, 216, 0.11) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.data-foundation-media img[b-0njmsjs4ap] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 48px rgba(124, 236, 255, 0.13))
        drop-shadow(0 0 16px rgba(31, 156, 216, 0.12))
        drop-shadow(0 12px 40px rgba(2, 8, 20, 0.55));
}

/* ─── Shared text column styles ─── */
.data-foundation-col[b-0njmsjs4ap] {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 2vw, 1.6rem);
    padding: clamp(1.8rem, 2.8vw, 2.4rem) clamp(1.5rem, 2.2vw, 2rem);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
        0 24px 64px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Subtle inner gradient wash */
.data-foundation-col[b-0njmsjs4ap]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
}

.data-foundation-col--left[b-0njmsjs4ap]::after {
    background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(226, 7, 23, 0.04) 0%, transparent 60%);
}

.data-foundation-col--right[b-0njmsjs4ap]::after {
    background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(31, 156, 216, 0.06) 0%, transparent 60%);
}

/* Make content sit above the inner gradient */
.data-foundation-col > *[b-0njmsjs4ap] {
    position: relative;
    z-index: 1;
}

/* Top accent bar */
.data-foundation-col[b-0njmsjs4ap]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 16px 16px 0 0;
    z-index: 2;
}

.data-foundation-col--left[b-0njmsjs4ap]::before {
    background: linear-gradient(90deg, rgba(226, 7, 23, 0.85) 0%, rgba(226, 7, 23, 0.12) 100%);
}

.data-foundation-col--right[b-0njmsjs4ap]::before {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.12) 0%, rgba(31, 156, 216, 0.95) 100%);
}

/* ─── Column eyebrow label ─── */
.data-foundation-col__label[b-0njmsjs4ap] {
    margin: 0;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
    line-height: 1 !important;
}

.data-foundation-col--left .data-foundation-col__label[b-0njmsjs4ap] {
    color: rgba(226, 7, 23, 0.75);
}

.data-foundation-col--right .data-foundation-col__label[b-0njmsjs4ap] {
    color: rgba(31, 156, 216, 0.85);
}

/* ─── Body text ─── */
.data-foundation-col p[b-0njmsjs4ap] {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.8;
}

.data-foundation-col--left p[b-0njmsjs4ap] {
    color: rgba(239, 243, 255, 0.58);
}

.data-foundation-col--right p[b-0njmsjs4ap] {
    color: rgba(239, 243, 255, 0.82);
}

/* ─── "You can always go back." standout ─── */
/* Standout line — "You can always go back."
   Divider shifts from cyan into Cordis green, echoing the hero's
   green petal (which is thematically about data / the fruit of
   the system). Green here reads as affirmation, guarantee, growth. */
.data-foundation-col__standout[b-0njmsjs4ap] {
    font-size: clamp(1.08rem, 1.3vw, 1.22rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    padding-top: clamp(0.7rem, 1.2vw, 1rem);
    margin-top: auto !important;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(31, 156, 216, 0.1) 0%,
        rgba(31, 156, 216, 0.35) 35%,
        rgba(59, 170, 53, 0.45) 100%) 1;
    letter-spacing: -0.01em;
}

/* ─── Closing payoff line ─── */
.data-foundation-conclusion[b-0njmsjs4ap] {
    width: min(1700px, 98vw);
    margin: clamp(2.5rem, 4vw, 4rem) auto 0;
    padding: clamp(1.8rem, 3vw, 2.4rem) 2vw 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Accent line above payoff — stronger than other sections because this is the climactic moment */
.data-foundation-conclusion[b-0njmsjs4ap]::before {
    content: "";
    display: block;
    width: min(720px, 80%);
    height: 1px;
    margin: 0 auto clamp(2rem, 3.2vw, 2.6rem);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.3) 15%,
        rgba(31, 156, 216, 0.75) 50%,
        rgba(124, 236, 255, 0.3) 85%,
        transparent 100%
    );
}

.data-foundation-payoff[b-0njmsjs4ap] {
    margin: 0;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.5;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* ─── Responsive ─── */
@media (max-width: 860px) {
    .data-foundation-layout[b-0njmsjs4ap] {
        grid-template-columns: 1fr;
        padding: 0 4vw;
        gap: clamp(1.5rem, 3vw, 2rem) 0;
    }

    .data-foundation-media[b-0njmsjs4ap] {
        order: 1;
        padding: 0;
    }

    .data-foundation-col--left[b-0njmsjs4ap] { order: 2; }
    .data-foundation-col--right[b-0njmsjs4ap] { order: 3; }

    .data-foundation-conclusion[b-0njmsjs4ap] {
        padding: clamp(1.5rem, 3vw, 2rem) 4vw 0;
    }

    .data-foundation-conclusion[b-0njmsjs4ap]::before {
        width: min(320px, 80%);
    }
}
/* /Components/HomeFooterSection.razor.rz.scp.css */
.home-footer[b-uc8jtwn55f] {
    margin-top: 0;
    padding: 0;
    background: linear-gradient(180deg, #04070f 0%, #050a13 42%, #070d19 100%);
    color: rgba(232, 238, 252, 0.76);
}

.home-footer__shell[b-uc8jtwn55f] {
    padding: clamp(4.5rem, 7vw, 7rem) 0 clamp(2rem, 3vw, 3rem);
}

.home-footer__inner[b-uc8jtwn55f] {
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 2.15fr);
    gap: clamp(3.5rem, 6vw, 7rem);
    align-items: start;
}

.home-footer__brand[b-uc8jtwn55f] {
    max-width: 24rem;
    display: grid;
    gap: 1.15rem;
    align-content: start;
    justify-items: center;
    justify-self: center;
    width: 100%;
    text-align: center;
}

.home-footer__logo[b-uc8jtwn55f] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.home-footer__logo img[b-uc8jtwn55f] {
    display: block;
    width: min(14rem, 100%);
    height: auto;
}

.home-footer__links[b-uc8jtwn55f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2.75rem);
    align-items: start;
}

.home-footer__column h2[b-uc8jtwn55f] {
    margin: 0 0 1.1rem;
    font-size: 0.76rem;
    font-weight: 560;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.home-footer__column ul[b-uc8jtwn55f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.home-footer__column a[b-uc8jtwn55f] {
    color: rgba(232, 238, 252, 0.62);
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.45;
    transition: color 160ms ease, transform 160ms ease;
}

.home-footer__column a:hover[b-uc8jtwn55f],
.home-footer__column a:focus-visible[b-uc8jtwn55f] {
    color: #ffffff;
}

.home-footer__bottom[b-uc8jtwn55f] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
    padding-top: 0;
}

.home-footer__social[b-uc8jtwn55f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.home-footer__social a[b-uc8jtwn55f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0;
    color: rgba(232, 238, 252, 0.62);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    transition: color 160ms ease, transform 160ms ease;
    background: transparent;
}

.home-footer__social a:hover[b-uc8jtwn55f],
.home-footer__social a:focus-visible[b-uc8jtwn55f] {
    color: #ffffff;
}

.home-footer__social svg[b-uc8jtwn55f] {
    width: 2.35rem;
    height: 2.35rem;
    fill: currentColor;
    flex: 0 0 auto;
}

.home-footer__copyright[b-uc8jtwn55f] {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(232, 238, 252, 0.52);
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 1080px) {
    .home-footer__inner[b-uc8jtwn55f] {
        grid-template-columns: 1fr;
    }

    .home-footer__brand[b-uc8jtwn55f] {
        max-width: none;
    }

    .home-footer__social[b-uc8jtwn55f] {
        justify-content: center;
    }

    .home-footer__links[b-uc8jtwn55f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .home-footer__shell[b-uc8jtwn55f] {
        padding-top: 4rem;
    }

    .home-footer__links[b-uc8jtwn55f] {
        grid-template-columns: 1fr;
    }

    .home-footer__copyright[b-uc8jtwn55f] {
        white-space: normal;
        text-align: left;
    }
}
/* /Components/HomeIndependenceSection.razor.rz.scp.css */
.home-independence[b-rnavd9dv2a] {
    padding: calc(var(--section-pad-y) * var(--pad-scale-tight)) 0;
}

.visually-hidden[b-rnavd9dv2a] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.independence-head[b-rnavd9dv2a] {
    margin-bottom: clamp(3rem, 4.6vw, 3.9rem);
}

.independence-grid[b-rnavd9dv2a] {
    width: min(1180px, 92vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: clamp(1rem, 2vw, 1.35rem);
    align-items: stretch;
}

.independence-card[b-rnavd9dv2a] {
    position: relative;
    padding: clamp(1.55rem, 2.3vw, 1.95rem);
    padding-top: clamp(1.9rem, 2.7vw, 2.3rem);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(17, 34, 58, 0.9) 0%, rgba(13, 27, 47, 0.95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 220ms ease, transform 220ms ease;
}

.independence-card:hover[b-rnavd9dv2a] { transform: translateY(-2px); }

.independence-card:nth-child(1):hover[b-rnavd9dv2a],
.independence-card:nth-child(4):hover[b-rnavd9dv2a] { border-color: rgba(226, 7, 23, 0.28); }

.independence-card:nth-child(2):hover[b-rnavd9dv2a] { border-color: rgba(31, 156, 216, 0.32); }

.independence-card:nth-child(3):hover[b-rnavd9dv2a] { border-color: rgba(59, 170, 53, 0.3); }

/* Colour assignment tracks the three-column row above + full-width row below:
   Row 1: 01 code (red) · 02 data (blue) · 03 future (blue→green)
   Row 2: 04 hardware (red, wide) — picks up the red accent that framed card 01,
           visually book-ending the section and reinforcing "your hardware, your choice". */
.independence-card[b-rnavd9dv2a]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
    z-index: 2;
}

/* Card 1 — "Your code." */
.independence-card:nth-child(1)[b-rnavd9dv2a]::before {
    background: linear-gradient(90deg, rgba(226, 7, 23, 0.65) 0%, rgba(226, 7, 23, 0.08) 70%, transparent 100%);
}

/* Card 2 — "Your data." */
.independence-card:nth-child(2)[b-rnavd9dv2a]::before {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.75) 0%, rgba(31, 156, 216, 0.08) 70%, transparent 100%);
}

/* Card 3 — "Your future." blue fading into green (growth) */
.independence-card:nth-child(3)[b-rnavd9dv2a]::before {
    background: linear-gradient(90deg, rgba(124, 236, 255, 0.7) 0%, rgba(59, 170, 53, 0.4) 60%, transparent 100%);
}

/* Card 4 (wide) — "Your hardware." Centred two-sided gradient so both ends of the
   full-width ribbon read as accented rather than fading out on the right. */
.independence-card:nth-child(4)[b-rnavd9dv2a]::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.55) 18%,
        rgba(255, 140, 140, 0.35) 50%,
        rgba(226, 7, 23, 0.55) 82%,
        transparent 100%);
}

.independence-card[b-rnavd9dv2a]::after {
    content: "";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 90px;
    pointer-events: none;
    z-index: 0;
}

.independence-card:nth-child(1)[b-rnavd9dv2a]::after,
.independence-card:nth-child(4)[b-rnavd9dv2a]::after {
    background: radial-gradient(ellipse at center, rgba(226, 7, 23, 0.05), transparent 70%);
}

.independence-card:nth-child(2)[b-rnavd9dv2a]::after {
    background: radial-gradient(ellipse at center, rgba(31, 156, 216, 0.06), transparent 70%);
}

.independence-card:nth-child(3)[b-rnavd9dv2a]::after {
    background: radial-gradient(ellipse at center, rgba(59, 170, 53, 0.05), transparent 70%);
}

.independence-card > *[b-rnavd9dv2a] {
    position: relative;
    z-index: 1;
}

.independence-card__icon[b-rnavd9dv2a] {
    display: block;
    width: 22px;
    height: 22px;
    margin-bottom: clamp(0.85rem, 1.4vw, 1.1rem);
    transition: color 220ms ease;
}

.independence-card:nth-child(1) .independence-card__icon[b-rnavd9dv2a] { color: rgba(255, 120, 120, 0.82); }
.independence-card:nth-child(2) .independence-card__icon[b-rnavd9dv2a] { color: rgba(31, 156, 216, 0.88); }
.independence-card:nth-child(3) .independence-card__icon[b-rnavd9dv2a] { color: rgba(124, 236, 255, 0.88); }
.independence-card:nth-child(4) .independence-card__icon[b-rnavd9dv2a] { color: rgba(255, 120, 120, 0.82); }

.independence-card__number[b-rnavd9dv2a] {
    position: absolute;
    top: clamp(1.45rem, 2.1vw, 1.8rem);
    right: clamp(1.55rem, 2.3vw, 1.95rem);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.2);
    font-variant-numeric: tabular-nums;
}

.independence-card h3[b-rnavd9dv2a] {
    margin: 0 0 0.7rem;
    color: #ffffff;
    font-size: clamp(1.22rem, 1.55vw, 1.42rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.independence-card p[b-rnavd9dv2a] {
    margin: 0;
    color: rgba(239, 243, 255, 0.7);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    text-wrap: pretty;
}

.independence-nowrap[b-rnavd9dv2a] {
    white-space: nowrap;
}

.independence-footer[b-rnavd9dv2a] {
    display: flex;
    justify-content: center;
    margin-top: calc(clamp(1.55rem, 3vw, 2.15rem) + 16px);
}

.independence-link[b-rnavd9dv2a] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(244, 251, 255, 0.92);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.02);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.independence-link:hover[b-rnavd9dv2a] {
    transform: translateY(-1px);
    border-color: rgba(124, 236, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

@media (max-width: 960px) {
    .independence-grid[b-rnavd9dv2a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .independence-card--hardware[b-rnavd9dv2a] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .independence-grid[b-rnavd9dv2a] {
        grid-template-columns: 1fr;
    }
}

/* ────────────────────────────────────────────────────────────────
   Wide "Your hardware. Your choice." card — spans the full row
   beneath the three standard cards and embeds the supported-hardware
   ticker. Keeps the base .independence-card look and layers a
   horizontal copy + ticker split on top.
   ──────────────────────────────────────────────────────────────── */
.independence-card--hardware[b-rnavd9dv2a] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr);
    gap: clamp(1.5rem, 3vw, 2.4rem);
    align-items: center;

    /* Ticker tuning knobs — sized for a two-row stack (slightly more compact
       than the single-row variant to keep overall card height balanced). */
    --hardware-logo-gap: clamp(1.6rem, 2.4vw, 2.3rem);
    --hardware-logo-slot-h: clamp(26px, 2.1vw, 32px);
    --hardware-logo-side-pad: clamp(0.45rem, 0.7vw, 0.65rem);
    --hardware-logo-opacity: 0.82;

    /* Per-logo pads compensate for transform:scale() overhang/recede: scale>1
       makes the image overflow its slot (visually crowds neighbours → positive
       pad), scale<1 makes the image recede inside the slot (excess whitespace
       → negative pad). Net pad per row is kept near zero so the two rows share
       the same overall rhythm. Tune by eye. */
    --logo-beckhoff-scale: 0.78;
    --logo-beckhoff-pad: -8px;
    --logo-csharp-scale: 1.55;
    --logo-csharp-pad: 10px;
    --logo-codesys-scale: 2.05;
    --logo-codesys-pad: 14px;
    --logo-ctrlx-scale: 0.9;
    --logo-ctrlx-pad: -6px;
    --logo-mitsubishi-scale: 1.1;
    --logo-mitsubishi-pad: 2px;
    --logo-phoenix-scale: 1.0;
    --logo-phoenix-pad: 0;
    --logo-rockwell-scale: 1.0;
    --logo-rockwell-pad: 0;
    --logo-saia-scale: 1.1;
    --logo-saia-pad: 2px;
    --logo-siemens-scale: 0.7;
    --logo-siemens-pad: -12px;
    --logo-weidmuller-scale: 0.78;
    --logo-weidmuller-pad: -10px;
}

.independence-card--hardware .independence-card__copy[b-rnavd9dv2a] {
    position: relative;
    min-width: 0;
    /* re-assert card-text defaults since they're now nested one level deeper */
}

.independence-card--hardware .independence-card__copy h3[b-rnavd9dv2a] {
    margin: 0 0 0.7rem;
    color: #ffffff;
    font-size: clamp(1.22rem, 1.55vw, 1.42rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.independence-card--hardware .independence-card__copy p[b-rnavd9dv2a] {
    margin: 0;
    color: rgba(239, 243, 255, 0.7);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    text-wrap: pretty;
}

/* Subtle vertical divider between copy and ticker on desktop.
   Holds two stacked ticker rows flowing in opposite directions. */
.independence-card--hardware .independence-card__ticker[b-rnavd9dv2a] {
    position: relative;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.3rem, 0.6vw, 0.55rem);
    padding-left: clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.independence-card__ticker-row[b-rnavd9dv2a] {
    position: relative;
    width: 100%;
}

/* Neutralise the ticker component's own panel chrome — the surrounding card is it. */
.independence-card__ticker[b-rnavd9dv2a]  .brands-pane {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    display: block;
    width: 100%;
}

/* Hide the component's default "Supported Hardware" heading — the card already has h3 */
.independence-card__ticker[b-rnavd9dv2a]  .brands-pane h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Per-row height — enough for the tallest scaled logo (codesys at 2.05× × 32px ≈ 66px).
   The per-row cap stays below ~72px so stacking two rows doesn't explode the card height. */
.independence-card__ticker[b-rnavd9dv2a]  .brands-ticker {
    position: relative;
    width: 100%;
    height: clamp(64px, 5.5vw, 72px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-ticker-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    width: max-content;
    will-change: transform;
    /* Animation is set per-row (top scrolls one way, bottom the other). */
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-ticker-track.is-js-marquee {
    animation: none;
}

/* Top row — logos flow right→left (classic marquee direction). */
.independence-card__ticker-row--top[b-rnavd9dv2a]  .brands-ticker-track {
    animation: homeIndepTickerScrollLeft-b-rnavd9dv2a 34s linear infinite;
}

/* Bottom row — logos flow left→right (reverse).
   Duration = top's × (bottom-items / top-items) = 34s × 4/5 = 27.2s.
   That keeps the pixel-per-second scroll speed identical between rows
   despite the shorter run (each row's animation travels exactly one
   run width = translate -50%, so duration must scale with that width). */
.independence-card__ticker-row--bottom[b-rnavd9dv2a]  .brands-ticker-track {
    animation: homeIndepTickerScrollRight-b-rnavd9dv2a 27.2s linear infinite;
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-ticker-run {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hardware-logo-gap);
    padding: 0.1rem 0;
    padding-right: var(--hardware-logo-gap);
    flex-shrink: 0;
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item {
    --hardware-logo-scale: 1;
    --hardware-logo-local-gap: 0px;
    height: var(--hardware-logo-slot-h);
    min-height: var(--hardware-logo-slot-h);
    max-height: var(--hardware-logo-slot-h);
    width: auto;
    min-width: max-content;
    padding-inline: var(--hardware-logo-side-pad);
    margin-inline: var(--hardware-logo-local-gap);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex: 0 0 auto;
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item img {
    max-height: 100%;
    height: auto;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transform: scale(var(--hardware-logo-scale));
    transform-origin: center center;
    opacity: var(--hardware-logo-opacity);
    filter: brightness(0) invert(1) saturate(0) contrast(1.05);
    transition: opacity 220ms ease;
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item:hover img {
    opacity: 1;
}

.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-beckhoff { --hardware-logo-scale: var(--logo-beckhoff-scale); --hardware-logo-local-gap: var(--logo-beckhoff-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-csharp { --hardware-logo-scale: var(--logo-csharp-scale); --hardware-logo-local-gap: var(--logo-csharp-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-codesys { --hardware-logo-scale: var(--logo-codesys-scale); --hardware-logo-local-gap: var(--logo-codesys-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-ctrlx { --hardware-logo-scale: var(--logo-ctrlx-scale); --hardware-logo-local-gap: var(--logo-ctrlx-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-mitsubishi { --hardware-logo-scale: var(--logo-mitsubishi-scale); --hardware-logo-local-gap: var(--logo-mitsubishi-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-phoenix { --hardware-logo-scale: var(--logo-phoenix-scale); --hardware-logo-local-gap: var(--logo-phoenix-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-rockwell { --hardware-logo-scale: var(--logo-rockwell-scale); --hardware-logo-local-gap: var(--logo-rockwell-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-saia { --hardware-logo-scale: var(--logo-saia-scale); --hardware-logo-local-gap: var(--logo-saia-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-siemens { --hardware-logo-scale: var(--logo-siemens-scale); --hardware-logo-local-gap: var(--logo-siemens-pad); }
.independence-card__ticker[b-rnavd9dv2a]  .brands-logo-item.logo-weidmuller { --hardware-logo-scale: var(--logo-weidmuller-scale); --hardware-logo-local-gap: var(--logo-weidmuller-pad); }

/* -50% shift = exactly one run (the track contains two identical runs), so the
   animation wraps pixel-perfectly seamlessly in either direction. */
@keyframes homeIndepTickerScrollLeft-b-rnavd9dv2a {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes homeIndepTickerScrollRight-b-rnavd9dv2a {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .independence-card__ticker-row--top[b-rnavd9dv2a]  .brands-ticker-track,
    .independence-card__ticker-row--bottom[b-rnavd9dv2a]  .brands-ticker-track {
        animation: none;
    }
}

@media (max-width: 960px) {
    .independence-card--hardware[b-rnavd9dv2a] {
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2.5vw, 1.4rem);
    }

    .independence-card--hardware .independence-card__ticker[b-rnavd9dv2a] {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: clamp(0.9rem, 2.2vw, 1.2rem);
    }
}

@media (max-width: 640px) {
    .independence-card--hardware[b-rnavd9dv2a] {
        --hardware-logo-gap: 1.25rem;
    }
}

/* ── Mobile landscape (phones rotated sideways) ─────────────────────────
   Short viewport (≤ 500px tall) but wide aspect (~640–930px). The 960px
   breakpoint above collapses the grid to 2 columns, which leaves card 03
   alone in the left cell with empty space beside it — the row reads as
   off-balance against the centered section header. Restore the desktop
   3+1 layout (three small cards side-by-side, hardware card full-width
   below) and tighten card chrome so all three fit at landscape widths
   without overflowing the short viewport. */
@media (orientation: landscape) and (max-height: 500px) {
    .independence-grid[b-rnavd9dv2a] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.55rem, 1.4vw, 0.95rem);
    }

    .independence-card[b-rnavd9dv2a] {
        padding: clamp(0.9rem, 1.8vw, 1.25rem);
        padding-top: clamp(1.25rem, 2.2vw, 1.55rem);
    }

    .independence-card h3[b-rnavd9dv2a] {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
        margin-bottom: 0.45rem;
    }

    .independence-card p[b-rnavd9dv2a] {
        font-size: clamp(0.78rem, 1.6vw, 0.9rem);
        line-height: 1.5;
    }

    .independence-card__icon[b-rnavd9dv2a] {
        width: 18px;
        height: 18px;
        margin-bottom: 0.55rem;
    }

    .independence-card__number[b-rnavd9dv2a] {
        top: clamp(0.95rem, 1.8vw, 1.25rem);
        right: clamp(0.9rem, 1.8vw, 1.25rem);
        font-size: 0.7rem;
    }

    .independence-head[b-rnavd9dv2a] {
        margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
    }

    /* Hardware card stays single-column-stacked (copy on top, ticker below)
       inherited from the 960px rule, but tighten the inner gap so the whole
       wide card stays within one landscape screen. */
    .independence-card--hardware[b-rnavd9dv2a] {
        gap: clamp(0.7rem, 1.6vw, 1.1rem);
    }

    .independence-card--hardware .independence-card__copy h3[b-rnavd9dv2a] {
        font-size: clamp(1rem, 2.2vw, 1.2rem);
        margin-bottom: 0.4rem;
    }

    .independence-card--hardware .independence-card__copy p[b-rnavd9dv2a] {
        font-size: clamp(0.8rem, 1.7vw, 0.92rem);
        line-height: 1.5;
    }

    /* Compact ticker rows so two stacked rows + copy still fit. */
    .independence-card__ticker[b-rnavd9dv2a]  .brands-ticker {
        height: clamp(40px, 4.4vh, 56px);
    }
}
/* /Components/HomeNewsSection.razor.rz.scp.css */
/* ── Carousel layout ─────────────────────────── */

.news-carousel[b-0vth4u2rar] {
    --news-visible-cards: 3;
    --news-card-min-width: 280px;
    --news-carousel-gap: clamp(1rem, 2vw, 1.5rem);
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.news-carousel--podcast[b-0vth4u2rar] {
    --news-visible-cards: 2;
}

/* Viewport clips the overflowing track and acts as the container
   reference for cqi units used in card widths. */
.news-carousel__viewport[b-0vth4u2rar] {
    overflow: hidden;
    container-type: inline-size;
}

.news-carousel__track[b-0vth4u2rar] {
    display: flex;
    gap: var(--news-carousel-gap);
}

/* Cards use cqi so their width is relative to the viewport width,
   not the (wider) track. */
.news-embed-card[b-0vth4u2rar] {
    flex: none;
    width: calc(
        (100cqi - (var(--news-visible-cards) - 1) * var(--news-carousel-gap))
        / var(--news-visible-cards)
    );
}

.news-embed-card__frame[b-0vth4u2rar] {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 18px 40px rgba(3, 10, 28, 0.35);
}

/* Rotating top accent — blue/red/green cycle across cards */
.news-embed-card__frame[b-0vth4u2rar]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.85) 0%, rgba(31, 156, 216, 0.1) 70%, transparent 100%);
}

.news-embed-card:nth-child(3n+2) .news-embed-card__frame[b-0vth4u2rar]::after {
    background: linear-gradient(90deg, rgba(226, 7, 23, 0.8) 0%, rgba(226, 7, 23, 0.1) 70%, transparent 100%);
}

.news-embed-card:nth-child(3n+3) .news-embed-card__frame[b-0vth4u2rar]::after {
    background: linear-gradient(90deg, rgba(59, 170, 53, 0.8) 0%, rgba(59, 170, 53, 0.1) 70%, transparent 100%);
}

.news-embed-card__frame[b-0vth4u2rar]::before {
    content: "";
    display: block;
    padding-top: 116%;
}

.news-embed-card__frame iframe[b-0vth4u2rar] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
    border-radius: inherit;
}

/* ── Arrow buttons ───────────────────────────── */

.news-carousel__btn[b-0vth4u2rar] {
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(31, 156, 216, 0.25);
    background: rgba(31, 156, 216, 0.06);
    color: #e8f0ff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
    transition: background 200ms ease, border-color 200ms ease;
}

.news-carousel__btn:hover:not(:disabled)[b-0vth4u2rar] {
    background: rgba(31, 156, 216, 0.14);
    border-color: rgba(31, 156, 216, 0.5);
}

.news-carousel__btn:disabled[b-0vth4u2rar] {
    opacity: 0.3;
    cursor: default;
}

.news-carousel__btn svg[b-0vth4u2rar] {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Section eyebrows (YouTube / LinkedIn / Podcast) ────── */

.news-section[b-0vth4u2rar] {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.news-section__eyebrow[b-0vth4u2rar] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    color: #1F9CD8;
    opacity: 0.9;
}

/* YouTube first (red, brand-aligned), LinkedIn keeps the default blue,
   Podcast (3rd) goes green. nth-of-type counts <div> siblings; the
   SectionHeader renders a <header>, so it's excluded from the count. */
.news-section:nth-of-type(1) .news-section__eyebrow[b-0vth4u2rar] { color: rgba(226, 7, 23, 0.9); }
.news-section:nth-of-type(3) .news-section__eyebrow[b-0vth4u2rar] { color: rgba(59, 170, 53, 0.9); }

.news-section__eyebrow svg[b-0vth4u2rar] {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    flex: none;
}

/* ── YouTube grid ────────────────────────────── */

.news-youtube-grid[b-0vth4u2rar] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

.news-youtube-frame[b-0vth4u2rar] {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(3, 10, 28, 0.24);
}

.news-youtube-frame[b-0vth4u2rar]::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
}

.news-youtube-frame iframe[b-0vth4u2rar] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
}

/* ── Podcast carousel overrides ──────────────── */

/* Podcast cards use a fixed 152px height instead of an aspect-ratio box. */
.news-embed-card--podcast .news-embed-card__frame[b-0vth4u2rar]::before {
    display: none;
}

.news-embed-card--podcast .news-embed-card__frame iframe[b-0vth4u2rar] {
    position: static;
    height: 152px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(3, 10, 28, 0.2);
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 720px) {
    .news-carousel[b-0vth4u2rar] {
        --news-visible-cards: 1;
        grid-template-columns: 2.5rem 1fr 2.5rem;
        gap: 0.4rem;
    }

    .news-carousel__btn[b-0vth4u2rar] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .news-carousel__btn svg[b-0vth4u2rar] {
        width: 1rem;
        height: 1rem;
    }

    .news-embed-card__frame[b-0vth4u2rar]::before {
        padding-top: 126%;
    }

    .news-youtube-grid[b-0vth4u2rar] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .news-carousel[b-0vth4u2rar] {
        --news-visible-cards: 2;
    }

    .news-youtube-grid[b-0vth4u2rar] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/HomeNumbersSection.razor.rz.scp.css */
/* ── Hairline grid — mirrors the outcomes section's clean treatment.
   Top + left border on the grid, bottom + right border on each cell
   produces a single-line lattice without doubled hairlines. */
.home-numbers__grid[b-2b8bd95gfl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-subtle);
}

.home-numbers__item[b-2b8bd95gfl] {
    padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.6rem, 2.8vw, 2.4rem);
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    transition: background 220ms ease;
}

.home-numbers__item:hover[b-2b8bd95gfl] {
    background: rgba(124, 236, 255, 0.025);
}

/* ── Number + unit ─────────────────────────────────────────────────
   Tabular-nums keeps digit width stable during the count-up so the
   row doesn't reflow as the value widens. */
.home-numbers__value[b-2b8bd95gfl] {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    line-height: 1;
    color: var(--text-primary, #ffffff);
    font-variant-numeric: tabular-nums;
}

.home-numbers__count[b-2b8bd95gfl] {
    font-size: clamp(2.6rem, 5.5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #ffffff;
    transition: color 220ms ease;
}

.home-numbers__item:hover .home-numbers__count[b-2b8bd95gfl] {
    color: var(--accent-cyan, #7cecff);
}

.home-numbers__unit[b-2b8bd95gfl] {
    font-size: clamp(0.95rem, 1.45vw, 1.15rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text-muted, rgba(239, 243, 255, 0.55));
}

/* ── Label ──────────────────────────────────────────────────────── */
.home-numbers__label[b-2b8bd95gfl] {
    margin: 0;
    color: var(--text-secondary, rgba(239, 243, 255, 0.7));
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ── Reveal ─────────────────────────────────────────────────────── */
.home-numbers__item[b-2b8bd95gfl] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity    0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
        transform  0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
        background 220ms ease;
}

.home-numbers__item.is-visible[b-2b8bd95gfl] {
    opacity: 1;
    transform: translateY(0);
}

/* ── Visually hidden — full sentence for screen readers ─────────── */
.home-numbers .visually-hidden[b-2b8bd95gfl] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .home-numbers__grid[b-2b8bd95gfl] {
        grid-template-columns: 1fr;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .home-numbers__item[b-2b8bd95gfl] {
        opacity: 1;
        transform: none;
        transition: background 220ms ease;
    }
}
/* /Components/HomeStackedCardsSection.razor.rz.scp.css */
/* ── Outcome section ──────────────────────────────────────────────
   Sits between HomeProblemSection (--bg-0) and HomeDevelopmentFlowSection
   (--bg-0). Uses --bg-1 (home-section--mid) so it contrasts with both
   neighbouring dark sections. Three benefit cards laid out side-by-side,
   each carrying a brand accent: Cordis red (courage), Cordis blue
   (ownership), Cordis green (longevity).
   ─────────────────────────────────────────────────────────────────── */

.home-outcome .section-header[b-xh9p34xy5c] {
    margin-bottom: calc(var(--section-gap) * 0.62);
}

.outcome-head[b-xh9p34xy5c] {
    width: min(820px, 92vw);
    margin-inline: auto;
}

.outcome-head .section-h2[b-xh9p34xy5c] {
    font-size: clamp(2.1rem, 3.8vw, 3.4rem);
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.outcome-head .section-h2 span[b-xh9p34xy5c] {
    display: block;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .outcome-head .section-h2 span[b-xh9p34xy5c] {
        white-space: normal;
    }
}

/* ── Card grid ─────────────────────────────────────────────────── */

.outcome-grid[b-xh9p34xy5c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);
    align-items: stretch;
}

@media (max-width: 960px) {
    .outcome-grid[b-xh9p34xy5c] {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
    }
}

/* ── Card base — unified navy surface with subtle accent bar ── */

.outcome-card[b-xh9p34xy5c] {
    position: relative;
    padding: clamp(1.9rem, 2.6vw, 2.4rem);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        linear-gradient(180deg, rgba(23, 36, 68, 0.92) 0%, rgba(14, 26, 50, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 64px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: clamp(0.95rem, 1.3vw, 1.2rem);
    overflow: hidden;
    isolation: isolate;
    cursor: default;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 360ms ease,
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Top hairline accent — brand-coloured per card */
.outcome-card[b-xh9p34xy5c]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 20px 20px 0 0;
    z-index: 2;
    transition: background 420ms ease, height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Inner radial wash — matches Data Foundation column treatment */
.outcome-card[b-xh9p34xy5c]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
    transition: background 480ms ease;
}

.outcome-card > *[b-xh9p34xy5c] {
    position: relative;
    z-index: 1;
}

/* Card 1 — "Change without fear"      — Cordis red   (courage)
   Card 2 — "Your knowledge"           — Cordis blue  (trust / ownership)
   Card 3 — "Built for the life"       — Cordis green (longevity / growth) */
.outcome-card--1[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(226, 7, 23, 0.8) 0%, rgba(226, 7, 23, 0.12) 100%); }
.outcome-card--2[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(31, 156, 216, 0.95) 0%, rgba(31, 156, 216, 0.12) 100%); }
.outcome-card--3[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(59, 170, 53, 0.85) 0%, rgba(59, 170, 53, 0.12) 100%); }

.outcome-card--1[b-xh9p34xy5c]::after { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(226, 7, 23, 0.05) 0%, transparent 60%); }
.outcome-card--2[b-xh9p34xy5c]::after { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 156, 216, 0.06) 0%, transparent 60%); }
.outcome-card--3[b-xh9p34xy5c]::after { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(59, 170, 53, 0.055) 0%, transparent 60%); }

/* ── Icon ─────────────────────────────────────────────────────── */

.outcome-card__icon-wrap[b-xh9p34xy5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    transition:
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
        background 420ms ease,
        border-color 420ms ease;
}

.outcome-card--1 .outcome-card__icon-wrap[b-xh9p34xy5c] {
    background: rgba(226, 7, 23, 0.08);
    border-color: rgba(226, 7, 23, 0.25);
}

.outcome-card--2 .outcome-card__icon-wrap[b-xh9p34xy5c] {
    background: rgba(31, 156, 216, 0.1);
    border-color: rgba(31, 156, 216, 0.28);
}

.outcome-card--3 .outcome-card__icon-wrap[b-xh9p34xy5c] {
    background: rgba(59, 170, 53, 0.08);
    border-color: rgba(59, 170, 53, 0.3);
}

.outcome-card__icon[b-xh9p34xy5c] {
    width: 1.4rem;
    height: 1.4rem;
    color: rgba(255, 255, 255, 0.88);
    transition: color 420ms ease;
}

.outcome-card--1 .outcome-card__icon[b-xh9p34xy5c] { color: rgba(255, 122, 109, 0.95); }
.outcome-card--2 .outcome-card__icon[b-xh9p34xy5c] { color: #4db4e5; }
.outcome-card--3 .outcome-card__icon[b-xh9p34xy5c] { color: rgba(120, 200, 115, 0.95); }

/* ── Hover interactions ────────────────────────────────────────
   Card lifts, shadow deepens, brand-colour border picks up,
   the top accent intensifies and the corner wash expands —
   icon wrap scales slightly and saturates to its brand hue.
   ─────────────────────────────────────────────────────────── */

.outcome-card:hover[b-xh9p34xy5c] {
    transform: translateY(-6px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 36px 88px rgba(0, 0, 0, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.3);
}

.outcome-card:hover[b-xh9p34xy5c]::before {
    height: 3px;
}

.outcome-card--1:hover[b-xh9p34xy5c] { border-color: rgba(226, 7, 23, 0.42); }
.outcome-card--2:hover[b-xh9p34xy5c] { border-color: rgba(31, 156, 216, 0.45); }
.outcome-card--3:hover[b-xh9p34xy5c] { border-color: rgba(59, 170, 53, 0.45); }

.outcome-card--1:hover[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(255, 60, 75, 1) 0%, rgba(226, 7, 23, 0.55) 100%); }
.outcome-card--2:hover[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(80, 195, 245, 1) 0%, rgba(31, 156, 216, 0.6) 100%); }
.outcome-card--3:hover[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(120, 220, 115, 1) 0%, rgba(59, 170, 53, 0.55) 100%); }

.outcome-card--1:hover[b-xh9p34xy5c]::after { background: radial-gradient(ellipse 110% 85% at 0% 0%, rgba(226, 7, 23, 0.13) 0%, transparent 68%); }
.outcome-card--2:hover[b-xh9p34xy5c]::after { background: radial-gradient(ellipse 110% 85% at 0% 0%, rgba(31, 156, 216, 0.15) 0%, transparent 68%); }
.outcome-card--3:hover[b-xh9p34xy5c]::after { background: radial-gradient(ellipse 110% 85% at 0% 0%, rgba(59, 170, 53, 0.14) 0%, transparent 68%); }

.outcome-card:hover .outcome-card__icon-wrap[b-xh9p34xy5c] {
    transform: scale(1.08) rotate(-3deg);
}

.outcome-card--1:hover .outcome-card__icon-wrap[b-xh9p34xy5c] {
    background: rgba(226, 7, 23, 0.16);
    border-color: rgba(226, 7, 23, 0.5);
}

.outcome-card--2:hover .outcome-card__icon-wrap[b-xh9p34xy5c] {
    background: rgba(31, 156, 216, 0.18);
    border-color: rgba(31, 156, 216, 0.52);
}

.outcome-card--3:hover .outcome-card__icon-wrap[b-xh9p34xy5c] {
    background: rgba(59, 170, 53, 0.16);
    border-color: rgba(59, 170, 53, 0.55);
}

.outcome-card--1:hover .outcome-card__icon[b-xh9p34xy5c] { color: rgba(255, 150, 140, 1); }
.outcome-card--2:hover .outcome-card__icon[b-xh9p34xy5c] { color: #7accef; }
.outcome-card--3:hover .outcome-card__icon[b-xh9p34xy5c] { color: rgba(150, 225, 145, 1); }

@media (prefers-reduced-motion: reduce) {
    .outcome-card[b-xh9p34xy5c],
    .outcome-card[b-xh9p34xy5c]::before,
    .outcome-card[b-xh9p34xy5c]::after,
    .outcome-card__icon-wrap[b-xh9p34xy5c],
    .outcome-card__icon[b-xh9p34xy5c] {
        transition: none;
    }

    .outcome-card:hover[b-xh9p34xy5c],
    .outcome-card:hover .outcome-card__icon-wrap[b-xh9p34xy5c] {
        transform: none;
    }
}

/* ── Typography ──────────────────────────────────────────────── */

.outcome-card__headline[b-xh9p34xy5c] {
    margin: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 800;
    line-height: 1.18;
    color: #ffffff;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.outcome-card__body[b-xh9p34xy5c] {
    margin: 0;
    font-size: clamp(0.98rem, 1.15vw, 1.05rem);
    line-height: 1.7;
    color: rgba(239, 243, 255, 0.72);
    text-wrap: pretty;
}
/* /Components/HomeVModelHero.razor.rz.scp.css */
.home-vmodel-hero[b-fojddur1jp] {
    --vm-bg-start: #0c1428;
    --vm-bg-mid: #0f1e3a;
    --vm-bg-end: #132245;
    --vm-text: #f4fbff;
    --vm-text-soft: rgba(220, 240, 255, 0.76);
    --vm-border: rgba(155, 225, 255, 0.14);
    --vm-cyan: rgba(124, 236, 255, 0.42);
    --vm-flow: #ff7a5b;
    --vm-flow-soft: rgba(255, 122, 91, 0.22);
    --vm-flow-deep: rgba(255, 118, 88, 0.78);
    --vm-trail: rgba(245, 249, 255, 0.72);
    --vm-trail-soft: rgba(226, 239, 255, 0.28);
    --vm-panel-bg: linear-gradient(180deg, rgba(9, 24, 46, 0.34), rgba(7, 18, 35, 0.56));
    --vm-rhythm: 25s;
    --vm-flow-duration: 20s;
    --vm-rest-duration: 5s;
    --vm-blood-cycle: 25s;
    --vm-beat-duration: 1.4s;
    --vm-shadow: 0 30px 80px rgba(2, 10, 24, 0.42);
    position: relative;
    overflow: clip;
    padding: 0;
    background: #0c1428;
    color: var(--vm-text);
}


.cordis-icon-bg[b-fojddur1jp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Fallback only — the real value is an inline style on the bg div in
       HomeVModelHero.razor (kept there so Blazor's enhanced-nav diff sees
       template == DOM and never reverts it). */
    height: calc(100vh - 200px);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* === Leaf hover spotlight ============================================
   Pointing at a petal lifts the opacity of three things bound by the
   same data-leaf-id: the petal fill itself, every fragment pill inside
   the matching [data-pill-group], and the petal's word label inside
   [data-leaf-labels]. The SVG (and its container) keep pointer-events:
   none for everything else, so only the petal shapes hit-test —
   labels/pills sitting on top stay transparent to the pointer and the
   leaf below them still receives the hover.

   The first .home-vmodel-hero__inner sits at z-index:1 above the icon
   (z-index:0); its full bounding box (including the headline/subhead/
   cta-group rectangles) would otherwise eat every cursor before it
   could reach a leaf below. We make the text wrappers transparent to
   the pointer and re-enable hit-testing only on the actually
   interactive children (CTAs, partner strip). */
.home-vmodel-hero .home-vmodel-hero__inner:has(.hero-top-layer)[b-fojddur1jp],
.home-vmodel-hero .hero-top-layer[b-fojddur1jp],
.home-vmodel-hero .hero-top-layer__content[b-fojddur1jp],
.home-vmodel-hero .hero-cycling-headline[b-fojddur1jp],
.home-vmodel-hero .hero-top-layer__subheadline[b-fojddur1jp],
.home-vmodel-hero .hero-top-layer__cta-group[b-fojddur1jp] {
    pointer-events: none;
}
.home-vmodel-hero .hero-cta[b-fojddur1jp],
.home-vmodel-hero .hero-top-layer__partners[b-fojddur1jp] {
    pointer-events: auto;
}

.cordis-icon-bg .cib-leaf[b-fojddur1jp] {
    pointer-events: visiblePainted;
    cursor: pointer;
    transition: opacity 280ms ease-out;
}

.cordis-icon-bg [data-pill-group] > g[b-fojddur1jp] {
    transition: opacity 280ms ease-out;
}

.cordis-icon-bg [data-leaf-labels] text[b-fojddur1jp] {
    transition: fill 280ms ease-out;
}

/* Red petal — Portable */
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="red"]:hover) .cib-leaf[data-leaf-id="red"][b-fojddur1jp] { opacity: 0.32; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="red"]:hover) [data-pill-group="red"] > g[b-fojddur1jp] { opacity: 1; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="red"]:hover) [data-leaf-labels] [data-leaf-id="red"] text[b-fojddur1jp] { fill: rgba(244, 251, 255, 0.55); }

/* Deep blue petal — Platform */
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue1"]:hover) .cib-leaf[data-leaf-id="blue1"][b-fojddur1jp] { opacity: 0.28; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue1"]:hover) [data-pill-group="blue1"] > g[b-fojddur1jp] { opacity: 1; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue1"]:hover) [data-leaf-labels] [data-leaf-id="blue1"] text[b-fojddur1jp] { fill: rgba(244, 251, 255, 0.55); }

/* Mid blue petal — Collaboration */
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue2"]:hover) .cib-leaf[data-leaf-id="blue2"][b-fojddur1jp] { opacity: 0.28; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue2"]:hover) [data-pill-group="blue2"] > g[b-fojddur1jp] { opacity: 1; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue2"]:hover) [data-leaf-labels] [data-leaf-id="blue2"] text[b-fojddur1jp] { fill: rgba(244, 251, 255, 0.55); }

/* Light blue petal — Lifecycle */
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue3"]:hover) .cib-leaf[data-leaf-id="blue3"][b-fojddur1jp] { opacity: 0.28; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue3"]:hover) [data-pill-group="blue3"] > g[b-fojddur1jp] { opacity: 1; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="blue3"]:hover) [data-leaf-labels] [data-leaf-id="blue3"] text[b-fojddur1jp] { fill: rgba(244, 251, 255, 0.55); }

/* Green petal — Data */
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="green"]:hover) .cib-leaf[data-leaf-id="green"][b-fojddur1jp] { opacity: 0.32; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="green"]:hover) [data-pill-group="green"] > g[b-fojddur1jp] { opacity: 1; }
.cordis-icon-bg:has(.cib-leaf[data-leaf-id="green"]:hover) [data-leaf-labels] [data-leaf-id="green"] text[b-fojddur1jp] { fill: rgba(244, 251, 255, 0.55); }

.home-vmodel-hero[b-fojddur1jp]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(3.5rem, 8vw, 6rem);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 20, 40, 0) 0%, rgba(12, 20, 40, 0.48) 52%, rgba(12, 20, 40, 0.88) 100%);
}

.home-vmodel-hero__glow[b-fojddur1jp] {
    position: absolute;
    width: 36rem;
    height: 36rem;
    border-radius: 50%;
    filter: blur(36px);
    opacity: 0.4;
    pointer-events: none;
}

.home-vmodel-hero__glow--left[b-fojddur1jp] {
    top: -12rem;
    left: -12rem;
    background: radial-gradient(circle, rgba(124, 236, 255, 0.28) 0%, rgba(124, 236, 255, 0) 70%);
}

/* Cordis brand blue on the right — anchors the hero in the Cordis palette
   and visually connects to the same brand-blue used throughout the page body. */
.home-vmodel-hero__glow--right[b-fojddur1jp] {
    right: -14rem;
    bottom: -12rem;
    background: radial-gradient(circle, rgba(31, 156, 216, 0.32) 0%, rgba(31, 156, 216, 0) 70%);
}

.home-vmodel-hero__inner[b-fojddur1jp] {
    position: relative;
    z-index: 1;
    /* Capped at 88vw (instead of 100% - 2rem) so the V-model's rotated group
       labels — which project ~10% past the container edge by design — always
       have room in the viewport margin. Previously the container hit the
       viewport when the outer CARDS (Requirements / Validation) did, but the
       LABELS (especially "Verification & Validation") extend further, so the
       last letters were being clipped. Using 88vw starts the scale-down at
       the label boundary instead of the card boundary. */
    width: min(1380px, 88vw);
    margin: 0 auto;
}

.home-vmodel-hero__grid[b-fojddur1jp] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
    background-size: 48px 48px;
}

.hero-top-layer[b-fojddur1jp] {
    position: relative;
    /* JS (site-header.js → fitHero) sets an exact pixel height via style attribute
       equal to window.innerHeight (100vh). This calc() is the pre-JS fallback. */
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.hero-top-layer__content[b-fojddur1jp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1240px, 100%);
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: visible;
    outline: none;
    box-shadow: none;
    /* JS sets --content-spacer so the text block is vertically centered
       with the icon-bg area (which ends above the Trusted-by strip). */
    margin-bottom: var(--content-spacer, 0px);
}

.hero-top-layer__content[b-fojddur1jp]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: calc(100% + 120px);
    background: radial-gradient(
        ellipse 52% 60% at 50% 50%,
        rgba(5, 13, 26, 0.62) 0%,
        rgba(5, 13, 26, 0.48) 45%,
        rgba(5, 13, 26, 0.18) 78%,
        rgba(5, 13, 26, 0) 100%
    );
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

/* Cycling headline */
.hero-cycling-headline[b-fojddur1jp] {
    display: grid;
    grid-template: auto / 1fr;
    margin: 0 auto;
    width: 100%;
    font-size: clamp(3.35rem, 7.45vw, 6.85rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    outline: none;
    box-shadow: none;
}

.hero-cycling-slot[b-fojddur1jp] {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(60px);
    animation-duration: 13.5s;
    animation-timing-function: cubic-bezier(0.25, 0.6, 0.25, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    /* Negative delay so the cycle starts already past the slot-1 fade-in.
       At -0.5s the animation is at ~3.7% — slot 1 is fully visible at
       page load, no entrance fade. Subsequent cycles still cross-fade
       between slots 1 → 2 → 3 as before. */
    animation-delay: -0.5s;
}

.hero-cycling-slot--1[b-fojddur1jp] { animation-name: headline-cycle-1-b-fojddur1jp; }
.hero-cycling-slot--2[b-fojddur1jp] { animation-name: headline-cycle-2-b-fojddur1jp; }
.hero-cycling-slot--3[b-fojddur1jp] { animation-name: headline-cycle-3-b-fojddur1jp; }

/* "One model." is short enough to fit on one line on mobile while
   "Full lifecycle." and "Always yours." wrap to two. Force the same
   wrap on slot 1 below the mobile breakpoint so all three slots are
   the same height and the cycling animation stays visually steady. */
.hero-cycling-mobile-break[b-fojddur1jp] { display: none; }

@media (max-width: 640px) {
    .hero-cycling-mobile-break[b-fojddur1jp] { display: initial; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cycling-slot[b-fojddur1jp] { animation: none; }
    .hero-cycling-slot--1[b-fojddur1jp] { opacity: 1; transform: none; }
}

.hero-top-layer__cards[b-fojddur1jp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
    opacity: 0;
    margin-top: clamp(2.1rem, 4.5vw, 3.2rem);
    transform: translateY(18px);
    animation: hero-top-cards-in 720ms cubic-bezier(0.2, 0.7, 0.2, 1) 1.96s forwards;
}

.hero-top-layer__card[b-fojddur1jp] {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(19, 41, 73, 0.88) 0%, rgba(13, 29, 54, 0.94) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 42px rgba(2, 10, 24, 0.22);
    backdrop-filter: blur(12px);
    text-align: left;
    opacity: 0;
    transform: translateY(24px);
    animation: hero-top-card-in 640ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero-top-layer__card:nth-child(1)[b-fojddur1jp] { animation-delay: 2.06s; }
.hero-top-layer__card:nth-child(2)[b-fojddur1jp] { animation-delay: 2.24s; }
.hero-top-layer__card:nth-child(3)[b-fojddur1jp] { animation-delay: 2.42s; }

.hero-top-layer__card h2[b-fojddur1jp] {
    margin: 0 0 0.75rem;
    font-size: clamp(1.06rem, 1.35vw, 1.28rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #ffffff;
}

.hero-top-layer__card p[b-fojddur1jp] {
    margin: 0;
    font-size: clamp(1.05rem, 1.22vw, 1.18rem);
    line-height: 1.78;
    color: rgba(236, 243, 255, 0.8);
}

.hero-top-layer__subheadline[b-fojddur1jp] {
    width: min(42rem, 100%);
    margin: 0.5rem auto 0;
    font-size: clamp(1.18rem, 1.82vw, 1.38rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    font-style: normal;
    outline: none;
    box-shadow: none;
}

.hero-top-layer__challenger[b-fojddur1jp] {
    width: min(48rem, 100%);
    margin: clamp(0.9rem, 1.6vw, 1.1rem) auto 0;
    font-size: clamp(1.1rem, 1.55vw, 1.24rem);
    line-height: 1.72;
    color: #ffffff;
    font-weight: 400;
    font-style: normal;
    font-weight: 400;
    opacity: 0;
    transform: translateY(42px);
    animation: hero-top-clarifier-in-b-fojddur1jp 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 0.85s forwards;
    outline: none;
    box-shadow: none;
}

.hero-top-layer__cta-group[b-fojddur1jp] {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    outline: none;
    box-shadow: none;
}

.hero-cta[b-fojddur1jp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2.1rem;
    border-radius: 8px;
    font-size: clamp(0.93rem, 1.15vw, 1.06rem);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Primary CTA — Cordis brand blue with a cyan highlight gradient.
   Dark navy text for premium contrast. Soft cyan outer glow on hover
   ties the button into the hero's cyan/blue atmospheric glows. */
.hero-cta--primary[b-fojddur1jp] {
    background: linear-gradient(135deg, #1F9CD8 0%, #52c4ef 100%);
    color: #0a1020;
    border: 1px solid rgba(124, 236, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 18px rgba(31, 156, 216, 0.28);
}

.hero-cta--primary:hover[b-fojddur1jp],
.hero-cta--primary:focus-visible[b-fojddur1jp] {
    background: linear-gradient(135deg, #2ba8e3 0%, #7cecff 100%);
    color: #0a1020;
    border-color: rgba(124, 236, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 28px rgba(31, 156, 216, 0.45),
        0 0 24px rgba(124, 236, 255, 0.25);
    transform: translateY(-1px);
    outline: none;
}

.hero-cta--ghost[b-fojddur1jp] {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(239, 243, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.hero-cta--ghost:hover[b-fojddur1jp],
.hero-cta--ghost:focus-visible[b-fojddur1jp] {
    border-color: rgba(124, 236, 255, 0.6);
    color: #ffffff;
    background: rgba(124, 236, 255, 0.05);
    outline: none;
    box-shadow: none;
}

.hero[b-fojddur1jp] {
    position: relative;
    min-height: 100vh;
}

.hero-top-layer__partners[b-fojddur1jp] {
    /* Pinned to the very bottom of the 100vh hero section. */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 48px 0;
    box-sizing: border-box;
}

@keyframes hero-partners-fade-in-b-fojddur1jp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-top-layer__partners .partners-marquee[b-fojddur1jp] {
    margin-top: 0;
}

.hero-diagram-layer[b-fojddur1jp] {
    position: relative;
    /* Keep the V vertically centred in at least one viewport of height so it
       stops falling to the bottom at narrow widths (where the aspect-ratio
       makes the V much shorter than the surrounding section). */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ── Heart section (black interstitial between hero and V-model) ─────── */

.home-lead-statement[b-fojddur1jp] {
    position: relative;
    z-index: 2;
    width: 100%;
    justify-self: stretch;
    background: #000000;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 3rem);
    display: flex;
    justify-content: center;
}

.home-lead-statement__line[b-fojddur1jp] {
    margin: 0;
    max-width: min(60rem, 100%);
    text-align: center;
    font-size: clamp(1.35rem, 2.1vw, 1.7rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: #ffffff;
}

.home-heart-section[b-fojddur1jp] {
    position: relative;
    background: #000000;
    /* Tall enough for the sticky inner to dwell on screen well after
       the staggered text reveal completes (last paragraph: 0.3s delay
       + 0.95s transition ≈ 1.25s). At 240vh the opaque-mask scroll
       window is ~80vh — even a fast scroll keeps the text fully on
       screen long enough to read. */
    height: 240vh;
    box-sizing: border-box;
    width: 100%;
    justify-self: stretch;
    /* Fade size matches the JS reveal threshold in home-reveal.js
       (clamp(240px, 30vh, 480px)) so the text reveal triggers exactly
       when the section is fully inside the opaque zone. Upper bound
       480px restores the generous navy → black transition we had
       before; lower bound 240px keeps short landscape viewports from
       eating the entire section with mask. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black clamp(240px, 30vh, 480px),
        black calc(100% - clamp(240px, 30vh, 480px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black clamp(240px, 30vh, 480px),
        black calc(100% - clamp(240px, 30vh, 480px)),
        transparent 100%
    );
}

/* Sticky viewport pins the text block to the centre of the screen while
   the section scrolls past, so the user reads it without chasing it.
   Paragraphs handle their own opacity/transform animation (see below) —
   JS adds .is-revealed once the section is fully inside the opaque part
   of the mask (background is fully black). */
.home-heart-section__inner[b-fojddur1jp] {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    padding: 0 2rem;
    box-sizing: border-box;
    text-align: center;
}

.home-heart-section__p[b-fojddur1jp] {
    margin: 0;
    max-width: 760px;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.55;
    color: #ffffff;
    font-weight: 400;
    text-align: center;

    /* Default (out): sit 28px below final position, invisible. Faster,
       linear-ish exit so scrolling past doesn't feel sticky. */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.5s ease-out,
                transform 0.5s ease-out;
}

/* Revealed: slide up and fade in. Slower easing-out curve so it feels
   considered. Stagger the three paragraphs ~500ms apart so each is read
   as a separate beat before the next appears. */
.home-heart-section__inner.is-revealed .home-heart-section__p[b-fojddur1jp] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-heart-section__inner.is-revealed .home-heart-section__p:nth-child(2)[b-fojddur1jp] {
    transition-delay: 0.5s;
}

.home-heart-section__inner.is-revealed .home-heart-section__p:nth-child(3)[b-fojddur1jp] {
    transition-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
    .home-heart-section__p[b-fojddur1jp],
    .home-heart-section__inner.is-revealed .home-heart-section__p[b-fojddur1jp] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.home-heart-section__brand[b-fojddur1jp] {
    color: #1F9CD8;
}

.home-heart-section__heart[b-fojddur1jp] {
    color: #e20717;
}

/* Cycling headline keyframes — 13.5s cycle, 3 statements × 4.5s each */
/* Each statement: 0.5s fade-in, 3.5s hold, 0.5s fade-out              */

@keyframes headline-cycle-1-b-fojddur1jp {
    0%     { opacity: 0; transform: translateY(60px); }
    3.7%   { opacity: 1; transform: translateY(0); }
    29.6%  { opacity: 1; transform: translateY(0); }
    33.3%  { opacity: 0; transform: translateY(-24px); }
    34%    { opacity: 0; transform: translateY(60px); }
    100%   { opacity: 0; transform: translateY(60px); }
}

@keyframes headline-cycle-2-b-fojddur1jp {
    0%     { opacity: 0; transform: translateY(60px); }
    33.3%  { opacity: 0; transform: translateY(60px); }
    37%    { opacity: 1; transform: translateY(0); }
    62.9%  { opacity: 1; transform: translateY(0); }
    66.6%  { opacity: 0; transform: translateY(-24px); }
    67%    { opacity: 0; transform: translateY(60px); }
    100%   { opacity: 0; transform: translateY(60px); }
}

@keyframes headline-cycle-3-b-fojddur1jp {
    0%     { opacity: 0; transform: translateY(60px); }
    66.6%  { opacity: 0; transform: translateY(60px); }
    70.4%  { opacity: 1; transform: translateY(0); }
    96.3%  { opacity: 1; transform: translateY(0); }
    99.9%  { opacity: 0; transform: translateY(-24px); }
    100%   { opacity: 0; transform: translateY(60px); }
}

@keyframes hero-top-clarifier-in-b-fojddur1jp {
    from {
        opacity: 0;
        transform: translateY(42px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vmodel-system[b-fojddur1jp] {
    /* only edit these */
    --vmodel-x-gap: 11%;
    --vmodel-y-gap: 19%;
    /* layout anchors */
    --vmodel-top-y: 10%;
    --vmodel-base-x: 50%;
    /* node positions */
    --vmodel-requirements-x: calc(var(--vmodel-base-x) - (3.8 * var(--vmodel-x-gap)));
    --vmodel-realization-x: calc(var(--vmodel-base-x) - (3.45 * var(--vmodel-x-gap)));
    --vmodel-software-x: calc(var(--vmodel-base-x) - (2.6 * var(--vmodel-x-gap)));
    --vmodel-behavior-left-x: calc(var(--vmodel-base-x) - (1.3 * var(--vmodel-x-gap)));
    --vmodel-executable-x: 50%;
    --vmodel-behavior-right-x: calc(var(--vmodel-base-x) + (1.3 * var(--vmodel-x-gap)));
    --vmodel-verification-b-x: calc(var(--vmodel-base-x) + (2.6 * var(--vmodel-x-gap)));
    --vmodel-verification-a-x: calc(var(--vmodel-base-x) + (3.45 * var(--vmodel-x-gap)));
    --vmodel-validation-x: calc(var(--vmodel-base-x) + (3.8 * var(--vmodel-x-gap)));
    --vmodel-requirements-y: var(--vmodel-top-y);
    --vmodel-validation-y: var(--vmodel-top-y);
    --vmodel-realization-y: calc(var(--vmodel-top-y) + (1 * var(--vmodel-y-gap)));
    --vmodel-verification-a-y: calc(var(--vmodel-top-y) + (1 * var(--vmodel-y-gap)));
    --vmodel-software-y: calc(var(--vmodel-top-y) + (2 * var(--vmodel-y-gap)));
    --vmodel-verification-b-y: calc(var(--vmodel-top-y) + (2 * var(--vmodel-y-gap)));
    --vmodel-behavior-left-y: calc(var(--vmodel-top-y) + (3 * var(--vmodel-y-gap)));
    --vmodel-behavior-right-y: calc(var(--vmodel-top-y) + (3 * var(--vmodel-y-gap)));
    --vmodel-executable-y: calc(var(--vmodel-top-y) + (4 * var(--vmodel-y-gap)));
    /* center and bounds */
    --vmodel-center-x: 50%;
    --vmodel-center-y: calc(var(--vmodel-top-y) + (2.15 * var(--vmodel-y-gap)));
    /* logo should sit a bit higher */
    --vmodel-logo-y: calc(var(--vmodel-center-y) - (1.5 * var(--vmodel-y-gap)));
    /* heart size */
    --vmodel-heart-width: calc(11 * var(--vmodel-x-gap));
    --vmodel-heart-height: calc(6 * var(--vmodel-y-gap));
    --vmodel-heart-top: calc(var(--vmodel-top-y) - ( 1.3 * var(--vmodel-y-gap)));
    /* icon transform controls */
    --vmodel-icon-scale: 1.8;
    --vmodel-icon-x-offset: 0px;
    /* Icon vertical nudge expressed as a fraction of container width so it
       stays the same *proportion* of the card at every width. 1.81cqi equals
       25px at the 1380px design width, matching the previous fixed offset. */
    --vmodel-icon-y-offset: 1.81cqi;
    /* Card + logo sizing scales with the container width via cqi, so the heart
       path (also container-relative) and the 9 cards stay proportional at every
       width. rem caps preserve the original look at the 1380px design width. */
    --vmodel-node-width: min(13.1rem, 15.2cqi);
    --vmodel-node-height: min(10rem, 11.6cqi);
    container-type: inline-size;
    position: relative;
    /* Width must be explicit because the flex-centred parent would otherwise
       collapse this element to its (absolutely-positioned) children's intrinsic
       width — which is zero. Combined with aspect-ratio, this also sets height.
       80% shrinks the V-model proportionally: cqi units, %-offsets, and the
       heart-path SVG all resolve from this element's own inline size, so every
       child scales in lockstep with no other edits needed. */
    width: 80%;
    margin-inline: auto;
    /* Lock the V-model to its design aspect ratio so width + height scale
       together. With cqi-sized cards and %-positioned stages, this keeps the
       heart + 9 boxes visually identical at every viewport width. */
    aspect-ratio: 1380 / 1120;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    animation: vm-rise-b-fojddur1jp 820ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both;
}

.vmodel-system[b-fojddur1jp]::before {
    display: none;
}

.vmodel-system__paths[b-fojddur1jp] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vmodel-system__heart-path[b-fojddur1jp] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.vmodel-system__group-label[b-fojddur1jp] {
    position: absolute;
    z-index: 3;
    display: inline-block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vm-text-soft);
    /* Font tightened (previously min(1.85rem, 2.14cqi)) so the longer right
       label fits within the available viewport margin at narrow widths. Scales
       with the container via cqi, caps at the design size at wide widths. */
    font-size: min(1.5rem, 1.75cqi);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: none;
    pointer-events: none;
    white-space: nowrap;
    transform-origin: center;
    text-shadow: 0 1px 10px rgba(1, 10, 25, 0.28);
}

/* Labels sit OUTSIDE the V's content area so they never overlap the 9 cards
   (`left/right: -10%` parks them past the container edge, and the translate
   pushes them down along the V diagonal). The outside-container overflow lands
   in page margins at wide widths. */
.vmodel-system__group-label--left[b-fojddur1jp] {
    top: min(8.2rem, 9.5cqi);
    left: -10%;
    transform: translate(50%, 1050%) rotate(56deg);
}

.vmodel-system__group-label--right[b-fojddur1jp] {
    top: min(8.2rem, 9.5cqi);
    right: -10%;
    transform: translate(3%, 1000%) rotate(-56deg);
}

.vmodel-system__heart-path .heart-fill--flash[b-fojddur1jp] {
    fill: rgba(255, 88, 88, 0.15);
    stroke: none;
    opacity: 0;
    pointer-events: none;
    animation: vm-heart-red-flash-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system__heart-path .heart-line[b-fojddur1jp] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    stroke-dashoffset: 0;
}

.vmodel-system__heart-path .heart-line--base[b-fojddur1jp] {
    stroke: rgba(245, 249, 255, 0.34);
    stroke-width: 2.9;
    stroke-dasharray: 0 1000;
    animation: vm-heart-trail-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system__heart-path .heart-line--glow[b-fojddur1jp] {
    stroke: rgba(226, 239, 255, 0.12);
    stroke-width: 6.5;
    filter: blur(4px);
    stroke-dasharray: 0 1000;
    animation: vm-heart-trail-glow-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system__heart-path .heart-line--pulse[b-fojddur1jp] {
    stroke: rgba(255, 102, 79, 0.92);
    stroke-width: 3.7;
    stroke-dasharray: 40 960;
    filter:
        drop-shadow(0 0 8px rgba(255, 122, 91, 0.42))
        drop-shadow(0 0 18px rgba(255, 92, 68, 0.22))
        drop-shadow(0 0 28px rgba(255, 92, 68, 0.12));
    animation: vm-heart-pulse-line-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system__heart-path .heart-blood-dot[b-fojddur1jp] {
    fill: rgba(255, 88, 88, 1);
    opacity: 0;
    filter:
        drop-shadow(0 0 8px rgba(255, 96, 96, 0.88))
        drop-shadow(0 0 18px rgba(255, 72, 72, 0.55))
        drop-shadow(0 0 30px rgba(255, 72, 72, 0.28));
    animation: none;
}

.vmodel-system__blood-head[b-fojddur1jp] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: rgba(255, 88, 88, 0.98);
    box-shadow:
        0 0 8px rgba(255, 96, 96, 0.88),
        0 0 18px rgba(255, 72, 72, 0.45),
        0 0 28px rgba(255, 72, 72, 0.22);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.flow-line[b-fojddur1jp] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow-line--base[b-fojddur1jp] {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 2;
}

.flow-line--glow[b-fojddur1jp] {
    stroke: var(--vm-flow-soft);
    stroke-width: 9;
    opacity: 0.26;
    animation: vm-flow-aura-b-fojddur1jp var(--vm-rhythm) ease-in-out infinite;
}

.flow-line--pulse[b-fojddur1jp] {
    stroke: var(--vm-flow-deep);
    stroke-width: 3;
    stroke-dasharray: 44 956;
    opacity: 0;
    animation: vm-flow-loop-b-fojddur1jp var(--vm-rhythm) linear infinite;
}

.flow-line--pulse-secondary[b-fojddur1jp] {
    stroke: rgba(255, 141, 111, 0.6);
    stroke-width: 2.5;
    stroke-dasharray: 26 974;
    opacity: 0;
    animation-delay: 0.18s;
}

.flow-line--loop[b-fojddur1jp] {
    opacity: 0.95;
}

.vmodel-system__stage[b-fojddur1jp],
.vmodel-system__heart[b-fojddur1jp] {
    position: absolute;
    z-index: 2;
}

.vmodel-system__stage[b-fojddur1jp] {
    display: block;
    width: var(--vmodel-node-width);
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    cursor: default;
    color: var(--vm-text);
    transition: opacity 220ms ease, transform 220ms ease;
    transform: translate(-50%, -50%);
    left: var(--stage-x);
    top: var(--stage-y);
}

.vmodel-node__halo[b-fojddur1jp],
.vmodel-node__anchor[b-fojddur1jp] {
    position: absolute;
    pointer-events: none;
}

.vmodel-node__halo[b-fojddur1jp] {
    inset: -1rem;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 118, 88, 0.12), rgba(255, 118, 88, 0) 68%);
    opacity: 0.12;
    filter: blur(22px);
    animation: none;
}

.vmodel-node__anchor[b-fojddur1jp] {
    top: 50%;
    width: 3.2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 122, 91, 0), rgba(255, 122, 91, 0.55), rgba(255, 122, 91, 0));
    transform: translateY(-50%);
    opacity: 0.36;
    animation: none;
}

.vmodel-system__stage--left .vmodel-node__anchor[b-fojddur1jp] {
    right: -2.1rem;
}

.vmodel-system__stage--right .vmodel-node__anchor[b-fojddur1jp] {
    left: -2.1rem;
}

.vmodel-system__stage--executable .vmodel-node__anchor[b-fojddur1jp] {
    top: -1.3rem;
    left: 50%;
    width: 1px;
    height: 2.5rem;
    background: linear-gradient(180deg, rgba(255, 122, 91, 0), rgba(255, 122, 91, 0.55), rgba(255, 122, 91, 0));
    transform: translateX(-50%);
}

.vmodel-node__content[b-fojddur1jp] {
    position: relative;
    width: 100%;
    min-height: var(--vmodel-node-height);
    padding: min(0.78rem, 0.9cqi) min(0.88rem, 1.02cqi) min(0.84rem, 0.97cqi);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto minmax(min(3.8rem, 4.4cqi), 1fr);
    align-items: center;
    justify-items: center;
    text-align: center;
    border: 1px solid rgba(155, 225, 255, 0.14);
    border-radius: 20px;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 122, 91, 0.07), transparent 32%),
        radial-gradient(circle at 82% 24%, rgba(124, 236, 255, 0.05), transparent 40%),
        var(--vm-panel-bg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 32px rgba(2, 8, 20, 0.14);
    backdrop-filter: blur(16px);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        opacity 220ms ease;
    animation: none;
}
.vmodel-node__visual .is-divider[b-fojddur1jp] {
    stroke-width: 1;
    opacity: 0.7; /* optional, makes it softer */
}

.vmodel-node__content[b-fojddur1jp]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    opacity: 0.55;
    pointer-events: none;
}

.vmodel-node__content[b-fojddur1jp]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: rgba(255, 122, 91, 0.42);
    box-shadow: 0 0 0 1px rgba(255, 122, 91, 0.18), 0 0 14px rgba(255, 122, 91, 0.18);
    transform: translateY(-50%);
}

.vmodel-system__stage--left .vmodel-node__content[b-fojddur1jp]::after {
    right: -0.38rem;
}

.vmodel-system__stage--right .vmodel-node__content[b-fojddur1jp]::after {
    left: -0.38rem;
}

.vmodel-system__stage--executable .vmodel-node__content[b-fojddur1jp]::after {
    top: -0.32rem;
    left: 50%;
    transform: translateX(-50%);
}

.vmodel-node__eyebrow[b-fojddur1jp] {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 0.46rem;
    color: rgba(194, 221, 240, 0.64);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vmodel-node__title[b-fojddur1jp] {
    position: relative;
    z-index: 1;
    margin: 0;
    min-height: min(2.8rem, 3.25cqi);
    color: rgba(244, 251, 255, 0.92);
    font-size: min(1.08rem, 1.25cqi);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-wrap: balance;
    animation: none;
}

.vmodel-node__visual[b-fojddur1jp] {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 7rem, 8.1cqi);
    height: min(3.9rem, 4.5cqi);
    margin-left: auto;
    margin-right: auto;
    color: #cfe3ff;
    transition: color 220ms ease, filter 220ms ease, opacity 220ms ease;
    transform-box: fill-box;
    transform-origin: center center;
    transform: translate(var(--vmodel-icon-x-offset), var(--vmodel-icon-y-offset)) scale(var(--vmodel-icon-scale));
    fill: none;
    stroke: currentColor;
    stroke-width: min(2px, 0.145cqi);
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: none;
}

    /* Non-scaling-stroke keeps CSS transforms from multiplying stroke thickness,
       but the stroke-width itself is now container-relative so lines get thinner
       as the icon (and the card) scale down. */
    .vmodel-node__visual[b-fojddur1jp],
    .vmodel-node__visual *[b-fojddur1jp] {
        stroke: #cfe3ff;
        stroke-width: min(1.8px, 0.13cqi);
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

        .vmodel-node__visual .is-accent[b-fojddur1jp] {
            fill: rgba(255, 107, 107, 0.8); /* stronger */
        }

        .vmodel-node__visual .is-active[b-fojddur1jp] {
            fill: rgba(255, 107, 107, 0.5); /* softer */
        }

        .vmodel-node__visual .is-up[b-fojddur1jp] {
            fill: rgba(120, 180, 120, 0.5);
        }

        .vmodel-node__visual .is-down[b-fojddur1jp] {
            fill: rgba(200, 80, 80, 0.5);
        }

    .vmodel-node__visual .is-warning[b-fojddur1jp] {
        fill: rgba(230, 160, 80, 0.5);
    }

.vmodel-system__stage:hover[b-fojddur1jp],
.vmodel-system__stage:focus-visible[b-fojddur1jp] {
    transform: translate(-50%, calc(-50% - 1px));
}

.vmodel-system__stage:hover .vmodel-node__content[b-fojddur1jp],
.vmodel-system__stage:focus-visible .vmodel-node__content[b-fojddur1jp] {
    border-color: rgba(255, 122, 91, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 1px rgba(255, 122, 91, 0.08) inset,
        0 20px 36px rgba(2, 8, 20, 0.16);
}

.vmodel-system__stage:hover .vmodel-node__title[b-fojddur1jp],
.vmodel-system__stage:focus-visible .vmodel-node__title[b-fojddur1jp] {
    color: #ffffff;
}

.vmodel-system__stage:hover .vmodel-node__visual[b-fojddur1jp],
.vmodel-system__stage:focus-visible .vmodel-node__visual[b-fojddur1jp] {
    color: rgba(255, 239, 233, 0.9);
    filter: drop-shadow(0 0 10px rgba(255, 122, 91, 0.12));
}

.vmodel-system__stage:hover .vmodel-node__halo[b-fojddur1jp],
.vmodel-system__stage:focus-visible .vmodel-node__halo[b-fojddur1jp] {
    opacity: 0.38;
}

.vmodel-system__stage:hover .vmodel-node__anchor[b-fojddur1jp],
.vmodel-system__stage:focus-visible .vmodel-node__anchor[b-fojddur1jp] {
    opacity: 0.88;
}

.vmodel-system__stage.is-blood-active .vmodel-node__content[b-fojddur1jp] {
    border-color: rgba(255, 122, 91, 0.42);
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 122, 91, 0.18), transparent 34%),
        radial-gradient(circle at 82% 24%, rgba(124, 236, 255, 0.08), transparent 40%),
        var(--vm-panel-bg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 122, 91, 0.12) inset,
        0 0 26px rgba(255, 122, 91, 0.18),
        0 22px 42px rgba(2, 8, 20, 0.2);
    animation: vm-node-blood-flash-b-fojddur1jp 1.05s cubic-bezier(0.2, 0.72, 0.16, 1) 1 both;
}

.vmodel-system__stage.is-blood-active .vmodel-node__halo[b-fojddur1jp] {
    opacity: 0.8;
    filter: blur(18px);
    background: radial-gradient(circle at 50% 50%, rgba(255, 118, 88, 0.3), rgba(255, 118, 88, 0) 70%);
    animation: vm-node-blood-halo-b-fojddur1jp 1.05s ease-out 1 both;
}

.vmodel-system__stage.is-blood-active .vmodel-node__anchor[b-fojddur1jp] {
    opacity: 0.96;
}

.vmodel-system__stage.is-blood-active .vmodel-node__title[b-fojddur1jp] {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 122, 91, 0.18);
}

.vmodel-system__stage.is-blood-active .vmodel-node__visual[b-fojddur1jp] {
    color: rgba(255, 246, 240, 0.98);
    filter:
        drop-shadow(0 0 10px rgba(255, 122, 91, 0.14))
        drop-shadow(0 0 22px rgba(255, 122, 91, 0.08));
}

.vmodel-system.is-runtime-active .vmodel-system__heart-path .heart-line--base[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-system__heart-path .heart-line--glow[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-system__heart-path .heart-line--pulse[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-system__heart-path .heart-fill--flash[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-system__heart-path .heart-blood-dot[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-system__heart-shell[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-system__heart-shell[b-fojddur1jp]::before,
.vmodel-system.is-runtime-active .vmodel-system__logo-wrap[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-node__content[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-node__halo[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-node__anchor[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-node__title[b-fojddur1jp],
.vmodel-system.is-runtime-active .vmodel-node__visual[b-fojddur1jp] {
    animation: none;
}

@keyframes vm-node-react-b-fojddur1jp {
    0%,
    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(155, 225, 255, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 16px 32px rgba(2, 8, 20, 0.14);
    }

    1.5% {
        transform: translateY(-0.5px) scale(1.008);
        border-color: rgba(255, 122, 91, 0.22);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 0 0 1px rgba(255, 122, 91, 0.07) inset,
            0 18px 34px rgba(2, 8, 20, 0.16);
    }

    2.5% {
        transform: translateY(-1px) scale(1.018);
        border-color: rgba(255, 122, 91, 0.32);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.09),
            0 0 0 1px rgba(255, 122, 91, 0.12) inset,
            0 20px 38px rgba(2, 8, 20, 0.18);
    }

    4.6% {
        transform: translateY(-0.4px) scale(1.01);
        border-color: rgba(255, 122, 91, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 0 0 1px rgba(255, 122, 91, 0.06) inset,
            0 17px 33px rgba(2, 8, 20, 0.15);
    }

    16% {
        transform: translateY(0) scale(1);
        border-color: rgba(155, 225, 255, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 16px 32px rgba(2, 8, 20, 0.14);
    }
}

@keyframes vm-node-halo-b-fojddur1jp {
    0%,
    100% {
        opacity: 0.18;
        transform: scale(0.98);
    }

    1.5% {
        opacity: 0.34;
        transform: scale(1);
    }

    2.5% {
        opacity: 0.58;
        transform: scale(1.03);
    }

    4.6% {
        opacity: 0.24;
        transform: scale(1.01);
    }

    16% {
        opacity: 0.12;
        transform: scale(0.99);
    }
}

@keyframes vm-node-blood-flash-b-fojddur1jp {
    0% {
        transform: translateY(0) scale(1);
        border-color: rgba(255, 122, 91, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 0 1px rgba(255, 122, 91, 0.06) inset,
            0 16px 32px rgba(2, 8, 20, 0.14);
    }

    24% {
        transform: translateY(-1px) scale(1.025);
        border-color: rgba(255, 146, 114, 0.6);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 0 1px rgba(255, 122, 91, 0.16) inset,
            0 0 34px rgba(255, 122, 91, 0.24),
            0 24px 44px rgba(2, 8, 20, 0.22);
    }

    62% {
        transform: translateY(-0.3px) scale(1.01);
        border-color: rgba(255, 132, 102, 0.34);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 0 0 1px rgba(255, 122, 91, 0.1) inset,
            0 0 18px rgba(255, 122, 91, 0.12),
            0 18px 34px rgba(2, 8, 20, 0.18);
    }

    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(255, 122, 91, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 0 1px rgba(255, 122, 91, 0.08) inset,
            0 16px 32px rgba(2, 8, 20, 0.14);
    }
}

@keyframes vm-node-blood-halo-b-fojddur1jp {
    0% {
        opacity: 0.18;
        transform: scale(0.96);
    }

    22% {
        opacity: 0.82;
        transform: scale(1.04);
    }

    60% {
        opacity: 0.34;
        transform: scale(1.01);
    }

    100% {
        opacity: 0.16;
        transform: scale(0.99);
    }
}

@keyframes vm-heartbeat-cycle-b-fojddur1jp {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 122, 91, 0);
    }

    1.6% {
        transform: scale(1.018);
        box-shadow: 0 0 10px rgba(255, 122, 91, 0.05);
    }

    3.2% {
        transform: scale(1.03);
        box-shadow: 0 0 18px rgba(255, 122, 91, 0.12);
    }

    4.6% {
        transform: scale(1.01);
        box-shadow: 0 0 6px rgba(255, 122, 91, 0.03);
    }

    5.8% {
        transform: scale(1.024);
        box-shadow: 0 0 12px rgba(255, 122, 91, 0.08);
    }

    7.2% {
        transform: scale(1.004);
        box-shadow: 0 0 2px rgba(255, 122, 91, 0.012);
    }
}

@keyframes vm-logo-cycle-b-fojddur1jp {
    0%,
    100% {
        transform: scale(1);
    }

    1.6% {
        transform: scale(1.08);
    }

    3.2% {
        transform: scale(1.2);
    }

    4.6% {
        transform: scale(1.05);
    }

    5.8% {
        transform: scale(1.12);
    }

    7.2% {
        transform: scale(1.02);
    }
}

@keyframes vm-heart-origin-wave-b-fojddur1jp {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.92);
    }

    2.2% {
        opacity: 0.16;
        transform: scale(0.98);
    }

    4.8% {
        opacity: 0.08;
        transform: scale(1.08);
    }

    7.2% {
        opacity: 0;
        transform: scale(1.16);
    }
}

@keyframes vm-heart-red-flash-b-fojddur1jp {
    0%,
    2%,
    4.6%,
    7.2%,
    100% {
        opacity: 0;
    }

    3.2%,
    5.8% {
        opacity: 1;
    }
}

@keyframes vm-heart-trail-b-fojddur1jp {
    0%,
    3.8% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }

    8% {
        stroke-dasharray: 78 922;
        opacity: 0.22;
    }

    24% {
        opacity: 0.38;
    }

    48% {
        opacity: 0.48;
    }

    80% {
        stroke-dasharray: 1000 0;
        opacity: 0.58;
    }

    84% {
        stroke-dasharray: 1000 0;
        opacity: 0.58;
    }

    92% {
        stroke-dasharray: 1000 0;
        opacity: 0;
    }

    100% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }
}

@keyframes vm-heart-trail-glow-b-fojddur1jp {
    0%,
    3.8% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }

    8% {
        stroke-dasharray: 78 922;
        opacity: 0.14;
    }

    40% {
        opacity: 0.24;
    }

    80% {
        stroke-dasharray: 1000 0;
        opacity: 0.3;
    }

    84% {
        stroke-dasharray: 1000 0;
        opacity: 0.3;
    }

    92% {
        stroke-dasharray: 1000 0;
        opacity: 0;
    }

    100% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }
}

@keyframes vm-heart-pulse-line-b-fojddur1jp {
    0%,
    3.8% {
        stroke-dashoffset: 0;
        opacity: 0;
    }

    4.4% {
        opacity: 0.96;
    }

    80% {
        stroke-dashoffset: -1000;
        opacity: 0.96;
    }

    84% {
        stroke-dashoffset: -1000;
        opacity: 0;
    }

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

@keyframes vm-heart-blood-dot-b-fojddur1jp {
    0%,
    3.8% {
        opacity: 0;
    }

    4.4%,
    79.2% {
        opacity: 1;
    }

    82% {
        opacity: 0.25;
    }

    84%,
    100% {
        opacity: 0;
    }
}

@keyframes vm-step-card-b-fojddur1jp {
    0%,
    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(155, 225, 255, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 16px 32px rgba(2, 8, 20, 0.14);
    }

    0.9% {
        transform: translateY(-1px) scale(1.024);
        border-color: rgba(255, 146, 114, 0.58);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 0 1px rgba(255, 122, 91, 0.16) inset,
            0 0 32px rgba(255, 122, 91, 0.2),
            0 24px 42px rgba(2, 8, 20, 0.2);
    }

    4% {
        transform: translateY(0) scale(1);
        border-color: rgba(155, 225, 255, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 16px 32px rgba(2, 8, 20, 0.14);
    }
}

@keyframes vm-step-halo-b-fojddur1jp {
    0%,
    100% {
        opacity: 0.12;
        transform: scale(0.98);
    }

    0.9% {
        opacity: 0.78;
        transform: scale(1.04);
    }

    4% {
        opacity: 0.12;
        transform: scale(0.98);
    }
}

@keyframes vm-step-anchor-b-fojddur1jp {
    0%,
    100% {
        opacity: 0.36;
    }

    0.9% {
        opacity: 0.92;
    }

    4% {
        opacity: 0.36;
    }
}

@keyframes vm-step-title-b-fojddur1jp {
    0%,
    100% {
        color: rgba(244, 251, 255, 0.92);
        text-shadow: none;
    }

    0.9% {
        color: #ffffff;
        text-shadow: 0 0 12px rgba(255, 122, 91, 0.16);
    }

    4% {
        color: rgba(244, 251, 255, 0.92);
        text-shadow: none;
    }
}

@keyframes vm-step-visual-b-fojddur1jp {
    0%,
    100% {
        color: #cfe3ff;
        filter: none;
    }

    0.9% {
        color: rgba(255, 246, 240, 0.98);
        filter:
            drop-shadow(0 0 10px rgba(255, 122, 91, 0.14))
            drop-shadow(0 0 22px rgba(255, 122, 91, 0.08));
    }

    4% {
        color: #cfe3ff;
        filter: none;
    }
}

.vmodel-system__stage--requirements[b-fojddur1jp] { --stage-x: var(--vmodel-requirements-x); --stage-y: var(--vmodel-requirements-y); }
.vmodel-system__stage--realization[b-fojddur1jp] { --stage-x: var(--vmodel-realization-x); --stage-y: var(--vmodel-realization-y); }
.vmodel-system__stage--software[b-fojddur1jp] { --stage-x: var(--vmodel-software-x); --stage-y: var(--vmodel-software-y); }
.vmodel-system__stage--behavior-left[b-fojddur1jp] { --stage-x: var(--vmodel-behavior-left-x); --stage-y: var(--vmodel-behavior-left-y); }
.vmodel-system__stage--validation[b-fojddur1jp] { --stage-x: var(--vmodel-validation-x); --stage-y: var(--vmodel-validation-y); }
.vmodel-system__stage--verification-a[b-fojddur1jp] { --stage-x: var(--vmodel-verification-a-x); --stage-y: var(--vmodel-verification-a-y); }
.vmodel-system__stage--verification-b[b-fojddur1jp] { --stage-x: var(--vmodel-verification-b-x); --stage-y: var(--vmodel-verification-b-y); }
.vmodel-system__stage--behavior-right[b-fojddur1jp] { --stage-x: var(--vmodel-behavior-right-x); --stage-y: var(--vmodel-behavior-right-y); }
.vmodel-system__stage--executable[b-fojddur1jp] { --stage-x: var(--vmodel-executable-x); --stage-y: var(--vmodel-executable-y); }

/* Per-card icon tuning — only the scale differs per card; x-offset (0) and
   y-offset (1.81cqi) are inherited from .vmodel-system so every icon keeps
   the same proportional nudge inside its card at every viewport width. */
.vmodel-system__stage--requirements[b-fojddur1jp]    { --vmodel-icon-scale: 1.7; }
.vmodel-system__stage--realization[b-fojddur1jp]     { --vmodel-icon-scale: 1.8; }
.vmodel-system__stage--software[b-fojddur1jp]        { --vmodel-icon-scale: 1.8; }
.vmodel-system__stage--behavior-left[b-fojddur1jp]   { --vmodel-icon-scale: 1.7; }
.vmodel-system__stage--validation[b-fojddur1jp]      { --vmodel-icon-scale: 1.8; }
.vmodel-system__stage--verification-a[b-fojddur1jp]  { --vmodel-icon-scale: 1.7; }
.vmodel-system__stage--verification-b[b-fojddur1jp]  { --vmodel-icon-scale: 1.6; }
.vmodel-system__stage--behavior-right[b-fojddur1jp]  { --vmodel-icon-scale: 1.7; }
.vmodel-system__stage--executable[b-fojddur1jp]      { --vmodel-icon-scale: 2.4; }

.vmodel-system__heart[b-fojddur1jp] {
    position: absolute;
    z-index: 2;
    left: var(--vmodel-center-x);
    top: var(--vmodel-logo-y);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    pointer-events: none;
}

.vmodel-system__heart-shell[b-fojddur1jp] {
    position: relative;
    display: grid;
    place-items: center;
    width: min(15rem, 17.4cqi);
    height: min(15rem, 17.4cqi);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 152, 126, 0.06), transparent 58%),
        radial-gradient(circle at 50% 50%, rgba(124, 236, 255, 0.1), rgba(7, 19, 38, 0.1) 66%),
        rgba(7, 19, 38, 0.1);
    backdrop-filter: blur(10px);
    overflow: visible;
    animation: vm-heartbeat-cycle-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system__heart-caption[b-fojddur1jp] {
    position: static;
    margin-top: min(0.75rem, 0.87cqi);
    color: rgba(220, 240, 255, 0.68);
    font-size: min(1.17rem, 1.36cqi);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: none;
    text-align: center;
    white-space: nowrap;
}

.vmodel-system__heart-shell[b-fojddur1jp]::before {
    content: "";
    position: absolute;
    inset: -0.8rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(124, 236, 255, 0.12) 0%, rgba(124, 236, 255, 0.04) 18%, rgba(255, 122, 91, 0.03) 30%, rgba(255, 122, 91, 0) 72%);
    filter: blur(8px);
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
    animation: vm-heart-origin-wave-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system__logo[b-fojddur1jp] {
    display: block;
    width: min(13.2rem, 15.3cqi);
    max-width: 100%;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 20px rgba(255, 122, 91, 0.18))
        drop-shadow(0 10px 20px rgba(1, 10, 25, 0.16));
}

.vmodel-system__logo-wrap[b-fojddur1jp] {
    display: grid;
    place-items: center;
    transform-origin: 50% 50%;
    will-change: transform;
    animation: vm-logo-cycle-b-fojddur1jp var(--vm-blood-cycle) linear infinite;
}

.vmodel-system:has(.vmodel-system__stage:hover) .vmodel-system__stage[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:focus-visible) .vmodel-system__stage[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:hover) .flow-line--base[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:focus-visible) .flow-line--base[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:hover) .flow-line--glow[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:focus-visible) .flow-line--glow[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:hover) .flow-line--pulse[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:focus-visible) .flow-line--pulse[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--requirements:hover) .vmodel-system__stage--requirements[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:hover) .vmodel-system__stage--realization[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:hover) .vmodel-system__stage--software[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:hover) .vmodel-system__stage--behavior-left[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:hover) .vmodel-system__stage--executable[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--validation:hover) .vmodel-system__stage--validation[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:hover) .vmodel-system__stage--verification-a[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:hover) .vmodel-system__stage--verification-b[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:hover) .vmodel-system__stage--behavior-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--requirements:focus-visible) .vmodel-system__stage--requirements[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:focus-visible) .vmodel-system__stage--realization[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:focus-visible) .vmodel-system__stage--software[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:focus-visible) .vmodel-system__stage--behavior-left[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:focus-visible) .vmodel-system__stage--executable[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--validation:focus-visible) .vmodel-system__stage--validation[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:focus-visible) .vmodel-system__stage--verification-a[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:focus-visible) .vmodel-system__stage--verification-b[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:focus-visible) .vmodel-system__stage--behavior-right[b-fojddur1jp] {
    opacity: 1;
}

.vmodel-system:has(.vmodel-system__stage--requirements:hover) .flow-line--center-left[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--requirements:hover) .flow-line--left-down-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--requirements:focus-visible) .flow-line--center-left[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--requirements:focus-visible) .flow-line--left-down-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:hover) .flow-line--left-down-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:hover) .flow-line--left-down-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:focus-visible) .flow-line--left-down-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:focus-visible) .flow-line--left-down-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:hover) .flow-line--left-down-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:hover) .flow-line--left-down-3[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:focus-visible) .flow-line--left-down-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:focus-visible) .flow-line--left-down-3[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:hover) .flow-line--left-down-3[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:hover) .flow-line--bottom-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:focus-visible) .flow-line--left-down-3[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:focus-visible) .flow-line--bottom-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:hover) .flow-line--left-down-3[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:hover) .flow-line--bottom-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:focus-visible) .flow-line--left-down-3[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:focus-visible) .flow-line--bottom-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:hover) .flow-line--bottom-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:hover) .flow-line--right-up-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:focus-visible) .flow-line--bottom-right[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:focus-visible) .flow-line--right-up-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:hover) .flow-line--right-up-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:hover) .flow-line--right-up-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:focus-visible) .flow-line--right-up-1[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:focus-visible) .flow-line--right-up-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:hover) .flow-line--right-up-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:hover) .flow-line--right-center[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:focus-visible) .flow-line--right-up-2[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:focus-visible) .flow-line--right-center[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--validation:hover) .flow-line--right-center[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--validation:focus-visible) .flow-line--right-center[b-fojddur1jp] {
    opacity: 1;
    stroke: var(--vm-flow);
    stroke-width: 3.4;
    stroke-dasharray: 40 140;
    animation: vm-segment-flow-b-fojddur1jp 1.15s linear infinite;
}

.vmodel-system:has(.vmodel-system__stage:hover) .flow-line--loop[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage:focus-visible) .flow-line--loop[b-fojddur1jp] {
    opacity: 0.22;
}

.vmodel-system:has(.vmodel-system__heart:hover) .flow-line--pulse[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__heart:focus-visible) .flow-line--pulse[b-fojddur1jp] {
    opacity: 1;
    stroke: var(--vm-flow);
    stroke-width: 3.6;
    stroke-dasharray: 52 170;
}

.vmodel-system:has(.vmodel-system__heart:hover) .flow-line--glow[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__heart:focus-visible) .flow-line--glow[b-fojddur1jp] {
    opacity: 0.5;
}

.vmodel-system:has(.vmodel-system__stage--requirements:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--validation:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:hover) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--requirements:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--realization:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--software:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-left:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--executable:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--validation:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-a:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--verification-b:focus-visible) .vmodel-system__heart[b-fojddur1jp],
.vmodel-system:has(.vmodel-system__stage--behavior-right:focus-visible) .vmodel-system__heart[b-fojddur1jp] {
    opacity: 1;
}

@keyframes vm-heartbeat-b-fojddur1jp {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 122, 91, 0);
    }

    16% {
        transform: scale(1.026);
        box-shadow: 0 0 10px rgba(255, 122, 91, 0.045);
    }

    30% {
        transform: scale(1.042);
        box-shadow: 0 0 16px rgba(255, 122, 91, 0.07);
    }

    44% {
        transform: scale(1.012);
        box-shadow: 0 0 5px rgba(255, 122, 91, 0.02);
    }

    58% {
        transform: scale(1.028);
        box-shadow: 0 0 9px rgba(255, 122, 91, 0.04);
    }

    72% {
        transform: scale(1.005);
        box-shadow: 0 0 2px rgba(255, 122, 91, 0.012);
    }
}

@keyframes vm-logo-pulse-b-fojddur1jp {
    0%,
    100% {
        transform: scale(1);
    }

    16% {
        transform: scale(1.18);
    }

    30% {
        transform: scale(1.42);
    }

    44% {
        transform: scale(1.1);
    }

    58% {
        transform: scale(1.28);
    }

    72% {
        transform: scale(1.05);
    }
}

@keyframes vm-ring-b-fojddur1jp {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.12;
    }

    1.5% {
        transform: scale(0.99);
        opacity: 0.26;
    }

    2.5% {
        transform: scale(1.08);
        opacity: 0.78;
    }

    3.5% {
        transform: scale(1.12);
        opacity: 0.16;
    }

    4.6% {
        transform: scale(1.14);
        opacity: 0.18;
    }

    16% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes vm-flow-loop-b-fojddur1jp {
    0% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    1.5% {
        opacity: 1;
    }

    2.5% {
        opacity: 0.82;
    }

    3.5% {
        opacity: 0.66;
    }

    4.6% {
        opacity: 0.78;
    }

    16% {
        opacity: 0.22;
    }

    38% {
        opacity: 0.08;
    }

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

@keyframes vm-flow-aura-b-fojddur1jp {
    0%,
    100% {
        opacity: 0.18;
    }

    1.5% {
        opacity: 0.8;
    }

    2.5% {
        opacity: 0.88;
    }

    3.5% {
        opacity: 0.28;
    }

    4.6% {
        opacity: 0.56;
    }

    16% {
        opacity: 0.1;
    }
}

@keyframes vm-blood-path-b-fojddur1jp {
    0% {
        stroke-dashoffset: 0;
        opacity: 0;
    }

    1.5% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    97% {
        opacity: 0.28;
    }

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

@keyframes vm-origin-wave-b-fojddur1jp {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.92);
    }

    35% {
        opacity: 0.02;
        transform: scale(1);
    }

    60% {
        opacity: 0.006;
        transform: scale(1.12);
    }

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

@keyframes vm-segment-flow-b-fojddur1jp {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -180;
    }
}

@keyframes vm-rise-b-fojddur1jp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 980px) {
    .hero-top-layer__cards[b-fojddur1jp] {
        grid-template-columns: 1fr;
        max-width: min(42rem, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-top-layer__headline[b-fojddur1jp] {
        max-width: 100%;
        font-size: clamp(2.7rem, 9vw, 4.6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-top-layer__headline-line[b-fojddur1jp],
    .vmodel-system[b-fojddur1jp],
    .flow-line--pulse[b-fojddur1jp],
    .flow-line--glow[b-fojddur1jp],
    .vmodel-system__heart-path .heart-line[b-fojddur1jp],
    .vmodel-system__heart-path .heart-fill--flash[b-fojddur1jp],
    .vmodel-system__heart-path .heart-blood-dot[b-fojddur1jp],
    .vmodel-system__heart-shell[b-fojddur1jp],
    .vmodel-system__heart-shell[b-fojddur1jp]::before,
    .vmodel-node__content[b-fojddur1jp],
    .vmodel-node__halo[b-fojddur1jp],
    .vmodel-node__anchor[b-fojddur1jp],
    .vmodel-node__title[b-fojddur1jp],
    .vmodel-node__visual[b-fojddur1jp],
    .vmodel-system__logo-wrap[b-fojddur1jp] {
        animation: none;
    }

    .hero-top-layer__headline-line[b-fojddur1jp] {
        opacity: 1;
        transform: none;
    }

    .hero-top-layer__cards[b-fojddur1jp],
    .hero-top-layer__card[b-fojddur1jp] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-top-layer__subheadline[b-fojddur1jp],
    .hero-top-layer__partners[b-fojddur1jp] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .vmodel-system__stage[b-fojddur1jp] {
        transition: none;
    }
}


@media (max-width: 480px) {
    .vmodel-system__heart-caption[b-fojddur1jp] {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 640px) {
    .hero-top-layer__partners[b-fojddur1jp] {
        width: min(100% - 1.1rem, 100%);
        padding: 28px 0;
        bottom: 90px;
    }

    .hero-top-layer__card[b-fojddur1jp] {
        padding: 1.2rem 1.05rem;
    }

    .hero-top-layer__subheadline[b-fojddur1jp] {
        font-size: clamp(0.95rem, 3.6vw, 1.1rem);
        margin-top: 0.4rem;
    }

    .hero-top-layer__cta-group[b-fojddur1jp] {
        gap: 0.6rem;
        margin-top: 1.1rem;
    }

    .hero-cta[b-fojddur1jp] {
        padding: 0.7rem 1.4rem;
        font-size: clamp(0.85rem, 3.4vw, 0.95rem);
    }
}

@media (max-width: 420px) {
    .hero-top-layer__partners[b-fojddur1jp] {
        padding: 20px 0;
    }

    .hero-cta[b-fojddur1jp] {
        padding: 0.65rem 1.15rem;
        font-size: 0.85rem;
    }

    .hero-cta--primary[b-fojddur1jp],
    .hero-cta--ghost[b-fojddur1jp] {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ── Mobile landscape (phones rotated sideways) ─────────────────────────
   Short viewport (≤ 500px tall) with a wide aspect. The portrait-tuned
   defaults assume vertical room: a 22vh content lift, a partners strip
   pinned 90px above the bottom, and a clamp-sized headline that still
   reads ~3.4rem at these widths. In landscape that stack overflows and
   the headline bumps into the partners strip. These rules collapse the
   vertical lift, shrink the type, and tuck the partners strip flush to
   the bottom so headline + subheadline + CTAs + strip all fit one screen. */
@media (orientation: landscape) and (max-height: 500px) {
    /* Inline margin-bottom:22vh on the template lifts content above
       flex-center in portrait — in landscape that lift overflows. !important
       beats the inline style. */
    .hero-top-layer__content[b-fojddur1jp] {
        margin-bottom: 0 !important;
    }

    .hero-cycling-headline[b-fojddur1jp] {
        font-size: clamp(1.6rem, 5.2vw, 2.4rem);
        line-height: 1.05;
        padding: 0 0.5rem;
    }

    /* Keep all three cycling slots on one line so heights match. */
    .hero-cycling-mobile-break[b-fojddur1jp] {
        display: none;
    }

    .hero-top-layer__subheadline[b-fojddur1jp] {
        font-size: clamp(0.85rem, 2.4vw, 1rem);
        margin-top: 0.3rem;
    }

    .hero-top-layer__cta-group[b-fojddur1jp] {
        margin-top: 0.85rem;
        gap: 0.55rem;
    }

    .hero-cta[b-fojddur1jp] {
        padding: 0.55rem 1.2rem;
        font-size: 0.85rem;
    }

    /* Sit flush to the bottom edge with tighter padding so it doesn't
       crowd the CTAs above. */
    .hero-top-layer__partners[b-fojddur1jp] {
        bottom: 0;
        padding: 12px 0;
    }

    /* The calc(100vh - 200px) inline fallback collapses to a sliver in
       landscape — subtract less so the watermark stays readable. !important
       beats the inline style on .cordis-icon-bg. */
    .cordis-icon-bg[b-fojddur1jp] {
        height: calc(100vh - 90px) !important;
    }

    .home-heart-section__p[b-fojddur1jp] {
        font-size: clamp(15px, 3.4vw, 18px);
        line-height: 1.45;
    }

    /* Tight landscape: pull the paragraphs together so 3 stacked blocks
       still fit inside the 100vh sticky inner without overflowing. */
    .home-heart-section__inner[b-fojddur1jp] {
        gap: clamp(0.6rem, 1.5vh, 1rem);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-shell[b-1zjg4jxdzp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main[b-1zjg4jxdzp] {
    flex: 1;
}

.site-footer[b-1zjg4jxdzp] {
    background: #081430;
    color: #d9e1ff;
    margin-top: 2.2rem;
}

.site-footer .container[b-1zjg4jxdzp] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-footer p[b-1zjg4jxdzp] {
    margin: 0;
    font-size: 0.9rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-txat2yu10m] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-txat2yu10m] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-txat2yu10m] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-txat2yu10m] {
    font-size: 1.1rem;
}

.bi[b-txat2yu10m] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-txat2yu10m] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-txat2yu10m] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-txat2yu10m] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-txat2yu10m] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-txat2yu10m] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-txat2yu10m] {
        padding-bottom: 1rem;
    }

    .nav-item[b-txat2yu10m]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-txat2yu10m]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-txat2yu10m]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-txat2yu10m] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-txat2yu10m] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-txat2yu10m] {
        display: none;
    }

    .nav-scrollable[b-txat2yu10m] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-jlbrvwlyat],
.components-reconnect-repeated-attempt-visible[b-jlbrvwlyat],
.components-reconnect-failed-visible[b-jlbrvwlyat],
.components-pause-visible[b-jlbrvwlyat],
.components-resume-failed-visible[b-jlbrvwlyat],
.components-rejoining-animation[b-jlbrvwlyat] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-retrying[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-failed[b-jlbrvwlyat],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-jlbrvwlyat] {
    display: block;
}


#components-reconnect-modal[b-jlbrvwlyat] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-jlbrvwlyat 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-jlbrvwlyat 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-jlbrvwlyat 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-jlbrvwlyat]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-jlbrvwlyat 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-jlbrvwlyat {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-jlbrvwlyat {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-jlbrvwlyat {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-jlbrvwlyat] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-jlbrvwlyat] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-jlbrvwlyat] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-jlbrvwlyat] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-jlbrvwlyat] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-jlbrvwlyat] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-jlbrvwlyat] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-jlbrvwlyat 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-jlbrvwlyat] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-jlbrvwlyat {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* Hamburger toggle: visible on mobile, hidden on desktop. */
.site-header__menu-toggle[b-3625p30mi6] {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.55rem;
    margin-left: auto;
    cursor: pointer;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: #ecf1ff;
    transition: background-color 160ms ease;
}

.site-header__menu-toggle:hover[b-3625p30mi6],
.site-header__menu-toggle:focus-visible[b-3625p30mi6] {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.site-header__menu-toggle:focus-visible[b-3625p30mi6] {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.site-header__menu-toggle-bar[b-3625p30mi6] {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 220ms ease, opacity 160ms ease;
}

.site-header.is-mobile-nav-open .site-header__menu-toggle-bar:nth-child(1)[b-3625p30mi6] {
    transform: translateY(7px) rotate(45deg);
}

.site-header.is-mobile-nav-open .site-header__menu-toggle-bar:nth-child(2)[b-3625p30mi6] {
    opacity: 0;
}

.site-header.is-mobile-nav-open .site-header__menu-toggle-bar:nth-child(3)[b-3625p30mi6] {
    transform: translateY(-7px) rotate(-45deg);
}

.site-header__nav-backdrop[b-3625p30mi6] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 18, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 70;
    animation: site-nav-backdrop-in-b-3625p30mi6 180ms ease-out;
}

/* When the mobile drawer is open, lift the header (and the drawer it
   contains) above the backdrop's stacking context. Without this, the
   backdrop's blur paints over the drawer and softens the menu items. */
.site-header.is-mobile-nav-open[b-3625p30mi6] {
    z-index: 80;
}

@keyframes site-nav-backdrop-in-b-3625p30mi6 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 980px) {
    .site-header__menu-toggle[b-3625p30mi6] {
        display: inline-flex;
        order: 2;
    }
}


/* ── Floating header (used on the hero pages: Home, Why Cordis, SP, News) ── */

.site-header.is-floating-enabled[b-3625p30mi6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    pointer-events: auto;
}

.site-header.is-floating-enabled[b-3625p30mi6]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 240ms ease, transform 280ms ease, background-color 220ms ease;
}

.site-header.is-floating-enabled.is-floating-visible[b-3625p30mi6]::before {
    opacity: 1;
    transform: translateY(0);
}

.site-header.is-floating-enabled.is-floating-dense[b-3625p30mi6]::before {
    background: rgba(0, 0, 0, 0.54);
}

.site-header.is-floating-enabled .container[b-3625p30mi6] {
    position: relative;
    z-index: 1;
}

@media (min-width: 981px) {
    .site-header.is-floating-enabled[b-3625p30mi6] {
        height: 76px;
    }

    .site-header.is-floating-enabled .container[b-3625p30mi6] {
        height: 100%;
    }
}

@media (max-width: 980px) {
    .site-header.is-floating-enabled[b-3625p30mi6] {
        height: 60px;
    }

    .site-header.is-floating-enabled .container[b-3625p30mi6] {
        height: 100%;
    }
}

/* Floating-mode nav recolouring — the page background shows through, so the nav
   text needs a softer baseline + crisp white on hover. */
.site-header.is-floating-enabled .nav-item > a[b-3625p30mi6],
.site-header.is-floating-enabled .nav-item > button[b-3625p30mi6],
.site-header.is-floating-enabled .dropdown-toggle[b-3625p30mi6] {
    color: rgba(255, 255, 255, 0.84);
    transition: color 180ms ease, background-color 180ms ease;
}

.site-header.is-floating-enabled .nav-item > a:hover[b-3625p30mi6],
.site-header.is-floating-enabled .nav-item > button:hover[b-3625p30mi6],
.site-header.is-floating-enabled .dropdown-toggle:hover[b-3625p30mi6] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.site-header.is-floating-enabled .site-header__menu-toggle[b-3625p30mi6] {
    color: rgba(255, 255, 255, 0.92);
}


/* Mobile drawer: stretch the "Sign up" CTA across the drawer width.
   `::deep` reaches into the SignInHeaderLink component's scope. */
@media (max-width: 980px) {
    .nav-item-cta[b-3625p30mi6]  .signin-header {
        width: 100%;
        margin-left: 0;
    }

    .nav-item-cta[b-3625p30mi6]  .signin-header--signin {
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }
}
/* /Components/Pages/AboutCordis.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   About Cordis — page-scoped styles
   Dark navy, subtle technical grid, electric-blue accent.
   ──────────────────────────────────────────────────────────────── */

.about-hero[b-g8ylvvcxrv],
.about-origin[b-g8ylvvcxrv],
.about-answer[b-g8ylvvcxrv],
.about-beliefs[b-g8ylvvcxrv],
.about-partners[b-g8ylvvcxrv],
.about-offices[b-g8ylvvcxrv] {
    /* Aligned with the home page design system — Cordis brand blue. */
    --about-accent: #1F9CD8;
    --about-accent-bright: #7cecff;
    --about-accent-warm: #E20717;
    --about-accent-growth: #3BAA35;
    --about-text: #f0f4ff;
    --about-text-muted: rgba(239, 243, 255, 0.62);
    --about-text-soft: rgba(239, 243, 255, 0.78);
    --about-border: rgba(255, 255, 255, 0.08);
}

/* ── 1. Hero ─────────────────────────────────────────────────────── */
.about-hero[b-g8ylvvcxrv] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: clamp(8rem, 16vh, 11rem);
    padding-bottom: clamp(5rem, 10vh, 8rem);
    overflow: hidden;
    isolation: isolate;
}

/* Explicit override of the global .chat-hero gradient background.
   Uses the same DF atmospheric signature: red-whisper left, cyan right,
   Cordis-blue pool, layered on the shared dark canvas. */
.chat-hero.about-hero[b-g8ylvvcxrv] {
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 12% 20%, rgba(31, 156, 216, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 90% 80%, rgba(31, 156, 216, 0.06) 0%, transparent 70%),
        var(--bg-0, #080e20);
}

.about-hero__grid[b-g8ylvvcxrv] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(31, 156, 216, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 156, 216, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 20% 30%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 30%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.about-hero__glow[b-g8ylvvcxrv] {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
}

.about-hero__glow--left[b-g8ylvvcxrv] {
    display: block;
    width: 480px;
    height: 480px;
    top: 10%;
    left: -8%;
    background: radial-gradient(circle, rgba(31, 156, 216, 0.14) 0%, transparent 70%);
}

.about-hero__glow--right[b-g8ylvvcxrv] {
    display: block;
    width: 360px;
    height: 360px;
    bottom: 15%;
    right: 5%;
    background: radial-gradient(circle, rgba(124, 236, 255, 0.1) 0%, transparent 70%);
}

.about-hero__inner[b-g8ylvvcxrv] {
    position: relative;
    z-index: 1;
    max-width: min(1140px, 92vw);
}

.about-hero__label[b-g8ylvvcxrv] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--about-accent);
    margin-bottom: 2.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    opacity: 0.9;
}

.about-hero__label[b-g8ylvvcxrv]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: var(--about-accent);
    opacity: 0.7;
    flex-shrink: 0;
}

/* 1 — The belief. Largest type, tight line height, full weight. */
.about-hero__headline[b-g8ylvvcxrv] {
    margin: 0 0 clamp(3rem, 6vw, 5rem);
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--about-text);
    max-width: 32ch;
    text-wrap: balance;
}

.about-hero__accent[b-g8ylvvcxrv] {
    color: var(--about-accent);
}

/* 2 — The resolution. The answer to the belief — clear, direct.
   Tri-color hairline above echoes the home's signature. */
.about-hero__resolution[b-g8ylvvcxrv] {
    position: relative;
    max-width: min(640px, 58vw);
    margin: 0;
    padding-top: clamp(2.4rem, 4.5vw, 3.8rem);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.58;
    font-weight: 500;
    color: rgba(239, 243, 255, 0.82);
}

.about-hero__resolution[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

/* 3 — The invitation. The emotional peak — big, open, a question not a verdict. */
.about-hero__invite[b-g8ylvvcxrv] {
    margin: clamp(4rem, 8vw, 7rem) 0 0;
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: var(--about-text);
    text-wrap: balance;
}

@media (prefers-reduced-motion: no-preference) {
    .about-hero__label[b-g8ylvvcxrv],
    .about-hero__headline[b-g8ylvvcxrv],
    .about-hero__resolution[b-g8ylvvcxrv],
    .about-hero__invite[b-g8ylvvcxrv] {
        opacity: 0;
        transform: translateY(10px);
        animation: aboutHeroFade-b-g8ylvvcxrv 900ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    }

    .about-hero__label[b-g8ylvvcxrv]      { animation-delay: 80ms; }
    .about-hero__headline[b-g8ylvvcxrv]   { animation-delay: 240ms; }
    .about-hero__resolution[b-g8ylvvcxrv] { animation-delay: 760ms; }
    .about-hero__invite[b-g8ylvvcxrv]     { animation-delay: 1400ms; }
}

@keyframes aboutHeroFade-b-g8ylvvcxrv {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Shared overline treatment — matches the hero label ─────────── */
.about-origin .section-overline[b-g8ylvvcxrv],
.about-answer .section-overline[b-g8ylvvcxrv],
.about-beliefs .section-overline[b-g8ylvvcxrv],
.about-partners .section-overline[b-g8ylvvcxrv],
.about-offices .section-overline[b-g8ylvvcxrv] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--about-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
}

.about-origin .section-overline[b-g8ylvvcxrv]::before,
.about-answer .section-overline[b-g8ylvvcxrv]::before,
.about-beliefs .section-overline[b-g8ylvvcxrv]::before,
.about-partners .section-overline[b-g8ylvvcxrv]::before,
.about-offices .section-overline[b-g8ylvvcxrv]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: var(--about-accent);
    flex-shrink: 0;
}

/* ── 2. Origin ───────────────────────────────────────────────────── */
.about-origin[b-g8ylvvcxrv] {
    position: relative;
    border-top: 1px solid var(--about-border);
    isolation: isolate;
    overflow: hidden;
}

.about-origin[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 55% 55% at 72% 50%, rgba(31, 156, 216, 0.09) 0%, transparent 70%);
}

.about-origin__inner[b-g8ylvvcxrv] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
}

.about-origin__left .section-overline[b-g8ylvvcxrv] {
    margin-bottom: 1.4rem;
}

.about-origin__quote[b-g8ylvvcxrv] {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--about-text);
}

.about-origin__right p[b-g8ylvvcxrv] {
    margin: 0 0 1.35rem;
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.78;
    color: var(--about-text-muted);
    max-width: 64ch;
    text-align: left;
    text-wrap: pretty;
}

.about-origin__resolution[b-g8ylvvcxrv] {
    font-size: 1.22rem !important;
    line-height: 1.65 !important;
    color: var(--about-text) !important;
}

.about-origin__coda[b-g8ylvvcxrv] {
    color: var(--about-text-muted) !important;
}

.about-origin__right p:last-child[b-g8ylvvcxrv] {
    margin-bottom: 0;
}

.about-origin__right em[b-g8ylvvcxrv] {
    color: var(--about-text);
    font-style: italic;
}

.about-origin__quote-pull[b-g8ylvvcxrv] {
    margin: clamp(2.2rem, 4.4vw, 3.2rem) 0;
    padding: 0.25rem 0 0.25rem clamp(1.1rem, 2vw, 1.6rem);
    border-left: 2px solid var(--about-accent);
}

.about-origin__quote-pull blockquote[b-g8ylvvcxrv] {
    margin: 0 0 0.9rem;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.45;
    letter-spacing: -0.012em;
    font-weight: 500;
    font-style: italic;
    color: var(--about-text);
    max-width: 60ch;
}

.about-origin__quote-pull figcaption[b-g8ylvvcxrv] {
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--about-text-muted);
    font-weight: 600;
}

.about-origin__pivot[b-g8ylvvcxrv] {
    margin-top: clamp(2.8rem, 5.2vw, 4rem) !important;
    margin-bottom: clamp(2.8rem, 5.2vw, 4rem) !important;
    font-size: 1.49rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    letter-spacing: -0.015em;
    color: var(--about-text) !important;
}

.about-origin__closing[b-g8ylvvcxrv] {
    position: relative;
    margin-top: 2rem !important;
    font-size: clamp(1.15rem, 1.55vw, 1.38rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.55 !important;
    letter-spacing: -0.015em;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
}

.about-origin__closing[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

@media (max-width: 860px) {
    .about-origin__inner[b-g8ylvvcxrv] {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
}

/* ── 2b. The answer ──────────────────────────────────────────────── */
.about-answer[b-g8ylvvcxrv] {
    position: relative;
    border-top: 1px solid var(--about-border);
    isolation: isolate;
    overflow: hidden;
}

.about-answer[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 50% 40%, rgba(31, 156, 216, 0.08) 0%, transparent 70%);
}

.about-answer__inner[b-g8ylvvcxrv] {
    max-width: min(820px, 92vw);
    margin-inline: auto;
}

.about-answer .section-overline[b-g8ylvvcxrv] {
    margin-bottom: 1.2rem;
}

.about-answer__body[b-g8ylvvcxrv] {
    margin: 0 0 clamp(1.8rem, 3.2vw, 2.4rem);
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.78;
    color: var(--about-text-muted);
    max-width: 64ch;
    text-wrap: pretty;
}

.about-answer__lede[b-g8ylvvcxrv] {
    margin: clamp(2.4rem, 4.8vw, 3.6rem) 0 clamp(2rem, 4vw, 2.8rem);
    padding: 0.2rem 0 0.2rem clamp(1.1rem, 2vw, 1.6rem);
    border-left: 2px solid var(--about-accent);
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: 1.28;
    letter-spacing: -0.018em;
    font-weight: 600;
    color: var(--about-text);
    max-width: 30ch;
}

/* Coda — the affirmational close. Tri-color hairline above, consistent
   with every other payoff line on the site. */
.about-answer__coda[b-g8ylvvcxrv] {
    position: relative;
    margin: clamp(1.2rem, 2.4vw, 2rem) 0 0;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: #ffffff;
}

.about-answer__coda[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

/* ── 3. Beliefs ──────────────────────────────────────────────────── */
.about-beliefs .section-overline[b-g8ylvvcxrv] {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.about-beliefs__list[b-g8ylvvcxrv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.about-belief[b-g8ylvvcxrv] {
    display: grid;
    grid-template-columns: clamp(80px, 10vw, 140px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: baseline;
    padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
    border-top: 1px solid var(--about-border);
}

.about-belief:last-child[b-g8ylvvcxrv] {
    border-bottom: 1px solid var(--about-border);
}

/* Three beliefs, three Cordis colors — each assigned by narrative meaning:
   01 — conviction (blue), 02 — assertion (red), 03 — legacy/growth (green). */
.about-belief__num[b-g8ylvvcxrv] {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    color: var(--about-accent);
}

.about-belief:nth-child(1) .about-belief__num[b-g8ylvvcxrv] { color: var(--about-accent); }
.about-belief:nth-child(2) .about-belief__num[b-g8ylvvcxrv] { color: rgba(226, 7, 23, 0.85); }
.about-belief:nth-child(3) .about-belief__num[b-g8ylvvcxrv] { color: rgba(59, 170, 53, 0.85); }

.about-belief__body[b-g8ylvvcxrv] {
    min-width: 0;
}

.about-belief__headline[b-g8ylvvcxrv] {
    margin: 0 0 1.1rem;
    font-size: clamp(1.55rem, 2.9vw, 2.35rem);
    line-height: 1.18;
    letter-spacing: -0.022em;
    font-weight: 600;
    color: var(--about-text);
    max-width: 32ch;
}

.about-belief__support[b-g8ylvvcxrv] {
    margin: 0;
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.78;
    color: var(--about-text-muted);
    max-width: 64ch;
    text-wrap: pretty;
}

.about-belief__pull[b-g8ylvvcxrv] {
    margin: clamp(1.3rem, 2.4vw, 1.75rem) 0 0;
    padding: 0.2rem 0 0.2rem clamp(0.9rem, 1.6vw, 1.25rem);
    border-left: 2px solid var(--about-accent);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.4;
    letter-spacing: -0.012em;
    font-weight: 600;
    color: var(--about-text);
    max-width: 44ch;
}

/* Pull-quote left border matches the belief number color */
.about-belief:nth-child(2) .about-belief__pull[b-g8ylvvcxrv] { border-left-color: rgba(226, 7, 23, 0.7); }
.about-belief:nth-child(3) .about-belief__pull[b-g8ylvvcxrv] { border-left-color: rgba(59, 170, 53, 0.7); }

@media (max-width: 640px) {
    .about-belief[b-g8ylvvcxrv] {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .about-belief__num[b-g8ylvvcxrv] {
        font-size: 1.6rem;
    }
}

/* ── 4. Partners (static grid) ───────────────────────────────────── */
.about-partners[b-g8ylvvcxrv] {
    border-top: 1px solid var(--about-border);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.about-partners__head[b-g8ylvvcxrv] {
    text-align: center;
    max-width: min(680px, 92vw);
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.about-partners__head .section-overline[b-g8ylvvcxrv] {
    justify-content: center;
}

.about-partners__lede[b-g8ylvvcxrv] {
    margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.7;
    color: var(--about-text-muted);
    font-weight: 400;
}

.about-partners__grid[b-g8ylvvcxrv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: stretch;
}

@media (max-width: 960px) {
    .about-partners__grid[b-g8ylvvcxrv] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .about-partners__grid[b-g8ylvvcxrv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.about-partners__item[b-g8ylvvcxrv] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--about-border);
    border-radius: 10px;
    overflow: hidden;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* Top hairline rotating across the grid — blue / red / green */
.about-partners__item[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

.about-partners__item:nth-child(3n+1)[b-g8ylvvcxrv]::before {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.7) 0%, rgba(31, 156, 216, 0.08) 70%, transparent 100%);
}

.about-partners__item:nth-child(3n+2)[b-g8ylvvcxrv]::before {
    background: linear-gradient(90deg, rgba(226, 7, 23, 0.7) 0%, rgba(226, 7, 23, 0.08) 70%, transparent 100%);
}

.about-partners__item:nth-child(3n+3)[b-g8ylvvcxrv]::before {
    background: linear-gradient(90deg, rgba(59, 170, 53, 0.7) 0%, rgba(59, 170, 53, 0.08) 70%, transparent 100%);
}

.about-partners__item:hover[b-g8ylvvcxrv] {
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-1px);
}

.about-partners__item:hover[b-g8ylvvcxrv]::before {
    opacity: 1;
}

.about-partners__item:nth-child(3n+1):hover[b-g8ylvvcxrv] { border-color: rgba(31, 156, 216, 0.32); }
.about-partners__item:nth-child(3n+2):hover[b-g8ylvvcxrv] { border-color: rgba(226, 7, 23, 0.32); }
.about-partners__item:nth-child(3n+3):hover[b-g8ylvvcxrv] { border-color: rgba(59, 170, 53, 0.32); }

.about-partners__item img[b-g8ylvvcxrv] {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Force dark-inked logos into a white silhouette so they read on the dark surface. */
    filter: brightness(0) invert(1);
    opacity: 0.78;
    transition: opacity 200ms ease;
}

.about-partners__item:hover img[b-g8ylvvcxrv] {
    opacity: 1;
}

/* Logos whose internal detail would be lost by a flat white silhouette.
   Desaturate + lift luminance so blues/darks become distinguishable greys on white. */
.about-partners__item--tones img[b-g8ylvvcxrv] {
    filter: grayscale(1) brightness(1.65) contrast(1.05);
}

/* Two-layer stack: base image keeps the grey-toned icon detail;
   an overlay clipped to the text region is pushed back to flat white
   so the wordmark matches the other partner logos. */
.about-partners__logo-stack[b-g8ylvvcxrv] {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    max-height: 56px;
}

.about-partners__logo-stack > img[b-g8ylvvcxrv] {
    display: block;
}

.about-partners__text-overlay[b-g8ylvvcxrv] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.about-partners__item--tones .about-partners__text-overlay[b-g8ylvvcxrv] {
    filter: brightness(0) invert(1);
}

/* ── 5a. Europe map ──────────────────────────────────────────────── */
.about-map[b-g8ylvvcxrv] {
    position: relative;
    width: 100%;
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--about-border);
    border-radius: 12px;
    overflow: hidden;
    background: #080f1a;
    /* Matches SVG viewBox ratio (1000/400) so the pins stay anchored to their coords. */
    aspect-ratio: 1000 / 400;
    min-height: 220px;
    max-height: 440px;
}

.about-map__svg[b-g8ylvvcxrv] {
    display: block;
    width: 100%;
    height: 100%;
}

/* Gentle dash-flow along the connecting arc. */
.about-map__link[b-g8ylvvcxrv] {
    animation: aboutMapLinkDash-b-g8ylvvcxrv 18s linear infinite;
}

@keyframes aboutMapLinkDash-b-g8ylvvcxrv {
    to { stroke-dashoffset: -200; }
}

/* Pins (SVG groups). */
.about-map__pin-dot[b-g8ylvvcxrv] {
    fill: #1F9CD8;
    filter: drop-shadow(0 0 4px rgba(31, 156, 216, 0.85));
}

.about-map__pin-ring[b-g8ylvvcxrv] {
    fill: rgba(31, 156, 216, 0.16);
    stroke: rgba(31, 156, 216, 0.55);
    stroke-width: 1;
    transform-origin: center;
    transform-box: fill-box;
    animation: aboutMapPulse-b-g8ylvvcxrv 2.5s ease-out infinite;
}

.about-map__pin-ring--b[b-g8ylvvcxrv] {
    animation-delay: 1.25s;
}

.about-map__pin--malaga .about-map__pin-ring--a[b-g8ylvvcxrv] {
    animation-delay: 1.25s;
}

.about-map__pin--malaga .about-map__pin-ring--b[b-g8ylvvcxrv] {
    animation-delay: 2.5s;
}

@keyframes aboutMapPulse-b-g8ylvvcxrv {
    0%   { transform: scale(1);   opacity: 0.55; }
    80%  { transform: scale(6);   opacity: 0;    }
    100% { transform: scale(6);   opacity: 0;    }
}

@media (prefers-reduced-motion: reduce) {
    .about-map__pin-ring[b-g8ylvvcxrv],
    .about-map__link[b-g8ylvvcxrv] {
        animation: none;
    }
}

.about-map__pin-label rect[b-g8ylvvcxrv] {
    fill: rgba(4, 13, 29, 0.88);
    stroke: rgba(31, 156, 216, 0.4);
    stroke-width: 0.7;
}

.about-map__pin-label text[b-g8ylvvcxrv] {
    font: 600 10px/1 system-ui, -apple-system, sans-serif;
    letter-spacing: 0.04em;
    fill: #cfe6ff;
}

/* ── 5. Offices ──────────────────────────────────────────────────── */
.about-offices__head[b-g8ylvvcxrv] {
    max-width: min(720px, 92vw);
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.about-offices__lede[b-g8ylvvcxrv] {
    margin: 0.75rem 0 0;
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--about-text);
}

.about-offices__body[b-g8ylvvcxrv] {
    margin: clamp(1.2rem, 2vw, 1.6rem) 0 0;
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.78;
    color: var(--about-text-soft);
    max-width: 64ch;
    text-wrap: pretty;
}

/* Coda — tri-color hairline, matching site signature */
.about-offices__coda[b-g8ylvvcxrv] {
    position: relative;
    margin: clamp(1.4rem, 2.2vw, 1.8rem) 0 0;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    font-size: clamp(1.15rem, 1.55vw, 1.38rem);
    line-height: 1.55;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.015em;
}

.about-offices__coda[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

.about-offices__grid[b-g8ylvvcxrv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 860px) {
    .about-offices__grid[b-g8ylvvcxrv] {
        grid-template-columns: 1fr;
    }
}

.about-office[b-g8ylvvcxrv] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--about-border);
    border-radius: 12px;
    transition: border-color 240ms ease, transform 240ms ease;
    display: flex;
    flex-direction: column;
}

/* Top hairline — first office blue (established HQ), second green (growth) */
.about-office[b-g8ylvvcxrv]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    z-index: 2;
}

.about-office:nth-child(1)[b-g8ylvvcxrv]::before {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.7) 0%, rgba(31, 156, 216, 0.08) 70%, transparent 100%);
}

.about-office:nth-child(2)[b-g8ylvvcxrv]::before {
    background: linear-gradient(90deg, rgba(59, 170, 53, 0.7) 0%, rgba(59, 170, 53, 0.08) 70%, transparent 100%);
}

.about-office:hover[b-g8ylvvcxrv] { transform: translateY(-2px); }
.about-office:nth-child(1):hover[b-g8ylvvcxrv] { border-color: rgba(31, 156, 216, 0.4); }
.about-office:nth-child(2):hover[b-g8ylvvcxrv] { border-color: rgba(59, 170, 53, 0.4); }

.about-office__photo[b-g8ylvvcxrv] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a1b33;
    border-bottom: 1px solid var(--about-border);
}

.about-office__photo[b-g8ylvvcxrv]::after {
    /* Soft bottom fade so the photo dissolves into the card body. */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 13, 29, 0) 55%, rgba(4, 13, 29, 0.55) 100%);
}

.about-office__photo img[b-g8ylvvcxrv] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-office__body[b-g8ylvvcxrv] {
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

.about-office__pin[b-g8ylvvcxrv] {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    color: var(--about-accent);
    margin-bottom: 1rem;
}

.about-office__pin svg[b-g8ylvvcxrv] {
    width: 100%;
    height: 100%;
}

.about-office__name[b-g8ylvvcxrv] {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--about-text);
}

.about-office__sub[b-g8ylvvcxrv] {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: var(--about-accent);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.about-office__address[b-g8ylvvcxrv] {
    font-style: normal;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--about-text-soft);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--about-border);
}

.about-office__contact[b-g8ylvvcxrv] {
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.55rem;
    font-size: 0.95rem;
}

.about-office__contact > div[b-g8ylvvcxrv] {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
}

.about-office__contact dt[b-g8ylvvcxrv] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--about-text-muted);
    font-weight: 600;
}

.about-office__contact dd[b-g8ylvvcxrv] {
    margin: 0;
    color: var(--about-text-soft);
    font-variant-numeric: tabular-nums;
}

.about-office__contact a[b-g8ylvvcxrv] {
    color: var(--about-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms ease, color 180ms ease;
}

.about-office__contact a:hover[b-g8ylvvcxrv] {
    color: var(--about-accent);
    border-bottom-color: currentColor;
}

.about-office__directions[b-g8ylvvcxrv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--about-accent);
    text-decoration: none;
    transition: gap 180ms ease, color 180ms ease;
}

.about-office__directions svg[b-g8ylvvcxrv] {
    width: 14px;
    height: 14px;
    transition: transform 180ms ease;
}

.about-office__directions:hover[b-g8ylvvcxrv] {
    color: #7bc8ea;
    gap: 0.6rem;
}

.about-office__directions:hover svg[b-g8ylvvcxrv] {
    transform: translate(2px, -2px);
}

/* ── Mobile landscape (phones rotated sideways) ─────────────────────────
   Short viewport (≤ 500px tall) with a wide aspect. The hero is built around
   a 100vh column with three big stacked blocks (label → headline → resolution
   → invite). In landscape that runs ~3 screens deep. Drop the min-height,
   compress paddings and type, shrink the glow blobs (480px tall is taller
   than the whole viewport), and tighten section spacing so the hero reads in
   one or two screens of scroll. */
@media (orientation: landscape) and (max-height: 500px) {
    .about-hero[b-g8ylvvcxrv] {
        min-height: auto;
        padding-top: 4.5rem;
        padding-bottom: 2rem;
    }

    .about-hero__label[b-g8ylvvcxrv] {
        margin-bottom: 1rem;
    }

    .about-hero__headline[b-g8ylvvcxrv] {
        margin: 0 0 1.5rem;
        font-size: clamp(1.6rem, 4.5vw, 2.4rem);
        line-height: 1.08;
    }

    .about-hero__resolution[b-g8ylvvcxrv] {
        padding-top: 1rem;
        font-size: clamp(0.95rem, 2.4vw, 1.15rem);
        line-height: 1.5;
    }

    .about-hero__invite[b-g8ylvvcxrv] {
        margin: 1.5rem 0 0;
        font-size: clamp(1.6rem, 4.5vw, 2.4rem);
        line-height: 1.1;
    }

    /* Glow blobs — 480 / 360 px is taller than the entire 320–500px viewport,
       which over-saturates the background. Halve them. */
    .about-hero__glow--left[b-g8ylvvcxrv] {
        width: 280px;
        height: 280px;
    }

    .about-hero__glow--right[b-g8ylvvcxrv] {
        width: 220px;
        height: 220px;
    }

    /* Body sections — reduce the inter-section padding so the page reads in
       fewer screens of scroll. The Origin grid already collapses to 1 column
       below 860px so it stacks in landscape. */
    .about-origin[b-g8ylvvcxrv],
    .about-answer[b-g8ylvvcxrv],
    .about-beliefs[b-g8ylvvcxrv],
    .about-partners[b-g8ylvvcxrv],
    .about-offices[b-g8ylvvcxrv] {
        padding-top: clamp(2rem, 5vh, 3rem);
        padding-bottom: clamp(2rem, 5vh, 3rem);
    }

    .about-belief[b-g8ylvvcxrv] {
        padding: 1.5rem 0;
    }

    .about-belief__headline[b-g8ylvvcxrv] {
        font-size: clamp(1.2rem, 3.2vw, 1.6rem);
        line-height: 1.22;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   Contact — page-scoped styles
   Shares the dark-navy / electric-blue palette of About Cordis.
   ──────────────────────────────────────────────────────────────── */

.contact-hero[b-h4sgp8fyb7] {
    --contact-accent: #1F9CD8;
    --contact-text: #f0f4ff;
    --contact-text-muted: rgba(239, 243, 255, 0.62);
    --contact-text-soft: rgba(239, 243, 255, 0.82);
    --contact-border: rgba(255, 255, 255, 0.10);
    --contact-border-strong: rgba(255, 255, 255, 0.22);
    --contact-field-bg: rgba(255, 255, 255, 0.03);

    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: clamp(7rem, 14vh, 10rem);
    padding-bottom: clamp(4rem, 8vh, 6rem);
    overflow: hidden;
    isolation: isolate;
}

.chat-hero.contact-hero[b-h4sgp8fyb7] {
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 8% 20%, rgba(31, 156, 216, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 95% 75%, rgba(31, 156, 216, 0.06) 0%, transparent 70%),
        var(--bg-0, #080e20);
}

.contact-hero__grid[b-h4sgp8fyb7] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(31, 156, 216, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 156, 216, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 15% 25%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 15% 25%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.contact-hero__glow[b-h4sgp8fyb7] {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
}

.contact-hero__glow--left[b-h4sgp8fyb7] {
    width: 480px;
    height: 480px;
    top: 5%;
    left: -10%;
    background: radial-gradient(circle, rgba(31, 156, 216, 0.11) 0%, transparent 70%);
}

.contact-hero__glow--right[b-h4sgp8fyb7] {
    width: 340px;
    height: 340px;
    bottom: 10%;
    right: 5%;
    background: radial-gradient(circle, rgba(31, 156, 216, 0.05) 0%, transparent 70%);
}

.contact-hero__inner[b-h4sgp8fyb7] {
    position: relative;
    z-index: 1;
    max-width: min(1040px, 92vw);
}

/* ── Label — small-caps overline matching the home signature ────── */
.contact-hero__label[b-h4sgp8fyb7] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--contact-accent);
    margin-bottom: 2.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    opacity: 0.9;
}

.contact-hero__label[b-h4sgp8fyb7]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: var(--contact-accent);
    flex-shrink: 0;
}

/* ── Headline — matches the home/About scale (ultra-bold, tight tracking) ─ */
.contact-hero__headline[b-h4sgp8fyb7] {
    margin: 0 0 clamp(2.4rem, 4.5vw, 3.8rem);
    font-size: clamp(2.3rem, 4.6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--contact-text);
    max-width: 24ch;
    text-wrap: balance;
}

.contact-hero__accent[b-h4sgp8fyb7] {
    color: var(--contact-accent);
}

/* ── Subline — tri-color hairline above, echoing the home signature ─ */
.contact-hero__subline[b-h4sgp8fyb7] {
    position: relative;
    margin: 0 0 clamp(2.8rem, 5vw, 4rem);
    padding-top: clamp(2rem, 3.5vw, 2.8rem);
    max-width: 52ch;
    font-size: clamp(1.1rem, 1.5vw, 1.28rem);
    line-height: 1.65;
    color: var(--contact-text-muted);
    font-weight: 400;
    text-wrap: pretty;
}

.contact-hero__subline[b-h4sgp8fyb7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

/* ── Form ────────────────────────────────────────────────────────── */
.contact-form[b-h4sgp8fyb7] {
    max-width: 780px;
}

.contact-form__error[b-h4sgp8fyb7] {
    margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
    padding: 0.85rem 1rem;
    border: 1px solid rgba(242, 115, 115, 0.35);
    background: rgba(242, 115, 115, 0.08);
    color: #ffc9c9;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-form__grid[b-h4sgp8fyb7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.6rem);
}

.contact-field[b-h4sgp8fyb7] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.contact-field--full[b-h4sgp8fyb7] {
    grid-column: 1 / -1;
}

.contact-field label[b-h4sgp8fyb7] {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--contact-text-soft);
}

.contact-field__hint[b-h4sgp8fyb7] {
    color: var(--contact-text-muted);
    font-weight: 400;
}

/* Required-field asterisk — Cordis red (standard "required" visual convention) */
.contact-field__req[b-h4sgp8fyb7] {
    margin-left: 0.2rem;
    color: rgba(226, 7, 23, 0.75);
    opacity: 0.8;
    font-weight: 600;
}

.contact-field[b-h4sgp8fyb7]  input,
.contact-field[b-h4sgp8fyb7]  textarea,
.contact-field[b-h4sgp8fyb7]  select {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--contact-text);
    background: var(--contact-field-bg);
    border: 1px solid var(--contact-border);
    border-radius: 0.55rem;
    padding: 0.85rem 1rem;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    appearance: none;
    -webkit-appearance: none;
}

.contact-field[b-h4sgp8fyb7]  input::placeholder,
.contact-field[b-h4sgp8fyb7]  textarea::placeholder {
    color: rgba(239, 243, 255, 0.28);
}

.contact-field[b-h4sgp8fyb7]  input:hover,
.contact-field[b-h4sgp8fyb7]  textarea:hover,
.contact-field[b-h4sgp8fyb7]  select:hover {
    border-color: var(--contact-border-strong);
}

.contact-field[b-h4sgp8fyb7]  input:focus,
.contact-field[b-h4sgp8fyb7]  textarea:focus,
.contact-field[b-h4sgp8fyb7]  select:focus {
    outline: none;
    border-color: var(--contact-accent);
    background: rgba(31, 156, 216, 0.05);
    box-shadow: 0 0 0 3px rgba(31, 156, 216, 0.12);
}

.contact-field[b-h4sgp8fyb7]  textarea {
    min-height: 9.5rem;
    resize: vertical;
    line-height: 1.55;
}

.contact-field[b-h4sgp8fyb7]  .valid.modified,
.contact-field[b-h4sgp8fyb7]  .valid {
    outline: none;
}

.contact-field[b-h4sgp8fyb7]  input:-webkit-autofill,
.contact-field[b-h4sgp8fyb7]  input:-webkit-autofill:hover,
.contact-field[b-h4sgp8fyb7]  input:-webkit-autofill:focus,
.contact-field[b-h4sgp8fyb7]  input:-webkit-autofill:active,
.contact-field[b-h4sgp8fyb7]  textarea:-webkit-autofill,
.contact-field[b-h4sgp8fyb7]  select:-webkit-autofill {
    -webkit-text-fill-color: var(--contact-text);
    caret-color: var(--contact-text);
    -webkit-box-shadow: 0 0 0 1000px rgba(8, 16, 33, 0.96) inset;
    box-shadow: 0 0 0 1000px rgba(8, 16, 33, 0.96) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.contact-select[b-h4sgp8fyb7] {
    position: relative;
}

.contact-select[b-h4sgp8fyb7]  select {
    padding-right: 2.6rem;
    cursor: pointer;
}

.contact-select[b-h4sgp8fyb7]  select option {
    background: #0b1730;
    color: var(--contact-text);
}

.contact-select__chevron[b-h4sgp8fyb7] {
    position: absolute;
    top: 50%;
    right: 0.95rem;
    width: 1.1rem;
    height: 1.1rem;
    transform: translateY(-50%);
    color: rgba(239, 243, 255, 0.45);
    pointer-events: none;
}

/* ── Below the form ──────────────────────────────────────────────── */
.contact-form__privacy[b-h4sgp8fyb7] {
    margin: clamp(1.6rem, 2.4vw, 2rem) 0 clamp(1.2rem, 2vw, 1.6rem);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--contact-text-muted);
    max-width: 58ch;
}

.contact-check[b-h4sgp8fyb7] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    max-width: 62ch;
    padding: 0.1rem 0;
}

.contact-check[b-h4sgp8fyb7]  input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.contact-check__box[b-h4sgp8fyb7] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 1px solid var(--contact-border-strong);
    border-radius: 0.3rem;
    background: var(--contact-field-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.contact-check__box svg[b-h4sgp8fyb7] {
    width: 0.85rem;
    height: 0.85rem;
}

/* Privacy consent checked — Cordis green (affirmation / trust granted) */
.contact-check[b-h4sgp8fyb7]  input:checked + .contact-check__box {
    background: #3BAA35;
    border-color: rgba(59, 170, 53, 0.85);
    color: #0c1428;
    box-shadow: 0 0 0 1px rgba(59, 170, 53, 0.3);
}

.contact-check[b-h4sgp8fyb7]  input:focus-visible + .contact-check__box {
    box-shadow: 0 0 0 3px rgba(31, 156, 216, 0.22);
}

.contact-check__label[b-h4sgp8fyb7] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--contact-text-soft);
}

/* ── Submit + reassurance ────────────────────────────────────────── */
.contact-form__submit[b-h4sgp8fyb7] {
    margin-top: clamp(1.8rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

/* Premium submit — matches the "Book a demo" CTA styling on the home hero */
.contact-submit[b-h4sgp8fyb7] {
    padding: 1rem 1.9rem;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 0.5rem;
    border: 1px solid rgba(124, 236, 255, 0.35);
    background: linear-gradient(135deg, #1F9CD8 0%, #52c4ef 100%);
    color: #0a1020;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 18px rgba(31, 156, 216, 0.28);
    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.contact-submit:hover[b-h4sgp8fyb7],
.contact-submit:focus-visible[b-h4sgp8fyb7] {
    background: linear-gradient(135deg, #2ba8e3 0%, #7cecff 100%);
    border-color: rgba(124, 236, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 28px rgba(31, 156, 216, 0.45),
        0 0 24px rgba(124, 236, 255, 0.25);
    transform: translateY(-1px);
    outline: none;
}

/* Reassurance block — tri-color divider above, reads as form's closing signature */
.contact-form__reassurance[b-h4sgp8fyb7] {
    position: relative;
    max-width: 62ch;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    margin-top: clamp(0.6rem, 1vw, 1rem);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--contact-text-muted);
}

.contact-form__reassurance[b-h4sgp8fyb7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(120px, 26%, 220px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.35) 0%,
        rgba(31, 156, 216, 0.65) 45%,
        rgba(124, 236, 255, 0.35) 90%,
        transparent 100%);
}

.contact-form__reassurance p[b-h4sgp8fyb7] {
    margin: 0;
}

.contact-form__reassurance p + p[b-h4sgp8fyb7] {
    margin-top: 0.55rem;
}

/* ── Animations ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .contact-hero__label[b-h4sgp8fyb7],
    .contact-hero__headline[b-h4sgp8fyb7],
    .contact-hero__subline[b-h4sgp8fyb7] {
        opacity: 0;
        transform: translateY(10px);
        animation: contactHeroFade-b-h4sgp8fyb7 900ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    }

    .contact-hero__label[b-h4sgp8fyb7]    { animation-delay: 80ms; }
    .contact-hero__headline[b-h4sgp8fyb7] { animation-delay: 240ms; }
    .contact-hero__subline[b-h4sgp8fyb7]  { animation-delay: 680ms; }
}

@keyframes contactHeroFade-b-h4sgp8fyb7 {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .contact-form__grid[b-h4sgp8fyb7] {
        grid-template-columns: 1fr;
    }

    .contact-hero[b-h4sgp8fyb7] {
        padding-top: clamp(5.5rem, 12vh, 7rem);
    }
}

/* ── Mobile landscape (phones rotated sideways) ─────────────────────
   Drop the 100vh floor, compress the headline and subline, and shrink
   the decorative glow blobs so the form is reachable without scrolling
   past several screens of background. The form itself stays single-column
   below 720px-wide; in landscape we keep that behaviour. */
@media (orientation: landscape) and (max-height: 500px) {
    .contact-hero[b-h4sgp8fyb7] {
        min-height: auto;
        padding-top: 4.5rem;
        padding-bottom: 2rem;
    }

    .contact-hero__label[b-h4sgp8fyb7] {
        margin-bottom: 1rem;
    }

    .contact-hero__headline[b-h4sgp8fyb7] {
        margin: 0 0 1.2rem;
        font-size: clamp(1.6rem, 4.4vw, 2.4rem);
        line-height: 1.08;
    }

    .contact-hero__subline[b-h4sgp8fyb7] {
        margin: 0 0 1.6rem;
        padding-top: 1rem;
        font-size: clamp(0.9rem, 2.4vw, 1.05rem);
        line-height: 1.5;
    }

    .contact-hero__glow--left[b-h4sgp8fyb7] {
        width: 280px;
        height: 280px;
    }

    .contact-hero__glow--right[b-h4sgp8fyb7] {
        width: 220px;
        height: 220px;
    }
}
/* /Components/Pages/ModernControlSoftware/Hub.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Modern control software, content hub
   Aligned with the About Cordis design family — Cordis brand blue.
   ═══════════════════════════════════════════════════════════════════ */

.mcs-hero[b-o4iy9u8b1p],
.mcs-group[b-o4iy9u8b1p],
.mcs-about[b-o4iy9u8b1p] {
    --mcs-accent: #1F9CD8;
    --mcs-accent-bright: #7cecff;
    --mcs-accent-warm: #E20717;
    --mcs-accent-growth: #3BAA35;
    --mcs-text: #f0f4ff;
    --mcs-text-muted: rgba(239, 243, 255, 0.62);
    --mcs-text-soft: rgba(239, 243, 255, 0.78);
    --mcs-border: rgba(255, 255, 255, 0.08);
}

/* ── Hero ────────────────────────────────────────────────────────── */

.mcs-hero[b-o4iy9u8b1p] {
    position: relative;
    padding-top: clamp(8rem, 16vh, 11rem);
    padding-bottom: clamp(5rem, 9vw, 7rem);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 12% 20%, rgba(31, 156, 216, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 90% 80%, rgba(31, 156, 216, 0.06) 0%, transparent 70%),
        var(--bg-0, #080e20);
}

.mcs-hero__grid[b-o4iy9u8b1p] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(31, 156, 216, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 156, 216, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 20% 30%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 30%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.mcs-hero__glow[b-o4iy9u8b1p] {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
}

.mcs-hero__glow--left[b-o4iy9u8b1p] {
    width: 480px;
    height: 480px;
    top: 8%;
    left: -8%;
    background: radial-gradient(circle, rgba(31, 156, 216, 0.14) 0%, transparent 70%);
}

.mcs-hero__glow--right[b-o4iy9u8b1p] {
    width: 360px;
    height: 360px;
    bottom: 10%;
    right: 5%;
    background: radial-gradient(circle, rgba(124, 236, 255, 0.1) 0%, transparent 70%);
}

.mcs-hero__inner[b-o4iy9u8b1p] {
    position: relative;
    z-index: 1;
    max-width: min(820px, 92vw);
}

/* Overline — horizontal-bar accent matches the About page label. */
.mcs-hero__label[b-o4iy9u8b1p] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--mcs-accent);
    margin-bottom: 1.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    opacity: 0.9;
}

.mcs-hero__label[b-o4iy9u8b1p]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: var(--mcs-accent);
    opacity: 0.7;
    flex-shrink: 0;
}

.mcs-hero__h1[b-o4iy9u8b1p] {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 1.4rem;
    text-wrap: balance;
}

.mcs-hero__sub[b-o4iy9u8b1p] {
    font-size: clamp(1.1rem, 1.7vw, 1.32rem);
    line-height: 1.55;
    color: var(--mcs-text-soft);
    margin: 0 0 1.8rem;
    max-width: 60ch;
    text-wrap: pretty;
}

.mcs-hero__lede[b-o4iy9u8b1p] {
    position: relative;
    font-size: clamp(0.98rem, 1.3vw, 1.08rem);
    line-height: 1.78;
    color: var(--mcs-text-muted);
    margin: 0;
    max-width: 70ch;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    text-wrap: pretty;
}

/* Tri-color hairline above the lede — site signature. */
.mcs-hero__lede[b-o4iy9u8b1p]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

/* ── Groups ──────────────────────────────────────────────────────── */

.mcs-group[b-o4iy9u8b1p] {
    position: relative;
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
    border-top: 1px solid var(--mcs-border);
}

.mcs-group__head[b-o4iy9u8b1p] {
    max-width: min(780px, 92vw);
    margin: 0 0 clamp(2.2rem, 4vw, 3rem);
}

/* Shared overline treatment — matches the About page's accent label. */
.mcs-group .section-overline[b-o4iy9u8b1p],
.mcs-about .section-overline[b-o4iy9u8b1p] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--mcs-accent);
    margin-bottom: 1.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
}

.mcs-group .section-overline[b-o4iy9u8b1p]::before,
.mcs-about .section-overline[b-o4iy9u8b1p]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: var(--mcs-accent);
    flex-shrink: 0;
}

.mcs-group__title[b-o4iy9u8b1p] {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 0.9rem;
    text-wrap: balance;
}

.mcs-group__intro[b-o4iy9u8b1p] {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--mcs-text-muted);
    margin: 0;
    max-width: 68ch;
    text-wrap: pretty;
}

/* Vary the accent color per section, matching the About page's per-belief cycle. */
.mcs-group:nth-of-type(2)[b-o4iy9u8b1p] {
    --mcs-section-accent: rgba(226, 7, 23, 0.7);
}

.mcs-group:nth-of-type(3)[b-o4iy9u8b1p] {
    --mcs-section-accent: rgba(59, 170, 53, 0.7);
}

/* ── Cards ───────────────────────────────────────────────────────── */

.mcs-cards[b-o4iy9u8b1p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 1.6vw, 1.4rem);
}

.mcs-card[b-o4iy9u8b1p] {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--mcs-border);
    border-radius: 0.75rem;
    padding: clamp(1.4rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
    transition: border-color 240ms ease, background-color 240ms ease, transform 240ms ease;
}

/* Top hairline rotating across the grid — matches the About page's partner cycle. */
.mcs-card[b-o4iy9u8b1p]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}

.mcs-card:nth-child(3n+1)[b-o4iy9u8b1p]::before {
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.7) 0%, rgba(31, 156, 216, 0.08) 70%, transparent 100%);
}

.mcs-card:nth-child(3n+2)[b-o4iy9u8b1p]::before {
    background: linear-gradient(90deg, rgba(226, 7, 23, 0.7) 0%, rgba(226, 7, 23, 0.08) 70%, transparent 100%);
}

.mcs-card:nth-child(3n+3)[b-o4iy9u8b1p]::before {
    background: linear-gradient(90deg, rgba(59, 170, 53, 0.7) 0%, rgba(59, 170, 53, 0.08) 70%, transparent 100%);
}

.mcs-card:hover[b-o4iy9u8b1p] {
    border-color: rgba(31, 156, 216, 0.4);
    background: linear-gradient(180deg, rgba(31, 156, 216, 0.06) 0%, rgba(31, 156, 216, 0.02) 100%);
    transform: translateY(-2px);
}

.mcs-card:hover[b-o4iy9u8b1p]::before {
    opacity: 1;
}

.mcs-card:nth-child(3n+2):hover[b-o4iy9u8b1p] {
    border-color: rgba(226, 7, 23, 0.32);
}

.mcs-card:nth-child(3n+3):hover[b-o4iy9u8b1p] {
    border-color: rgba(59, 170, 53, 0.32);
}

.mcs-card__title[b-o4iy9u8b1p] {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.32;
    color: var(--mcs-text);
    margin: 0;
    letter-spacing: -0.012em;
}

.mcs-card__summary[b-o4iy9u8b1p] {
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--mcs-text-muted);
    margin: 0;
    flex: 1;
}

.mcs-card__cta[b-o4iy9u8b1p] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mcs-accent-bright);
    text-decoration: none;
    margin-top: 0.25rem;
    transition: color 160ms ease, gap 200ms ease;
}

.mcs-card__cta svg[b-o4iy9u8b1p] {
    width: 16px;
    height: 16px;
    transition: transform 220ms ease;
}

.mcs-card:hover .mcs-card__cta[b-o4iy9u8b1p] {
    color: #b0f1ff;
    gap: 0.7rem;
}

.mcs-card:hover .mcs-card__cta svg[b-o4iy9u8b1p] {
    transform: translateX(2px);
}

/* ── About block ─────────────────────────────────────────────────── */

.mcs-about[b-o4iy9u8b1p] {
    position: relative;
    padding-top: clamp(4.5rem, 8vw, 7rem);
    padding-bottom: clamp(4.5rem, 8vw, 7rem);
    border-top: 1px solid var(--mcs-border);
    isolation: isolate;
    overflow: hidden;
}

.mcs-about[b-o4iy9u8b1p]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 55% 60% at 50% 40%, rgba(31, 156, 216, 0.08) 0%, transparent 70%);
}

.mcs-about__inner[b-o4iy9u8b1p] {
    max-width: min(820px, 92vw);
    margin-inline: auto;
}

.mcs-about__title[b-o4iy9u8b1p] {
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 1.4rem;
    text-wrap: balance;
}

.mcs-about__body[b-o4iy9u8b1p] {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: 1.78;
    color: var(--mcs-text-muted);
    margin: 0 0 1.2rem;
    max-width: 64ch;
    text-wrap: pretty;
}

/* Coda — affirmational close with the site's tri-color hairline. */
.mcs-about__coda[b-o4iy9u8b1p] {
    position: relative;
    margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
    padding-top: clamp(1.4rem, 2vw, 1.8rem);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: #ffffff;
    text-wrap: balance;
}

.mcs-about__coda[b-o4iy9u8b1p]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(226, 7, 23, 0.4) 0%,
        rgba(31, 156, 216, 0.7) 45%,
        rgba(124, 236, 255, 0.4) 90%,
        transparent 100%);
}

.mcs-about__cta[b-o4iy9u8b1p] {
    display: flex;
    margin-top: clamp(1.8rem, 3vw, 2.4rem);
}

@media (max-width: 720px) {
    .mcs-cards[b-o4iy9u8b1p] {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile landscape (phones rotated sideways) ─────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
    .mcs-hero[b-o4iy9u8b1p] {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }

    .mcs-hero__glow--left[b-o4iy9u8b1p] {
        width: 280px;
        height: 280px;
    }

    .mcs-hero__glow--right[b-o4iy9u8b1p] {
        width: 220px;
        height: 220px;
    }

    .mcs-group[b-o4iy9u8b1p],
    .mcs-about[b-o4iy9u8b1p] {
        padding-top: clamp(2.4rem, 5vh, 3.2rem);
        padding-bottom: clamp(2.4rem, 5vh, 3.2rem);
    }
}
/* /Components/Pages/Presentation.razor.rz.scp.css */
.presentation-container[b-havtsrwefv] {
    position: relative;
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
.privacy-page[b-y791sywyyf] {
    padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(3rem, 8vh, 6rem);
    color: #0f1f48;
}

.privacy-inner[b-y791sywyyf] {
    max-width: 780px;
}

.privacy-header h1[b-y791sywyyf] {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin: 0 0 0.25rem;
}

.privacy-updated[b-y791sywyyf] {
    color: #6b7699;
    font-size: 0.9rem;
    margin: 0 0 2rem;
}

.privacy-content section[b-y791sywyyf] {
    margin-bottom: 1.75rem;
}

.privacy-content h2[b-y791sywyyf] {
    font-size: 1.15rem;
    margin: 0 0 0.55rem;
    color: #0f1f48;
}

.privacy-content p[b-y791sywyyf],
.privacy-content li[b-y791sywyyf] {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4a5679;
}

.privacy-content ul[b-y791sywyyf] {
    padding-left: 1.25rem;
    margin: 0;
}

.privacy-content li + li[b-y791sywyyf] {
    margin-top: 0.35rem;
}

.privacy-content a[b-y791sywyyf] {
    color: #2b4dcf;
}

.privacy-content code[b-y791sywyyf] {
    background: #f3f5fb;
    color: #5b6890;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.88em;
    font-weight: 500;
}
/* /Components/Pages/SubsidyProjects.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   Subsidy Projects — page-scoped styles
   ──────────────────────────────────────────────────────────────── */

.sp-page[b-gtsvrkbqoh] {
    background: #0a1628;
    color: #e8edf5;
    position: relative;
    overflow: hidden;
}

.sp-hero[b-gtsvrkbqoh] {
    position: relative;
    padding: clamp(3rem, 7vh, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vh, 4rem);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.sp-hero-inner[b-gtsvrkbqoh] {
    position: relative;
    z-index: 1;
    max-width: min(880px, 92vw);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp-hero-bg[b-gtsvrkbqoh] {
    position: absolute;
    inset: 0;
    background:
        /* DF-signature dual-side wash */
        radial-gradient(ellipse 28% 55% at 2% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 28% 55% at 98% 50%, rgba(124, 236, 255, 0.05) 0%, transparent 60%),
        /* Cordis-blue pool + a kept EU yellow hint for page identity */
        radial-gradient(ellipse at 80% 50%, rgba(31, 156, 216, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 204, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.eu-stars[b-gtsvrkbqoh] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.07;
    width: clamp(280px, 40vw, 420px);
    height: clamp(280px, 40vw, 420px);
    z-index: 0;
}

.sp-label[b-gtsvrkbqoh] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-variant-caps: all-small-caps;
    color: #1F9CD8;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.sp-label[b-gtsvrkbqoh]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: #1F9CD8;
    flex-shrink: 0;
}

.sp-title[b-gtsvrkbqoh] {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(2.3rem, 4.6vw, 3.8rem);
    font-weight: 800;
    line-height: 1.04;
    color: #ffffff;
    margin: 0 0 1rem;
    max-width: 760px;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.sp-subtitle[b-gtsvrkbqoh] {
    position: relative;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 680px;
    line-height: 1.65;
    margin: 0 auto;
    padding-top: 1.6rem;
}

.sp-subtitle[b-gtsvrkbqoh]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.4) 18%,
        rgba(31, 156, 216, 0.7) 50%,
        rgba(124, 236, 255, 0.4) 82%,
        transparent 100%);
}

.eu-badge[b-gtsvrkbqoh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    background: rgba(0, 51, 153, 0.2);
    border: 0.5px solid rgba(0, 102, 204, 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.eu-flag-mini[b-gtsvrkbqoh] {
    width: 20px;
    height: 14px;
    flex-shrink: 0;
}

.sp-grid[b-gtsvrkbqoh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-width: min(1140px, 92vw);
    margin: 0 auto;
}

.sp-card[b-gtsvrkbqoh] {
    position: relative;
    background: linear-gradient(180deg, rgba(17, 34, 58, 0.9) 0%, rgba(13, 27, 47, 0.95) 100%);
    padding: 2.2rem 1.75rem 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

/* Top hairline — rotates through the three Cordis colors across cards
   so the grid carries variety, echoing the home page's red/blue/green story. */
.sp-card[b-gtsvrkbqoh]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(31, 156, 216, 0.65) 0%, rgba(31, 156, 216, 0.08) 70%, transparent 100%);
    pointer-events: none;
}

.sp-card:nth-child(3n+2)[b-gtsvrkbqoh]::before {
    background: linear-gradient(90deg, rgba(226, 7, 23, 0.6) 0%, rgba(226, 7, 23, 0.08) 70%, transparent 100%);
}

.sp-card:nth-child(3n+3)[b-gtsvrkbqoh]::before {
    background: linear-gradient(90deg, rgba(59, 170, 53, 0.6) 0%, rgba(59, 170, 53, 0.08) 70%, transparent 100%);
}

.sp-card:hover[b-gtsvrkbqoh] {
    background: linear-gradient(180deg, rgba(23, 44, 72, 0.92) 0%, rgba(17, 31, 58, 0.96) 100%);
}

.sp-card-number[b-gtsvrkbqoh] {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgba(31, 156, 216, 0.65);
    font-weight: 500;
}

.sp-card:nth-child(3n+2) .sp-card-number[b-gtsvrkbqoh] { color: rgba(226, 7, 23, 0.7); }
.sp-card:nth-child(3n+3) .sp-card-number[b-gtsvrkbqoh] { color: rgba(59, 170, 53, 0.7); }

.sp-card-title[b-gtsvrkbqoh] {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.28;
    margin: 0;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.sp-card-title--long[b-gtsvrkbqoh] {
    font-size: 1.08rem;
    line-height: 1.35;
}

.sp-card-ref[b-gtsvrkbqoh] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.sp-card-body[b-gtsvrkbqoh] {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    flex: 1;
    margin: 0;
}

.sp-card-link[b-gtsvrkbqoh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1F9CD8;
    text-decoration: none;
    letter-spacing: 0.04em;
    padding: 10px 0 2px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
    transition: color 0.15s ease;
}

/* Link color matches the card's top accent hairline */
.sp-card:nth-child(3n+2) .sp-card-link[b-gtsvrkbqoh] { color: rgba(255, 120, 120, 0.95); }
.sp-card:nth-child(3n+3) .sp-card-link[b-gtsvrkbqoh] { color: rgba(120, 200, 115, 0.95); }

.sp-card-link:hover[b-gtsvrkbqoh] { color: #7cecff; }
.sp-card:nth-child(3n+2) .sp-card-link:hover[b-gtsvrkbqoh] { color: #ffa7a7; }
.sp-card:nth-child(3n+3) .sp-card-link:hover[b-gtsvrkbqoh] { color: #a5dea0; }

.sp-card-link svg[b-gtsvrkbqoh] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.sp-footer-note[b-gtsvrkbqoh] {
    position: relative;
    padding: 2.2rem clamp(1.25rem, 4vw, 2.5rem) 1.6rem;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.65;
    max-width: min(1140px, 92vw);
    margin: 0 auto;
    text-align: center;
}

.sp-footer-note[b-gtsvrkbqoh]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(140px, 30%, 260px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(226, 7, 23, 0.35) 18%,
        rgba(31, 156, 216, 0.6) 50%,
        rgba(124, 236, 255, 0.35) 82%,
        transparent 100%);
}

/* ── Mobile landscape (phones rotated sideways) ─────────────────────
   Compress the hero padding and title, and shrink the decorative EU
   stars + circle (40vw is too tall for a 320px-tall viewport) so the
   project grid is reachable in one screen of scroll. */
@media (orientation: landscape) and (max-height: 500px) {
    .sp-hero[b-gtsvrkbqoh] {
        padding: 4.5rem 1.25rem 1.8rem;
    }

    .sp-title[b-gtsvrkbqoh] {
        font-size: clamp(1.6rem, 4.4vw, 2.4rem);
        line-height: 1.08;
        margin-bottom: 0.75rem;
    }

    .sp-subtitle[b-gtsvrkbqoh] {
        padding-top: 0.9rem;
        font-size: 13.5px;
        line-height: 1.5;
    }

    .eu-badge[b-gtsvrkbqoh] {
        margin-top: 1rem;
    }

    .eu-stars[b-gtsvrkbqoh] {
        width: clamp(180px, 30vh, 280px);
        height: clamp(180px, 30vh, 280px);
        opacity: 0.05;
    }

    .sp-card[b-gtsvrkbqoh] {
        padding: 1.5rem 1.4rem 1.4rem;
        gap: 0.75rem;
    }
}