/* /Components/Auth/SignInDialog.razor.rz.scp.css */
.signin-dialog[b-nf7hhftfka] {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    max-width: 440px;
    width: calc(100% - 2rem);
    overflow: visible;
}

.signin-dialog[b-nf7hhftfka]::backdrop {
    background: rgba(5, 12, 30, 0.55);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.signin-dialog[open][b-nf7hhftfka] {
    animation: signin-dialog-pop-b-nf7hhftfka 180ms ease-out;
}

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

.signin-dialog__card[b-nf7hhftfka] {
    position: relative;
    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-nf7hhftfka] {
    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-nf7hhftfka] {
    background: rgba(255, 255, 255, 0.08);
    color: #edf3ff;
}

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

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

.signin-dialog__title[b-nf7hhftfka] {
    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-nf7hhftfka] {
    margin: 0 0 1.25rem;
    color: #b7c2e2;
    font-size: 0.92rem;
    line-height: 1.55;
}

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

.signin-dialog__button[b-nf7hhftfka] {
    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-nf7hhftfka] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

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

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

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

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

@media (max-width: 540px) {
    .signin-dialog__card[b-nf7hhftfka] {
        padding: 1.6rem 1.15rem 1.25rem;
    }
    .signin-dialog__title[b-nf7hhftfka] {
        font-size: 1.1rem;
    }
}
/* /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;
}
/* /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/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, features-hmi.js 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. Fallback for reduced-motion and
   no-JS users is handled by the .no-anim override below. */
.features-hmi-demo[data-hmi-animate] [data-hmi-target][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[data-hmi-animate] [data-hmi-target].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[data-hmi-animate] [data-hmi-target].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[data-hmi-animate] [data-hmi-badge][b-foqd28ve42] {
    opacity: 0;
    transform: translateY(4px) rotate(-1.5deg);
    transition: opacity 420ms ease, transform 420ms ease;
}

.features-hmi-demo[data-hmi-animate] [data-hmi-badge].is-shown[b-foqd28ve42] {
    opacity: 1;
}

/* JS applies .no-anim as a hard fallback — reduced motion or any
   init failure settles the panel at its finished state on load. */
.features-hmi-demo[data-hmi-animate].no-anim [data-hmi-target][b-foqd28ve42],
.features-hmi-demo[data-hmi-animate].no-anim [data-hmi-badge][b-foqd28ve42] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ── 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[data-hmi-animate] [data-hmi-target].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[data-hmi-animate] [data-hmi-target][b-foqd28ve42],
    .features-hmi-demo[data-hmi-animate] [data-hmi-badge][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 data-twin-view) ─────────────── */
.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; JS drives transform on every rAF tick. */
.twin-machine[b-xdwyduyppb] {
    will-change: transform;
}

/* Gripper carriage slides along Z within the machine group; JS drives
   its transform on every tick 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
   JS animator 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: 56px;
    height: 56px;
    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: 24px;
    height: 24px;
}

.cordis-chat__panel[b-gtzse74fnw] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(396px, calc(100vw - 48px));
    height: min(58vh, 760px);
    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: 22px;
    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__panel[b-gtzse74fnw] {
        right: 0;
        bottom: 68px;
        width: calc(100vw - 24px);
        height: min(62vh, 760px);
        transform-origin: bottom right;
    }
}
/* /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(4, 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 are zeroed so spacing comes purely from --hardware-logo-gap.
       The Features-page pads varied per logo to compensate for the specific
       all-9-in-a-row sequence there; splitting the logos across two rows means
       the top row ended up with net +34px of extra margin while the bottom was
       at -68px, which read as obviously different spacing rhythms. Uniform
       gap-only spacing makes both rows visually identical. */
    --logo-beckhoff-scale: 0.78;
    --logo-beckhoff-pad: 0;
    --logo-csharp-scale: 1.55;
    --logo-csharp-pad: 0;
    --logo-codesys-scale: 2.05;
    --logo-codesys-pad: 0;
    --logo-ctrlx-scale: 0.9;
    --logo-ctrlx-pad: 0;
    --logo-mitsubishi-scale: 1.1;
    --logo-mitsubishi-pad: 0;
    --logo-phoenix-scale: 1.0;
    --logo-phoenix-pad: 0;
    --logo-rockwell-scale: 1.0;
    --logo-rockwell-pad: 0;
    --logo-siemens-scale: 0.7;
    --logo-siemens-pad: 0;
    --logo-weidmuller-scale: 0.78;
    --logo-weidmuller-pad: 0;
}

.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-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;
    }
}
/* /Components/HomeStackedCardsSection.razor.rz.scp.css */
/* ── Stacked scroll-driven cards ─────────────────────────────────────
   Sits between HomeProblemSection (--bg-0) and HomeDevelopmentFlowSection
   (--bg-0). Uses --bg-1 so it contrasts with both dark sections.
   Section is 300vh. Sticky frame is 100vh. Scroll budget = 200vh.
   Two transition phases of ~100vh each.
   ─────────────────────────────────────────────────────────────────── */

.stacked-cards-scroll[b-xh9p34xy5c] {
    height: 300vh;
    position: relative;
    background: var(--bg-1, #0c1428);
    box-shadow: inset 0 1px 0 var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.stacked-cards-sticky[b-xh9p34xy5c] {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-1, #0c1428);
    overflow: hidden;
}

/* Atmospheric wash behind the deck — subtle echo of the three cards:
   Cordis red left, blue center-pool, Cordis green right. */
.stacked-cards-sticky[b-xh9p34xy5c]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(31, 156, 216, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 32% 55% at 3% 50%, rgba(226, 7, 23, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 32% 55% at 97% 50%, rgba(59, 170, 53, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.stacked-cards-deck[b-xh9p34xy5c] {
    position: relative;
    width: min(860px, 90vw);
    isolation: isolate;
}

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

.stacked-card[b-xh9p34xy5c] {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: clamp(2.4rem, 4vw, 3.5rem) clamp(2.2rem, 4vw, 4rem);
    box-sizing: border-box;
    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;
    align-items: stretch;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* ── Per-card accent bar — top hairline gradient ── */

.stacked-card[b-xh9p34xy5c]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 20px 20px 0 0;
    z-index: 2;
}

/* Inner wash for warmth — matches Data Foundation column treatment */
.stacked-card[b-xh9p34xy5c]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    z-index: 0;
}

/* 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)
   Three cards, three Cordis logo colors, each narratively earned. */
.stacked-card--1[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(226, 7, 23, 0.8) 0%, rgba(226, 7, 23, 0.12) 100%); }
.stacked-card--2[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(31, 156, 216, 0.95) 0%, rgba(31, 156, 216, 0.12) 100%); }
.stacked-card--3[b-xh9p34xy5c]::before { background: linear-gradient(90deg, rgba(59, 170, 53, 0.85) 0%, rgba(59, 170, 53, 0.12) 100%); }

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

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

/* ── Two-column layout ── */

.stacked-card__col[b-xh9p34xy5c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stacked-card__col--left[b-xh9p34xy5c] {
    flex: 0 0 40%;
    padding-right: 24px;
    gap: 1.1rem;
}

.stacked-card__divider[b-xh9p34xy5c] {
    flex: 0 0 1px;
    align-self: stretch;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 20%,
        rgba(255, 255, 255, 0.12) 80%,
        transparent 100%);
}

.stacked-card__col--right[b-xh9p34xy5c] {
    flex: 1;
    padding-left: 24px;
    justify-content: center;
}

/* ── Icon ── */

.stacked-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;
}

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

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

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

.stacked-card__icon[b-xh9p34xy5c] {
    width: 1.4rem;
    height: 1.4rem;
    color: rgba(255, 255, 255, 0.88);
}

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

/* ── Typography ── */

.stacked-card__headline[b-xh9p34xy5c] {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.stacked-card__body[b-xh9p34xy5c] {
    margin: 0;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.75;
    color: rgba(239, 243, 255, 0.72);
    font-weight: 400;
    text-wrap: pretty;
}

/* ── Initial positions ──
   Card 1 sits on top (position: relative sizes the deck).
   Cards 2 and 3 start off-screen below — translateY(100vh) —
   so they emerge from outside the viewport edge as they enter.   */

.stacked-card--1[b-xh9p34xy5c] {
    position: relative;
    z-index: 2;
}

.stacked-card--2[b-xh9p34xy5c],
.stacked-card--3[b-xh9p34xy5c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(100vh);
}

.stacked-card--2[b-xh9p34xy5c] { z-index: 3; }
.stacked-card--3[b-xh9p34xy5c] { z-index: 1; }

/* ── Reduced motion: show all cards statically ── */

@media (prefers-reduced-motion: reduce) {
    .stacked-cards-scroll[b-xh9p34xy5c] {
        height: auto;
    }

    .stacked-cards-sticky[b-xh9p34xy5c] {
        position: relative;
        height: auto;
        padding: clamp(4rem, 8vw, 7rem) 1rem;
        flex-direction: column;
        gap: 1.5rem;
    }

    .stacked-cards-deck[b-xh9p34xy5c] {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .stacked-card[b-xh9p34xy5c],
    .stacked-card--2[b-xh9p34xy5c],
    .stacked-card--3[b-xh9p34xy5c] {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }
}

/* ── Responsive: stack columns on narrow screens ── */

@media (max-width: 600px) {
    .stacked-card[b-xh9p34xy5c] {
        flex-direction: column;
        padding: 2.5rem 2rem;
        min-height: 0;
    }

    .stacked-card__col--left[b-xh9p34xy5c] {
        flex: none;
        padding-right: 0;
    }

    .stacked-card__divider[b-xh9p34xy5c] {
        flex: 0 0 auto;
        align-self: auto;
        height: 1px;
        width: 100%;
        margin: 0.25rem 0;
    }

    .stacked-card__col--right[b-xh9p34xy5c] {
        flex: none;
        padding-left: 0;
    }
}
/* /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;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.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;
    animation-delay: 2.1s;
}

.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; }

@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;
    opacity: 0;
    transform: translateY(42px);
    animation: hero-top-clarifier-in-b-fojddur1jp 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s forwards;
    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;
    opacity: 0;
    transform: translateY(42px);
    animation: hero-top-clarifier-in-b-fojddur1jp 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 1.45s forwards;
    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;
    opacity: 0;
    animation: hero-partners-fade-in-b-fojddur1jp 620ms ease 1.45s forwards;
}

@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;
    /* 233vh gives each of the 3 paragraphs ~44vh of scroll dwell-time
       (1.5× shorter than the original 300vh) */
    height: 233vh;
    box-sizing: border-box;
    /* Break out of the parent grid's place-items: center so the section is full-width */
    width: 100%;
    justify-self: stretch;
    /* Fade both edges into the navy sections above and below:
       transparent → fully opaque over 120px at top,
       fully opaque → transparent over 120px at bottom. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 480px,
        black calc(100% - 480px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 480px,
        black calc(100% - 480px),
        transparent 100%
    );
}

/* Sticky viewport that pins to the top while the section scrolls past */
.home-heart-section__inner[b-fojddur1jp] {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Each paragraph is stacked in the same spot; JS toggles is-active / is-past */
.home-heart-section__p[b-fojddur1jp] {
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 50%;
    max-width: 760px;
    margin: 0 auto;
    /* Default: invisible, sitting 60px below centre */
    opacity: 0;
    transform: translateY(calc(-50% + 60px));
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.6;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
}

/* Visible and centred */
.home-heart-section__p.is-active[b-fojddur1jp] {
    opacity: 1;
    transform: translateY(-50%);
}

/* Already passed — invisible, sitting 50px above centre; quick exit */
.home-heart-section__p.is-past[b-fojddur1jp] {
    opacity: 0;
    transform: translateY(calc(-50% - 50px));
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.home-heart-section__final[b-fojddur1jp] {
    display: block;
    /* 0.8em extra + the natural 1.6 line-height = ~2.4em total gap ≈ 1.5 line heights */
    margin-top: 0.8em;
}

/* 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: 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;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-shell[b-1zjg4jxdzp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header[b-1zjg4jxdzp] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #081430;
    border-bottom: 1px solid #2c3d75;
}

.site-header .container[b-1zjg4jxdzp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand[b-1zjg4jxdzp] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    padding: 0.55rem 0;
    cursor: pointer;
    appearance: none;
    color: inherit;
    text-decoration: none;
}

.brand img[b-1zjg4jxdzp] {
    width: auto;
    height: var(--brand-logo-height);
    display: block;
}

.brand:focus-visible[b-1zjg4jxdzp] {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
    border-radius: 0.35rem;
}

.site-nav[b-1zjg4jxdzp] {
    padding: 0.45rem 0;
    margin-left: auto;
}

.nav-list[b-1zjg4jxdzp] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.nav-item[b-1zjg4jxdzp] {
    position: relative;
}

.nav-item > a[b-1zjg4jxdzp],
.dropdown-toggle[b-1zjg4jxdzp] {
    color: #ecf1ff;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.35rem;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.nav-item > a:hover[b-1zjg4jxdzp],
.dropdown-toggle:hover[b-1zjg4jxdzp] {
    background: rgba(255, 255, 255, 0.12);
}

.nav-item-dropdown[b-1zjg4jxdzp] {
    position: relative;
}

.nav-item-dropdown[b-1zjg4jxdzp]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.5rem;
}

.dropdown-menu[b-1zjg4jxdzp] {
    list-style: none;
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    min-width: 0;
    width: max-content;
    margin: 0;
    padding: 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(205, 224, 255, 0.28);
    background: linear-gradient(140deg, rgba(5, 16, 39, 0.82), rgba(11, 31, 83, 0.8), rgba(22, 62, 143, 0.72));
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(8, 20, 48, 0.22);
    display: grid;
    gap: 0.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 220ms ease, visibility 220ms ease;
}

.dropdown-menu li[b-1zjg4jxdzp] {
    margin: 0;
}

.dropdown-menu a[b-1zjg4jxdzp] {
    color: #edf3ff;
    text-decoration: none;
    border-radius: 0.35rem;
    padding: 0.45rem 0.55rem;
    display: block;
    white-space: nowrap;
}

.dropdown-menu a:hover[b-1zjg4jxdzp] {
    background: rgba(255, 255, 255, 0.14);
}

@media (min-width: 981px) {
    .nav-item-dropdown:hover > .dropdown-menu[b-1zjg4jxdzp] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-item-dropdown:hover > .dropdown-toggle[b-1zjg4jxdzp] {
        background: rgba(255, 255, 255, 0.12);
    }
}

.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;
}

@media (max-width: 980px) {
    .site-header .container[b-1zjg4jxdzp] {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0.35rem;
        padding-bottom: 0.45rem;
    }

    .site-nav[b-1zjg4jxdzp] {
        width: 100%;
    }

    .nav-list[b-1zjg4jxdzp] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
    }

    .nav-item > a[b-1zjg4jxdzp],
    .dropdown-toggle[b-1zjg4jxdzp] {
        width: 100%;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.06);
    }

    .nav-item-dropdown[b-1zjg4jxdzp]::after {
        display: none;
    }

    .dropdown-menu[b-1zjg4jxdzp] {
        position: static;
        box-shadow: none;
        border: 1px solid #cad6fa;
        margin-top: 0.35rem;
        min-width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        display: none;
    }

    .nav-item-dropdown:focus-within > .dropdown-menu[b-1zjg4jxdzp],
    .nav-item-dropdown:hover > .dropdown-menu[b-1zjg4jxdzp] {
        display: grid;
    }
}




/* Desktop nav anchor to hero title end (scoped source of truth) */
@media (min-width: 981px) {
    .site-header .container[b-1zjg4jxdzp] {
        position: relative;
        align-items: flex-start;
    }

    .brand[b-1zjg4jxdzp] {
        padding-top: 0.2rem;
        padding-bottom: 0;
    }

    .site-nav[b-1zjg4jxdzp] {
        position: absolute;
        left: calc(50% + 11.2ch);
        right: 1.25rem;
        margin: 0;
        padding-top: 1.1rem;
    }

    .nav-list[b-1zjg4jxdzp] {
        justify-content: flex-start;
    }
}


/* Final nav alignment override (desktop, high priority) */
@media (min-width: 981px) {
    .site-header .container[b-1zjg4jxdzp] {
        position: relative !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: clamp(2.5rem, 12vw, 5cm) !important;
        padding-right: clamp(1.25rem, 3vw, 2.25rem) !important;
    }

    .brand[b-1zjg4jxdzp] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
    }

    .brand img[b-1zjg4jxdzp] {
        height: 2.2rem !important;
    }

    .site-nav[b-1zjg4jxdzp] {
        position: static !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding-top: 0 !important;
        align-self: center !important;
    }

    .nav-list[b-1zjg4jxdzp] {
        justify-content: flex-end !important;
        align-items: center !important;
    }
}





/* Floating header on homepage (top: transparent content, scroll: glass bar) */
.site-header.is-floating-enabled[b-1zjg4jxdzp] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
}

.site-header.is-floating-enabled[b-1zjg4jxdzp]::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-1zjg4jxdzp]::before {
    opacity: 1;
    transform: translateY(0);
}

.site-header.is-floating-enabled.is-floating-dense[b-1zjg4jxdzp]::before {
    background: rgba(0, 0, 0, 0.54);
}

.site-header.is-floating-enabled .container[b-1zjg4jxdzp] {
    position: relative;
    z-index: 1;
    align-items: center !important;
}

.site-header.is-floating-enabled .nav-item > a[b-1zjg4jxdzp],
.site-header.is-floating-enabled .dropdown-toggle[b-1zjg4jxdzp] {
    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-1zjg4jxdzp],
.site-header.is-floating-enabled .dropdown-toggle:hover[b-1zjg4jxdzp] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.site-header.is-floating-enabled .nav-item > a:focus-visible[b-1zjg4jxdzp],
.site-header.is-floating-enabled .dropdown-toggle:focus-visible[b-1zjg4jxdzp] {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
    color: #ffffff;
}
/* Floating header size refinement (desktop/mobile fixed heights) */
@media (min-width: 981px) {
    .site-header.is-floating-enabled[b-1zjg4jxdzp] {
        height: 76px;
    }

    .site-header.is-floating-enabled .container[b-1zjg4jxdzp] {
        height: 100%;
        display: flex;
        align-items: center !important;
    }

    .site-header.is-floating-enabled .brand[b-1zjg4jxdzp] {
        height: 100%;
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header.is-floating-enabled .site-nav[b-1zjg4jxdzp] {
        height: 100%;
        display: flex;
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .site-header.is-floating-enabled .nav-list[b-1zjg4jxdzp] {
        height: 100%;
        display: flex;
        align-items: center !important;
    }
}

@media (max-width: 980px) {
    .site-header.is-floating-enabled[b-1zjg4jxdzp] {
        height: 60px;
    }

    .site-header.is-floating-enabled .container[b-1zjg4jxdzp] {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center !important;
        justify-content: space-between;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header.is-floating-enabled .brand[b-1zjg4jxdzp] {
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
    }

    .site-header.is-floating-enabled .site-nav[b-1zjg4jxdzp] {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }

    .site-header.is-floating-enabled .nav-list[b-1zjg4jxdzp] {
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: 0.2rem;
    }

    .site-header.is-floating-enabled .nav-item > a[b-1zjg4jxdzp],
    .site-header.is-floating-enabled .dropdown-toggle[b-1zjg4jxdzp] {
        width: auto;
        padding: 0.35rem 0.45rem;
        background: transparent;
        font-size: 0.85rem;
    }

    .site-header.is-floating-enabled .nav-item-dropdown[b-1zjg4jxdzp] {
        position: relative;
    }

    .site-header.is-floating-enabled .dropdown-menu[b-1zjg4jxdzp] {
        position: absolute;
        top: calc(100% + 0.4rem);
        left: auto;
        right: 0;
        width: max-content;
        min-width: 10rem;
        display: grid;
        padding: 0.45rem;
        margin-top: 0;
        border-radius: 0.5rem;
        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);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .site-header.is-floating-enabled .nav-item-dropdown:focus-within > .dropdown-menu[b-1zjg4jxdzp],
    .site-header.is-floating-enabled .nav-item-dropdown:hover > .dropdown-menu[b-1zjg4jxdzp] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 420px) {
    .site-header.is-floating-enabled .brand img[b-1zjg4jxdzp] {
        height: 1.6rem;
    }

    .site-header.is-floating-enabled .nav-list[b-1zjg4jxdzp] {
        gap: 0;
    }

    .site-header.is-floating-enabled .nav-item > a[b-1zjg4jxdzp],
    .site-header.is-floating-enabled .dropdown-toggle[b-1zjg4jxdzp] {
        padding: 0.3rem 0.4rem;
        font-size: 0.8rem;
    }

    .site-header.is-floating-enabled .dropdown-menu[b-1zjg4jxdzp] {
        min-width: 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/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);
}
/* /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;
}

/* ── 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);
    }
}
/* /Components/Pages/News.razor.rz.scp.css */
/* Suppress the blue blobs from feature-page-canvas / coming-soon-page globals */
.feature-page-canvas[b-gn8udvab84]::before,
.feature-page-canvas[b-gn8udvab84]::after,
.coming-soon-page[b-gn8udvab84]::before,
.coming-soon-page[b-gn8udvab84]::after {
    display: none;
}

.news-page[b-gn8udvab84] {
    min-height: calc(100vh - 4.25rem);
    display: grid;
    place-items: start center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.2rem clamp(3rem, 6vw, 5rem);
    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);
    position: relative;
    isolation: isolate;
}

/* Raster grid — same as About / Contact */
.news-page[b-gn8udvab84]::before {
    content: "";
    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%);
}

.news-inner[b-gn8udvab84] {
    width: min(100%, 96rem);
    position: relative;
    z-index: 1;
}

.news-head[b-gn8udvab84] {
    text-align: center;
    color: #f0f4ff;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    max-width: 48rem;
}

.news-eyebrow[b-gn8udvab84] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    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;
}

.news-eyebrow[b-gn8udvab84]::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.5px;
    background: #1F9CD8;
    flex-shrink: 0;
}

.news-head h1[b-gn8udvab84] {
    margin: 0;
    font-size: clamp(2.3rem, 4.4vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #ffffff;
    text-wrap: balance;
}

.news-head p[b-gn8udvab84] {
    position: relative;
    margin: 0 auto 0;
    padding-top: 1.6rem;
    color: rgba(239, 243, 255, 0.62);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.7;
}

.news-head p[b-gn8udvab84]::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%);
}

/* ── Carousel layout ─────────────────────────── */

.news-carousel[b-gn8udvab84] {
    --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%;
}

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

.news-carousel__track[b-gn8udvab84] {
    display: flex;
    gap: var(--news-carousel-gap);
    will-change: transform;
}

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

.news-embed-card__frame[b-gn8udvab84] {
    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 — red/blue/green cycle across cards */
.news-embed-card__frame[b-gn8udvab84]::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-gn8udvab84]::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-gn8udvab84]::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-gn8udvab84]::before {
    content: "";
    display: block;
    padding-top: 116%;
}

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

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

.news-carousel__btn[b-gn8udvab84] {
    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-gn8udvab84] {
    background: rgba(31, 156, 216, 0.14);
    border-color: rgba(31, 156, 216, 0.5);
}

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

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

/* ── Section headers (YouTube / Spotify) ────── */

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

.news-section__eyebrow[b-gn8udvab84] {
    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;
}

/* Section eyebrow colors rotate too — red for videos, green for podcasts */
.news-section:nth-of-type(2) .news-section__eyebrow[b-gn8udvab84] { color: rgba(226, 7, 23, 0.9); }
.news-section:nth-of-type(3) .news-section__eyebrow[b-gn8udvab84] { color: rgba(59, 170, 53, 0.9); }

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

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

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

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

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

.news-youtube-frame iframe[b-gn8udvab84] {
    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-gn8udvab84]::before {
    display: none;
}

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

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

@media (max-width: 720px) {
    .news-page[b-gn8udvab84] {
        padding-inline: 0.5rem;
    }

    .news-carousel[b-gn8udvab84] {
        grid-template-columns: 2.5rem 1fr 2.5rem;
        gap: 0.4rem;
    }

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

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

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

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

}

@media (min-width: 721px) and (max-width: 1024px) {
    .news-youtube-grid[b-gn8udvab84] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /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%);
}