/* App styles on top of the MudBlazor theme (Theme/ArroTheme.cs).
   Brand tokens follow the live arrosystems.com Elementor kit; motion tokens
   and t-* transition classes are vendored from transitions.dev (see
   .claude/skills/motion-transitions). */

:root {
    /* Brand (arrosystems.com global kit) */
    --arro-navy: #042D49;
    --arro-navy-deep: #032338;
    --arro-green: #368604;
    --arro-green-dark: #2E7203;
    --arro-green-leaf: #79A349;
    --arro-blue: #11759D;
    --arro-sky: #1999CC;
    --arro-slate: #57586E;
    --arro-mist: #ECF0F6;
    --arro-ink: #232525;
    --arro-paper: #F6FAFC;

    /* Motion tokens (transitions.dev) */
    --stagger-dur: 500ms;
    --stagger-distance: 12px;
    --stagger-stagger: 60ms;
    --stagger-blur: 3px;
    --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --tilt-perspective: 1000px;
    --tilt-return: 1000ms;
    --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tilt-follow: 400ms;
    --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tilt-glare-opacity: 0.32;
    --tilt-glare-fade: 300ms;
    --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --digit-dur: 500ms;
    --digit-distance: 8px;
    --digit-stagger: 70ms;
    --digit-blur: 2px;
    --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);

    --tabs-dur: 250ms;
    --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --shake-distance: 6px;
    --shake-overshoot: 4px;
    --shake-dur-a: 80ms;
    --shake-dur-b: 60ms;
    --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --revert-dur: 280ms;

    --check-opacity-dur: 500ms;
    --check-rotate-dur: 500ms;
    --check-rotate-from: 80deg;
    --check-bob-dur: 500ms;
    --check-y-amount: 40px;
    --check-blur-dur: 500ms;
    --check-blur-from: 10px;
    --check-path-dur: 500ms;
    --check-path-delay: 80ms;
    --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);

    --page-slide-dur: 250ms;
    --page-slide-distance: 8px;
    --page-blur: 3px;
    --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection {
    background: var(--arro-green);
    color: #ffffff;
}

/* FocusOnNavigate moves focus to the page h1 for screen readers; headings
   are not interactive, so suppress the visible ring. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* ── App bar (console shell) ──────────────────────────────────────────── */

/* Signature accent carried over from the ARRO Mobile shell (its
   AppBarGreenBorder rule), recolored to the marketing-site green. */
.AppBarGreenBorder {
    border-bottom: 4px solid var(--arro-green);
}

.appbar-logo {
    height: 26px;
    display: block;
}

.brand-sub {
    opacity: .6;
    font-weight: 500;
}

.env-chip { font-weight: 600; }

.avatar-initials {
    background: var(--arro-navy);
    color: #fff;
    font-weight: 600;
}

/* ── transitions.dev: texts reveal (hero copy) ───────────────────────── */

.t-stagger-line {
    display: block;
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
    transition:
        opacity var(--stagger-dur) var(--stagger-ease),
        transform var(--stagger-dur) var(--stagger-ease),
        filter var(--stagger-dur) var(--stagger-ease);
    will-change: transform, opacity, filter;
}

.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }

.t-stagger.is-shown .t-stagger-line {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ── transitions.dev: card hover tilt (hero visual) ──────────────────── */

.t-tilt { touch-action: none; }

.t-tilt-card {
    position: relative;
    transform:
        perspective(var(--tilt-perspective))
        rotateX(var(--tilt-rx, 0deg))
        rotateY(var(--tilt-ry, 0deg));
    transform-style: preserve-3d;
    transition: transform var(--tilt-return) var(--tilt-return-ease);
    will-change: transform;
}

.t-tilt-card.is-tilting {
    transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}

/* Framed variant clips the glare to the surface; used on solid tiles. */
.t-tilt-card--framed {
    border-radius: 16px;
    overflow: hidden;
}

.t-tilt-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
            rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0) 84%),
        radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
            rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0) 78%),
        radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
            rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 88%);
    transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}

.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }

/* ── transitions.dev: number pop-in (console uptime) ─────────────────── */

@keyframes t-digit-pop-in {
    0% {
        transform: translate(0, var(--digit-distance));
        opacity: 0;
        filter: blur(var(--digit-blur));
    }
    100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
    display: inline-flex;
    align-items: baseline;
}

.t-digit {
    display: inline-block;
    will-change: transform, opacity, filter;
}

.t-digit-group.is-animating .t-digit {
    animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}

.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }

/* ── transitions.dev: tabs sliding (equal-width segmented control) ───── */

.t-tabs {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 4px;
    border-radius: 999px;
    background: var(--arro-mist);
    isolation: isolate;
}

.t-tab {
    appearance: none;
    border: 0;
    background: transparent;
    height: 38px;
    padding: 4px 18px;
    font: 600 0.9rem 'Lexend Deca', sans-serif;
    color: rgba(35, 37, 37, 0.6);
    cursor: pointer;
    border-radius: 999px;
    z-index: 1;
    transition: color var(--tabs-dur) var(--tabs-ease);
    white-space: nowrap;
}

.t-tab:hover,
.t-tab[aria-selected="true"] { color: var(--arro-navy); }

/* Equal-width tabs let the pill position derive from the selected index
   alone, so Blazor can drive it without measuring the DOM. */
.t-tabs-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--tab-count, 3));
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(4, 45, 73, 0.22);
    transform: translateX(calc(100% * var(--tab-index, 0)));
    transition: transform var(--tabs-dur) var(--tabs-ease);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

/* ── transitions.dev: error state shake (login form) ─────────────────── */

.t-input {
    transition: border-color 150ms ease-out;
    will-change: transform;
}

.t-input.is-shaking {
    animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}

@keyframes t-input-shake {
    0%     { transform: translateX(0); animation-timing-function: var(--shake-ease); }
    28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
    57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
    78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
    100%   { transform: translateX(0); }
}

.t-error-msg {
    opacity: 0;
    visibility: hidden;
    color: #b3261e;
    font-size: 0.85rem;
    margin: 6px 2px 0;
    transition:
        opacity var(--revert-dur) ease-out,
        visibility 0s linear var(--revert-dur);
}

.t-input-wrap.is-error .t-error-msg {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--revert-dur) ease-out,
        visibility 0s linear 0s;
}

/* ── transitions.dev: success check (login confirmation) ─────────────── */

.t-success-check {
    display: inline-block;
    transform-origin: center;
    opacity: 0;
    will-change: transform, opacity, filter;
}

.t-success-check svg { display: block; overflow: visible; }

.t-success-check svg path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}

.t-success-check[data-state="in"] {
    animation:
        t-check-fade   var(--check-opacity-dur) var(--check-ease-out) forwards,
        t-check-rotate var(--check-rotate-dur)  var(--check-ease-out) forwards,
        t-check-blur   var(--check-blur-dur)    var(--check-ease-out) forwards,
        t-check-bob    var(--check-bob-dur)     var(--check-ease-bob) forwards;
}

.t-success-check[data-state="in"] svg path {
    animation: t-check-draw var(--check-path-dur) var(--check-ease-out) var(--check-path-delay) forwards;
}

@keyframes t-check-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur   { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob    { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw   { to { stroke-dashoffset: 0; } }

/* ── Scroll reveal (landing sections; classes flipped by arro-motion.js) */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(var(--stagger-blur));
    transition:
        opacity 600ms var(--stagger-ease),
        transform 600ms var(--stagger-ease),
        filter 600ms var(--stagger-ease);
    transition-delay: calc(var(--reveal-index, 0) * 80ms);
}

.reveal.is-shown {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ── Console panel enter (page fade, keyed per tab) ──────────────────── */

@keyframes panel-enter {
    from {
        opacity: 0;
        transform: translateY(var(--page-slide-distance));
        filter: blur(var(--page-blur));
    }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.panel-enter {
    animation: panel-enter var(--page-slide-dur) var(--page-slide-ease) both;
}

/* ── Landing page ─────────────────────────────────────────────────────── */

.landing {
    min-height: 100dvh;
    background: var(--arro-navy);
    color: #ffffff;
    font-family: 'Lexend Deca', sans-serif;
}

.landing-nav {
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-logo {
    height: 30px;
    display: block;
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 12px 28px;
    font: 600 0.95rem 'Lexend Deca', sans-serif;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 200ms var(--stagger-ease), box-shadow 200ms var(--stagger-ease), background-color 200ms ease;
}

.btn-pill:active { transform: translateY(1px) scale(0.98); }

.btn-green {
    background: var(--arro-green);
    color: #ffffff;
}

.btn-green:hover {
    background: var(--arro-green-dark);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.btn-outline-light {
    background: transparent;
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}

.btn-outline-light:hover { box-shadow: inset 0 0 0 1.5px #ffffff; }

/* Hero: asymmetric split, copy left, tilting product shot right. */
.hero {
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 40px;
    align-items: center;
}

.hero-headline {
    font-size: clamp(2.2rem, 4.8vw, 3.8rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 20px;
}

.hero-headline .accent { color: var(--arro-green-leaf); }

.hero-sub {
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 32rem;
    margin: 0 0 30px;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-visual { margin: 0 auto; width: 100%; }

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

/* Trust wall directly under the hero (real agency seals). */
.trust {
    background: var(--arro-navy-deep);
    padding: 34px 24px;
}

.trust-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.trust p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.trust img {
    display: block;
    max-width: min(640px, 100%);
    height: auto;
}

/* Release flow strip. */
.flow {
    background: var(--arro-paper);
    color: var(--arro-ink);
    padding: 80px 24px;
}

.flow-inner { max-width: 1160px; margin: 0 auto; }

.flow h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--arro-navy);
    margin: 0 0 10px;
}

.flow-lede {
    font-size: 1rem;
    color: var(--arro-slate);
    max-width: 42rem;
    margin: 0 0 40px;
    line-height: 1.6;
}

.flow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.flow-step {
    background: #ffffff;
    border: 1px solid var(--arro-mist);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 1px 3px rgba(4, 45, 73, 0.06);
}

.flow-step .glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--arro-mist);
    color: var(--arro-green);
    margin-bottom: 14px;
    font-weight: 700;
}

.flow-step img { width: 26px; height: 26px; }

.flow-step h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--arro-navy);
    margin: 0 0 6px;
}

.flow-step p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--arro-slate);
    margin: 0;
}

/* Bento: what the PoC proves. */
.bento {
    background: var(--arro-paper);
    color: var(--arro-ink);
    padding: 8px 24px 88px;
}

.bento-inner { max-width: 1160px; margin: 0 auto; }

.bento h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--arro-navy);
    margin: 0 0 40px;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(190px, auto);
    gap: 18px;
}

.bento-tile {
    background: #ffffff;
    border-radius: 16px;
    padding: 26px;
    border: 1px solid var(--arro-mist);
    box-shadow: 0 1px 3px rgba(4, 45, 73, 0.06);
    overflow: hidden;
}

.bento-tile h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--arro-navy);
    margin: 0 0 8px;
}

.bento-tile p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--arro-slate);
    margin: 0;
}

.bento-tile--proof {
    grid-column: span 2;
    background: var(--arro-navy);
    border-color: var(--arro-navy);
}

.bento-tile--proof h3 { color: #ffffff; }
.bento-tile--proof p { color: rgba(255, 255, 255, 0.72); }

.bento-tile--proof pre {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    font: 0.78rem/1.6 ui-monospace, Consolas, monospace;
    color: #9fd77c;
    overflow-x: auto;
}

.bento-tile--proof .proof-live {
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--arro-green, #79A349);
    box-shadow: 0 0 0 3px rgba(121, 163, 73, 0.25);
}

.bento-tile--screen {
    grid-row: span 2;
    padding: 0;
    background: linear-gradient(165deg, var(--arro-blue), var(--arro-navy));
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-tile--screen img {
    display: block;
    width: 88%;
    height: auto;
}

.bento-tile--mist { background: var(--arro-mist); border-color: var(--arro-mist); }

/* Field section: storm image + resilience copy. */
.field {
    background: var(--arro-paper);
    padding: 0 24px 96px;
}

.field-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
}

.field img {
    display: block;
    width: 100%;
    height: auto;
}

.field h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--arro-navy);
    margin: 0 0 14px;
}

.field p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--arro-slate);
    margin: 0 0 12px;
}

.field ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.field li {
    display: flex;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--arro-ink);
}

.field li::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background: var(--arro-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Footer. */
.landing-footer {
    background: var(--arro-navy);
    padding: 48px 24px;
}

.landing-footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.landing-footer img { height: 24px; display: block; }

.landing-footer small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    line-height: 1.5;
    max-width: 44rem;
}

.landing-footer nav { display: flex; gap: 20px; }

.landing-footer nav a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    text-decoration: none;
}

.landing-footer nav a:hover { color: #ffffff; }

.landing-footer .footer-status {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* ── Login page ───────────────────────────────────────────────────────── */

.login-page {
    min-height: 100dvh;
    background:
        radial-gradient(1100px 560px at 85% -10%, rgba(17, 117, 157, 0.5), transparent 60%),
        var(--arro-navy);
    font-family: 'Lexend Deca', sans-serif;
    display: flex;
    flex-direction: column;
}

.login-nav { padding: 22px 24px; }
.login-nav img { height: 28px; display: block; }

.login-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: min(430px, 100%);
    background: #ffffff;
    border-radius: 16px;
    padding: 36px 34px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    color: var(--arro-ink);
}

.login-card .login-logo { height: 26px; display: block; }

.login-card h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--arro-navy);
    margin: 20px 0 4px;
}

.login-card .login-sub {
    font-size: 0.9rem;
    color: var(--arro-slate);
    margin: 0 0 26px;
}

.btn-entra {
    width: 100%;
    background: var(--arro-navy);
    color: #ffffff;
}

.btn-entra:hover {
    background: var(--arro-navy-deep);
    box-shadow: 0 6px 20px rgba(4, 45, 73, 0.35);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--arro-slate);
    font-size: 0.8rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--arro-mist);
}

.login-field { margin-bottom: 14px; }

.login-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--arro-navy);
    margin-bottom: 6px;
}

.login-field input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid rgba(35, 37, 37, 0.22);
    border-radius: 10px;
    padding: 12px 14px;
    font: 400 0.95rem 'Lexend Deca', sans-serif;
    color: var(--arro-ink);
    background: #fff;
    outline: none;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.login-field input:focus {
    border-color: var(--arro-green);
    box-shadow: 0 0 0 3px rgba(54, 134, 4, 0.16);
}

.t-input.is-error input { border-color: #b3261e; }

.btn-signin { width: 100%; }

.login-hint {
    font-size: 0.78rem;
    color: var(--arro-slate);
    margin-top: 20px;
    line-height: 1.5;
}

.login-busy {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 0 10px;
}

/* Shimmer text while the simulated Entra redirect is in flight. */
.shimmer-text {
    font-size: 0.9rem;
    background: linear-gradient(90deg, #7c7c7c 40%, #0d0d0d 50%, #7c7c7c 60%) 0 0 / 400% 100% text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer-sweep 2000ms linear infinite;
}

@keyframes shimmer-sweep {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

.login-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 0 12px;
}

.login-success .t-success-check { color: var(--arro-green); }

.login-success p { font-weight: 600; margin: 18px 0 2px; }

.login-success small { color: var(--arro-slate); }

/* ── Console page ─────────────────────────────────────────────────────── */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.stat-tile {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    border: 1px solid var(--arro-mist);
    box-shadow: 0 1px 3px rgba(4, 45, 73, 0.06);
}

.stat-tile .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--arro-slate);
    margin-bottom: 6px;
}

.stat-tile .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--arro-navy);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

/* Slot color is semantic: the blue/green deployment target. */
.stat-value--blue { color: var(--arro-blue); }
.stat-value--green { color: var(--arro-green); }

/* Deployment-info table: fixed label column, monospace values. */
.row-label {
    width: 14rem;
    text-align: left;
    font-weight: 600;
    opacity: .8;
}

.row-value {
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
}

.pipeline-card { border-left: 4px solid var(--arro-green); }

/* ── Pre-Blazor loading shell ─────────────────────────────────────────── */

.app-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    background: #042D49;
    color: #fff;
}

.app-loading-brand {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: .14em;
    animation: loading-pulse 1600ms ease-in-out infinite;
}

.app-loading-brand .accent { color: #79A349; }

.app-loading-sub {
    margin-top: .5rem;
    opacity: .7;
    font-size: .9rem;
}

@keyframes loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

#blazor-error-ui {
    background: lightyellow;
    color: #3e2723;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        padding-bottom: 56px;
        gap: 36px;
    }

    .flow-steps { grid-template-columns: repeat(2, 1fr); }

    .bento-grid { grid-template-columns: 1fr 1fr; }
    .bento-tile--proof { grid-column: span 2; }
    .bento-tile--screen { grid-row: span 1; }

    .field-inner { grid-template-columns: 1fr; gap: 32px; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .flow-steps { grid-template-columns: 1fr; }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-tile--proof { grid-column: span 1; }
    .stat-grid { grid-template-columns: 1fr; }
    .hero-ctas .btn-pill { width: 100%; }
}

/* ── Live release feed chip ───────────────────────────────────────────── */

.feed-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font: 600 0.68rem/1.4 'Lexend Deca', sans-serif;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
}

.feed-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.feed-chip--live {
    color: var(--arro-green);
    border-color: var(--arro-green-leaf);
    background: rgba(121, 163, 73, 0.12);
}

.feed-chip--live .feed-dot { animation: feed-pulse 1.6s ease-in-out infinite; }

.feed-chip--connecting,
.feed-chip--reconnecting {
    color: var(--arro-blue);
    border-color: var(--arro-sky);
    background: rgba(25, 153, 204, 0.10);
}

.feed-chip--offline {
    color: var(--arro-slate);
    border-color: var(--arro-mist);
    background: var(--arro-mist);
}

@keyframes feed-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(54, 134, 4, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(54, 134, 4, 0); }
}

/* ── Diagram stage (.claude/skills/html-diagram) ──────────────────────── */

.diagram-stage { position: relative; }

.diagram-stage svg { width: 100%; height: auto; display: block; }

.dg-box {
    fill: #ffffff;
    stroke: var(--arro-blue);
    stroke-width: 1.5;
}

.dg-group {
    fill: var(--arro-paper);
    stroke: var(--arro-mist);
    stroke-width: 1.5;
}

.dg-group-label {
    fill: var(--arro-slate);
    font: 600 13px 'Lexend Deca', sans-serif;
}

.dg-node { cursor: pointer; outline: none; }

.dg-node--gated .dg-box { stroke-dasharray: 6 4; fill: var(--arro-paper); }

.dg-node:hover .dg-box,
.dg-node:focus-visible .dg-box,
.dg-node.is-selected .dg-box {
    stroke: var(--arro-green);
    stroke-width: 2.5;
}

.dg-label {
    fill: var(--arro-navy);
    font: 600 14px 'Lexend Deca', sans-serif;
    pointer-events: none;
}

.dg-sublabel {
    fill: var(--arro-slate);
    font: 400 11px 'Lexend Deca', sans-serif;
    pointer-events: none;
}

.dg-edge-label {
    fill: var(--arro-slate);
    font: 500 11px 'Lexend Deca', sans-serif;
}

.dg-line { fill: none; stroke: var(--arro-slate); stroke-width: 1.5; }

.dg-line--muted { stroke: var(--arro-mist); stroke-width: 1.5; stroke-dasharray: 4 4; }

.dg-arrowhead { fill: var(--arro-slate); }

.dg-flow {
    fill: none;
    stroke: var(--arro-green-leaf);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
    animation: dg-flow 1.1s linear infinite;
}

@keyframes dg-flow { to { stroke-dashoffset: -18; } }

.dg-panel {
    position: absolute;
    right: 12px;
    top: 12px;
    max-width: 340px;
    background: var(--arro-navy);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 16px 40px 16px 18px;
    box-shadow: 0 14px 36px rgba(4, 45, 73, 0.35);
    font-family: 'Lexend Deca', sans-serif;
}

.dg-panel h4 { margin: 0 0 6px; font-size: 0.9rem; color: #ffffff; }

.dg-panel p { margin: 0; font-size: 0.8rem; line-height: 1.55; }

.dg-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 6px;
}

.dg-panel-close:hover { color: #ffffff; }

@media (max-width: 700px) {
    .dg-panel { position: static; max-width: none; margin-top: 12px; }
}

/* Sub-tabs inside a diagram tab (Pipelines: ci / pr / release) — a smaller cut
   of the console's sliding-pill segmented control. */
.t-tabs--sub { max-width: 560px; padding: 3px; }

.t-tabs--sub .t-tab { height: 30px; font-size: 0.78rem; padding: 2px 12px; }

/* Seven-view Infrastructure host: same sliding-pill control, more tabs. Equal
   columns (minmax keeps every track identical) preserve the pill math — width
   and offset are still 1/tab-count. minmax's floor forces a min column width so
   the longer labels ("Disaster Recovery", "Cloud Environment") never clip;
   below ~900px the control scrolls sideways instead of cramming or wrapping,
   so the page body never scrolls horizontally. */
.t-tabs--sub7 {
    padding: 3px;
    grid-auto-columns: minmax(118px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
}

.t-tabs--sub7::-webkit-scrollbar { display: none; }

.t-tabs--sub7 .t-tab { height: 30px; font-size: 0.72rem; padding: 2px 8px; }

.dg-tab-caption {
    margin: 10px 2px 14px;
    font: 400 0.8rem 'Lexend Deca', sans-serif;
    color: var(--arro-slate);
    max-width: 78ch;
}

/* A stage that exists in the YAML but is off by default (opt-in deploy). */
.dg-group--gated { stroke-dasharray: 6 4; }

/* ── PWA update toast ─────────────────────────────────────────────────── */

.pwa-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 18px;
    background: var(--arro-navy);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(4, 45, 73, 0.35);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pwa-toast-update {
    border: 0;
    border-radius: 999px;
    padding: 7px 16px;
    background: var(--arro-green, #79A349);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pwa-toast-update:hover { filter: brightness(1.08); }

.pwa-toast-dismiss {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 6px;
}

.pwa-toast-dismiss:hover { color: #ffffff; }

/* ── Reduced motion: collapse everything to static ────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .t-stagger-line,
    .reveal,
    .t-tabs-pill,
    .t-tab,
    .t-input,
    .btn-pill { transition: none !important; }

    .t-stagger-line,
    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .t-tilt-card { transform: none !important; transition: none !important; }
    .t-digit-group .t-digit { animation: none !important; }
    .t-input.is-shaking { animation: none !important; }
    .panel-enter { animation: none !important; }
    .app-loading-brand { animation: none !important; }
    .shimmer-text { animation: none !important; color: #555; }

    .t-success-check { animation: none !important; opacity: 1; }
    .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }

    .dg-flow { animation: none !important; }
    .feed-chip--live .feed-dot { animation: none !important; }
}