/* _content/xsubi-website/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-6v73uqmmmv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content[b-6v73uqmmmv] {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

#blazor-error-ui[b-6v73uqmmmv] {
    background: var(--xs-bg-surface);
    color: var(--xs-text);
    border-top: 2px solid var(--xs-primary);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem;
    display: none;
}

#blazor-error-ui .dismiss[b-6v73uqmmmv] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

@media (max-width: 767.98px) {
    .main-content[b-6v73uqmmmv] {
        padding: 1.5rem 1rem;
    }
}
/* _content/xsubi-website/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar[b-2w3xneh37d] {
    background: rgba(var(--xs-bg-rgb, 11, 17, 32), 0.85);
    border-bottom: 1px solid var(--xs-border, #1e3a5f);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.navbar-inner[b-2w3xneh37d] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 3.5rem;
}

/* Brand */
.navbar-brand[b-2w3xneh37d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--xs-text-bright, #f8fafc);
    font-weight: 700;
    font-size: 1.25rem;
}

.brand-icon[b-2w3xneh37d] {
    color: var(--xs-primary);
    font-size: 1.5rem;
}

.brand-text[b-2w3xneh37d] {
    letter-spacing: -0.02em;
}

/* Nav links — center */
.navbar-links[b-2w3xneh37d] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link[b-2w3xneh37d] {
    color: var(--xs-text-secondary, #8b9ab5);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover[b-2w3xneh37d] {
    color: var(--xs-text);
    background: var(--xs-bg-card, rgba(255,255,255,0.05));
}

.nav-link.active[b-2w3xneh37d] {
    color: var(--xs-accent, #22d3ee);
}

/* Actions — right */
.navbar-actions[b-2w3xneh37d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-nav[b-2w3xneh37d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--xs-transition, 0.2s ease);
    min-width: 120px;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-nav-secondary[b-2w3xneh37d] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--xs-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-nav-secondary:hover[b-2w3xneh37d] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-nav-primary[b-2w3xneh37d] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(34, 211, 238, 0.4));
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-nav-primary:hover[b-2w3xneh37d] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(34, 211, 238, 0.6));
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Coming Soon — unconfigured features */
.nav-coming-soon[b-2w3xneh37d] {
    cursor: default;
    opacity: 0.55;
    position: relative;
}

.nav-coming-soon:hover[b-2w3xneh37d] {
    opacity: 0.8;
}

.nav-coming-soon[b-2w3xneh37d]::after {
    content: attr(title);
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--xs-bg-card, #1a1a2e);
    color: var(--xs-accent, #22d3ee);
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.65rem;
    white-space: nowrap;
    border: 1px solid rgba(34, 211, 238, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 200;
}

.nav-coming-soon:hover[b-2w3xneh37d]::after {
    opacity: 1;
}

/* Hamburger — hidden on desktop */
.navbar-toggler[b-2w3xneh37d] {
    display: none;
    background: transparent;
    border: 1px solid var(--xs-border, #1e3a5f);
    color: var(--xs-text);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.125rem;
}

/* Mobile */
@media (max-width: 767.98px) {
    .navbar-inner[b-2w3xneh37d] {
        flex-wrap: wrap;
        height: auto;
        padding: 0.75rem 1rem;
    }

    .navbar-toggler[b-2w3xneh37d] {
        display: flex;
    }

    .navbar-links[b-2w3xneh37d] {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0.75rem 0;
        border-top: 1px solid var(--xs-border, #1e3a5f);
        margin-top: 0.75rem;
    }

    .navbar-links.show[b-2w3xneh37d] {
        display: flex;
    }

    .nav-link[b-2w3xneh37d] {
        padding: 0.625rem 0.75rem;
        width: 100%;
    }

    .navbar-actions[b-2w3xneh37d] {
        order: 2;
        gap: 0.375rem;
    }

    .btn-nav[b-2w3xneh37d] {
        padding: 0.4rem 0.875rem;
        font-size: 0.75rem;
        min-width: 90px;
    }
}
/* _content/xsubi-website/Components/Pages/About.razor.rz.scp.css */
.about-page[b-mxkbt82w3r] {
    max-width: 960px;
}

.about-hero[b-mxkbt82w3r] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero-badge-sm[b-mxkbt82w3r] {
    display: inline-block;
    background: var(--xs-accent-subtle);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid var(--xs-border);
    font-family: var(--xs-font-mono);
}

.about-hero h1[b-mxkbt82w3r] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.about-hero .lead[b-mxkbt82w3r] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.about-hero .tagline[b-mxkbt82w3r] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

section h2[b-mxkbt82w3r] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-mxkbt82w3r] {
    color: var(--xs-accent);
}

section p[b-mxkbt82w3r] {
    color: var(--xs-text-secondary);
}

.card-title[b-mxkbt82w3r] {
    color: var(--xs-text-bright);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.card-title i[b-mxkbt82w3r] {
    color: var(--xs-accent);
}

.card-text[b-mxkbt82w3r] {
    color: var(--xs-text-secondary);
}

.domain-list[b-mxkbt82w3r] {
    list-style: none;
    padding: 0;
}

.domain-list li[b-mxkbt82w3r] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    font-size: 0.875rem;
}

.domain-list li:last-child[b-mxkbt82w3r] {
    border-bottom: none;
}

.domain-list li[b-mxkbt82w3r]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-accent);
    margin-right: 0.75rem;
    vertical-align: middle;
}

.stack-list[b-mxkbt82w3r] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stack-list li[b-mxkbt82w3r] {
    padding: 0.375rem 0;
    color: var(--xs-text);
    font-size: 0.875rem;
}

.stack-list li[b-mxkbt82w3r]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-primary-light);
    margin-right: 0.75rem;
    vertical-align: middle;
}

.site-version[b-mxkbt82w3r] {
    text-align: center;
    color: #666;
    font-size: 0.75rem;
    font-family: var(--xs-font-mono);
    padding: 2rem 0 0;
}

/* Mobile Responsive */
@media (max-width: 640.98px) {
    .about-hero h1[b-mxkbt82w3r] {
        font-size: 1.75rem;
    }

    .about-hero .lead[b-mxkbt82w3r] {
        font-size: 1.1rem;
    }

    .about-hero .tagline[b-mxkbt82w3r] {
        font-size: 0.9rem;
    }

    section h2[b-mxkbt82w3r] {
        font-size: 1rem;
    }

    .card-title[b-mxkbt82w3r] {
        font-size: 0.925rem;
    }

    .domain-list li[b-mxkbt82w3r],
    .stack-list li[b-mxkbt82w3r] {
        font-size: 0.8rem;
        padding: 0.375rem 0;
    }
}
/* _content/xsubi-website/Components/Pages/About/Company.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   AboutNew.razor.css
   Consolidated CSS for /about page
   Sources: AboutUs.razor.css, About.razor.css,
            Engineering.razor.css, Consulting.razor.css
   ══════════════════════════════════════════════════════ */

/* ── Page container ───────────────────────────────── */

.about-page[b-yzcfwyyps5] {
    max-width: 960px;
}

/* ── Hero ─────────────────────────────────────────── */

.about-hero[b-yzcfwyyps5] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero-badge-sm[b-yzcfwyyps5] {
    display: inline-block;
    background: var(--xs-accent-subtle);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid var(--xs-border);
    font-family: var(--xs-font-mono);
}

.about-hero h1[b-yzcfwyyps5] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.about-hero .lead[b-yzcfwyyps5] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.about-hero .tagline[b-yzcfwyyps5] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* ── Sticky section nav ───────────────────────────── */

.section-nav[b-yzcfwyyps5] {
    position: sticky;
    top: 60px;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-bottom: 2rem;
    background: var(--xs-bg);
    border-bottom: 1px solid var(--xs-card-border);
    overflow-x: auto;
}

.section-pill[b-yzcfwyyps5] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--xs-text-secondary);
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    transition: all 150ms ease;
}

.section-pill:hover[b-yzcfwyyps5] {
    color: var(--xs-text-bright);
    border-color: var(--xs-accent);
    text-decoration: none;
}

.section-pill.active[b-yzcfwyyps5] {
    color: var(--xs-text-bright);
    background: var(--xs-accent-subtle);
    border-color: var(--xs-accent);
}

/* ── Section headings ─────────────────────────────── */

section h2[b-yzcfwyyps5] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-yzcfwyyps5] {
    color: var(--xs-accent);
}

.section-sub-heading[b-yzcfwyyps5] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    margin-bottom: 0.875rem;
    margin-top: 0;
    letter-spacing: 0.02em;
}

.section-sub-heading i[b-yzcfwyyps5] {
    color: var(--xs-accent);
}

.section-sub[b-yzcfwyyps5] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
}

.section-subtitle[b-yzcfwyyps5] {
    color: var(--xs-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
}

section p[b-yzcfwyyps5] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ── Card base ────────────────────────────────────── */

.card-title[b-yzcfwyyps5] {
    color: var(--xs-text-bright);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.card-title i[b-yzcfwyyps5] {
    color: var(--xs-accent);
}

.card-text[b-yzcfwyyps5] {
    color: var(--xs-text-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ── Domain list ──────────────────────────────────── */

.domain-list[b-yzcfwyyps5] {
    list-style: none;
    padding: 0;
}

.domain-list li[b-yzcfwyyps5] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    font-size: 0.875rem;
}

.domain-list li:last-child[b-yzcfwyyps5] {
    border-bottom: none;
}

.domain-list li[b-yzcfwyyps5]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-accent);
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* ── Stack list ───────────────────────────────────── */

.stack-list[b-yzcfwyyps5] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stack-list li[b-yzcfwyyps5] {
    padding: 0.375rem 0;
    color: var(--xs-text);
    font-size: 0.875rem;
}

.stack-list li[b-yzcfwyyps5]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-primary-light);
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* ── Ecosystem cards ──────────────────────────────── */

.ecosystem-card-link[b-yzcfwyyps5] {
    text-decoration: none;
    display: block;
    height: 100%;
}

.ecosystem-card[b-yzcfwyyps5] {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

.ecosystem-card:hover[b-yzcfwyyps5] {
    transform: translateY(-2px);
    box-shadow: var(--xs-glow);
    border-color: rgba(34, 211, 238, 0.3);
}

.ecosystem-icon[b-yzcfwyyps5] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--xs-accent);
    margin-bottom: 0.875rem;
}

.ecosystem-url[b-yzcfwyyps5] {
    display: inline-flex;
    align-items: center;
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    color: var(--xs-accent);
    margin-top: 0.75rem;
}

/* ── Infrastructure stack ─────────────────────────── */

.infra-stack[b-yzcfwyyps5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.infra-row[b-yzcfwyyps5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--xs-card-bg);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
}

.infra-layer-label[b-yzcfwyyps5] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-secondary);
    font-family: var(--xs-font-mono);
    min-width: 100px;
    padding-top: 0.2rem;
    flex-shrink: 0;
}

.infra-tags[b-yzcfwyyps5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.infra-tag[b-yzcfwyyps5] {
    background: var(--xs-accent-subtle);
    color: var(--xs-text);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-family: var(--xs-font-mono);
}

/* ── Timeline ─────────────────────────────────────── */

.timeline[b-yzcfwyyps5] {
    position: relative;
    padding-left: 1.5rem;
}

.timeline[b-yzcfwyyps5]::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--xs-card-border);
}

.timeline-item[b-yzcfwyyps5] {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 2rem;
}

.timeline-item:last-child[b-yzcfwyyps5] {
    padding-bottom: 0;
}

.timeline-dot[b-yzcfwyyps5] {
    position: absolute;
    left: -1.125rem;
    top: 0.375rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--xs-card-border);
    border: 2px solid var(--xs-card-border);
}

.timeline-item.completed .timeline-dot[b-yzcfwyyps5] {
    background: var(--xs-accent);
    border-color: var(--xs-accent);
}

.timeline-item.planned .timeline-dot[b-yzcfwyyps5] {
    background: transparent;
    border-color: var(--xs-text-secondary);
}

.timeline-period[b-yzcfwyyps5] {
    font-family: var(--xs-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.timeline-title[b-yzcfwyyps5] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.375rem;
}

.timeline-desc[b-yzcfwyyps5] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.timeline-status[b-yzcfwyyps5] {
    font-size: 0.7rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Metric cards ─────────────────────────────────── */

.metric-card[b-yzcfwyyps5] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 200ms ease;
}

.metric-card:hover[b-yzcfwyyps5] {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08);
}

.metric-value[b-yzcfwyyps5] {
    font-size: 2.5rem;
    font-weight: 800;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-bright);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-label[b-yzcfwyyps5] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-secondary);
}

.metric-icon[b-yzcfwyyps5] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 1.5rem;
    opacity: 0.15;
}

.metric-card.accent .metric-icon[b-yzcfwyyps5] { color: var(--xs-accent); }
.metric-card.primary .metric-icon[b-yzcfwyyps5] { color: var(--xs-primary); }
.metric-card.success .metric-icon[b-yzcfwyyps5] { color: var(--xs-success); }
.metric-card.warning .metric-icon[b-yzcfwyyps5] { color: var(--xs-warning); }

/* ── AI Orchestration flow ────────────────────────── */

.orch-flow[b-yzcfwyyps5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.orch-card[b-yzcfwyyps5] {
    flex: 1;
    min-width: 140px;
    border-radius: var(--xs-radius);
    padding: 1.25rem 1rem;
    border: 1px solid var(--xs-card-border);
    background: var(--xs-bg-card);
}

.orch-card.opus[b-yzcfwyyps5] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.04);
}

.orch-card.orchestrator[b-yzcfwyyps5] {
    border-color: rgba(34, 211, 238, 0.25);
    background: rgba(34, 211, 238, 0.03);
}

.orch-card.sonnet[b-yzcfwyyps5] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}

.orch-card.output[b-yzcfwyyps5] {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.03);
}

.orch-card-header[b-yzcfwyyps5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.orch-badge[b-yzcfwyyps5] {
    font-size: 0.7rem;
    font-weight: 800;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
}

.orch-card.opus .orch-badge[b-yzcfwyyps5] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--xs-primary-light);
}

.orch-card.orchestrator .orch-badge[b-yzcfwyyps5] {
    background: rgba(34, 211, 238, 0.12);
    color: var(--xs-accent);
}

.orch-card.sonnet .orch-badge[b-yzcfwyyps5] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--xs-success);
}

.orch-card.output .orch-badge[b-yzcfwyyps5],
.output-badge[b-yzcfwyyps5] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--xs-warning);
}

.orch-role[b-yzcfwyyps5] {
    font-size: 0.65rem;
    color: var(--xs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.orch-list[b-yzcfwyyps5] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.orch-list li[b-yzcfwyyps5] {
    font-size: 0.75rem;
    color: var(--xs-text-secondary);
    padding-left: 0.75rem;
    position: relative;
    line-height: 1.4;
}

.orch-list li[b-yzcfwyyps5]::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--xs-text-muted);
}

.orch-arrow[b-yzcfwyyps5] {
    font-size: 1.25rem;
    color: rgba(34, 211, 238, 0.4);
    flex-shrink: 0;
}

.orch-description[b-yzcfwyyps5] {
    padding: 0.875rem 1.25rem;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.1);
    border-radius: var(--xs-radius-sm);
    color: var(--xs-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ── Tech tags ────────────────────────────────────── */

.tech-tags[b-yzcfwyyps5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag[b-yzcfwyyps5] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    border-radius: var(--xs-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-tag.lang[b-yzcfwyyps5] {
    background: rgba(34, 211, 238, 0.08);
    color: var(--xs-accent);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.tech-tag.framework[b-yzcfwyyps5] {
    background: rgba(99, 102, 241, 0.08);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.tech-tag.tool[b-yzcfwyyps5] {
    background: rgba(16, 185, 129, 0.08);
    color: var(--xs-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.tech-tag.infra[b-yzcfwyyps5] {
    background: rgba(245, 158, 11, 0.06);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

/* ── Project table ────────────────────────────────── */

.project-name[b-yzcfwyyps5] {
    font-weight: 700;
    color: var(--xs-text-bright);
    white-space: nowrap;
}

.text-accent[b-yzcfwyyps5] {
    color: var(--xs-accent) !important;
}

.mono[b-yzcfwyyps5] {
    font-family: var(--xs-font-mono);
    font-size: 0.85rem;
}

.domain-tag[b-yzcfwyyps5] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.domain-tag.distributed[b-yzcfwyyps5] {
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.domain-tag.devtools[b-yzcfwyyps5] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.domain-tag.web[b-yzcfwyyps5] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--xs-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.domain-tag.infra[b-yzcfwyyps5] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--xs-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.domain-tag.docs[b-yzcfwyyps5] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--xs-info);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.stack-tag[b-yzcfwyyps5] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
    background: var(--xs-bg-surface);
    color: var(--xs-text-secondary);
    border: 1px solid var(--xs-card-border);
    margin-right: 0.25rem;
    font-family: var(--xs-font-mono);
}

/* ── Progress bars ────────────────────────────────── */

.progress-cell[b-yzcfwyyps5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    height: 14px;
}

.progress-bar-fill[b-yzcfwyyps5] {
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--xs-primary), rgba(99, 102, 241, 0.4));
    flex-shrink: 0;
    transition: width 500ms ease;
}

.progress-bar-fill.high[b-yzcfwyyps5] {
    background: linear-gradient(90deg, var(--xs-accent), rgba(34, 211, 238, 0.4));
}

.progress-pct[b-yzcfwyyps5] {
    font-size: 0.65rem;
    font-family: var(--xs-font-mono);
    font-weight: 700;
    color: var(--xs-text-secondary);
    white-space: nowrap;
}

.progress-label-sm[b-yzcfwyyps5] {
    font-size: 0.6rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* ── Service cards ────────────────────────────────── */

.service-card[b-yzcfwyyps5] {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.service-card:hover[b-yzcfwyyps5] {
    transform: translateY(-2px);
    box-shadow: var(--xs-glow);
    border-color: rgba(34, 211, 238, 0.3);
}

.service-icon[b-yzcfwyyps5] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--xs-accent);
}

.service-list[b-yzcfwyyps5] {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.service-list li[b-yzcfwyyps5] {
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: var(--xs-text-secondary);
    border-bottom: 1px solid var(--xs-card-border);
}

.service-list li:last-child[b-yzcfwyyps5] {
    border-bottom: none;
}

.service-list li[b-yzcfwyyps5]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-accent);
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* ── Engagement ───────────────────────────────────── */

.link-accent[b-yzcfwyyps5] {
    color: var(--xs-accent);
    text-decoration: none;
    font-weight: 600;
}

.link-accent:hover[b-yzcfwyyps5] {
    color: var(--xs-text-bright);
}

.engagement-note[b-yzcfwyyps5] {
    display: flex;
    align-items: flex-start;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
}

/* ── CTA row ──────────────────────────────────────── */

.cta-row[b-yzcfwyyps5] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-cta[b-yzcfwyyps5] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--xs-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.btn-cta:hover[b-yzcfwyyps5] {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-cta-primary[b-yzcfwyyps5] {
    background: var(--xs-accent);
    color: #000;
}

.btn-cta-secondary[b-yzcfwyyps5] {
    background: transparent;
    color: var(--xs-accent);
    border: 1px solid var(--xs-accent);
}

/* ── Founder card ─────────────────────────────────── */

.founder-card[b-yzcfwyyps5] {
    border-color: rgba(34, 211, 238, 0.2);
}

.founder-avatar[b-yzcfwyyps5] {
    font-size: 2.5rem;
    color: var(--xs-accent);
}

.founder-role[b-yzcfwyyps5] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--xs-accent);
    margin-bottom: 0.75rem;
    font-family: var(--xs-font-mono);
}

.btn-link-accent[b-yzcfwyyps5] {
    display: inline-flex;
    align-items: center;
    color: var(--xs-accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.75rem;
}

.btn-link-accent:hover[b-yzcfwyyps5] {
    color: var(--xs-text-bright);
    text-decoration: none;
}

/* ── Version footer ───────────────────────────────── */

.site-version[b-yzcfwyyps5] {
    text-align: center;
    color: #666;
    font-size: 0.75rem;
    font-family: var(--xs-font-mono);
    padding: 2rem 0 0;
}

/* ══════════════════════════════════════════════════════
   Mobile — 767.98px
   ══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .section-nav[b-yzcfwyyps5] {
        top: 56px;
    }

    .orch-flow[b-yzcfwyyps5] {
        flex-direction: column;
        align-items: stretch;
    }

    .orch-arrow[b-yzcfwyyps5] {
        transform: rotate(90deg);
        text-align: center;
    }

    .infra-row[b-yzcfwyyps5] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .infra-layer-label[b-yzcfwyyps5] {
        min-width: unset;
    }
}

/* ══════════════════════════════════════════════════════
   Mobile — 640.98px
   ══════════════════════════════════════════════════════ */

@media (max-width: 640.98px) {
    .about-hero h1[b-yzcfwyyps5] {
        font-size: 1.75rem;
    }

    .about-hero .lead[b-yzcfwyyps5] {
        font-size: 1.1rem;
    }

    .about-hero .tagline[b-yzcfwyyps5] {
        font-size: 0.9rem;
    }

    section h2[b-yzcfwyyps5] {
        font-size: 1rem;
    }

    .section-sub-heading[b-yzcfwyyps5] {
        font-size: 0.875rem;
    }

    .card-title[b-yzcfwyyps5] {
        font-size: 0.925rem;
    }

    .domain-list li[b-yzcfwyyps5],
    .stack-list li[b-yzcfwyyps5] {
        font-size: 0.8rem;
        padding: 0.375rem 0;
    }

    .metric-value[b-yzcfwyyps5] {
        font-size: 2rem;
    }

    .metric-card[b-yzcfwyyps5] {
        padding: 1.25rem 0.875rem;
    }

    .tech-tag[b-yzcfwyyps5] {
        font-size: 0.65rem;
        padding: 0.25rem 0.625rem;
    }

    .domain-tag[b-yzcfwyyps5] {
        font-size: 0.6rem;
    }

    .stack-tag[b-yzcfwyyps5] {
        font-size: 0.6rem;
    }

    .project-name[b-yzcfwyyps5] {
        font-size: 0.85rem;
    }

    .mono[b-yzcfwyyps5] {
        font-size: 0.75rem;
    }

    .section-pill[b-yzcfwyyps5] {
        font-size: 0.7rem;
        padding: 0.35rem 0.75rem;
    }

    .cta-row[b-yzcfwyyps5] {
        flex-direction: column;
    }

    .btn-cta[b-yzcfwyyps5] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/xsubi-website/Components/Pages/About/Consulting.razor.rz.scp.css */
.consulting-page[b-m6olbhbls3] {
    max-width: 960px;
}

/* ── Hero ─────────────────────────────────────────── */

.consulting-hero[b-m6olbhbls3] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero-badge-sm[b-m6olbhbls3] {
    display: inline-block;
    background: var(--xs-accent-subtle);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid var(--xs-border);
    font-family: var(--xs-font-mono);
}

.consulting-hero h1[b-m6olbhbls3] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.consulting-hero .lead[b-m6olbhbls3] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.consulting-hero .tagline[b-m6olbhbls3] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* ── Section headings ─────────────────────────────── */

section h2[b-m6olbhbls3] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-m6olbhbls3] {
    color: var(--xs-accent);
}

section p[b-m6olbhbls3] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.card-title[b-m6olbhbls3] {
    color: var(--xs-text-bright);
    font-weight: 700;
    font-size: 1rem;
}

.card-text[b-m6olbhbls3] {
    color: var(--xs-text-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ── Service cards ────────────────────────────────── */

.service-card[b-m6olbhbls3] {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.service-card:hover[b-m6olbhbls3] {
    transform: translateY(-2px);
    box-shadow: var(--xs-glow);
    border-color: rgba(34, 211, 238, 0.3);
}

.service-icon[b-m6olbhbls3] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--xs-accent);
}

.service-list[b-m6olbhbls3] {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.service-list li[b-m6olbhbls3] {
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: var(--xs-text-secondary);
    border-bottom: 1px solid var(--xs-card-border);
}

.service-list li:last-child[b-m6olbhbls3] {
    border-bottom: none;
}

.service-list li[b-m6olbhbls3]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-accent);
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* ── Proof / Engagement ───────────────────────────── */

.link-accent[b-m6olbhbls3] {
    color: var(--xs-accent);
    text-decoration: none;
    font-weight: 600;
}

.link-accent:hover[b-m6olbhbls3] {
    color: var(--xs-text-bright);
}

.engagement-note[b-m6olbhbls3] {
    display: flex;
    align-items: flex-start;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
}

/* ── CTA row ──────────────────────────────────────── */

.cta-row[b-m6olbhbls3] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-cta[b-m6olbhbls3] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--xs-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.btn-cta:hover[b-m6olbhbls3] {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-cta-primary[b-m6olbhbls3] {
    background: var(--xs-accent);
    color: #000;
}

.btn-cta-secondary[b-m6olbhbls3] {
    background: transparent;
    color: var(--xs-accent);
    border: 1px solid var(--xs-accent);
}

/* ── Feature disabled ─────────────────────────────── */

.feature-disabled[b-m6olbhbls3] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--xs-text-secondary);
}

/* ── Mobile ───────────────────────────────────────── */

@media (max-width: 640.98px) {
    .consulting-hero h1[b-m6olbhbls3] {
        font-size: 1.75rem;
    }

    .consulting-hero .lead[b-m6olbhbls3] {
        font-size: 1.1rem;
    }

    .consulting-hero .tagline[b-m6olbhbls3] {
        font-size: 0.9rem;
    }

    section h2[b-m6olbhbls3] {
        font-size: 1rem;
    }

    .cta-row[b-m6olbhbls3] {
        flex-direction: column;
    }

    .btn-cta[b-m6olbhbls3] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/xsubi-website/Components/Pages/About/LanguageReference.razor.rz.scp.css */
/* ── Language Reference Page ─────────────────────────────── */

.langref-page[b-szciej3f4g] {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
    color: var(--xs-text);
}

/* ── Hero ────────────────────────────────────────────────── */

.langref-hero[b-szciej3f4g] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.langref-hero .hero-badge-sm[b-szciej3f4g] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-accent);
    background: var(--xs-accent-subtle);
    border-radius: 999px;
}

.langref-hero h1[b-szciej3f4g] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--xs-accent);
    margin-bottom: 0.5rem;
}

.langref-hero .lead[b-szciej3f4g] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.5rem;
}

.langref-hero .tagline[b-szciej3f4g] {
    font-size: 0.95rem;
    color: var(--xs-text-secondary);
    max-width: 640px;
    line-height: 1.6;
}

/* ── Pattern Cards ───────────────────────────────────────── */

.pattern-card[b-szciej3f4g] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.pattern-name[b-szciej3f4g] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--xs-card-border);
}

/* ── Language Grid ───────────────────────────────────────── */

.lang-grid[b-szciej3f4g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.lang-block[b-szciej3f4g] {
    position: relative;
}

.lang-label[b-szciej3f4g] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--xs-accent);
    background: var(--xs-primary-subtle);
    border-radius: var(--xs-radius-sm);
}

/* ── Code Samples ────────────────────────────────────────── */

.code-sample pre[b-szciej3f4g] {
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.75rem;
    margin: 0;
    font-family: var(--xs-font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--xs-text);
    overflow-x: auto;
    white-space: pre;
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .lang-grid[b-szciej3f4g] {
        grid-template-columns: 1fr;
    }

    .langref-hero h1[b-szciej3f4g] {
        font-size: 1.75rem;
    }

    .langref-hero .lead[b-szciej3f4g] {
        font-size: 1.1rem;
    }

    .pattern-card[b-szciej3f4g] {
        padding: 1rem;
    }
}
/* _content/xsubi-website/Components/Pages/AboutUs.razor.rz.scp.css */
.about-us-page[b-iz3jxhtw7c] {
    max-width: 960px;
}

/* ── Hero ─────────────────────────────────────────── */

.about-us-hero[b-iz3jxhtw7c] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero-badge-sm[b-iz3jxhtw7c] {
    display: inline-block;
    background: var(--xs-accent-subtle);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid var(--xs-border);
    font-family: var(--xs-font-mono);
}

.about-us-hero h1[b-iz3jxhtw7c] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.about-us-hero .lead[b-iz3jxhtw7c] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.about-us-hero .tagline[b-iz3jxhtw7c] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* ── Section headings ─────────────────────────────── */

section h2[b-iz3jxhtw7c] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-iz3jxhtw7c] {
    color: var(--xs-accent);
}

.section-sub[b-iz3jxhtw7c] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
}

section p[b-iz3jxhtw7c] {
    color: var(--xs-text-secondary);
}

.card-title[b-iz3jxhtw7c] {
    color: var(--xs-text-bright);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.card-text[b-iz3jxhtw7c] {
    color: var(--xs-text-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ── Ecosystem cards ──────────────────────────────── */

.ecosystem-card-link[b-iz3jxhtw7c] {
    text-decoration: none;
    display: block;
    height: 100%;
}

.ecosystem-card[b-iz3jxhtw7c] {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

.ecosystem-card:hover[b-iz3jxhtw7c] {
    transform: translateY(-2px);
    box-shadow: var(--xs-glow);
    border-color: rgba(34, 211, 238, 0.3);
}

.ecosystem-icon[b-iz3jxhtw7c] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--xs-accent);
    margin-bottom: 0.875rem;
}

.ecosystem-url[b-iz3jxhtw7c] {
    display: inline-flex;
    align-items: center;
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    color: var(--xs-accent);
    margin-top: 0.75rem;
}

/* ── Infrastructure stack ─────────────────────────── */

.infra-stack[b-iz3jxhtw7c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.infra-row[b-iz3jxhtw7c] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--xs-card-bg);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
}

.infra-layer-label[b-iz3jxhtw7c] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-secondary);
    font-family: var(--xs-font-mono);
    min-width: 100px;
    padding-top: 0.2rem;
    flex-shrink: 0;
}

.infra-tags[b-iz3jxhtw7c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.infra-tag[b-iz3jxhtw7c] {
    background: var(--xs-accent-subtle);
    color: var(--xs-text);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-family: var(--xs-font-mono);
}

/* ── Timeline ─────────────────────────────────────── */

.timeline[b-iz3jxhtw7c] {
    position: relative;
    padding-left: 1.5rem;
}

.timeline[b-iz3jxhtw7c]::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--xs-card-border);
}

.timeline-item[b-iz3jxhtw7c] {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 2rem;
}

.timeline-item:last-child[b-iz3jxhtw7c] {
    padding-bottom: 0;
}

.timeline-dot[b-iz3jxhtw7c] {
    position: absolute;
    left: -1.125rem;
    top: 0.375rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--xs-card-border);
    border: 2px solid var(--xs-card-border);
}

.timeline-item.completed .timeline-dot[b-iz3jxhtw7c] {
    background: var(--xs-accent);
    border-color: var(--xs-accent);
}

.timeline-item.planned .timeline-dot[b-iz3jxhtw7c] {
    background: transparent;
    border-color: var(--xs-text-secondary);
}

.timeline-period[b-iz3jxhtw7c] {
    font-family: var(--xs-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.timeline-title[b-iz3jxhtw7c] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.375rem;
}

.timeline-desc[b-iz3jxhtw7c] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.timeline-status[b-iz3jxhtw7c] {
    font-size: 0.7rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Founder card ─────────────────────────────────── */

.founder-card[b-iz3jxhtw7c] {
    border-color: rgba(34, 211, 238, 0.2);
}

.founder-avatar[b-iz3jxhtw7c] {
    font-size: 2.5rem;
    color: var(--xs-accent);
}

.founder-role[b-iz3jxhtw7c] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--xs-accent);
    margin-bottom: 0.75rem;
    font-family: var(--xs-font-mono);
}

.btn-link-accent[b-iz3jxhtw7c] {
    display: inline-flex;
    align-items: center;
    color: var(--xs-accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.75rem;
}

.btn-link-accent:hover[b-iz3jxhtw7c] {
    color: var(--xs-text-bright);
    text-decoration: none;
}

/* ── Feature disabled ─────────────────────────────── */

.feature-disabled[b-iz3jxhtw7c] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--xs-text-secondary);
}

/* ── Mobile ───────────────────────────────────────── */

@media (max-width: 640.98px) {
    .about-us-hero h1[b-iz3jxhtw7c] {
        font-size: 1.75rem;
    }

    .about-us-hero .lead[b-iz3jxhtw7c] {
        font-size: 1.1rem;
    }

    .about-us-hero .tagline[b-iz3jxhtw7c] {
        font-size: 0.9rem;
    }

    section h2[b-iz3jxhtw7c] {
        font-size: 1rem;
    }

    .infra-row[b-iz3jxhtw7c] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .infra-layer-label[b-iz3jxhtw7c] {
        min-width: unset;
    }
}
/* _content/xsubi-website/Components/Pages/AccessDenied.razor.rz.scp.css */
/* ============================================
   Access Denied — 403 error page
   ============================================ */

.denied-container[b-pq5p5tvdw5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.denied-card[b-pq5p5tvdw5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 420px;
    width: 100%;
}

.denied-code[b-pq5p5tvdw5] {
    font-size: 5rem;
    font-weight: 900;
    color: var(--xs-danger);
    opacity: 0.25;
    line-height: 1;
    margin: 0;
    font-family: var(--xs-font-mono);
    letter-spacing: -0.05em;
}

.denied-icon[b-pq5p5tvdw5] {
    font-size: 2.5rem;
    color: var(--xs-danger);
    margin-bottom: 0.25rem;
}

.denied-card h1[b-pq5p5tvdw5] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin: 0;
    letter-spacing: -0.02em;
}

.denied-card p[b-pq5p5tvdw5] {
    font-size: 0.95rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

.denied-actions[b-pq5p5tvdw5] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .denied-code[b-pq5p5tvdw5] {
        font-size: 4rem;
    }

    .denied-card h1[b-pq5p5tvdw5] {
        font-size: 1.5rem;
    }

    .denied-actions[b-pq5p5tvdw5] {
        flex-direction: column;
        width: 100%;
    }

    .denied-actions .btn[b-pq5p5tvdw5] {
        width: 100%;
        text-align: center;
    }
}
/* _content/xsubi-website/Components/Pages/Account/Profile.razor.rz.scp.css */
/* ── Page Layout ──────────────────────────────────── */

.profile-page[b-zcjq3z3c3t] {
    max-width: 1080px;
    padding-bottom: 4rem;
}

.profile-layout[b-zcjq3z3c3t] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

/* ── Preview Notice ───────────────────────────────── */

.profile-preview-notice[b-zcjq3z3c3t] {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--xs-radius);
    padding: 0.75rem 1.25rem;
    color: var(--xs-primary-light);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

/* ── Profile Header ───────────────────────────────── */

.profile-header[b-zcjq3z3c3t] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    margin-bottom: 2rem;
}

.profile-avatar[b-zcjq3z3c3t] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--xs-primary-subtle);
    border: 2px solid rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--xs-primary-light);
    flex-shrink: 0;
}

.profile-header-info[b-zcjq3z3c3t] {
    flex: 1;
}

.profile-name[b-zcjq3z3c3t] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin-bottom: 0.2rem;
    letter-spacing: -0.02em;
}

.profile-email[b-zcjq3z3c3t] {
    color: var(--xs-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.6rem;
}

.profile-badges[b-zcjq3z3c3t] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-badge[b-zcjq3z3c3t] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
}

.profile-badge--admin[b-zcjq3z3c3t] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.profile-badge--member[b-zcjq3z3c3t] {
    background: rgba(139, 154, 181, 0.1);
    color: var(--xs-text-secondary);
    border: 1px solid rgba(139, 154, 181, 0.15);
}

/* ── Buttons ──────────────────────────────────────── */

.btn-profile[b-zcjq3z3c3t] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.125rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.btn-profile:disabled[b-zcjq3z3c3t] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-profile.btn-sm[b-zcjq3z3c3t] {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

.btn-profile-secondary[b-zcjq3z3c3t] {
    background: var(--xs-bg-elevated);
    color: var(--xs-text);
    border: 1px solid var(--xs-card-border);
}

.btn-profile-secondary:not(:disabled):hover[b-zcjq3z3c3t] {
    background: var(--xs-bg-card-hover);
    color: var(--xs-text-bright);
    text-decoration: none;
}

.btn-profile-danger[b-zcjq3z3c3t] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--xs-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-profile-danger:not(:disabled):hover[b-zcjq3z3c3t] {
    background: rgba(239, 68, 68, 0.18);
}

/* ── Section Titles ───────────────────────────────── */

.profile-section[b-zcjq3z3c3t] {
    margin-bottom: 1.5rem;
}

.profile-section-title[b-zcjq3z3c3t] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-muted);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.profile-section-title i[b-zcjq3z3c3t] {
    color: var(--xs-accent);
}

/* ── Profile Card ─────────────────────────────────── */

.profile-card[b-zcjq3z3c3t] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.5rem;
}

.profile-card-hint[b-zcjq3z3c3t] {
    font-size: 0.8rem;
    color: var(--xs-text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ── Field Grid ───────────────────────────────────── */

.profile-field-grid[b-zcjq3z3c3t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

.profile-field[b-zcjq3z3c3t] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-label[b-zcjq3z3c3t] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.field-value[b-zcjq3z3c3t] {
    font-size: 0.875rem;
    color: var(--xs-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-mono[b-zcjq3z3c3t] {
    font-family: var(--xs-font-mono);
    color: var(--xs-accent);
}

.field-badge[b-zcjq3z3c3t] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-badge--verified[b-zcjq3z3c3t] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--xs-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ── Providers ────────────────────────────────────── */

.provider-list[b-zcjq3z3c3t] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.provider-row[b-zcjq3z3c3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--xs-card-border);
}

.provider-row:last-child[b-zcjq3z3c3t] {
    border-bottom: none;
    padding-bottom: 0;
}

.provider-row:first-child[b-zcjq3z3c3t] {
    padding-top: 0;
}

.provider-info[b-zcjq3z3c3t] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.provider-icon[b-zcjq3z3c3t] {
    width: 36px;
    height: 36px;
    border-radius: var(--xs-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.provider-icon--github[b-zcjq3z3c3t] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--xs-text-secondary);
    border: 1px solid var(--xs-card-border);
}

.provider-icon--google[b-zcjq3z3c3t] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--xs-text-secondary);
    border: 1px solid var(--xs-card-border);
}

.provider-icon--xsubi[b-zcjq3z3c3t] {
    background: var(--xs-primary-subtle);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.provider-details[b-zcjq3z3c3t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.provider-name[b-zcjq3z3c3t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xs-text);
}

.provider-status[b-zcjq3z3c3t] {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.provider-status--connected[b-zcjq3z3c3t] {
    color: var(--xs-success);
}

.provider-status--disconnected[b-zcjq3z3c3t] {
    color: var(--xs-text-muted);
}

.status-dot-sm[b-zcjq3z3c3t] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--xs-success);
    flex-shrink: 0;
}

/* ── API Keys ─────────────────────────────────────── */

.api-key-list[b-zcjq3z3c3t] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.25rem;
}

.api-key-row[b-zcjq3z3c3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--xs-card-border);
    gap: 1rem;
}

.api-key-row:last-child[b-zcjq3z3c3t] {
    border-bottom: none;
    padding-bottom: 0;
}

.api-key-row:first-child[b-zcjq3z3c3t] {
    padding-top: 0;
}

.api-key-info[b-zcjq3z3c3t] {
    flex: 1;
    min-width: 0;
}

.api-key-name[b-zcjq3z3c3t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xs-text);
    margin-bottom: 0.2rem;
}

.api-key-meta[b-zcjq3z3c3t] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.api-key-value[b-zcjq3z3c3t] {
    font-family: var(--xs-font-mono);
    font-size: 0.775rem;
    color: var(--xs-text-secondary);
    background: var(--xs-bg-elevated);
    padding: 0.2rem 0.5rem;
    border-radius: var(--xs-radius-sm);
    border: 1px solid var(--xs-card-border);
}

.api-key-created[b-zcjq3z3c3t] {
    font-size: 0.75rem;
    color: var(--xs-text-muted);
}

.api-key-actions[b-zcjq3z3c3t] {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.btn-icon[b-zcjq3z3c3t] {
    width: 32px;
    height: 32px;
    border-radius: var(--xs-radius-sm);
    border: 1px solid var(--xs-card-border);
    background: var(--xs-bg-elevated);
    color: var(--xs-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.btn-icon:not(:disabled):hover[b-zcjq3z3c3t] {
    background: var(--xs-bg-card-hover);
    color: var(--xs-text);
}

.btn-icon:disabled[b-zcjq3z3c3t] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon--danger[b-zcjq3z3c3t] {
    color: var(--xs-danger);
    border-color: rgba(239, 68, 68, 0.2);
}

.btn-icon--danger:not(:disabled):hover[b-zcjq3z3c3t] {
    background: rgba(239, 68, 68, 0.08);
}

.api-key-footer[b-zcjq3z3c3t] {
    border-top: 1px solid var(--xs-card-border);
    padding-top: 1rem;
}

/* ── Usage ────────────────────────────────────────── */

.usage-item[b-zcjq3z3c3t] {
    margin-bottom: 1rem;
}

.usage-item:last-child[b-zcjq3z3c3t] {
    margin-bottom: 0;
}

.usage-label[b-zcjq3z3c3t] {
    font-size: 0.75rem;
    color: var(--xs-text-muted);
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--xs-font-mono);
}

.usage-value[b-zcjq3z3c3t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xs-text);
    margin-bottom: 0.4rem;
}

.usage-bar-wrap[b-zcjq3z3c3t] {
    width: 100%;
}

.usage-bar[b-zcjq3z3c3t] {
    height: 4px;
    background: var(--xs-bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.usage-bar-fill[b-zcjq3z3c3t] {
    height: 100%;
    background: var(--xs-accent);
    border-radius: 2px;
    transition: width 600ms ease;
}

/* ── Security ─────────────────────────────────────── */

.security-item[b-zcjq3z3c3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--xs-card-border);
    gap: 1rem;
}

.security-item:last-child[b-zcjq3z3c3t] {
    border-bottom: none;
    padding-bottom: 0;
}

.security-item:first-child[b-zcjq3z3c3t] {
    padding-top: 0;
}

.security-item-info[b-zcjq3z3c3t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.security-item-label[b-zcjq3z3c3t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xs-text);
}

.security-item-meta[b-zcjq3z3c3t] {
    font-size: 0.75rem;
    color: var(--xs-text-muted);
}

.security-item-meta--off[b-zcjq3z3c3t] {
    color: var(--xs-warning);
}

/* ── Plan Card ────────────────────────────────────── */

.profile-card--plan[b-zcjq3z3c3t] {
    text-align: center;
}

.plan-name[b-zcjq3z3c3t] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--xs-primary-light);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.plan-desc[b-zcjq3z3c3t] {
    font-size: 0.8rem;
    color: var(--xs-text-muted);
    margin-bottom: 0;
    line-height: 1.5;
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 991.98px) {
    .profile-layout[b-zcjq3z3c3t] {
        grid-template-columns: 1fr;
    }

    .profile-field-grid[b-zcjq3z3c3t] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Responsive — Mobile ──────────────────────────── */

@media (max-width: 640.98px) {
    .profile-header[b-zcjq3z3c3t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }

    .profile-header-actions[b-zcjq3z3c3t] {
        width: 100%;
    }

    .btn-profile[b-zcjq3z3c3t] {
        width: 100%;
        justify-content: center;
    }

    .profile-field-grid[b-zcjq3z3c3t] {
        grid-template-columns: 1fr;
    }

    .api-key-meta[b-zcjq3z3c3t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .api-key-value[b-zcjq3z3c3t] {
        font-size: 0.7rem;
    }
}
/* _content/xsubi-website/Components/Pages/Account/Settings.razor.rz.scp.css */
/* =====================================================================
   Settings page — Settings.razor.css
   Page chrome uses CSS custom properties (var(--xs-*)).
   Theme preview card interiors use hardcoded hex values (inline styles)
   so all 5 themes are visible simultaneously regardless of active theme.
   ===================================================================== */

.settings-page[b-3ewyb30jiq] {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.settings-hero[b-3ewyb30jiq] {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--xs-border);
    text-align: center;
}

.hero-badge-sm[b-3ewyb30jiq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--xs-primary), var(--xs-accent));
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: #fff;
}

.settings-hero h1[b-3ewyb30jiq] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--xs-primary), var(--xs-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.settings-hero .lead[b-3ewyb30jiq] {
    color: var(--xs-text-secondary);
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* ── Section headings ─────────────────────────────────────────────── */

section[b-3ewyb30jiq] {
    margin-bottom: 3rem;
}

section h2[b-3ewyb30jiq] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--xs-text);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
}

section h2 i[b-3ewyb30jiq] {
    color: var(--xs-accent);
}

.section-desc[b-3ewyb30jiq] {
    color: var(--xs-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* ── Theme grid ───────────────────────────────────────────────────── */

.theme-grid[b-3ewyb30jiq] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* ── Theme preview card ───────────────────────────────────────────── */

.theme-preview-card[b-3ewyb30jiq] {
    border: 2px solid transparent;
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* border-color and background are set via inline style on each card */
}

.theme-preview-card:hover[b-3ewyb30jiq] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.theme-preview-card.active[b-3ewyb30jiq] {
    /* border-color is set via inline style using each theme's accent color */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* ── Swatches ─────────────────────────────────────────────────────── */

.swatches[b-3ewyb30jiq] {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.swatch[b-3ewyb30jiq] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Card internals ───────────────────────────────────────────────── */

.theme-name[b-3ewyb30jiq] {
    font-size: 0.9rem;
    font-weight: 700;
    /* color set via inline style */
}

.sample-text[b-3ewyb30jiq] {
    font-size: 0.75rem;
    /* color set via inline style */
}

.sample-btn[b-3ewyb30jiq] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 0.35rem;
    display: inline-block;
    margin-top: 0.15rem;
    /* background and color set via inline style */
}

.active-badge[b-3ewyb30jiq] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background and color set via inline style */
}

/* ── Fallback ─────────────────────────────────────────────────────── */

.feature-disabled[b-3ewyb30jiq] {
    color: var(--xs-text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

/* ── Responsive: tablet (3 columns) ──────────────────────────────── */

@media (max-width: 767.98px) {
    .theme-grid[b-3ewyb30jiq] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Responsive: mobile (2 columns) ──────────────────────────────── */

@media (max-width: 640.98px) {
    .settings-page[b-3ewyb30jiq] {
        padding: 1.25rem 1rem 3rem;
    }

    .settings-hero h1[b-3ewyb30jiq] {
        font-size: 1.9rem;
    }

    .theme-grid[b-3ewyb30jiq] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* _content/xsubi-website/Components/Pages/Blog.razor.rz.scp.css */
/* Blog Hero */
.blog-hero[b-env8sc1q9y] {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--xs-card-border);
    margin-bottom: 2.5rem;
}

.blog-hero h1[b-env8sc1q9y] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}

.blog-hero-sub[b-env8sc1q9y] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 0;
}

/* Blog Grid */
.blog-grid[b-env8sc1q9y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

/* Blog Card */
.blog-card[b-env8sc1q9y] {
    display: flex;
    flex-direction: column;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.blog-card[b-env8sc1q9y]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xs-primary), var(--xs-accent));
    opacity: 0;
    transition: opacity 200ms ease;
}

.blog-card:hover[b-env8sc1q9y] {
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 4px 24px rgba(34, 211, 238, 0.07);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.blog-card:hover[b-env8sc1q9y]::before {
    opacity: 1;
}

/* Category badge */
.blog-card-category[b-env8sc1q9y] {
    display: inline-block;
    background: var(--xs-primary-subtle);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
    align-self: flex-start;
}

.blog-card-title[b-env8sc1q9y] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    line-height: 1.35;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    transition: color 200ms ease;
}

.blog-card:hover .blog-card-title[b-env8sc1q9y] {
    color: var(--xs-accent);
}

.blog-card-excerpt[b-env8sc1q9y] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
    flex: 1;
}

.blog-card-meta[b-env8sc1q9y] {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--xs-card-border);
    font-size: 0.75rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.blog-card-meta span[b-env8sc1q9y] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.blog-card-meta i[b-env8sc1q9y] {
    font-size: 0.7rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* Responsive — Tablet */
@media (max-width: 767.98px) {
    .blog-grid[b-env8sc1q9y] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .blog-hero h1[b-env8sc1q9y] {
        font-size: 2rem;
    }
}

/* Responsive — Phone */
@media (max-width: 640.98px) {
    .blog-hero[b-env8sc1q9y] {
        padding-bottom: 1.75rem;
        margin-bottom: 1.75rem;
    }

    .blog-hero h1[b-env8sc1q9y] {
        font-size: 1.75rem;
    }

    .blog-hero-sub[b-env8sc1q9y] {
        font-size: 0.9rem;
    }

    .blog-card[b-env8sc1q9y] {
        padding: 1.25rem;
    }

    .blog-card-title[b-env8sc1q9y] {
        font-size: 1rem;
    }

    .blog-card-meta[b-env8sc1q9y] {
        gap: 1rem;
        font-size: 0.7rem;
    }
}
/* _content/xsubi-website/Components/Pages/BlogPost.razor.rz.scp.css */
/* Post wrapper */
.blog-post[b-kn50bhgp7m] {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* Back link */
.back-link[b-kn50bhgp7m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--xs-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--xs-font-mono);
    margin-bottom: 2rem;
    transition: color 150ms ease, gap 150ms ease;
}

.back-link:hover[b-kn50bhgp7m] {
    color: var(--xs-accent-hover);
    gap: 0.375rem;
    text-decoration: none;
}

/* Post header */
.post-header[b-kn50bhgp7m] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.post-category[b-kn50bhgp7m] {
    display: inline-block;
    background: var(--xs-primary-subtle);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
}

.post-header h1[b-kn50bhgp7m] {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--xs-text-bright);
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.post-meta[b-kn50bhgp7m] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.78rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.post-meta span[b-kn50bhgp7m] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.post-meta i[b-kn50bhgp7m] {
    font-size: 0.72rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* Post content body */
.post-content p[b-kn50bhgp7m] {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--xs-text);
    margin-bottom: 1.5rem;
}

.post-content p:last-child[b-kn50bhgp7m] {
    margin-bottom: 0;
}

.post-content strong[b-kn50bhgp7m] {
    color: var(--xs-text-bright);
    font-weight: 600;
}

.post-content a[b-kn50bhgp7m] {
    color: var(--xs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-content a:hover[b-kn50bhgp7m] {
    color: var(--xs-accent-hover);
}

.post-content code[b-kn50bhgp7m] {
    font-family: var(--xs-font-mono);
    font-size: 0.875em;
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.15em 0.45em;
    color: var(--xs-accent);
}

.post-content pre[b-kn50bhgp7m] {
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: var(--xs-font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--xs-text);
}

.post-content pre code[b-kn50bhgp7m] {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.post-content h2[b-kn50bhgp7m] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.post-content h3[b-kn50bhgp7m] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.post-content ul[b-kn50bhgp7m],
.post-content ol[b-kn50bhgp7m] {
    color: var(--xs-text);
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.post-content li[b-kn50bhgp7m] {
    margin-bottom: 0.375rem;
    font-size: 1.0625rem;
}

/* Not found state */
.post-not-found[b-kn50bhgp7m] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* Responsive — Tablet */
@media (max-width: 767.98px) {
    .post-header h1[b-kn50bhgp7m] {
        font-size: 1.75rem;
    }

    .post-content p[b-kn50bhgp7m],
    .post-content li[b-kn50bhgp7m] {
        font-size: 1rem;
    }
}

/* Responsive — Phone */
@media (max-width: 640.98px) {
    .blog-post[b-kn50bhgp7m] {
        padding-bottom: 3rem;
    }

    .back-link[b-kn50bhgp7m] {
        margin-bottom: 1.5rem;
    }

    .post-header[b-kn50bhgp7m] {
        margin-bottom: 1.75rem;
        padding-bottom: 1.5rem;
    }

    .post-header h1[b-kn50bhgp7m] {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .post-meta[b-kn50bhgp7m] {
        gap: 0.875rem;
        font-size: 0.72rem;
    }

    .post-content p[b-kn50bhgp7m],
    .post-content li[b-kn50bhgp7m] {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    .post-content code[b-kn50bhgp7m] {
        font-size: 0.8em;
    }
}
/* _content/xsubi-website/Components/Pages/Consulting.razor.rz.scp.css */
.consulting-page[b-1ipwpcwljf] {
    max-width: 960px;
}

/* ── Hero ─────────────────────────────────────────── */

.consulting-hero[b-1ipwpcwljf] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero-badge-sm[b-1ipwpcwljf] {
    display: inline-block;
    background: var(--xs-accent-subtle);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid var(--xs-border);
    font-family: var(--xs-font-mono);
}

.consulting-hero h1[b-1ipwpcwljf] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.consulting-hero .lead[b-1ipwpcwljf] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.consulting-hero .tagline[b-1ipwpcwljf] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* ── Section headings ─────────────────────────────── */

section h2[b-1ipwpcwljf] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-1ipwpcwljf] {
    color: var(--xs-accent);
}

section p[b-1ipwpcwljf] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.card-title[b-1ipwpcwljf] {
    color: var(--xs-text-bright);
    font-weight: 700;
    font-size: 1rem;
}

.card-text[b-1ipwpcwljf] {
    color: var(--xs-text-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ── Service cards ────────────────────────────────── */

.service-card[b-1ipwpcwljf] {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.service-card:hover[b-1ipwpcwljf] {
    transform: translateY(-2px);
    box-shadow: var(--xs-glow);
    border-color: rgba(34, 211, 238, 0.3);
}

.service-icon[b-1ipwpcwljf] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--xs-accent);
}

.service-list[b-1ipwpcwljf] {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.service-list li[b-1ipwpcwljf] {
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: var(--xs-text-secondary);
    border-bottom: 1px solid var(--xs-card-border);
}

.service-list li:last-child[b-1ipwpcwljf] {
    border-bottom: none;
}

.service-list li[b-1ipwpcwljf]::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--xs-accent);
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* ── Proof / Engagement ───────────────────────────── */

.link-accent[b-1ipwpcwljf] {
    color: var(--xs-accent);
    text-decoration: none;
    font-weight: 600;
}

.link-accent:hover[b-1ipwpcwljf] {
    color: var(--xs-text-bright);
}

.engagement-note[b-1ipwpcwljf] {
    display: flex;
    align-items: flex-start;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
}

/* ── CTA row ──────────────────────────────────────── */

.cta-row[b-1ipwpcwljf] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-cta[b-1ipwpcwljf] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--xs-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.btn-cta:hover[b-1ipwpcwljf] {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-cta-primary[b-1ipwpcwljf] {
    background: var(--xs-accent);
    color: #000;
}

.btn-cta-secondary[b-1ipwpcwljf] {
    background: transparent;
    color: var(--xs-accent);
    border: 1px solid var(--xs-accent);
}

/* ── Feature disabled ─────────────────────────────── */

.feature-disabled[b-1ipwpcwljf] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--xs-text-secondary);
}

/* ── Mobile ───────────────────────────────────────── */

@media (max-width: 640.98px) {
    .consulting-hero h1[b-1ipwpcwljf] {
        font-size: 1.75rem;
    }

    .consulting-hero .lead[b-1ipwpcwljf] {
        font-size: 1.1rem;
    }

    .consulting-hero .tagline[b-1ipwpcwljf] {
        font-size: 0.9rem;
    }

    section h2[b-1ipwpcwljf] {
        font-size: 1rem;
    }

    .cta-row[b-1ipwpcwljf] {
        flex-direction: column;
    }

    .btn-cta[b-1ipwpcwljf] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/xsubi-website/Components/Pages/Contact.razor.rz.scp.css */
/* ============================================
   Hero — full-width bleed (matches Home.razor.css pattern)
   ============================================ */

.hero[b-m8020ipz36] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 3rem;
    padding: 4rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero[b-m8020ipz36]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.hero-glow[b-m8020ipz36] {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content[b-m8020ipz36] {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.hero-badge[b-m8020ipz36] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.375rem 1rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.hero-title[b-m8020ipz36] {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xs-text-bright);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.hero-subtitle[b-m8020ipz36] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--xs-text-secondary);
    margin-bottom: 0;
    max-width: 500px;
}

/* ============================================
   Two-column layout — 3fr 2fr
   ============================================ */

.contact-layout[b-m8020ipz36] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2.5rem;
    align-items: start;
    padding-bottom: 4rem;
}

/* ============================================
   Form section
   ============================================ */

.contact-form-section[b-m8020ipz36] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 2rem;
}

.form-group[b-m8020ipz36] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.form-group label[b-m8020ipz36] {
    color: var(--xs-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-input[b-m8020ipz36] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    border-radius: var(--xs-radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    width: 100%;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    outline: none;
    /* Override browser default appearance */
    -webkit-appearance: none;
    appearance: none;
}

.form-input[b-m8020ipz36]::placeholder {
    color: var(--xs-text-muted);
}

.form-input:focus[b-m8020ipz36] {
    border-color: var(--xs-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Select arrow — custom to match dark theme */
select.form-input[b-m8020ipz36] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b9ab5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-textarea[b-m8020ipz36] {
    min-height: 140px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

/* Blazor validation — reuse global .validation-message color but scope locally */
.contact-form-section .validation-message[b-m8020ipz36] {
    font-size: 0.8rem;
    color: var(--xs-danger);
    margin-top: 0.125rem;
}

/* Blazor modified/invalid field outlines */
.contact-form-section .invalid[b-m8020ipz36] {
    border-color: var(--xs-danger) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.contact-form-section .valid.modified[b-m8020ipz36] {
    border-color: var(--xs-success);
    outline: none;
}

.btn-submit[b-m8020ipz36] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   Success message
   ============================================ */

.success-message[b-m8020ipz36] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    gap: 0.75rem;
    animation: fadeInUp-b-m8020ipz36 0.4s ease-out both;
}

.success-message i[b-m8020ipz36] {
    font-size: 3rem;
    color: var(--xs-success);
}

.success-message h3[b-m8020ipz36] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin: 0;
}

.success-message p[b-m8020ipz36] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

@keyframes fadeInUp-b-m8020ipz36 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Info card (right column)
   ============================================ */

.info-card[b-m8020ipz36] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info-item[b-m8020ipz36] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--xs-card-border);
}

.info-item:first-child[b-m8020ipz36] {
    padding-top: 0;
}

.info-item:last-child[b-m8020ipz36] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-item > i[b-m8020ipz36] {
    font-size: 1.25rem;
    color: var(--xs-accent);
    flex-shrink: 0;
    margin-top: 0.125rem;
    width: 1.5rem;
    text-align: center;
}

.info-item > div[b-m8020ipz36] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item h4[b-m8020ipz36] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--xs-text-muted);
    margin: 0;
}

.info-item a[b-m8020ipz36] {
    font-size: 0.9rem;
    color: var(--xs-accent);
    text-decoration: none;
    transition: color 150ms ease;
    word-break: break-all;
}

.info-item a:hover[b-m8020ipz36] {
    color: var(--xs-accent-hover);
}

.info-item p[b-m8020ipz36] {
    font-size: 0.9rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

/* ============================================
   Responsive — Tablet
   ============================================ */

@media (max-width: 767.98px) {
    .hero[b-m8020ipz36] {
        padding: 3rem calc(50vw - 50% + 1.5rem);
        margin-bottom: 2rem;
    }

    .hero-title[b-m8020ipz36] {
        font-size: 2.25rem;
    }

    .contact-layout[b-m8020ipz36] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================
   Responsive — Phone
   ============================================ */

@media (max-width: 640.98px) {
    .hero[b-m8020ipz36] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
        margin-bottom: 1.5rem;
    }

    .hero-badge[b-m8020ipz36] {
        font-size: 0.65rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 1rem;
    }

    .hero-title[b-m8020ipz36] {
        font-size: 1.85rem;
        margin-bottom: 0.75rem;
    }

    .hero-subtitle[b-m8020ipz36] {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .contact-form-section[b-m8020ipz36],
    .info-card[b-m8020ipz36] {
        padding: 1.5rem;
    }

    .contact-layout[b-m8020ipz36] {
        gap: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .form-input[b-m8020ipz36] {
        font-size: 0.875rem;
        padding: 0.625rem 0.875rem;
    }

    .form-textarea[b-m8020ipz36] {
        min-height: 120px;
    }

    .success-message[b-m8020ipz36] {
        padding: 2rem 1rem;
    }

    .success-message i[b-m8020ipz36] {
        font-size: 2.5rem;
    }

    .btn-submit[b-m8020ipz36] {
        padding: 0.75rem 1.25rem;
        font-size: 0.85rem;
    }
}
/* _content/xsubi-website/Components/Pages/Dashboard/Index.razor.rz.scp.css */
/* ── Dashboard Sections ───────────────────────────── */

.dashboard-section[b-es1n5j74xj] {
    padding: 2.5rem 0;
    border-top: 1px solid var(--xs-card-border);
}

.dashboard-section:first-of-type[b-es1n5j74xj] {
    border-top: none;
    padding-top: 1.5rem;
}

/* ── Drone Grid ───────────────────────────────────── */

.drone-grid[b-es1n5j74xj] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ── Mesh Unavailable Card ────────────────────────── */

.mesh-unavailable-card[b-es1n5j74xj] {
    max-width: 560px;
    margin-top: 1.5rem;
}

.mesh-unavailable-title[b-es1n5j74xj] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.mesh-unavailable-title h3[b-es1n5j74xj] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.mesh-dot[b-es1n5j74xj] {
    display: inline-flex;
    align-items: center;
}

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

@media (max-width: 640.98px) {
    .drone-grid[b-es1n5j74xj] {
        flex-direction: column;
    }

    .dashboard-section[b-es1n5j74xj] {
        padding: 2rem 0;
    }
}
/* _content/xsubi-website/Components/Pages/Docs/ApiReference.razor.rz.scp.css */
/* ── Page Container ───────────────────────────────── */

.api-ref-page[b-yo1b4e85yv] {
    max-width: 900px;
}

/* ── Hero ─────────────────────────────────────────── */

.api-hero[b-yo1b4e85yv] {
    position: relative;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--xs-card-border);
    margin-bottom: 2.5rem;
    overflow: hidden;
}

.api-hero-glow[b-yo1b4e85yv] {
    position: absolute;
    top: -60px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.api-hero-content[b-yo1b4e85yv] {
    position: relative;
    z-index: 1;
}

.hero-badge-sm[b-yo1b4e85yv] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.08);
    color: var(--xs-accent);
    padding: 0.3rem 0.875rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid rgba(34, 211, 238, 0.15);
    font-family: var(--xs-font-mono);
}

.api-hero h1[b-yo1b4e85yv] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.api-hero-sub[b-yo1b4e85yv] {
    font-size: 1rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 1.5rem;
}

.api-base-url[b-yo1b4e85yv] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.625rem 1rem;
}

.api-base-label[b-yo1b4e85yv] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-muted);
}

.api-base-value[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.85rem;
    color: var(--xs-accent);
}

/* ── Sections ─────────────────────────────────────── */

.api-section[b-yo1b4e85yv] {
    margin-bottom: 3rem;
    padding-top: 0.5rem;
}

.api-section-last[b-yo1b4e85yv] {
    margin-bottom: 2rem;
}

.api-section h2[b-yo1b4e85yv] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.api-section h2 i[b-yo1b4e85yv] {
    color: var(--xs-accent);
}

.api-section-desc[b-yo1b4e85yv] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ── Authentication ───────────────────────────────── */

.api-auth-card[b-yo1b4e85yv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.api-auth-row[b-yo1b4e85yv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.api-auth-row + .api-auth-row[b-yo1b4e85yv] {
    border-top: 1px solid var(--xs-card-border);
}

.api-auth-label[b-yo1b4e85yv] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-muted);
    min-width: 56px;
}

.api-auth-value[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.85rem;
    color: var(--xs-text-bright);
}

.api-note[b-yo1b4e85yv] {
    font-size: 0.8rem;
    color: var(--xs-text-muted);
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.1);
    border-radius: var(--xs-radius-sm);
    padding: 0.75rem 1rem;
    line-height: 1.6;
}

.api-note i[b-yo1b4e85yv] {
    color: var(--xs-accent);
}

/* ── Endpoint Group ───────────────────────────────── */

.endpoint-group[b-yo1b4e85yv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Endpoint Card ────────────────────────────────── */

.endpoint-card[b-yo1b4e85yv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.endpoint-card:hover[b-yo1b4e85yv] {
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: var(--xs-glow);
}

.endpoint-header[b-yo1b4e85yv] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--xs-card-border);
    flex-wrap: wrap;
}

.endpoint-body[b-yo1b4e85yv] {
    padding: 1rem 1.25rem;
}

.endpoint-desc[b-yo1b4e85yv] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    margin-bottom: 0.875rem;
    line-height: 1.6;
}

/* ── Method Badges ────────────────────────────────── */

.method-badge[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.method-get[b-yo1b4e85yv]    { background: rgba(34, 197, 94, 0.12);  color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.2); }
.method-post[b-yo1b4e85yv]   { background: rgba(99, 102, 241, 0.12); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.2); }
.method-put[b-yo1b4e85yv]    { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
.method-delete[b-yo1b4e85yv] { background: rgba(239, 68, 68, 0.12);  color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
.method-patch[b-yo1b4e85yv]  { background: rgba(34, 211, 238, 0.1);  color: var(--xs-accent); border: 1px solid rgba(34, 211, 238, 0.2); }

/* ── Endpoint Path ────────────────────────────────── */

.endpoint-path[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.875rem;
    color: var(--xs-text-bright);
    flex-shrink: 0;
}

.path-param[b-yo1b4e85yv] {
    color: var(--xs-accent);
    font-style: normal;
}

.endpoint-summary[b-yo1b4e85yv] {
    font-size: 0.8rem;
    color: var(--xs-text-muted);
    margin-left: auto;
}

/* ── Parameters ───────────────────────────────────── */

.endpoint-params[b-yo1b4e85yv] {
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    overflow: hidden;
    margin-bottom: 0.875rem;
}

.param-row[b-yo1b4e85yv] {
    display: grid;
    grid-template-columns: 140px 180px 1fr;
    align-items: start;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.param-row:last-child[b-yo1b4e85yv] {
    border-bottom: none;
}

.param-name[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.8rem;
    color: var(--xs-text-bright);
}

.param-type[b-yo1b4e85yv] {
    color: var(--xs-text-muted);
    font-size: 0.75rem;
}

.param-desc[b-yo1b4e85yv] {
    color: var(--xs-text-secondary);
    line-height: 1.5;
}

.param-desc code[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    color: var(--xs-accent);
    background: rgba(34, 211, 238, 0.06);
    padding: 0 0.25rem;
    border-radius: 3px;
}

/* ── Response ─────────────────────────────────────── */

.endpoint-response[b-yo1b4e85yv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.response-code[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.response-200[b-yo1b4e85yv] { background: rgba(34, 197, 94, 0.1);  color: #4ade80; }
.response-202[b-yo1b4e85yv] { background: rgba(99, 102, 241, 0.1); color: #818cf8; }
.response-204[b-yo1b4e85yv] { background: rgba(156, 163, 175, 0.1); color: #9ca3af; }
.response-400[b-yo1b4e85yv] { background: rgba(245, 158, 11, 0.1); color: #fbbf24; }
.response-401[b-yo1b4e85yv] { background: rgba(239, 68, 68, 0.1);  color: #f87171; }
.response-403[b-yo1b4e85yv] { background: rgba(239, 68, 68, 0.1);  color: #f87171; }
.response-404[b-yo1b4e85yv] { background: rgba(239, 68, 68, 0.1);  color: #f87171; }
.response-409[b-yo1b4e85yv] { background: rgba(245, 158, 11, 0.1); color: #fbbf24; }
.response-500[b-yo1b4e85yv] { background: rgba(239, 68, 68, 0.1);  color: #f87171; }

.response-desc[b-yo1b4e85yv] {
    color: var(--xs-text-secondary);
}

.response-desc code[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    color: var(--xs-accent);
    background: rgba(34, 211, 238, 0.06);
    padding: 0 0.25rem;
    border-radius: 3px;
}

/* ── Error Table ──────────────────────────────────── */

.error-table[b-yo1b4e85yv] {
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    overflow: hidden;
}

.error-row[b-yo1b4e85yv] {
    display: grid;
    grid-template-columns: 60px 140px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.error-row:last-child[b-yo1b4e85yv] {
    border-bottom: none;
}

.error-row-header[b-yo1b4e85yv] {
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--xs-text-muted);
}

.error-row span[b-yo1b4e85yv] {
    color: var(--xs-text-secondary);
}

/* ── SDK Note ─────────────────────────────────────── */

.sdk-note-card[b-yo1b4e85yv] {
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: var(--xs-radius);
    padding: 1.75rem 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.sdk-note-icon[b-yo1b4e85yv] {
    font-size: 1.75rem;
    color: var(--xs-accent);
    flex-shrink: 0;
    line-height: 1;
    padding-top: 0.125rem;
}

.sdk-note-title[b-yo1b4e85yv] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.5rem;
}

.sdk-note-desc[b-yo1b4e85yv] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
}

.sdk-note-desc code[b-yo1b4e85yv] {
    font-family: var(--xs-font-mono);
    font-size: 0.8rem;
    color: var(--xs-accent);
    background: rgba(34, 211, 238, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 767.98px) {
    .api-hero h1[b-yo1b4e85yv] {
        font-size: 2rem;
    }

    .param-row[b-yo1b4e85yv] {
        grid-template-columns: 1fr 1fr;
        row-gap: 0.25rem;
    }

    .param-desc[b-yo1b4e85yv] {
        grid-column: 1 / -1;
        padding-top: 0.25rem;
    }

    .error-row[b-yo1b4e85yv] {
        grid-template-columns: 60px 120px 1fr;
        gap: 0.75rem;
    }

    .sdk-note-card[b-yo1b4e85yv] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
}

/* ── Responsive — Phone ───────────────────────────── */

@media (max-width: 575.98px) {
    .api-hero h1[b-yo1b4e85yv] {
        font-size: 1.75rem;
    }

    .api-base-url[b-yo1b4e85yv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .endpoint-header[b-yo1b4e85yv] {
        gap: 0.625rem;
    }

    .endpoint-summary[b-yo1b4e85yv] {
        margin-left: 0;
        width: 100%;
    }

    .param-row[b-yo1b4e85yv] {
        grid-template-columns: 1fr;
    }

    .param-type[b-yo1b4e85yv], .param-desc[b-yo1b4e85yv] {
        grid-column: 1;
    }

    .error-row[b-yo1b4e85yv] {
        grid-template-columns: 52px 1fr;
    }

    .error-row span:last-child[b-yo1b4e85yv] {
        grid-column: 1 / -1;
        color: var(--xs-text-muted);
        font-size: 0.75rem;
    }

    .error-row-header span:last-child[b-yo1b4e85yv] {
        display: none;
    }
}
/* _content/xsubi-website/Components/Pages/Docs/Index.razor.rz.scp.css */
/* ── Hero ─────────────────────────────────────────── */

.docs-hero[b-zyts5m4yv6] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 5rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
}

.docs-hero[b-zyts5m4yv6]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.docs-hero-glow[b-zyts5m4yv6] {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.docs-hero-content[b-zyts5m4yv6] {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.hero-badge[b-zyts5m4yv6] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.375rem 1rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.docs-hero-title[b-zyts5m4yv6] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xs-text-bright);
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}

.docs-hero-subtitle[b-zyts5m4yv6] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--xs-text-secondary);
    margin-bottom: 0;
    max-width: 520px;
}

/* ── Sections ─────────────────────────────────────── */

.docs-section[b-zyts5m4yv6] {
    padding: 4rem 0;
    border-bottom: 1px solid var(--xs-card-border);
}

.docs-section--last[b-zyts5m4yv6] {
    border-bottom: none;
    padding-bottom: 5rem;
}

.section-header-row[b-zyts5m4yv6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.section-header-row .section-title[b-zyts5m4yv6] {
    margin-bottom: 0;
}

.docs-prose[b-zyts5m4yv6] {
    font-size: 0.9rem;
    color: var(--xs-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 700px;
}

/* ── Endpoint Group Badge ─────────────────────────── */

.endpoint-group-badge[b-zyts5m4yv6] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(34, 211, 238, 0.07);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: var(--xs-radius-sm);
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    color: var(--xs-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Quick Start ──────────────────────────────────── */

.quickstart-grid[b-zyts5m4yv6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.qs-card[b-zyts5m4yv6] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qs-label[b-zyts5m4yv6] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.qs-value[b-zyts5m4yv6] {
    font-family: var(--xs-font-mono);
    font-size: 0.82rem;
    color: var(--xs-accent);
    background: transparent;
    padding: 0;
    border-radius: 0;
    word-break: break-all;
}

/* ── Code Blocks ──────────────────────────────────── */

.code-block-wrap[b-zyts5m4yv6] {
    border-radius: var(--xs-radius);
    border: 1px solid var(--xs-card-border);
    overflow: hidden;
    margin-top: 1.5rem;
}

.code-block-header[b-zyts5m4yv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--xs-card-border);
}

.code-block-label[b-zyts5m4yv6] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.code-block-lang[b-zyts5m4yv6] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--xs-accent);
    font-family: var(--xs-font-mono);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.18);
    padding: 0.15rem 0.5rem;
    border-radius: var(--xs-radius-sm);
}

.code-block[b-zyts5m4yv6] {
    background: #050a14;
    color: var(--xs-text);
    font-family: var(--xs-font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    margin: 0;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    tab-size: 2;
}

.code-block code[b-zyts5m4yv6] {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

/* ── Endpoint Table ───────────────────────────────── */

.endpoint-table-wrap[b-zyts5m4yv6] {
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    overflow: hidden;
    margin-top: 1.75rem;
}

.endpoint-table[b-zyts5m4yv6] {
    width: 100%;
    border-collapse: collapse;
}

.endpoint-table thead tr[b-zyts5m4yv6] {
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--xs-card-border);
}

.endpoint-table thead th[b-zyts5m4yv6] {
    padding: 0.625rem 1.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    text-align: left;
}

.endpoint-table tbody tr[b-zyts5m4yv6] {
    border-bottom: 1px solid var(--xs-card-border);
    transition: background 150ms ease;
}

.endpoint-table tbody tr:last-child[b-zyts5m4yv6] {
    border-bottom: none;
}

.endpoint-table tbody tr:hover[b-zyts5m4yv6] {
    background: rgba(34, 211, 238, 0.03);
}

.endpoint-table tbody td[b-zyts5m4yv6] {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    vertical-align: middle;
}

/* ── Method Badges ────────────────────────────────── */

.method-badge[b-zyts5m4yv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 0.2rem 0.625rem;
    border-radius: var(--xs-radius-sm);
    font-family: var(--xs-font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.method-get[b-zyts5m4yv6] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.method-post[b-zyts5m4yv6] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.method-put[b-zyts5m4yv6] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.method-delete[b-zyts5m4yv6] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Endpoint Path ────────────────────────────────── */

.endpoint-path[b-zyts5m4yv6] {
    font-family: var(--xs-font-mono);
    font-size: 0.82rem;
    color: var(--xs-text-bright);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.15rem 0.5rem;
    border-radius: var(--xs-radius-sm);
}

.endpoint-path-lg[b-zyts5m4yv6] {
    font-family: var(--xs-font-mono);
    font-size: 1rem;
    color: var(--xs-text-bright);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
}

/* ── Endpoint Detail Card ─────────────────────────── */

.endpoint-detail-card[b-zyts5m4yv6] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 2rem;
    margin-top: 1.5rem;
}

.endpoint-detail-header[b-zyts5m4yv6] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.endpoint-detail-desc[b-zyts5m4yv6] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 680px;
}

.detail-columns[b-zyts5m4yv6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* ── Status Codes ─────────────────────────────────── */

.status-codes[b-zyts5m4yv6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--xs-card-border);
    padding-top: 1.5rem;
}

.status-code-row[b-zyts5m4yv6] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-code[b-zyts5m4yv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0.175rem 0.5rem;
    border-radius: var(--xs-radius-sm);
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.status-code--2xx[b-zyts5m4yv6] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-code--4xx[b-zyts5m4yv6] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.status-code--5xx[b-zyts5m4yv6] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.status-code-desc[b-zyts5m4yv6] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
}

/* ── VM Status Pills ──────────────────────────────── */

.status-pill[b-zyts5m4yv6] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    white-space: nowrap;
}

.pill-success[b-zyts5m4yv6] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.pill-info[b-zyts5m4yv6] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.pill-warning[b-zyts5m4yv6] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.pill-danger[b-zyts5m4yv6] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.pill-muted[b-zyts5m4yv6] {
    background: rgba(90, 107, 128, 0.15);
    color: var(--xs-text-muted);
    border: 1px solid rgba(90, 107, 128, 0.25);
}

/* ── Authentication ───────────────────────────────── */

.auth-grid[b-zyts5m4yv6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.auth-card[b-zyts5m4yv6] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.auth-card:hover[b-zyts5m4yv6] {
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow: var(--xs-glow);
}

.auth-card--current[b-zyts5m4yv6] {
    border-color: rgba(34, 211, 238, 0.2);
    background: rgba(34, 211, 238, 0.03);
}

.auth-card-header[b-zyts5m4yv6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.auth-icon[b-zyts5m4yv6] {
    width: 42px;
    height: 42px;
    border-radius: var(--xs-radius);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--xs-accent);
    flex-shrink: 0;
}

.auth-title[b-zyts5m4yv6] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.25rem;
}

.auth-stage[b-zyts5m4yv6] {
    display: inline-flex;
    align-items: center;
    padding: 0.175rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
}

.auth-stage--current[b-zyts5m4yv6] {
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.auth-stage--planned[b-zyts5m4yv6] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.auth-desc[b-zyts5m4yv6] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ── Rate Limiting ────────────────────────────────── */

.rate-limit-card[b-zyts5m4yv6] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 2rem;
    margin-top: 1.5rem;
}

.rate-limit-row[b-zyts5m4yv6] {
    display: flex;
    gap: 3rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.rate-limit-stat[b-zyts5m4yv6] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.rate-limit-value[b-zyts5m4yv6] {
    font-family: var(--xs-font-mono);
    font-size: 2rem;
    font-weight: 800;
    color: var(--xs-accent);
    line-height: 1;
}

.rate-limit-label[b-zyts5m4yv6] {
    font-family: var(--xs-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-muted);
}

.rate-limit-desc[b-zyts5m4yv6] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 640px;
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 991.98px) {
    .quickstart-grid[b-zyts5m4yv6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .auth-grid[b-zyts5m4yv6] {
        grid-template-columns: 1fr;
    }

    .detail-columns[b-zyts5m4yv6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .docs-hero[b-zyts5m4yv6] {
        padding: 3.5rem calc(50vw - 50% + 1.5rem);
    }

    .docs-hero-title[b-zyts5m4yv6] {
        font-size: 2.5rem;
    }

    .docs-section[b-zyts5m4yv6] {
        padding: 2.5rem 0;
    }

    .docs-section--last[b-zyts5m4yv6] {
        padding-bottom: 3rem;
    }

    .quickstart-grid[b-zyts5m4yv6] {
        grid-template-columns: 1fr;
    }

    .section-header-row[b-zyts5m4yv6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ── Responsive — Phone ───────────────────────────── */

@media (max-width: 640.98px) {
    .docs-hero[b-zyts5m4yv6] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
    }

    .docs-hero-title[b-zyts5m4yv6] {
        font-size: 1.9rem;
        margin-bottom: 1rem;
    }

    .docs-hero-subtitle[b-zyts5m4yv6] {
        font-size: 0.9rem;
    }

    .hero-badge[b-zyts5m4yv6] {
        font-size: 0.65rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 1rem;
    }

    .docs-section[b-zyts5m4yv6] {
        padding: 2rem 0;
    }

    .endpoint-detail-card[b-zyts5m4yv6] {
        padding: 1.25rem;
    }

    .rate-limit-card[b-zyts5m4yv6] {
        padding: 1.25rem;
    }

    .rate-limit-row[b-zyts5m4yv6] {
        gap: 2rem;
    }

    .rate-limit-value[b-zyts5m4yv6] {
        font-size: 1.6rem;
    }

    .endpoint-table thead th[b-zyts5m4yv6],
    .endpoint-table tbody td[b-zyts5m4yv6] {
        padding: 0.625rem 0.875rem;
        font-size: 0.8rem;
    }

    .code-block[b-zyts5m4yv6] {
        font-size: 0.75rem;
        padding: 1rem;
    }
}
/* _content/xsubi-website/Components/Pages/Engineering.razor.rz.scp.css */
.eng-page[b-siqigcw4im] {
    max-width: 960px;
}

/* Hero */
.eng-hero[b-siqigcw4im] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.eng-hero h1[b-siqigcw4im] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.eng-hero .lead[b-siqigcw4im] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.eng-hero .tagline[b-siqigcw4im] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* Section Headers */
section h2[b-siqigcw4im] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-siqigcw4im] {
    color: var(--xs-accent);
}

.section-subtitle[b-siqigcw4im] {
    color: var(--xs-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
}

/* Stat Blocks */
.stat-block[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all 200ms ease;
}

.stat-block:hover[b-siqigcw4im] {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08);
}

.stat-number[b-siqigcw4im] {
    font-size: 3rem;
    font-weight: 800;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-bright);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-unit[b-siqigcw4im] {
    font-size: 1.5rem;
    color: var(--xs-accent);
}

.stat-desc[b-siqigcw4im] {
    color: var(--xs-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.throughput-note[b-siqigcw4im] {
    margin-top: 1rem;
    padding: 0.875rem 1.25rem;
    background: rgba(34, 211, 238, 0.05);
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-radius: var(--xs-radius-sm);
    color: var(--xs-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

.throughput-note i[b-siqigcw4im] {
    color: var(--xs-accent);
}

/* Velocity Chart */
.velocity-chart[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
}

.velocity-row[b-siqigcw4im] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
}

.velocity-row.dim[b-siqigcw4im] {
    opacity: 0.3;
}

.velocity-label[b-siqigcw4im] {
    width: 56px;
    font-size: 0.7rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.velocity-bar-container[b-siqigcw4im] {
    flex: 1;
    height: 20px;
    display: flex;
    align-items: center;
}

.velocity-bar[b-siqigcw4im] {
    height: 16px;
    min-width: 2px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.6), rgba(99, 102, 241, 0.3));
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    transition: all 300ms ease;
}

.velocity-bar.peak[b-siqigcw4im] {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.7), rgba(34, 211, 238, 0.3));
}

.velocity-bar:hover[b-siqigcw4im] {
    filter: brightness(1.3);
}

.velocity-count[b-siqigcw4im] {
    font-size: 0.65rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-bright);
    font-weight: 700;
}

/* Project Table */
.project-name[b-siqigcw4im] {
    font-weight: 700;
    color: var(--xs-text-bright);
    white-space: nowrap;
}

.text-accent[b-siqigcw4im] {
    color: var(--xs-accent) !important;
}

.mono[b-siqigcw4im] {
    font-family: var(--xs-font-mono);
    font-size: 0.85rem;
}

.domain-tag[b-siqigcw4im] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.domain-tag.distributed[b-siqigcw4im] {
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.domain-tag.devtools[b-siqigcw4im] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.domain-tag.web[b-siqigcw4im] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--xs-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.domain-tag.infra[b-siqigcw4im] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--xs-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.domain-tag.docs[b-siqigcw4im] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--xs-info);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.stack-tag[b-siqigcw4im] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
    background: var(--xs-bg-surface);
    color: var(--xs-text-secondary);
    border: 1px solid var(--xs-card-border);
    margin-right: 0.25rem;
    font-family: var(--xs-font-mono);
}

/* Tech Tags */
.tech-tags[b-siqigcw4im] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag[b-siqigcw4im] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    border-radius: var(--xs-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-tag.lang[b-siqigcw4im] {
    background: rgba(34, 211, 238, 0.08);
    color: var(--xs-accent);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.tech-tag.framework[b-siqigcw4im] {
    background: rgba(99, 102, 241, 0.08);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.tech-tag.tool[b-siqigcw4im] {
    background: rgba(16, 185, 129, 0.08);
    color: var(--xs-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.tech-tag.infra[b-siqigcw4im] {
    background: rgba(245, 158, 11, 0.06);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

/* Domain Cards */
.domain-card[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.5rem;
    height: 100%;
    transition: all 200ms ease;
}

.domain-card:hover[b-siqigcw4im] {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08);
}

.domain-icon[b-siqigcw4im] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--xs-accent);
}

.domain-card h4[b-siqigcw4im] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.domain-card p[b-siqigcw4im] {
    color: var(--xs-text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Methodology */
.method-grid[b-siqigcw4im] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.method-item[b-siqigcw4im] {
    display: flex;
    gap: 1rem;
}

.method-icon[b-siqigcw4im] {
    width: 36px;
    height: 36px;
    border-radius: var(--xs-radius-sm);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xs-primary-light);
    font-size: 1rem;
    flex-shrink: 0;
}

.method-item strong[b-siqigcw4im] {
    color: var(--xs-text-bright);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}

.method-item p[b-siqigcw4im] {
    color: var(--xs-text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.method-item code[b-siqigcw4im] {
    background: var(--xs-bg-surface);
    color: var(--xs-accent);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    font-size: 0.75rem;
}

/* Pattern Cards */
.pattern-card[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.5rem;
    height: 100%;
    position: relative;
    transition: all 200ms ease;
}

.pattern-card:hover[b-siqigcw4im] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.08);
}

.pattern-number[b-siqigcw4im] {
    font-family: var(--xs-font-mono);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--xs-primary-light);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.pattern-card h5[b-siqigcw4im] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.pattern-card p[b-siqigcw4im] {
    color: var(--xs-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.pattern-card code[b-siqigcw4im] {
    background: var(--xs-bg-surface);
    color: var(--xs-accent);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    font-size: 0.75rem;
}

.pattern-evidence[b-siqigcw4im] {
    font-size: 0.7rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--xs-card-border);
    line-height: 1.5;
}

.pattern-evidence i[b-siqigcw4im] {
    color: var(--xs-primary-light);
}

/* ============================================
   Growth Comparison Strip
   ============================================ */

.growth-comparison[b-siqigcw4im] {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    overflow: hidden;
}

.growth-col[b-siqigcw4im] {
    flex: 1;
    padding: 1.5rem;
}

.growth-col.xsubi[b-siqigcw4im] {
    border-left: 1px solid var(--xs-card-border);
}

.growth-label[b-siqigcw4im] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.growth-col.solo .growth-label[b-siqigcw4im] {
    color: var(--xs-text-muted);
}

.growth-col.xsubi .growth-label[b-siqigcw4im] {
    color: var(--xs-accent);
}

.growth-metrics[b-siqigcw4im] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.growth-metric-row[b-siqigcw4im] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.growth-metric-name[b-siqigcw4im] {
    font-size: 0.7rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    width: 90px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.growth-bar-wrap[b-siqigcw4im] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 18px;
}

.growth-bar[b-siqigcw4im] {
    height: 14px;
    border-radius: 2px;
    transition: width 600ms ease;
}

.solo-bar[b-siqigcw4im] {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.15));
}

.xsubi-bar[b-siqigcw4im] {
    background: linear-gradient(90deg, var(--xs-accent), rgba(34, 211, 238, 0.4));
}

.growth-bar-val[b-siqigcw4im] {
    font-size: 0.7rem;
    font-family: var(--xs-font-mono);
    font-weight: 700;
    color: var(--xs-text-secondary);
    white-space: nowrap;
}

.growth-divider[b-siqigcw4im] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    background: rgba(34, 211, 238, 0.04);
    border-left: 1px solid var(--xs-card-border);
    border-right: 1px solid var(--xs-card-border);
}

.multiplier-badge[b-siqigcw4im] {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-bright);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.multiplier-x[b-siqigcw4im] {
    font-size: 1.25rem;
    color: var(--xs-accent);
    vertical-align: super;
}

.growth-equivalent[b-siqigcw4im] {
    margin-top: 1.25rem;
    padding: 0.625rem 0.875rem;
    background: rgba(34, 211, 238, 0.06);
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: var(--xs-radius-sm);
    font-size: 0.75rem;
    color: var(--xs-text-secondary);
}

.growth-equivalent strong[b-siqigcw4im] {
    color: var(--xs-text-bright);
}

.growth-equivalent i[b-siqigcw4im] {
    color: var(--xs-accent);
}

/* ============================================
   AI Orchestration
   ============================================ */

.orch-flow[b-siqigcw4im] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.orch-card[b-siqigcw4im] {
    flex: 1;
    min-width: 140px;
    border-radius: var(--xs-radius);
    padding: 1.25rem 1rem;
    border: 1px solid var(--xs-card-border);
    background: var(--xs-bg-card);
}

.orch-card.opus[b-siqigcw4im] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.04);
}

.orch-card.orchestrator[b-siqigcw4im] {
    border-color: rgba(34, 211, 238, 0.25);
    background: rgba(34, 211, 238, 0.03);
}

.orch-card.sonnet[b-siqigcw4im] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.04);
}

.orch-card.output[b-siqigcw4im] {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.03);
}

.orch-card-header[b-siqigcw4im] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.orch-badge[b-siqigcw4im] {
    font-size: 0.7rem;
    font-weight: 800;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
}

.orch-card.opus .orch-badge[b-siqigcw4im] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--xs-primary-light);
}

.orch-card.orchestrator .orch-badge[b-siqigcw4im] {
    background: rgba(34, 211, 238, 0.12);
    color: var(--xs-accent);
}

.orch-card.sonnet .orch-badge[b-siqigcw4im] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--xs-success);
}

.orch-card.output .orch-badge[b-siqigcw4im],
.output-badge[b-siqigcw4im] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--xs-warning);
}

.orch-role[b-siqigcw4im] {
    font-size: 0.65rem;
    color: var(--xs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.orch-list[b-siqigcw4im] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.orch-list li[b-siqigcw4im] {
    font-size: 0.75rem;
    color: var(--xs-text-secondary);
    padding-left: 0.75rem;
    position: relative;
    line-height: 1.4;
}

.orch-list li[b-siqigcw4im]::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--xs-text-muted);
}

.orch-arrow[b-siqigcw4im] {
    font-size: 1.25rem;
    color: rgba(34, 211, 238, 0.4);
    flex-shrink: 0;
}

.orch-description[b-siqigcw4im] {
    padding: 0.875rem 1.25rem;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.1);
    border-radius: var(--xs-radius-sm);
    color: var(--xs-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ============================================
   Progress Bars (Project Table)
   ============================================ */

.progress-cell[b-siqigcw4im] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    height: 14px;
}

.progress-bar-fill[b-siqigcw4im] {
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--xs-primary), rgba(99, 102, 241, 0.4));
    flex-shrink: 0;
    transition: width 500ms ease;
}

.progress-bar-fill.high[b-siqigcw4im] {
    background: linear-gradient(90deg, var(--xs-accent), rgba(34, 211, 238, 0.4));
}

.progress-pct[b-siqigcw4im] {
    font-size: 0.65rem;
    font-family: var(--xs-font-mono);
    font-weight: 700;
    color: var(--xs-text-secondary);
    white-space: nowrap;
}

.progress-label-sm[b-siqigcw4im] {
    font-size: 0.6rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* ============================================
   Key Takeaways Callout
   ============================================ */

.callout-box[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-left: 3px solid var(--xs-accent);
    border-radius: var(--xs-radius);
    padding: 1.5rem 1.75rem;
}

.callout-title[b-siqigcw4im] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.callout-title i[b-siqigcw4im] {
    color: var(--xs-accent);
}

.callout-list[b-siqigcw4im] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.callout-list li[b-siqigcw4im] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}

.callout-list li[b-siqigcw4im]::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--xs-accent);
    font-weight: 700;
}

/* ============================================
   Roadmap Timeline
   ============================================ */

.roadmap-timeline[b-siqigcw4im] {
    position: relative;
    padding-left: 2rem;
}

.roadmap-timeline[b-siqigcw4im]::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--xs-accent) 0%, rgba(34, 211, 238, 0.15) 100%);
}

.roadmap-item[b-siqigcw4im] {
    position: relative;
    padding: 0 0 1.75rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.roadmap-item:last-child[b-siqigcw4im] {
    padding-bottom: 0;
}

.roadmap-dot[b-siqigcw4im] {
    position: absolute;
    left: -1.875rem;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--xs-card-border);
    background: var(--xs-bg-surface);
    flex-shrink: 0;
}

.roadmap-item.completed .roadmap-dot[b-siqigcw4im] {
    background: var(--xs-accent);
    border-color: var(--xs-accent);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.roadmap-item.active .roadmap-dot[b-siqigcw4im] {
    background: var(--xs-primary);
    border-color: var(--xs-primary-light);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.roadmap-content[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1rem 1.25rem;
    flex: 1;
    transition: all 200ms ease;
}

.roadmap-item.completed .roadmap-content[b-siqigcw4im] {
    border-color: rgba(34, 211, 238, 0.15);
}

.roadmap-item.active .roadmap-content[b-siqigcw4im] {
    border-color: rgba(99, 102, 241, 0.2);
    background: rgba(99, 102, 241, 0.03);
}

.roadmap-content:hover[b-siqigcw4im] {
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.06);
}

.roadmap-period[b-siqigcw4im] {
    font-size: 0.65rem;
    font-family: var(--xs-font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--xs-text-muted);
    margin-bottom: 0.25rem;
}

.roadmap-title[b-siqigcw4im] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.375rem;
}

.roadmap-desc[b-siqigcw4im] {
    font-size: 0.8rem;
    color: var(--xs-text-secondary);
    line-height: 1.5;
    margin-bottom: 0.625rem;
}

.roadmap-status[b-siqigcw4im] {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
}

.roadmap-status.done[b-siqigcw4im] {
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.roadmap-status.in-progress[b-siqigcw4im] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--xs-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.roadmap-status.planned[b-siqigcw4im] {
    background: rgba(148, 163, 184, 0.08);
    color: var(--xs-text-muted);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Expandable Roadmap (details/summary) */
.roadmap-details[b-siqigcw4im] {
    width: 100%;
}

.roadmap-details summary[b-siqigcw4im] {
    list-style: none;
    cursor: pointer;
}

.roadmap-details summary[b-siqigcw4im]::-webkit-details-marker {
    display: none;
}

.roadmap-details summary[b-siqigcw4im]::marker {
    display: none;
    content: '';
}

.roadmap-clickable[b-siqigcw4im] {
    cursor: pointer;
    user-select: none;
}

.roadmap-clickable:hover[b-siqigcw4im] {
    border-color: var(--xs-accent) !important;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.1);
}

.roadmap-chevron[b-siqigcw4im] {
    font-size: 0.7rem;
    color: var(--xs-text-muted);
    transition: transform 200ms ease;
    margin-left: 0.375rem;
    vertical-align: middle;
}

.roadmap-details[open] .roadmap-chevron[b-siqigcw4im] {
    transform: rotate(180deg);
}

.roadmap-expand[b-siqigcw4im] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-top: none;
    border-radius: 0 0 var(--xs-radius) var(--xs-radius);
    padding: 1rem 1.25rem;
    margin-top: -1px;
}

.roadmap-item.completed .roadmap-expand[b-siqigcw4im] {
    border-color: rgba(34, 211, 238, 0.15);
}

.roadmap-item.active .roadmap-expand[b-siqigcw4im] {
    border-color: rgba(99, 102, 241, 0.2);
    background: rgba(99, 102, 241, 0.02);
}

.roadmap-expand-header[b-siqigcw4im] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-secondary);
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.roadmap-quarter-tag[b-siqigcw4im] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.08);
    color: var(--xs-accent);
    padding: 0.125rem 0.5rem;
    border-radius: 2px;
    font-size: 0.6rem;
    font-family: var(--xs-font-mono);
    border: 1px solid rgba(34, 211, 238, 0.15);
}

.roadmap-deliverables[b-siqigcw4im] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.roadmap-deliverables li[b-siqigcw4im] {
    font-size: 0.8rem;
    color: var(--xs-text-primary);
    padding: 0.3rem 0;
    line-height: 1.4;
}

.roadmap-deliverables li.pending[b-siqigcw4im] {
    color: var(--xs-text-muted);
}

.roadmap-deliverables li + li[b-siqigcw4im] {
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

/* Adjust border-radius when details is open */
.roadmap-details[open] > .roadmap-content[b-siqigcw4im] {
    border-radius: var(--xs-radius) var(--xs-radius) 0 0;
}

/* Footer */
.eng-footer[b-siqigcw4im] {
    text-align: center;
    padding: 2rem 0 1rem;
    border-top: 1px solid var(--xs-card-border);
}

.eng-footer p[b-siqigcw4im] {
    color: var(--xs-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Badge (reuse from about) */
.hero-badge-sm[b-siqigcw4im] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 767.98px) {
    .method-grid[b-siqigcw4im] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .stat-number[b-siqigcw4im] {
        font-size: 2.5rem;
    }

    .velocity-label[b-siqigcw4im] {
        width: 44px;
        font-size: 0.6rem;
    }

    .growth-comparison[b-siqigcw4im] {
        flex-direction: column;
    }

    .growth-divider[b-siqigcw4im] {
        padding: 0.75rem 1.5rem;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--xs-card-border);
        border-bottom: 1px solid var(--xs-card-border);
        flex-direction: row;
        gap: 0.75rem;
    }

    .growth-col.xsubi[b-siqigcw4im] {
        border-left: none;
        border-top: none;
    }

    .orch-flow[b-siqigcw4im] {
        flex-direction: column;
        align-items: stretch;
    }

    .orch-arrow[b-siqigcw4im] {
        transform: rotate(90deg);
        text-align: center;
    }

    .roadmap-timeline[b-siqigcw4im] {
        padding-left: 1.5rem;
    }
}

@media (max-width: 640.98px) {
    .eng-hero h1[b-siqigcw4im] {
        font-size: 1.75rem;
    }

    .eng-hero .lead[b-siqigcw4im] {
        font-size: 1.1rem;
    }

    .eng-hero .tagline[b-siqigcw4im] {
        font-size: 0.9rem;
    }

    section h2[b-siqigcw4im] {
        font-size: 1rem;
    }

    .stat-number[b-siqigcw4im] {
        font-size: 2rem;
    }

    .stat-block[b-siqigcw4im] {
        padding: 1.25rem 1rem;
    }

    .stat-desc[b-siqigcw4im] {
        font-size: 0.7rem;
    }

    .throughput-note[b-siqigcw4im] {
        font-size: 0.75rem;
    }

    .velocity-chart[b-siqigcw4im] {
        padding: 1rem;
    }

    .velocity-bar-container[b-siqigcw4im] {
        height: 16px;
    }

    .velocity-bar[b-siqigcw4im] {
        height: 12px;
    }

    .velocity-count[b-siqigcw4im] {
        font-size: 0.55rem;
        padding-right: 0.25rem;
    }

    .domain-card[b-siqigcw4im] {
        padding: 1.25rem;
    }

    .domain-card h4[b-siqigcw4im] {
        font-size: 0.9rem;
    }

    .domain-card p[b-siqigcw4im] {
        font-size: 0.8rem;
    }

    .pattern-card[b-siqigcw4im] {
        padding: 1.25rem;
    }

    .pattern-card h5[b-siqigcw4im] {
        font-size: 0.85rem;
    }

    .pattern-card p[b-siqigcw4im] {
        font-size: 0.75rem;
    }

    .pattern-evidence[b-siqigcw4im] {
        font-size: 0.65rem;
    }

    .tech-tag[b-siqigcw4im] {
        font-size: 0.65rem;
        padding: 0.25rem 0.625rem;
    }

    .method-item strong[b-siqigcw4im] {
        font-size: 0.85rem;
    }

    .method-item p[b-siqigcw4im] {
        font-size: 0.75rem;
    }

    .domain-tag[b-siqigcw4im] {
        font-size: 0.6rem;
    }

    .stack-tag[b-siqigcw4im] {
        font-size: 0.6rem;
    }

    .project-name[b-siqigcw4im] {
        font-size: 0.85rem;
    }

    .mono[b-siqigcw4im] {
        font-size: 0.75rem;
    }
}
/* _content/xsubi-website/Components/Pages/Error.razor.rz.scp.css */
/* ============================================
   Error — 500 server error page
   ============================================ */

.error500-container[b-hemciyfudz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.error500-card[b-hemciyfudz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 420px;
    width: 100%;
}

.error500-code[b-hemciyfudz] {
    font-size: 5rem;
    font-weight: 900;
    color: var(--xs-danger);
    opacity: 0.25;
    line-height: 1;
    margin: 0;
    font-family: var(--xs-font-mono);
    letter-spacing: -0.05em;
}

.error500-icon[b-hemciyfudz] {
    font-size: 2.5rem;
    color: var(--xs-danger);
    margin-bottom: 0.25rem;
}

.error500-card h1[b-hemciyfudz] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin: 0;
    letter-spacing: -0.02em;
}

.error500-card p[b-hemciyfudz] {
    font-size: 0.95rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

.error500-request-id[b-hemciyfudz] {
    font-size: 0.8rem;
    color: var(--xs-text-muted);
}

.error500-request-id code[b-hemciyfudz] {
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
}

.error500-actions[b-hemciyfudz] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .error500-code[b-hemciyfudz] {
        font-size: 4rem;
    }

    .error500-card h1[b-hemciyfudz] {
        font-size: 1.5rem;
    }

    .error500-actions[b-hemciyfudz] {
        flex-direction: column;
        width: 100%;
    }

    .error500-actions .btn[b-hemciyfudz] {
        width: 100%;
        text-align: center;
    }
}
/* _content/xsubi-website/Components/Pages/Home.razor.rz.scp.css */
/* Construction Banner */
.construction-banner[b-h151zev6iv] {
    background: linear-gradient(90deg, var(--xs-warning), #d97706);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0.625rem 1.5rem;
    text-align: center;
}

.construction-content[b-h151zev6iv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0b1120;
}

.construction-content i[b-h151zev6iv] {
    font-size: 1.1rem;
}

.construction-content a[b-h151zev6iv] {
    color: #0b1120;
    text-decoration: underline;
    font-weight: 700;
}

/* Hero Section */
.hero[b-h151zev6iv] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 5rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero[b-h151zev6iv]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.hero-glow[b-h151zev6iv] {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content[b-h151zev6iv] {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.hero-badge[b-h151zev6iv] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.375rem 1rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.hero-title[b-h151zev6iv] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xs-text-bright);
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.hero-accent[b-h151zev6iv] {
    background: linear-gradient(135deg, var(--xs-primary-light), var(--xs-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle[b-h151zev6iv] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--xs-text-secondary);
    margin-bottom: 2.5rem;
    max-width: 520px;
}

.hero-actions[b-h151zev6iv] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-btn[b-h151zev6iv] {
    padding: 0.75rem 2rem;
    font-weight: 700;
    border-radius: var(--xs-radius-sm);
}

/* Services Section */
.services-section[b-h151zev6iv] {
    padding: 4rem 0;
}

.service-card[b-h151zev6iv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: all 200ms ease;
}

.service-card:hover[b-h151zev6iv] {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08);
}

.service-icon[b-h151zev6iv] {
    width: 56px;
    height: 56px;
    border-radius: var(--xs-radius);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    color: var(--xs-accent);
}

.service-card h3[b-h151zev6iv] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.service-card p[b-h151zev6iv] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Steps Section */
.steps-section[b-h151zev6iv] {
    padding: 3rem 0 4rem;
    border-top: 1px solid var(--xs-card-border);
}

.step-card[b-h151zev6iv] {
    text-align: center;
    padding: 1.5rem;
}

.step-number[b-h151zev6iv] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--xs-primary-light);
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--xs-font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.step-card h4[b-h151zev6iv] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.step-card p[b-h151zev6iv] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Tech Section */
.tech-section[b-h151zev6iv] {
    padding: 2rem 0 4rem;
    border-top: 1px solid var(--xs-card-border);
}

.tech-grid[b-h151zev6iv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

.tech-chip[b-h151zev6iv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--xs-text-secondary);
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tech-chip:hover[b-h151zev6iv] {
    border-color: rgba(34, 211, 238, 0.3);
    color: var(--xs-accent);
}

/* Roadmap Section */
.roadmap-section[b-h151zev6iv] {
    padding: 4rem 0;
    border-top: 1px solid var(--xs-card-border);
}

.section-subtitle[b-h151zev6iv] {
    text-align: center;
    color: var(--xs-text-secondary);
    font-size: 0.95rem;
    margin-top: -0.5rem;
    margin-bottom: 2.5rem;
}

.roadmap-timeline[b-h151zev6iv] {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding-left: 2rem;
}

.roadmap-timeline[b-h151zev6iv]::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--xs-card-border);
}

.roadmap-item[b-h151zev6iv] {
    position: relative;
    margin-bottom: 1.5rem;
}

.roadmap-marker[b-h151zev6iv] {
    position: absolute;
    left: -2rem;
    top: 1.25rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--xs-bg-card);
    border: 2px solid var(--xs-card-border);
    z-index: 1;
}

.roadmap-done .roadmap-marker[b-h151zev6iv] {
    background: var(--xs-success);
    border-color: var(--xs-success);
}

.roadmap-active .roadmap-marker[b-h151zev6iv] {
    background: var(--xs-warning);
    border-color: var(--xs-warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.roadmap-card[b-h151zev6iv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    transition: all 200ms ease;
}

.roadmap-card:hover[b-h151zev6iv] {
    border-color: rgba(34, 211, 238, 0.3);
}

.roadmap-done .roadmap-card[b-h151zev6iv] {
    border-color: rgba(16, 185, 129, 0.2);
}

.roadmap-active .roadmap-card[b-h151zev6iv] {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.06);
}

.roadmap-phase[b-h151zev6iv] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    margin-bottom: 0.25rem;
}

.roadmap-done .roadmap-phase[b-h151zev6iv] {
    color: var(--xs-success);
}

.roadmap-active .roadmap-phase[b-h151zev6iv] {
    color: var(--xs-warning);
}

.roadmap-card h4[b-h151zev6iv] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.375rem;
}

.roadmap-card p[b-h151zev6iv] {
    color: var(--xs-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Responsive — Tablet */
@media (max-width: 767.98px) {
    .hero[b-h151zev6iv] {
        padding: 3.5rem calc(50vw - 50% + 1.5rem);
    }

    .hero-title[b-h151zev6iv] {
        font-size: 2.75rem;
    }

    .services-section[b-h151zev6iv],
    .steps-section[b-h151zev6iv] {
        padding: 2.5rem 0;
    }

    .service-card[b-h151zev6iv] {
        padding: 1.5rem;
    }

    .tech-chip[b-h151zev6iv] {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* Responsive — Phone */
@media (max-width: 640.98px) {
    .hero[b-h151zev6iv] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
    }

    .hero-badge[b-h151zev6iv] {
        font-size: 0.65rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 1rem;
    }

    .hero-title[b-h151zev6iv] {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle[b-h151zev6iv] {
        font-size: 0.9rem;
        margin-bottom: 1.75rem;
        line-height: 1.6;
    }

    .hero-actions[b-h151zev6iv] {
        flex-direction: column;
    }

    .hero-btn[b-h151zev6iv] {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .services-section[b-h151zev6iv],
    .steps-section[b-h151zev6iv],
    .tech-section[b-h151zev6iv] {
        padding: 2rem 0;
    }

    .service-card[b-h151zev6iv] {
        padding: 1.25rem;
    }

    .service-icon[b-h151zev6iv] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .service-card h3[b-h151zev6iv] {
        font-size: 1rem;
    }

    .step-card[b-h151zev6iv] {
        padding: 1rem 0.5rem;
    }

    .step-number[b-h151zev6iv] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .tech-grid[b-h151zev6iv] {
        gap: 0.5rem;
    }

    .tech-chip[b-h151zev6iv] {
        padding: 0.375rem 0.75rem;
        font-size: 0.7rem;
    }
}
/* _content/xsubi-website/Components/Pages/Hosting/Features.razor.rz.scp.css */
/* ── Hero ─────────────────────────────────────────── */

.features-hero[b-uhgu92wn2x] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 5rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
}

.features-hero[b-uhgu92wn2x]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.features-hero-glow[b-uhgu92wn2x] {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.features-hero-content[b-uhgu92wn2x] {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.hero-badge[b-uhgu92wn2x] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.375rem 1rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.features-hero-title[b-uhgu92wn2x] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xs-text-bright);
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.features-hero-subtitle[b-uhgu92wn2x] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--xs-text-secondary);
    margin-bottom: 0;
    max-width: 520px;
}

/* ── Feature Cards ────────────────────────────────── */

.features-section[b-uhgu92wn2x] {
    padding: 4rem 0;
}

.features-grid[b-uhgu92wn2x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.feature-card[b-uhgu92wn2x] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.feature-card:hover[b-uhgu92wn2x] {
    transform: translateY(-2px);
    box-shadow: var(--xs-glow);
    border-color: rgba(34, 211, 238, 0.3);
}

.feature-icon[b-uhgu92wn2x] {
    width: 52px;
    height: 52px;
    border-radius: var(--xs-radius);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--xs-accent);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.feature-title[b-uhgu92wn2x] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.feature-desc[b-uhgu92wn2x] {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--xs-text-secondary);
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.feature-specs[b-uhgu92wn2x] {
    font-family: var(--xs-font-mono);
    font-size: 0.75rem;
    color: var(--xs-text-muted);
    border-top: 1px solid var(--xs-card-border);
    padding-top: 0.875rem;
    display: block;
}

/* ── Architecture Diagram ─────────────────────────── */

.arch-section[b-uhgu92wn2x] {
    padding: 4rem 0;
    border-top: 1px solid var(--xs-card-border);
}

.arch-diagram[b-uhgu92wn2x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.5rem 0 1rem;
}

.arch-layer[b-uhgu92wn2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.arch-layer--split[b-uhgu92wn2x] {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.arch-node[b-uhgu92wn2x] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 110px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.arch-node:hover[b-uhgu92wn2x] {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: var(--xs-glow);
}

.arch-node i[b-uhgu92wn2x] {
    font-size: 1.5rem;
}

.arch-node-label[b-uhgu92wn2x] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.arch-node-sub[b-uhgu92wn2x] {
    font-family: var(--xs-font-mono);
    font-size: 0.7rem;
    color: var(--xs-text-muted);
    white-space: nowrap;
}

.arch-node--browser i[b-uhgu92wn2x]  { color: var(--xs-accent); }
.arch-node--portal i[b-uhgu92wn2x]   { color: var(--xs-primary-light); }
.arch-node--agents i[b-uhgu92wn2x]   { color: var(--xs-accent); }
.arch-node--hyper i[b-uhgu92wn2x]    { color: var(--xs-text-secondary); }

.arch-node--portal[b-uhgu92wn2x] {
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.06);
}

.arch-arrow[b-uhgu92wn2x] {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--xs-text-muted);
    flex-shrink: 0;
}

.arch-arrow-line[b-uhgu92wn2x] {
    display: block;
    width: 2rem;
    height: 1px;
    background: var(--xs-card-border);
}

.arch-arrow-icon[b-uhgu92wn2x] {
    font-size: 0.8rem;
    margin-left: -0.25rem;
}

/* ── CTA Section ──────────────────────────────────── */

.cta-section[b-uhgu92wn2x] {
    padding: 4rem 0 5rem;
    border-top: 1px solid var(--xs-card-border);
    text-align: center;
}

.cta-content[b-uhgu92wn2x] {
    max-width: 480px;
    margin: 0 auto;
}

.cta-title[b-uhgu92wn2x] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.cta-actions[b-uhgu92wn2x] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn[b-uhgu92wn2x] {
    padding: 0.75rem 2rem;
    font-weight: 700;
    border-radius: var(--xs-radius-sm);
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 991.98px) {
    .features-grid[b-uhgu92wn2x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .arch-diagram[b-uhgu92wn2x] {
        gap: 0;
    }

    .arch-node[b-uhgu92wn2x] {
        min-width: 90px;
        padding: 1rem 1.125rem;
    }

    .arch-arrow-line[b-uhgu92wn2x] {
        width: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .features-hero[b-uhgu92wn2x] {
        padding: 3.5rem calc(50vw - 50% + 1.5rem);
    }

    .features-hero-title[b-uhgu92wn2x] {
        font-size: 2.75rem;
    }

    .features-section[b-uhgu92wn2x],
    .arch-section[b-uhgu92wn2x],
    .cta-section[b-uhgu92wn2x] {
        padding: 2.5rem 0;
    }

    .arch-diagram[b-uhgu92wn2x] {
        flex-direction: column;
        align-items: center;
    }

    .arch-arrow[b-uhgu92wn2x] {
        flex-direction: column;
        padding: 0.25rem 0;
    }

    .arch-arrow-line[b-uhgu92wn2x] {
        width: 1px;
        height: 1.5rem;
    }

    .arch-arrow-icon[b-uhgu92wn2x] {
        transform: rotate(90deg);
        margin-left: 0;
        margin-top: -0.25rem;
    }

    .arch-layer--split[b-uhgu92wn2x] {
        flex-direction: row;
    }
}

/* ── Responsive — Phone ───────────────────────────── */

@media (max-width: 640.98px) {
    .features-hero[b-uhgu92wn2x] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
    }

    .features-hero-title[b-uhgu92wn2x] {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .features-hero-subtitle[b-uhgu92wn2x] {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .hero-badge[b-uhgu92wn2x] {
        font-size: 0.65rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 1rem;
    }

    .features-grid[b-uhgu92wn2x] {
        grid-template-columns: 1fr;
    }

    .features-section[b-uhgu92wn2x],
    .arch-section[b-uhgu92wn2x],
    .cta-section[b-uhgu92wn2x] {
        padding: 2rem 0;
    }

    .feature-card[b-uhgu92wn2x] {
        padding: 1.5rem;
    }

    .feature-icon[b-uhgu92wn2x] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .cta-title[b-uhgu92wn2x] {
        font-size: 1.5rem;
    }

    .cta-actions[b-uhgu92wn2x] {
        flex-direction: column;
    }

    .cta-btn[b-uhgu92wn2x] {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .arch-node[b-uhgu92wn2x] {
        min-width: 100px;
    }

    .arch-layer--split[b-uhgu92wn2x] {
        gap: 0.5rem;
    }
}
/* _content/xsubi-website/Components/Pages/Hosting/Pricing.razor.rz.scp.css */
/* ── Hero ─────────────────────────────────────────── */

.pricing-hero[b-8ctaornexl] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 4rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
    text-align: center;
}

.pricing-hero[b-8ctaornexl]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.pricing-hero .hero-glow[b-8ctaornexl] {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.pricing-hero-content[b-8ctaornexl] {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.pricing-hero-title[b-8ctaornexl] {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--xs-text-bright);
    margin-bottom: 1rem;
}

.pricing-hero-sub[b-8ctaornexl] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--xs-text-secondary);
    margin-bottom: 0;
}

/* ── Pricing Sections ─────────────────────────────── */

.pricing-section[b-8ctaornexl] {
    padding: 4rem 0;
}

.pricing-section--alt[b-8ctaornexl] {
    border-top: 1px solid var(--xs-card-border);
}

/* ── Pricing Grid ─────────────────────────────────── */

.pricing-grid[b-8ctaornexl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* ── Pricing Cards ────────────────────────────────── */

.pricing-card[b-8ctaornexl] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.pricing-card:hover[b-8ctaornexl] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    border-color: rgba(34, 211, 238, 0.2);
}

.pricing-card--featured[b-8ctaornexl] {
    border-color: var(--xs-accent);
    box-shadow: 0 0 0 1px var(--xs-accent), 0 0 32px rgba(34, 211, 238, 0.12);
}

.pricing-card--featured:hover[b-8ctaornexl] {
    border-color: var(--xs-accent-hover);
    box-shadow: 0 0 0 1px var(--xs-accent-hover), 0 12px 40px rgba(34, 211, 238, 0.18);
}

/* ── Featured Badge ───────────────────────────────── */

.featured-badge[b-8ctaornexl] {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--xs-accent);
    color: #0b1120;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.875rem;
    border-radius: 0 0 var(--xs-radius-sm) var(--xs-radius-sm);
    font-family: var(--xs-font-mono);
    white-space: nowrap;
}

/* ── Tier Header ──────────────────────────────────── */

.tier-header[b-8ctaornexl] {
    margin-bottom: 1.75rem;
    padding-top: 0.75rem;
}

.pricing-card--featured .tier-header[b-8ctaornexl] {
    padding-top: 1.25rem;
}

.tier-name[b-8ctaornexl] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    margin-bottom: 0.625rem;
}

.pricing-card--featured .tier-name[b-8ctaornexl] {
    color: var(--xs-accent);
}

.tier-price[b-8ctaornexl] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.price-amount[b-8ctaornexl] {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    letter-spacing: -0.04em;
    font-family: var(--xs-font-mono);
    line-height: 1;
}

.price-mo[b-8ctaornexl] {
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    font-weight: 500;
}

/* ── Feature List ─────────────────────────────────── */

.feature-list[b-8ctaornexl] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.feature-list li[b-8ctaornexl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9rem;
    color: var(--xs-text-secondary);
    line-height: 1.4;
}

.feature-list li i[b-8ctaornexl] {
    color: var(--xs-success);
    font-size: 1rem;
    flex-shrink: 0;
}

.pricing-card--featured .feature-list li[b-8ctaornexl] {
    color: var(--xs-text);
}

/* ── CTA ──────────────────────────────────────────── */

.tier-cta[b-8ctaornexl] {
    margin-top: auto;
}

/* ── Add-ons ──────────────────────────────────────── */

.addons-section[b-8ctaornexl] {
    padding: 3.5rem 0 4rem;
    border-top: 1px solid var(--xs-card-border);
}

.addons-grid[b-8ctaornexl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.addon-card[b-8ctaornexl] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.addon-card:hover[b-8ctaornexl] {
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.07);
}

.addon-icon[b-8ctaornexl] {
    font-size: 1.5rem;
    color: var(--xs-accent);
    display: block;
    margin-bottom: 0.75rem;
}

.addon-label[b-8ctaornexl] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--xs-text-bright);
    margin-bottom: 0.375rem;
}

.addon-price[b-8ctaornexl] {
    font-size: 0.875rem;
    color: var(--xs-accent);
    font-family: var(--xs-font-mono);
    font-weight: 600;
    margin-bottom: 0;
}

/* ── FAQ ──────────────────────────────────────────── */

.faq-section[b-8ctaornexl] {
    padding: 3.5rem 0 4rem;
    border-top: 1px solid var(--xs-card-border);
}

.faq-list[b-8ctaornexl] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item[b-8ctaornexl] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    overflow: hidden;
    transition: border-color 200ms ease;
}

.faq-item[open][b-8ctaornexl] {
    border-color: rgba(34, 211, 238, 0.2);
}

.faq-question[b-8ctaornexl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xs-text-bright);
    cursor: pointer;
    user-select: none;
    list-style: none;
    gap: 1rem;
}

/* Remove the default disclosure triangle in all browsers */
.faq-question[b-8ctaornexl]::-webkit-details-marker {
    display: none;
}

.faq-question[b-8ctaornexl]::after {
    content: '\F282'; /* bi-chevron-down codepoint */
    font-family: 'bootstrap-icons';
    font-size: 0.9rem;
    color: var(--xs-text-muted);
    flex-shrink: 0;
    transition: transform 200ms ease, color 200ms ease;
}

.faq-item[open] > .faq-question[b-8ctaornexl]::after {
    transform: rotate(180deg);
    color: var(--xs-accent);
}

.faq-item[open] > .faq-question[b-8ctaornexl] {
    color: var(--xs-accent);
}

.faq-answer[b-8ctaornexl] {
    padding: 0 1.25rem 1rem;
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
    border-top: 1px solid var(--xs-card-border);
    padding-top: 0.875rem;
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 991.98px) {
    .addons-grid[b-8ctaornexl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pricing-hero[b-8ctaornexl] {
        padding: 3rem calc(50vw - 50% + 1.5rem);
    }

    .pricing-hero-title[b-8ctaornexl] {
        font-size: 2.1rem;
    }

    .pricing-grid[b-8ctaornexl] {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .pricing-section[b-8ctaornexl],
    .addons-section[b-8ctaornexl],
    .faq-section[b-8ctaornexl] {
        padding: 2.5rem 0;
    }
}

/* ── Responsive — Phone ───────────────────────────── */

@media (max-width: 640.98px) {
    .pricing-hero[b-8ctaornexl] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
    }

    .pricing-hero-title[b-8ctaornexl] {
        font-size: 1.75rem;
    }

    .pricing-hero-sub[b-8ctaornexl] {
        font-size: 0.9rem;
    }

    .pricing-section[b-8ctaornexl],
    .addons-section[b-8ctaornexl],
    .faq-section[b-8ctaornexl] {
        padding: 2rem 0;
    }

    .pricing-card[b-8ctaornexl] {
        padding: 1.5rem;
    }

    .price-amount[b-8ctaornexl] {
        font-size: 2.25rem;
    }

    .addons-grid[b-8ctaornexl] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .addon-card[b-8ctaornexl] {
        padding: 1.25rem 1rem;
    }

    .faq-question[b-8ctaornexl] {
        padding: 0.875rem 1rem;
        font-size: 0.85rem;
    }

    .faq-answer[b-8ctaornexl] {
        padding: 0.75rem 1rem 0.875rem;
        font-size: 0.85rem;
    }
}
/* _content/xsubi-website/Components/Pages/Login.razor.rz.scp.css */
/* ============================================
   Auth card — centered single-column layout
   ============================================ */

.auth-container[b-d2thalri32] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem 4rem;
    min-height: 60vh;
}

.auth-card[b-d2thalri32] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--xs-shadow-lg);
}

.auth-header[b-d2thalri32] {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.auth-badge[b-d2thalri32] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.auth-header h1[b-d2thalri32] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-d2thalri32] {
    font-size: 0.9rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

/* ============================================
   Form
   ============================================ */

.form-group[b-d2thalri32] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.form-group label[b-d2thalri32] {
    color: var(--xs-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.password-label[b-d2thalri32] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-input[b-d2thalri32] {
    background: var(--xs-bg);
    border: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    border-radius: var(--xs-radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    width: 100%;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-input[b-d2thalri32]::placeholder {
    color: var(--xs-text-muted);
}

.form-input:focus[b-d2thalri32] {
    border-color: var(--xs-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.forgot-link[b-d2thalri32] {
    font-size: 0.8rem;
    color: var(--xs-accent);
    text-decoration: none;
    font-weight: 400;
}

.forgot-link:hover[b-d2thalri32] {
    color: var(--xs-accent-hover);
}

.validation-message[b-d2thalri32] {
    font-size: 0.8rem;
    color: var(--xs-danger);
    margin-top: 0.125rem;
}

.invalid[b-d2thalri32] {
    border-color: var(--xs-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.valid.modified[b-d2thalri32] {
    border-color: var(--xs-success);
}

.btn-submit[b-d2thalri32] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   Footer link
   ============================================ */

.auth-footer[b-d2thalri32] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.auth-footer a[b-d2thalri32] {
    color: var(--xs-primary-light);
    font-weight: 500;
    text-decoration: none;
}

.auth-footer a:hover[b-d2thalri32] {
    color: var(--xs-primary-hover);
}

/* ============================================
   Redirect state
   ============================================ */

.auth-redirect[b-d2thalri32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    gap: 1rem;
    animation: fadeInUp-b-d2thalri32 0.4s ease-out both;
}

.auth-redirect i[b-d2thalri32] {
    font-size: 2.5rem;
    color: var(--xs-success);
}

.auth-redirect p[b-d2thalri32] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

@keyframes fadeInUp-b-d2thalri32 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 480px) {
    .auth-container[b-d2thalri32] {
        padding: 2rem 0.75rem 3rem;
        min-height: 50vh;
    }

    .auth-card[b-d2thalri32] {
        padding: 1.75rem 1.25rem;
    }

    .auth-header h1[b-d2thalri32] {
        font-size: 1.5rem;
    }
}
/* _content/xsubi-website/Components/Pages/Logout.razor.rz.scp.css */
/* ============================================
   Logout — centered confirmation card
   ============================================ */

.logout-container[b-cjorfue35k] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.logout-card[b-cjorfue35k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    max-width: 400px;
    width: 100%;
}

.logout-icon[b-cjorfue35k] {
    font-size: 3rem;
    color: var(--xs-text-muted);
    margin-bottom: 0.5rem;
}

.logout-card h1[b-cjorfue35k] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin: 0;
    letter-spacing: -0.02em;
}

.logout-card p[b-cjorfue35k] {
    font-size: 0.95rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

.logout-actions[b-cjorfue35k] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .logout-card h1[b-cjorfue35k] {
        font-size: 1.5rem;
    }

    .logout-actions[b-cjorfue35k] {
        flex-direction: column;
        width: 100%;
    }

    .logout-actions .btn[b-cjorfue35k] {
        width: 100%;
        text-align: center;
    }
}
/* _content/xsubi-website/Components/Pages/NotFound.razor.rz.scp.css */
/* ============================================
   Not Found — 404 error page
   ============================================ */

.notfound-container[b-7n4sof2n5m] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.notfound-card[b-7n4sof2n5m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 420px;
    width: 100%;
}

.notfound-code[b-7n4sof2n5m] {
    font-size: 5rem;
    font-weight: 900;
    color: var(--xs-accent);
    opacity: 0.25;
    line-height: 1;
    margin: 0;
    font-family: var(--xs-font-mono);
    letter-spacing: -0.05em;
}

.notfound-icon[b-7n4sof2n5m] {
    font-size: 2.5rem;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.notfound-card h1[b-7n4sof2n5m] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin: 0;
    letter-spacing: -0.02em;
}

.notfound-card p[b-7n4sof2n5m] {
    font-size: 0.95rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

.notfound-actions[b-7n4sof2n5m] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .notfound-code[b-7n4sof2n5m] {
        font-size: 4rem;
    }

    .notfound-card h1[b-7n4sof2n5m] {
        font-size: 1.5rem;
    }

    .notfound-actions[b-7n4sof2n5m] {
        flex-direction: column;
        width: 100%;
    }

    .notfound-actions .btn[b-7n4sof2n5m] {
        width: 100%;
        text-align: center;
    }
}
/* _content/xsubi-website/Components/Pages/Register.razor.rz.scp.css */
/* ============================================
   Auth card — centered single-column layout
   ============================================ */

.auth-container[b-s8adq8fz72] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem 4rem;
    min-height: 60vh;
}

.auth-card[b-s8adq8fz72] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--xs-shadow-lg);
}

.auth-header[b-s8adq8fz72] {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.auth-badge[b-s8adq8fz72] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.auth-header h1[b-s8adq8fz72] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--xs-text-bright);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.auth-subtitle[b-s8adq8fz72] {
    font-size: 0.9rem;
    color: var(--xs-text-secondary);
    margin: 0;
}

/* ============================================
   Form
   ============================================ */

.form-group[b-s8adq8fz72] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.form-group label[b-s8adq8fz72] {
    color: var(--xs-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-input[b-s8adq8fz72] {
    background: var(--xs-bg);
    border: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    border-radius: var(--xs-radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    width: 100%;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-input[b-s8adq8fz72]::placeholder {
    color: var(--xs-text-muted);
}

.form-input:focus[b-s8adq8fz72] {
    border-color: var(--xs-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.validation-message[b-s8adq8fz72] {
    font-size: 0.8rem;
    color: var(--xs-danger);
    margin-top: 0.125rem;
}

.invalid[b-s8adq8fz72] {
    border-color: var(--xs-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.valid.modified[b-s8adq8fz72] {
    border-color: var(--xs-success);
}

.btn-submit[b-s8adq8fz72] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   Footer link
   ============================================ */

.auth-footer[b-s8adq8fz72] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.auth-footer a[b-s8adq8fz72] {
    color: var(--xs-primary-light);
    font-weight: 500;
    text-decoration: none;
}

.auth-footer a:hover[b-s8adq8fz72] {
    color: var(--xs-primary-hover);
}

/* ============================================
   Success state
   ============================================ */

.auth-redirect[b-s8adq8fz72] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    gap: 1rem;
    animation: fadeInUp-b-s8adq8fz72 0.4s ease-out both;
}

.auth-redirect i[b-s8adq8fz72] {
    font-size: 2.5rem;
    color: var(--xs-success);
}

.auth-redirect p[b-s8adq8fz72] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

@keyframes fadeInUp-b-s8adq8fz72 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 480px) {
    .auth-container[b-s8adq8fz72] {
        padding: 2rem 0.75rem 3rem;
        min-height: 50vh;
    }

    .auth-card[b-s8adq8fz72] {
        padding: 1.75rem 1.25rem;
    }

    .auth-header h1[b-s8adq8fz72] {
        font-size: 1.5rem;
    }
}
/* _content/xsubi-website/Components/Pages/Research/CovenantArchitecture.razor.rz.scp.css */
/* ══════════════════════════════════════════
   REPORT WRAPPER
   ══════════════════════════════════════════ */

.research-report[b-9avjiugo4m] {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* ══════════════════════════════════════════
   REPORT HEADER
   ══════════════════════════════════════════ */

.report-header[b-9avjiugo4m] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.report-category[b-9avjiugo4m] {
    display: inline-block;
    background: rgba(240, 160, 32, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(240, 160, 32, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
}

.report-header h1[b-9avjiugo4m] {
    font-size: 2.0rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--xs-text-bright);
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.report-meta[b-9avjiugo4m] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.78rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    margin-bottom: 1.5rem;
}

.report-meta span[b-9avjiugo4m] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.report-meta i[b-9avjiugo4m] {
    font-size: 0.72rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* ══════════════════════════════════════════
   DOWNLOAD BUTTON
   ══════════════════════════════════════════ */

.report-actions[b-9avjiugo4m] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-download[b-9avjiugo4m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: var(--xs-accent);
    color: #111;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--xs-radius-sm);
    text-decoration: none;
    transition: background 150ms ease, transform 100ms ease;
}

.btn-download:hover[b-9avjiugo4m] {
    background: var(--xs-accent-hover, #d4881a);
    color: #111;
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-download i[b-9avjiugo4m] {
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════
   REPORT CONTENT — TYPOGRAPHY
   ══════════════════════════════════════════ */

.report-content p[b-9avjiugo4m] {
    font-size: 1.0rem;
    line-height: 1.8;
    color: var(--xs-text);
    margin-bottom: 1.25rem;
}

.report-content p:last-child[b-9avjiugo4m] {
    margin-bottom: 0;
}

.report-content strong[b-9avjiugo4m] {
    color: var(--xs-text-bright);
    font-weight: 600;
}

.report-content em[b-9avjiugo4m] {
    color: var(--xs-text-secondary);
}

.report-content a[b-9avjiugo4m] {
    color: var(--xs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.report-content a:hover[b-9avjiugo4m] {
    color: var(--xs-accent-hover, #d4881a);
}

.report-content h2[b-9avjiugo4m] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.report-content h3[b-9avjiugo4m] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xs-accent);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-content h4[b-9avjiugo4m] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════
   LISTS
   ══════════════════════════════════════════ */

.report-content ul[b-9avjiugo4m],
.report-content ol[b-9avjiugo4m] {
    color: var(--xs-text);
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.report-content li[b-9avjiugo4m] {
    margin-bottom: 0.35rem;
    font-size: 1.0rem;
}

.report-content li > ul[b-9avjiugo4m],
.report-content li > ol[b-9avjiugo4m] {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   CODE BLOCKS — causal tree + inline
   ══════════════════════════════════════════ */

.report-content code[b-9avjiugo4m] {
    font-family: var(--xs-font-mono);
    font-size: 0.875em;
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.15em 0.45em;
    color: var(--xs-accent);
}

.report-content pre[b-9avjiugo4m] {
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: var(--xs-font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--xs-text);
    white-space: pre;
}

.report-content pre code[b-9avjiugo4m] {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ══════════════════════════════════════════
   TABLES — family history, evidence grid
   ══════════════════════════════════════════ */

.report-content table[b-9avjiugo4m] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.report-content thead th[b-9avjiugo4m] {
    background: var(--xs-bg-surface);
    color: var(--xs-accent);
    font-family: var(--xs-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.875rem;
    text-align: left;
    border-bottom: 2px solid var(--xs-card-border);
    white-space: nowrap;
}

.report-content tbody td[b-9avjiugo4m] {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    vertical-align: top;
}

.report-content tbody tr:last-child td[b-9avjiugo4m] {
    border-bottom: none;
}

.report-content tbody tr:nth-child(even) td[b-9avjiugo4m] {
    background: rgba(255, 255, 255, 0.015);
}

.report-content tbody tr:hover td[b-9avjiugo4m] {
    background: rgba(240, 160, 32, 0.04);
}

/* ══════════════════════════════════════════
   BLOCKQUOTES — callouts / notes
   ══════════════════════════════════════════ */

.report-content blockquote[b-9avjiugo4m] {
    border-left: 3px solid var(--xs-accent);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: rgba(240, 160, 32, 0.04);
    border-radius: 0 var(--xs-radius-sm) var(--xs-radius-sm) 0;
    color: var(--xs-text-secondary);
    font-size: 0.9375rem;
}

.report-content blockquote p[b-9avjiugo4m] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

/* ══════════════════════════════════════════
   HR separators
   ══════════════════════════════════════════ */

.report-content hr[b-9avjiugo4m] {
    border: none;
    border-top: 1px solid var(--xs-card-border);
    margin: 2rem 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet
   ══════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .report-header h1[b-9avjiugo4m] {
        font-size: 1.6rem;
    }

    .report-content pre[b-9avjiugo4m] {
        font-size: 0.72rem;
        padding: 1rem;
    }

    .report-content table[b-9avjiugo4m] {
        font-size: 0.8rem;
    }

    .report-content thead th[b-9avjiugo4m],
    .report-content tbody td[b-9avjiugo4m] {
        padding: 0.45rem 0.625rem;
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Phone
   ══════════════════════════════════════════ */

@media (max-width: 640.98px) {
    .research-report[b-9avjiugo4m] {
        padding-bottom: 3rem;
    }

    .report-header[b-9avjiugo4m] {
        margin-bottom: 1.75rem;
        padding-bottom: 1.5rem;
    }

    .report-header h1[b-9avjiugo4m] {
        font-size: 1.4rem;
        line-height: 1.25;
    }

    .report-meta[b-9avjiugo4m] {
        gap: 0.75rem;
        font-size: 0.72rem;
    }

    .report-content p[b-9avjiugo4m],
    .report-content li[b-9avjiugo4m] {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    /* Scroll tables on mobile */
    .report-content table[b-9avjiugo4m] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .report-content pre[b-9avjiugo4m] {
        font-size: 0.68rem;
    }
}
/* _content/xsubi-website/Components/Pages/Research/Index.razor.rz.scp.css */
/* Research Hero */
.research-hero[b-pd547at0li] {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--xs-card-border);
    margin-bottom: 2.5rem;
}

.research-hero h1[b-pd547at0li] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}

.research-hero-sub[b-pd547at0li] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 0.5rem;
}

.research-hero-filter[b-pd547at0li] {
    color: var(--xs-text-muted);
    font-size: 0.85rem;
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 0.75rem;
    font-style: italic;
    border-left: 2px solid rgba(240, 160, 32, 0.3);
    padding-left: 1rem;
}

.research-hero-timeline[b-pd547at0li] {
    color: var(--xs-text-muted);
    font-size: 0.8rem;
    font-family: var(--xs-font-mono);
    margin-bottom: 0;
}

/* Domain Sections */
.research-domain[b-pd547at0li] {
    margin-bottom: 3rem;
}

.domain-title[b-pd547at0li] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--xs-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(240, 160, 32, 0.2);
}

/* Research Grid */
.research-grid[b-pd547at0li] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Research Card */
.research-card[b-pd547at0li] {
    display: flex;
    flex-direction: column;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.research-card[b-pd547at0li]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xs-accent), rgba(240, 160, 32, 0.4));
    opacity: 0;
    transition: opacity 200ms ease;
}

a.research-card:hover[b-pd547at0li] {
    border-color: rgba(240, 160, 32, 0.35);
    box-shadow: 0 4px 24px rgba(240, 160, 32, 0.08);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

a.research-card:hover[b-pd547at0li]::before {
    opacity: 1;
}

a.research-card:hover .research-card-title[b-pd547at0li] {
    color: var(--xs-accent);
}

/* Unlinked cards — no hover effects, subtle opacity */
.research-card-unlinked[b-pd547at0li] {
    cursor: default;
    opacity: 0.85;
}

.research-card-unlinked[b-pd547at0li]::before {
    display: none;
}

/* Stroke Label */
.stroke-label[b-pd547at0li] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    border-radius: var(--xs-radius-sm);
}

.stroke-label.pre-stroke[b-pd547at0li] {
    background: rgba(100, 160, 255, 0.1);
    color: #6090d0;
    border: 1px solid rgba(100, 160, 255, 0.25);
}

.stroke-label.post-stroke[b-pd547at0li] {
    background: rgba(80, 200, 120, 0.1);
    color: #50c878;
    border: 1px solid rgba(80, 200, 120, 0.25);
}

/* Category badge */
.research-card-category[b-pd547at0li] {
    display: inline-block;
    background: rgba(240, 160, 32, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(240, 160, 32, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
    align-self: flex-start;
}

.research-card-title[b-pd547at0li] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    line-height: 1.35;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
    transition: color 200ms ease;
}

.research-card-subtitle[b-pd547at0li] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.research-card-excerpt[b-pd547at0li] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
    flex: 1;
}

.research-card-meta[b-pd547at0li] {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--xs-card-border);
    font-size: 0.75rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.research-card-meta span[b-pd547at0li] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.research-card-meta i[b-pd547at0li] {
    font-size: 0.7rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* Responsive — Tablet */
@media (max-width: 767.98px) {
    .research-grid[b-pd547at0li] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .research-hero h1[b-pd547at0li] {
        font-size: 2rem;
    }
}

/* Responsive — Phone */
@media (max-width: 640.98px) {
    .research-hero[b-pd547at0li] {
        padding-bottom: 1.75rem;
        margin-bottom: 1.75rem;
    }

    .research-hero h1[b-pd547at0li] {
        font-size: 1.75rem;
    }

    .research-hero-sub[b-pd547at0li] {
        font-size: 0.9rem;
    }

    .research-card[b-pd547at0li] {
        padding: 1.25rem;
    }

    .research-card-title[b-pd547at0li] {
        font-size: 1rem;
    }

    .research-card-meta[b-pd547at0li] {
        gap: 1rem;
        font-size: 0.7rem;
    }
}
/* _content/xsubi-website/Components/Pages/Research/PearlsBeforeSwine.razor.rz.scp.css */
/* ══════════════════════════════════════════
   REPORT WRAPPER
   ══════════════════════════════════════════ */

.research-report[b-s1xcpp6nzj] {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* ══════════════════════════════════════════
   REPORT HEADER
   ══════════════════════════════════════════ */

.report-header[b-s1xcpp6nzj] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.report-category[b-s1xcpp6nzj] {
    display: inline-block;
    background: rgba(240, 160, 32, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(240, 160, 32, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
}

.report-header h1[b-s1xcpp6nzj] {
    font-size: 2.0rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--xs-text-bright);
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.report-meta[b-s1xcpp6nzj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.78rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    margin-bottom: 1.5rem;
}

.report-meta span[b-s1xcpp6nzj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.report-meta i[b-s1xcpp6nzj] {
    font-size: 0.72rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* ══════════════════════════════════════════
   DOWNLOAD BUTTON
   ══════════════════════════════════════════ */

.report-actions[b-s1xcpp6nzj] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-download[b-s1xcpp6nzj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: var(--xs-accent);
    color: #111;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--xs-radius-sm);
    text-decoration: none;
    transition: background 150ms ease, transform 100ms ease;
}

.btn-download:hover[b-s1xcpp6nzj] {
    background: var(--xs-accent-hover, #d4881a);
    color: #111;
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-download i[b-s1xcpp6nzj] {
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════
   REPORT CONTENT — TYPOGRAPHY
   ══════════════════════════════════════════ */

.report-content p[b-s1xcpp6nzj] {
    font-size: 1.0rem;
    line-height: 1.8;
    color: var(--xs-text);
    margin-bottom: 1.25rem;
}

.report-content p:last-child[b-s1xcpp6nzj] {
    margin-bottom: 0;
}

.report-content strong[b-s1xcpp6nzj] {
    color: var(--xs-text-bright);
    font-weight: 600;
}

.report-content em[b-s1xcpp6nzj] {
    color: var(--xs-text-secondary);
}

.report-content a[b-s1xcpp6nzj] {
    color: var(--xs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.report-content a:hover[b-s1xcpp6nzj] {
    color: var(--xs-accent-hover, #d4881a);
}

.report-content h2[b-s1xcpp6nzj] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.report-content h3[b-s1xcpp6nzj] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xs-accent);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-content h4[b-s1xcpp6nzj] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════
   LISTS
   ══════════════════════════════════════════ */

.report-content ul[b-s1xcpp6nzj],
.report-content ol[b-s1xcpp6nzj] {
    color: var(--xs-text);
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.report-content li[b-s1xcpp6nzj] {
    margin-bottom: 0.35rem;
    font-size: 1.0rem;
}

.report-content li > ul[b-s1xcpp6nzj],
.report-content li > ol[b-s1xcpp6nzj] {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   CODE BLOCKS — causal tree + inline
   ══════════════════════════════════════════ */

.report-content code[b-s1xcpp6nzj] {
    font-family: var(--xs-font-mono);
    font-size: 0.875em;
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.15em 0.45em;
    color: var(--xs-accent);
}

.report-content pre[b-s1xcpp6nzj] {
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: var(--xs-font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--xs-text);
    white-space: pre;
}

.report-content pre code[b-s1xcpp6nzj] {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ══════════════════════════════════════════
   TABLES — family history, evidence grid
   ══════════════════════════════════════════ */

.report-content table[b-s1xcpp6nzj] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.report-content thead th[b-s1xcpp6nzj] {
    background: var(--xs-bg-surface);
    color: var(--xs-accent);
    font-family: var(--xs-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.875rem;
    text-align: left;
    border-bottom: 2px solid var(--xs-card-border);
    white-space: nowrap;
}

.report-content tbody td[b-s1xcpp6nzj] {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    vertical-align: top;
}

.report-content tbody tr:last-child td[b-s1xcpp6nzj] {
    border-bottom: none;
}

.report-content tbody tr:nth-child(even) td[b-s1xcpp6nzj] {
    background: rgba(255, 255, 255, 0.015);
}

.report-content tbody tr:hover td[b-s1xcpp6nzj] {
    background: rgba(240, 160, 32, 0.04);
}

/* ══════════════════════════════════════════
   BLOCKQUOTES — callouts / notes
   ══════════════════════════════════════════ */

.report-content blockquote[b-s1xcpp6nzj] {
    border-left: 3px solid var(--xs-accent);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: rgba(240, 160, 32, 0.04);
    border-radius: 0 var(--xs-radius-sm) var(--xs-radius-sm) 0;
    color: var(--xs-text-secondary);
    font-size: 0.9375rem;
}

.report-content blockquote p[b-s1xcpp6nzj] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

/* ══════════════════════════════════════════
   HR separators
   ══════════════════════════════════════════ */

.report-content hr[b-s1xcpp6nzj] {
    border: none;
    border-top: 1px solid var(--xs-card-border);
    margin: 2rem 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet
   ══════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .report-header h1[b-s1xcpp6nzj] {
        font-size: 1.6rem;
    }

    .report-content pre[b-s1xcpp6nzj] {
        font-size: 0.72rem;
        padding: 1rem;
    }

    .report-content table[b-s1xcpp6nzj] {
        font-size: 0.8rem;
    }

    .report-content thead th[b-s1xcpp6nzj],
    .report-content tbody td[b-s1xcpp6nzj] {
        padding: 0.45rem 0.625rem;
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Phone
   ══════════════════════════════════════════ */

@media (max-width: 640.98px) {
    .research-report[b-s1xcpp6nzj] {
        padding-bottom: 3rem;
    }

    .report-header[b-s1xcpp6nzj] {
        margin-bottom: 1.75rem;
        padding-bottom: 1.5rem;
    }

    .report-header h1[b-s1xcpp6nzj] {
        font-size: 1.4rem;
        line-height: 1.25;
    }

    .report-meta[b-s1xcpp6nzj] {
        gap: 0.75rem;
        font-size: 0.72rem;
    }

    .report-content p[b-s1xcpp6nzj],
    .report-content li[b-s1xcpp6nzj] {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    /* Scroll tables on mobile */
    .report-content table[b-s1xcpp6nzj] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .report-content pre[b-s1xcpp6nzj] {
        font-size: 0.68rem;
    }
}
/* _content/xsubi-website/Components/Pages/Research/Porphyria.razor.rz.scp.css */
/* ══════════════════════════════════════════
   REPORT WRAPPER
   ══════════════════════════════════════════ */

.research-report[b-vfivs3dso4] {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* ══════════════════════════════════════════
   REPORT HEADER
   ══════════════════════════════════════════ */

.report-header[b-vfivs3dso4] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.report-category[b-vfivs3dso4] {
    display: inline-block;
    background: rgba(240, 160, 32, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(240, 160, 32, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
}

.report-header h1[b-vfivs3dso4] {
    font-size: 2.0rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--xs-text-bright);
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
}

.report-meta[b-vfivs3dso4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.78rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    margin-bottom: 1.5rem;
}

.report-meta span[b-vfivs3dso4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.report-meta i[b-vfivs3dso4] {
    font-size: 0.72rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* ══════════════════════════════════════════
   DOWNLOAD BUTTON
   ══════════════════════════════════════════ */

.report-actions[b-vfivs3dso4] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-download[b-vfivs3dso4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: var(--xs-accent);
    color: #111;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--xs-radius-sm);
    text-decoration: none;
    transition: background 150ms ease, transform 100ms ease;
}

.btn-download:hover[b-vfivs3dso4] {
    background: var(--xs-accent-hover, #d4881a);
    color: #111;
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-download i[b-vfivs3dso4] {
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════
   REPORT CONTENT — TYPOGRAPHY
   ══════════════════════════════════════════ */

.report-content p[b-vfivs3dso4] {
    font-size: 1.0rem;
    line-height: 1.8;
    color: var(--xs-text);
    margin-bottom: 1.25rem;
}

.report-content p:last-child[b-vfivs3dso4] {
    margin-bottom: 0;
}

.report-content strong[b-vfivs3dso4] {
    color: var(--xs-text-bright);
    font-weight: 600;
}

.report-content em[b-vfivs3dso4] {
    color: var(--xs-text-secondary);
}

.report-content a[b-vfivs3dso4] {
    color: var(--xs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.report-content a:hover[b-vfivs3dso4] {
    color: var(--xs-accent-hover, #d4881a);
}

.report-content h2[b-vfivs3dso4] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.report-content h3[b-vfivs3dso4] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xs-accent);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-family: var(--xs-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-content h4[b-vfivs3dso4] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════
   LISTS
   ══════════════════════════════════════════ */

.report-content ul[b-vfivs3dso4],
.report-content ol[b-vfivs3dso4] {
    color: var(--xs-text);
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.report-content li[b-vfivs3dso4] {
    margin-bottom: 0.35rem;
    font-size: 1.0rem;
}

.report-content li > ul[b-vfivs3dso4],
.report-content li > ol[b-vfivs3dso4] {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   CODE BLOCKS — causal tree + inline
   ══════════════════════════════════════════ */

.report-content code[b-vfivs3dso4] {
    font-family: var(--xs-font-mono);
    font-size: 0.875em;
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    padding: 0.15em 0.45em;
    color: var(--xs-accent);
}

.report-content pre[b-vfivs3dso4] {
    background: var(--xs-bg-surface);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: var(--xs-font-mono);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--xs-text);
    white-space: pre;
}

.report-content pre code[b-vfivs3dso4] {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* ══════════════════════════════════════════
   TABLES — family history, evidence grid
   ══════════════════════════════════════════ */

.report-content table[b-vfivs3dso4] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.report-content thead th[b-vfivs3dso4] {
    background: var(--xs-bg-surface);
    color: var(--xs-accent);
    font-family: var(--xs-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.875rem;
    text-align: left;
    border-bottom: 2px solid var(--xs-card-border);
    white-space: nowrap;
}

.report-content tbody td[b-vfivs3dso4] {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--xs-card-border);
    color: var(--xs-text);
    vertical-align: top;
}

.report-content tbody tr:last-child td[b-vfivs3dso4] {
    border-bottom: none;
}

.report-content tbody tr:nth-child(even) td[b-vfivs3dso4] {
    background: rgba(255, 255, 255, 0.015);
}

.report-content tbody tr:hover td[b-vfivs3dso4] {
    background: rgba(240, 160, 32, 0.04);
}

/* ══════════════════════════════════════════
   BLOCKQUOTES — callouts / notes
   ══════════════════════════════════════════ */

.report-content blockquote[b-vfivs3dso4] {
    border-left: 3px solid var(--xs-accent);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: rgba(240, 160, 32, 0.04);
    border-radius: 0 var(--xs-radius-sm) var(--xs-radius-sm) 0;
    color: var(--xs-text-secondary);
    font-size: 0.9375rem;
}

.report-content blockquote p[b-vfivs3dso4] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

/* ══════════════════════════════════════════
   HR separators
   ══════════════════════════════════════════ */

.report-content hr[b-vfivs3dso4] {
    border: none;
    border-top: 1px solid var(--xs-card-border);
    margin: 2rem 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet
   ══════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .report-header h1[b-vfivs3dso4] {
        font-size: 1.6rem;
    }

    .report-content pre[b-vfivs3dso4] {
        font-size: 0.72rem;
        padding: 1rem;
    }

    .report-content table[b-vfivs3dso4] {
        font-size: 0.8rem;
    }

    .report-content thead th[b-vfivs3dso4],
    .report-content tbody td[b-vfivs3dso4] {
        padding: 0.45rem 0.625rem;
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Phone
   ══════════════════════════════════════════ */

@media (max-width: 640.98px) {
    .research-report[b-vfivs3dso4] {
        padding-bottom: 3rem;
    }

    .report-header[b-vfivs3dso4] {
        margin-bottom: 1.75rem;
        padding-bottom: 1.5rem;
    }

    .report-header h1[b-vfivs3dso4] {
        font-size: 1.4rem;
        line-height: 1.25;
    }

    .report-meta[b-vfivs3dso4] {
        gap: 0.75rem;
        font-size: 0.72rem;
    }

    .report-content p[b-vfivs3dso4],
    .report-content li[b-vfivs3dso4] {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    /* Scroll tables on mobile */
    .report-content table[b-vfivs3dso4] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .report-content pre[b-vfivs3dso4] {
        font-size: 0.68rem;
    }
}
/* _content/xsubi-website/Components/Pages/Research/Sermons.razor.rz.scp.css */
/* Sermons Hero */
.sermons-hero[b-08stqq0ml1] {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--xs-card-border);
    margin-bottom: 2.5rem;
}

.sermons-hero h1[b-08stqq0ml1] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}

.sermons-hero-sub[b-08stqq0ml1] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 0;
}

/* Sermons Grid */
.sermons-grid[b-08stqq0ml1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

/* Sermon Card */
.sermon-card[b-08stqq0ml1] {
    display: flex;
    flex-direction: column;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.sermon-card[b-08stqq0ml1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xs-accent), rgba(240, 160, 32, 0.4));
    opacity: 0;
    transition: opacity 200ms ease;
}

.sermon-card:hover[b-08stqq0ml1] {
    border-color: rgba(240, 160, 32, 0.35);
    box-shadow: 0 4px 24px rgba(240, 160, 32, 0.08);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.sermon-card:hover[b-08stqq0ml1]::before {
    opacity: 1;
}

/* Category badge */
.sermon-card-category[b-08stqq0ml1] {
    display: inline-block;
    background: rgba(240, 160, 32, 0.1);
    color: var(--xs-accent);
    border: 1px solid rgba(240, 160, 32, 0.25);
    border-radius: var(--xs-radius-sm);
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    margin-bottom: 1rem;
    align-self: flex-start;
}

.sermon-card-title[b-08stqq0ml1] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    line-height: 1.35;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
    transition: color 200ms ease;
}

.sermon-card:hover .sermon-card-title[b-08stqq0ml1] {
    color: var(--xs-accent);
}

.sermon-card-subtitle[b-08stqq0ml1] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.sermon-card-excerpt[b-08stqq0ml1] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
    flex: 1;
}

.sermon-card-meta[b-08stqq0ml1] {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--xs-card-border);
    font-size: 0.75rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.sermon-card-meta span[b-08stqq0ml1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sermon-card-meta i[b-08stqq0ml1] {
    font-size: 0.7rem;
    color: var(--xs-accent);
    opacity: 0.7;
}

/* Feature disabled fallback */
.feature-disabled[b-08stqq0ml1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
    color: var(--xs-text-secondary);
}

.feature-disabled h1[b-08stqq0ml1] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    margin-bottom: 0.75rem;
}

.feature-disabled p[b-08stqq0ml1] {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: var(--xs-text-secondary);
}

/* Responsive — Tablet */
@media (max-width: 767.98px) {
    .sermons-grid[b-08stqq0ml1] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .sermons-hero h1[b-08stqq0ml1] {
        font-size: 2rem;
    }
}

/* Responsive — Phone */
@media (max-width: 640.98px) {
    .sermons-hero[b-08stqq0ml1] {
        padding-bottom: 1.75rem;
        margin-bottom: 1.75rem;
    }

    .sermons-hero h1[b-08stqq0ml1] {
        font-size: 1.75rem;
    }

    .sermons-hero-sub[b-08stqq0ml1] {
        font-size: 0.9rem;
    }

    .sermon-card[b-08stqq0ml1] {
        padding: 1.25rem;
    }

    .sermon-card-title[b-08stqq0ml1] {
        font-size: 1rem;
    }

    .sermon-card-meta[b-08stqq0ml1] {
        gap: 1rem;
        font-size: 0.7rem;
    }
}
/* _content/xsubi-website/Components/Pages/Servers/Index.razor.rz.scp.css */
/* ── Host Grid ────────────────────────────────────── */

.servers-host-grid[b-loof471sk7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

/* ── Host Card ────────────────────────────────────── */

.host-card[b-loof471sk7] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.host-card:hover[b-loof471sk7] {
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.06);
}

.host-card-header[b-loof471sk7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.host-card-badges[b-loof471sk7] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* ── Hypervisor Badges ────────────────────────────── */

.host-badge[b-loof471sk7] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    white-space: nowrap;
}

.host-badge-kvm[b-loof471sk7] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.host-badge-hyperv[b-loof471sk7] {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

/* ── Host Metrics (gauge row) ─────────────────────── */

.host-metrics[b-loof471sk7] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* ── Offline State ────────────────────────────────── */

.host-offline[b-loof471sk7] {
    opacity: 0.5;
}

.host-offline-msg[b-loof471sk7] {
    font-size: 0.8rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    padding: 0.5rem 0;
}

/* ── VM Filter Bar ────────────────────────────────── */

.vm-filter-bar[b-loof471sk7] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vm-search[b-loof471sk7] {
    flex: 1;
    min-width: 180px;
    padding: 0.4rem 0.75rem;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    color: var(--xs-text-bright);
    font-size: 0.875rem;
    font-family: var(--xs-font-mono);
    outline: none;
    transition: border-color 150ms ease;
}

.vm-search:focus[b-loof471sk7] {
    border-color: var(--xs-accent);
}

.vm-search[b-loof471sk7]::placeholder {
    color: var(--xs-text-muted);
}

.vm-state-select[b-loof471sk7] {
    padding: 0.4rem 0.75rem;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    color: var(--xs-text-bright);
    font-size: 0.875rem;
    font-family: var(--xs-font-mono);
    outline: none;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.vm-state-select:focus[b-loof471sk7] {
    border-color: var(--xs-accent);
}

/* ── VM Table Wrapper ─────────────────────────────── */

.vm-table-wrap[b-loof471sk7] {
    overflow-x: auto;
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
}

/* ── VM Table ─────────────────────────────────────── */

.vm-table[b-loof471sk7] {
    width: 100%;
    border-collapse: collapse;
}

.vm-table thead[b-loof471sk7] {
    background: var(--xs-bg-card);
}

.vm-table th[b-loof471sk7] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    border-bottom: 1px solid var(--xs-card-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.vm-table th:hover[b-loof471sk7] {
    color: var(--xs-text-bright);
}

/* ── Sort Indicators ──────────────────────────────── */

.vm-table th.sorted-asc[b-loof471sk7]::after {
    content: " \2191";
    color: var(--xs-accent);
}

.vm-table th.sorted-desc[b-loof471sk7]::after {
    content: " \2193";
    color: var(--xs-accent);
}

/* ── VM Table — Actions column not sortable ───────── */

.vm-col-actions[b-loof471sk7] {
    cursor: default !important;
}

.vm-col-actions:hover[b-loof471sk7] {
    color: var(--xs-text-muted) !important;
}

/* ── VM Table — Body ──────────────────────────────── */

.vm-table tbody tr[b-loof471sk7] {
    transition: background 100ms ease;
}

.vm-table tbody tr:hover[b-loof471sk7] {
    background: rgba(34, 211, 238, 0.03);
}

.vm-table td[b-loof471sk7] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--xs-text);
    border-bottom: 1px solid var(--xs-card-border);
    vertical-align: middle;
}

.vm-table tbody tr:last-child td[b-loof471sk7] {
    border-bottom: none;
}

.vm-col-name[b-loof471sk7] {
    font-weight: 600;
    color: var(--xs-text-bright);
    white-space: nowrap;
}

.vm-col-host[b-loof471sk7] {
    font-family: var(--xs-font-mono);
    font-size: 0.8rem;
    color: var(--xs-text-muted);
    white-space: nowrap;
}

.vm-col-mono[b-loof471sk7] {
    font-family: var(--xs-font-mono);
    font-size: 0.85rem;
}

/* ── VM State Badge ───────────────────────────────── */

.vm-state-badge[b-loof471sk7] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    white-space: nowrap;
}

.vm-state-running[b-loof471sk7] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--xs-status-operational);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.vm-state-stopped[b-loof471sk7] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--xs-status-down);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.vm-state-paused[b-loof471sk7] {
    background: rgba(234, 179, 8, 0.12);
    color: var(--xs-status-degraded);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

/* ── VM Table Empty State ─────────────────────────── */

.vm-table-empty[b-loof471sk7] {
    text-align: center;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    font-size: 0.875rem;
    padding: 2.5rem 1rem !important;
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 767.98px) {
    .servers-host-grid[b-loof471sk7] {
        grid-template-columns: 1fr;
    }

    .host-metrics[b-loof471sk7] {
        flex-wrap: wrap;
    }

    .vm-table th[b-loof471sk7],
    .vm-table td[b-loof471sk7] {
        font-size: 0.8rem;
        padding: 0.625rem 0.75rem;
    }

    .vm-filter-bar[b-loof471sk7] {
        flex-direction: column;
    }

    .vm-search[b-loof471sk7],
    .vm-state-select[b-loof471sk7] {
        width: 100%;
    }
}

/* ── Responsive — Phone ───────────────────────────── */

@media (max-width: 640.98px) {
    .vm-table-wrap[b-loof471sk7] {
        overflow-x: scroll;
    }

    .vm-table[b-loof471sk7] {
        min-width: 600px;
    }

    .vm-table th[b-loof471sk7],
    .vm-table td[b-loof471sk7] {
        font-size: 0.75rem;
        padding: 0.5rem 0.625rem;
    }

    .host-card[b-loof471sk7] {
        padding: 1.25rem;
        gap: 1rem;
    }
}
/* _content/xsubi-website/Components/Pages/Skills.razor.rz.scp.css */
.skills-page[b-qdveo1is1c] {
    max-width: 960px;
}

/* ── Hero ─────────────────────────────────────────── */

.skills-hero[b-qdveo1is1c] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-card-border);
}

.hero-badge-sm[b-qdveo1is1c] {
    display: inline-block;
    background: var(--xs-accent-subtle);
    color: var(--xs-accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    border: 1px solid var(--xs-border);
    font-family: var(--xs-font-mono);
}

.skills-hero h1[b-qdveo1is1c] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
    color: var(--xs-text-bright);
}

.skills-hero .lead[b-qdveo1is1c] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xs-accent);
    margin-bottom: 0.25rem;
}

.skills-hero .tagline[b-qdveo1is1c] {
    color: var(--xs-text-secondary);
    font-size: 1rem;
}

/* ── Section headings ─────────────────────────────── */

section h2[b-qdveo1is1c] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--xs-text-bright);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

section h2 i[b-qdveo1is1c] {
    color: var(--xs-accent);
}

section p[b-qdveo1is1c] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ── Career stats ─────────────────────────────────── */

.career-quote[b-qdveo1is1c] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--xs-text-bright);
    font-style: italic;
    margin-bottom: 0;
    border-left: 3px solid var(--xs-accent);
    padding-left: 1rem;
}

.career-stat[b-qdveo1is1c] {
    text-align: center;
    padding: 0.75rem;
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
}

.career-stat-value[b-qdveo1is1c] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--xs-accent);
    font-family: var(--xs-font-mono);
    line-height: 1.2;
}

.career-stat-label[b-qdveo1is1c] {
    font-size: 0.75rem;
    color: var(--xs-text-secondary);
    margin-top: 0.25rem;
}

/* ── Proficiency legend ───────────────────────────── */

.proficiency-legend[b-qdveo1is1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    margin-bottom: 0.5rem;
}

.legend-item[b-qdveo1is1c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--xs-text-secondary);
    font-family: var(--xs-font-mono);
}

.legend-dot[b-qdveo1is1c] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Skill cards ──────────────────────────────────── */

.skill-card[b-qdveo1is1c] {
    transition: border-color 200ms ease;
}

/* ── Skill grid ───────────────────────────────────── */

.skill-grid[b-qdveo1is1c] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.skill-row[b-qdveo1is1c] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.skill-meta[b-qdveo1is1c] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.skill-name[b-qdveo1is1c] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--xs-text-bright);
}

.skill-years[b-qdveo1is1c] {
    font-size: 0.72rem;
    color: var(--xs-text-secondary);
    font-family: var(--xs-font-mono);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* ── Proficiency bars ─────────────────────────────── */

.skill-bar[b-qdveo1is1c] {
    height: 6px;
    border-radius: 3px;
    background: var(--xs-card-border);
    overflow: hidden;
}

.skill-bar-fill[b-qdveo1is1c] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease-out;
    animation: bar-fill-in-b-qdveo1is1c 0.8s ease-out both;
}

@keyframes bar-fill-in-b-qdveo1is1c {
    from { width: 0 !important; }
}

/* Level colors */
.level-expert[b-qdveo1is1c] {
    background: var(--xs-accent);
}

.level-senior[b-qdveo1is1c] {
    background: var(--xs-primary);
}

.level-advanced[b-qdveo1is1c] {
    background: #a78bfa;
}

.level-intermediate[b-qdveo1is1c] {
    background: var(--xs-text-secondary);
}

.level-beginner[b-qdveo1is1c] {
    background: #475569;
}

/* Legend dots inherit level colors */
.legend-dot.level-expert[b-qdveo1is1c]    { background: var(--xs-accent); }
.legend-dot.level-senior[b-qdveo1is1c]    { background: var(--xs-primary); }
.legend-dot.level-advanced[b-qdveo1is1c]  { background: #a78bfa; }
.legend-dot.level-intermediate[b-qdveo1is1c] { background: var(--xs-text-secondary); }
.legend-dot.level-beginner[b-qdveo1is1c]  { background: #475569; }

/* ── AI note ──────────────────────────────────────── */

.skill-note[b-qdveo1is1c] {
    font-size: 0.8rem;
    color: var(--xs-text-secondary);
    padding: 0.625rem 0.875rem;
    background: var(--xs-accent-subtle);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius-sm);
    line-height: 1.6;
}

.skill-note i[b-qdveo1is1c] {
    color: var(--xs-accent);
}

/* ── Teaching card ────────────────────────────────── */

.teaching-card[b-qdveo1is1c] {
    border-color: rgba(99, 102, 241, 0.25);
}

.teaching-header[b-qdveo1is1c] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.teaching-icon[b-qdveo1is1c] {
    width: 44px;
    height: 44px;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-primary-subtle);
    border: 1px solid var(--xs-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--xs-primary);
    flex-shrink: 0;
}

.teaching-org[b-qdveo1is1c] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
}

.teaching-role[b-qdveo1is1c] {
    font-size: 0.78rem;
    color: var(--xs-primary-light);
    font-family: var(--xs-font-mono);
    margin-top: 0.2rem;
}

.teaching-table[b-qdveo1is1c] {
    font-size: 0.875rem;
}

.teaching-table thead th[b-qdveo1is1c] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--xs-text-secondary);
    border-color: var(--xs-card-border);
    background: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.teaching-table tbody td[b-qdveo1is1c] {
    color: var(--xs-text-secondary);
    border-color: var(--xs-card-border);
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.teaching-table tbody td:first-child[b-qdveo1is1c] {
    color: var(--xs-text-bright);
    font-weight: 600;
}

.teaching-table tbody tr:last-child td[b-qdveo1is1c] {
    border-bottom: none;
}

.teaching-quote[b-qdveo1is1c] {
    margin: 1.25rem 0 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--xs-primary);
    background: var(--xs-primary-subtle);
    border-radius: 0 var(--xs-radius-sm) var(--xs-radius-sm) 0;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 600;
    color: var(--xs-text-bright);
}

/* ── CTA row ──────────────────────────────────────── */

.cta-row[b-qdveo1is1c] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-cta[b-qdveo1is1c] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--xs-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.btn-cta:hover[b-qdveo1is1c] {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-cta-primary[b-qdveo1is1c] {
    background: var(--xs-accent);
    color: #000;
}

.btn-cta-secondary[b-qdveo1is1c] {
    background: transparent;
    color: var(--xs-accent);
    border: 1px solid var(--xs-accent);
}

/* ── Recruiter Matcher ─────────────────────────────── */

.matcher-card[b-qdveo1is1c] {
    border: 1px solid var(--xs-accent);
    background: var(--xs-bg-card);
    border-radius: var(--xs-radius);
    overflow: hidden;
}

.matcher-toggle[b-qdveo1is1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 150ms ease;
    gap: 1rem;
}

.matcher-toggle:hover[b-qdveo1is1c] {
    background: var(--xs-accent-subtle);
}

.matcher-toggle-left[b-qdveo1is1c] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.matcher-toggle-icon[b-qdveo1is1c] {
    font-size: 1.4rem;
    color: var(--xs-accent);
    flex-shrink: 0;
}

.matcher-toggle-title[b-qdveo1is1c] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    line-height: 1.3;
}

.matcher-toggle-sub[b-qdveo1is1c] {
    font-size: 0.78rem;
    color: var(--xs-text-secondary);
    margin-top: 0.15rem;
    font-family: var(--xs-font-mono);
}

.matcher-chevron[b-qdveo1is1c] {
    color: var(--xs-text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.matcher-body[b-qdveo1is1c] {
    border-top: 1px solid var(--xs-card-border);
    padding: 1.25rem;
}

.matcher-textarea[b-qdveo1is1c] {
    font-family: var(--xs-font-mono) !important;
    font-size: 0.85rem !important;
    background: var(--xs-bg) !important;
    border: 1px solid var(--xs-card-border) !important;
    color: var(--xs-text-bright) !important;
    resize: vertical;
    line-height: 1.7;
    padding: 0.75rem 1rem !important;
    border-radius: var(--xs-radius-sm) !important;
    width: 100%;
}

.matcher-textarea:focus[b-qdveo1is1c] {
    border-color: var(--xs-accent) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
    outline: none;
}

.matcher-textarea[b-qdveo1is1c]::placeholder {
    color: var(--xs-text-secondary);
    opacity: 0.7;
}

.matcher-actions[b-qdveo1is1c] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-matcher-primary[b-qdveo1is1c] {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    background: var(--xs-accent);
    color: #000;
    font-weight: 700;
    font-size: 0.875rem;
    border: none;
    border-radius: var(--xs-radius-sm);
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
    text-decoration: none;
}

.btn-matcher-primary:hover:not(:disabled)[b-qdveo1is1c] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.btn-matcher-primary:disabled[b-qdveo1is1c] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-matcher-secondary[b-qdveo1is1c] {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    background: transparent;
    color: var(--xs-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-sm);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.btn-matcher-secondary:hover[b-qdveo1is1c] {
    color: var(--xs-text-bright);
    border-color: var(--xs-text-secondary);
}

/* ── Match summary bar ────────────────────────────── */

.match-results[b-qdveo1is1c] {
    margin-top: 1.5rem;
}

.match-summary[b-qdveo1is1c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.match-summary-text[b-qdveo1is1c] {
    font-size: 0.875rem;
    font-family: var(--xs-font-mono);
}

.match-summary-count[b-qdveo1is1c] {
    font-weight: 800;
    color: var(--xs-accent);
    font-size: 1rem;
}

.match-summary-label[b-qdveo1is1c] {
    color: var(--xs-text-secondary);
}

.match-summary-bar-track[b-qdveo1is1c] {
    height: 6px;
    background: var(--xs-card-border);
    border-radius: 3px;
    overflow: hidden;
}

.match-summary-bar-fill[b-qdveo1is1c] {
    height: 100%;
    background: var(--xs-accent);
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

/* ── Match results table ──────────────────────────── */

.match-table[b-qdveo1is1c] {
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.match-table thead th[b-qdveo1is1c] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--xs-text-secondary);
    border-color: var(--xs-card-border);
    background: transparent;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.match-table tbody td[b-qdveo1is1c] {
    border-color: var(--xs-card-border);
    padding: 0.55rem 0.75rem;
    vertical-align: middle;
    color: var(--xs-text-secondary);
    font-size: 0.83rem;
}

.match-table tbody tr:last-child td[b-qdveo1is1c] {
    border-bottom: none;
}

.match-col-req[b-qdveo1is1c] {
    font-weight: 700;
    color: var(--xs-text-bright) !important;
    white-space: nowrap;
    font-family: var(--xs-font-mono);
    font-size: 0.82rem !important;
}

.match-col-evidence[b-qdveo1is1c] {
    color: var(--xs-text-secondary) !important;
    font-size: 0.8rem !important;
    line-height: 1.5;
}

.match-col-years[b-qdveo1is1c] {
    white-space: nowrap;
    font-family: var(--xs-font-mono);
    font-size: 0.82rem !important;
    color: var(--xs-text-bright) !important;
    font-weight: 600;
}

.match-col-status[b-qdveo1is1c] {
    white-space: nowrap;
}

/* Status badges */
.match-status-badge[b-qdveo1is1c] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--xs-font-mono);
    white-space: nowrap;
}

.status-exceeds[b-qdveo1is1c] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-match[b-qdveo1is1c] {
    background: var(--xs-primary-subtle);
    color: var(--xs-primary-light);
    border: 1px solid var(--xs-border-subtle);
}

.status-partial[b-qdveo1is1c] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-gap[b-qdveo1is1c] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Matcher responsive */
@media (max-width: 640.98px) {
    .matcher-toggle[b-qdveo1is1c] {
        padding: 1rem;
    }

    .matcher-toggle-sub[b-qdveo1is1c] {
        display: none;
    }

    .matcher-body[b-qdveo1is1c] {
        padding: 1rem;
    }

    .matcher-textarea[b-qdveo1is1c] {
        font-size: 0.8rem !important;
    }

    .match-table thead th[b-qdveo1is1c],
    .match-col-evidence[b-qdveo1is1c] {
        display: none;
    }

    .match-col-req[b-qdveo1is1c],
    .match-col-years[b-qdveo1is1c],
    .match-col-status[b-qdveo1is1c] {
        display: table-cell;
    }

    .match-table[b-qdveo1is1c] {
        font-size: 0.8rem;
    }

    .matcher-actions[b-qdveo1is1c] {
        flex-direction: column;
    }

    .btn-matcher-primary[b-qdveo1is1c],
    .btn-matcher-secondary[b-qdveo1is1c] {
        width: 100%;
        justify-content: center;
    }
}

/* ── Feature disabled ─────────────────────────────── */

.feature-disabled[b-qdveo1is1c] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--xs-text-secondary);
}

/* ── Mobile — 640px ───────────────────────────────── */

@media (max-width: 640.98px) {
    .skills-hero h1[b-qdveo1is1c] {
        font-size: 1.75rem;
    }

    .skills-hero .lead[b-qdveo1is1c] {
        font-size: 1.1rem;
    }

    .skills-hero .tagline[b-qdveo1is1c] {
        font-size: 0.9rem;
    }

    section h2[b-qdveo1is1c] {
        font-size: 1rem;
    }

    .proficiency-legend[b-qdveo1is1c] {
        gap: 0.625rem;
    }

    .legend-item[b-qdveo1is1c] {
        font-size: 0.72rem;
    }

    .career-stat-value[b-qdveo1is1c] {
        font-size: 1.25rem;
    }

    .cta-row[b-qdveo1is1c] {
        flex-direction: column;
    }

    .btn-cta[b-qdveo1is1c] {
        width: 100%;
        justify-content: center;
    }

    .teaching-header[b-qdveo1is1c] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ── Mobile — 767px ───────────────────────────────── */

@media (max-width: 767.98px) {
    .skill-name[b-qdveo1is1c] {
        font-size: 0.8rem;
    }

    .teaching-table[b-qdveo1is1c] {
        font-size: 0.8rem;
    }
}
/* _content/xsubi-website/Components/Pages/Status.razor.rz.scp.css */
/* ── CSS Variables (local status colors) ─────────── */

:root[b-szc42775xv] {
    --xs-status-operational: #22c55e;
    --xs-status-degraded:    #eab308;
    --xs-status-down:        #ef4444;
    --xs-status-resolved:    #6366f1;
    --xs-status-unknown:     #64748b;
}

/* ── Hero ─────────────────────────────────────────── */

.status-hero[b-szc42775xv] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 4rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
    text-align: center;
}

.status-hero[b-szc42775xv]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.status-hero .hero-glow[b-szc42775xv] {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.status-hero .hero-glow.degraded[b-szc42775xv] {
    background: radial-gradient(ellipse, rgba(234, 179, 8, 0.08) 0%, transparent 70%);
}

.status-hero .hero-glow.down[b-szc42775xv] {
    background: radial-gradient(ellipse, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
}

.status-hero-content[b-szc42775xv] {
    position: relative;
    z-index: 1;
}

.status-hero-title[b-szc42775xv] {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--xs-text-bright);
    margin-bottom: 1.25rem;
}

/* ── Overall Status Indicator ─────────────────────── */

.overall-status[b-szc42775xv] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.overall-status.operational[b-szc42775xv] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: var(--xs-status-operational);
}

.overall-status.degraded[b-szc42775xv] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.25);
    color: var(--xs-status-degraded);
}

.overall-status.down[b-szc42775xv] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--xs-status-down);
}

/* ── Status Dot ───────────────────────────────────── */

.status-dot[b-szc42775xv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.operational .status-dot[b-szc42775xv] {
    background: var(--xs-status-operational);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.degraded .status-dot[b-szc42775xv] {
    background: var(--xs-status-degraded);
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.6);
}

.down .status-dot[b-szc42775xv] {
    background: var(--xs-status-down);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.unknown .status-dot[b-szc42775xv] {
    background: var(--xs-status-unknown);
}

/* ── Status Checking Placeholder ─────────────────── */

.status-checking[b-szc42775xv] {
    color: var(--xs-text-muted);
    font-size: 0.9rem;
    font-family: var(--xs-font-mono);
    padding: 3rem 0;
    text-align: center;
}

/* ── Status Section ───────────────────────────────── */

.status-section[b-szc42775xv] {
    padding: 4rem 0;
}

/* ── Status Grid ──────────────────────────────────── */

.status-grid[b-szc42775xv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* ── Status Cards ─────────────────────────────────── */

.status-card[b-szc42775xv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.status-card:hover[b-szc42775xv] {
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.06);
}

.status-card-header[b-szc42775xv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.status-card-name h3[b-szc42775xv] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.2rem;
}

.status-card-subtitle[b-szc42775xv] {
    font-size: 0.775rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    margin: 0;
}

/* ── Status Badge ─────────────────────────────────── */

.status-badge[b-szc42775xv] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.status-badge.operational[b-szc42775xv] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--xs-status-operational);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.status-badge.degraded[b-szc42775xv] {
    background: rgba(234, 179, 8, 0.12);
    color: var(--xs-status-degraded);
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.status-badge.down[b-szc42775xv] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--xs-status-down);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.status-badge.unknown[b-szc42775xv] {
    background: rgba(100, 116, 139, 0.12);
    color: var(--xs-status-unknown);
    border: 1px solid rgba(100, 116, 139, 0.25);
}

/* ── Status Metrics ───────────────────────────────── */

.status-card-details[b-szc42775xv] {
    display: flex;
    gap: 2rem;
}

.status-metric[b-szc42775xv] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.metric-label[b-szc42775xv] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
}

.metric-value[b-szc42775xv] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xs-text);
    font-family: var(--xs-font-mono);
}

/* ── Uptime Bar ───────────────────────────────────── */

.uptime-bar-wrap[b-szc42775xv] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.uptime-bar-label[b-szc42775xv] {
    font-size: 0.65rem;
    color: var(--xs-text-muted);
    font-family: var(--xs-font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.uptime-bar[b-szc42775xv] {
    display: flex;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.uptime-segment[b-szc42775xv] {
    flex: 1;
    height: 20px;
    border-radius: 2px;
    min-width: 2px;
    max-width: 6px;
    transition: opacity 100ms ease;
}

.uptime-segment:hover[b-szc42775xv] {
    opacity: 0.7;
}

.uptime-segment.operational[b-szc42775xv] {
    background: var(--xs-status-operational);
}

.uptime-segment.degraded[b-szc42775xv] {
    background: var(--xs-status-degraded);
}

.uptime-segment.down[b-szc42775xv] {
    background: var(--xs-status-down);
}

.uptime-segment.unknown[b-szc42775xv] {
    background: var(--xs-status-unknown);
    opacity: 0.5;
}

.uptime-segment.no-data[b-szc42775xv] {
    background: var(--xs-card-border);
    opacity: 0.35;
}

/* ── Incidents Section ────────────────────────────── */

.incidents-section[b-szc42775xv] {
    padding: 3.5rem 0 4rem;
    border-top: 1px solid var(--xs-card-border);
}

.incident-list[b-szc42775xv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 760px;
}

.incident-card[b-szc42775xv] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-left: 3px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.25rem 1.5rem;
    transition: border-color 200ms ease;
}

.incident-card:hover[b-szc42775xv] {
    border-color: rgba(34, 211, 238, 0.2);
    border-left-color: var(--xs-accent);
}

.incident-header[b-szc42775xv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.625rem;
}

.incident-meta[b-szc42775xv] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.incident-date[b-szc42775xv] {
    font-size: 0.75rem;
    font-family: var(--xs-font-mono);
    color: var(--xs-text-muted);
    white-space: nowrap;
}

.incident-title[b-szc42775xv] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.incident-body[b-szc42775xv] {
    font-size: 0.875rem;
    color: var(--xs-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ── Incident Badge ───────────────────────────────── */

.incident-badge[b-szc42775xv] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--xs-font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

.incident-badge.resolved[b-szc42775xv] {
    background: rgba(99, 102, 241, 0.12);
    color: var(--xs-status-resolved);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.incident-badge.active[b-szc42775xv] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--xs-status-down);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ── Live Update Animations ───────────────────────── */

@keyframes status-pulse-b-szc42775xv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.status-updating[b-szc42775xv] {
    animation: status-pulse-b-szc42775xv 0.5s ease-in-out;
}

.last-updated[b-szc42775xv] {
    text-align: center;
    color: var(--xs-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ── Responsive — Tablet ──────────────────────────── */

@media (max-width: 767.98px) {
    .status-hero[b-szc42775xv] {
        padding: 3rem calc(50vw - 50% + 1.5rem);
    }

    .status-hero-title[b-szc42775xv] {
        font-size: 2.1rem;
    }

    .status-grid[b-szc42775xv] {
        grid-template-columns: 1fr;
    }

    .status-section[b-szc42775xv],
    .incidents-section[b-szc42775xv] {
        padding: 2.5rem 0;
    }

    .status-card-details[b-szc42775xv] {
        gap: 1.5rem;
    }
}

/* ── Responsive — Phone ───────────────────────────── */

@media (max-width: 640.98px) {
    .status-hero[b-szc42775xv] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
    }

    .status-hero-title[b-szc42775xv] {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .overall-status[b-szc42775xv] {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }

    .status-section[b-szc42775xv],
    .incidents-section[b-szc42775xv] {
        padding: 2rem 0;
    }

    .status-card[b-szc42775xv] {
        padding: 1.25rem;
        gap: 1rem;
    }

    .status-card-name h3[b-szc42775xv] {
        font-size: 0.9rem;
    }

    .status-card-details[b-szc42775xv] {
        gap: 1.25rem;
    }

    .incident-card[b-szc42775xv] {
        padding: 1rem 1.25rem;
    }

    .incident-header[b-szc42775xv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .incident-body[b-szc42775xv] {
        font-size: 0.825rem;
    }

    .uptime-segment[b-szc42775xv] {
        height: 16px;
    }
}
/* _content/xsubi-website/Components/Pages/UseCases.razor.rz.scp.css */
/* ============================================
   Use Cases Page
   ============================================ */

/* Hero — full-width bleed, matches Home pattern */
.uc-hero[b-0u5laoobp8] {
    background: linear-gradient(135deg, #070d1a 0%, #0f0b24 40%, #1a1145 100%);
    margin-top: -2rem;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 5rem calc(50vw - 50% + 3rem);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--xs-card-border);
}

.uc-hero[b-0u5laoobp8]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xs-accent), transparent);
    opacity: 0.5;
}

.uc-hero-glow[b-0u5laoobp8] {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.uc-hero-content[b-0u5laoobp8] {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.hero-badge[b-0u5laoobp8] {
    display: inline-block;
    background: rgba(34, 211, 238, 0.1);
    color: var(--xs-accent);
    padding: 0.375rem 1rem;
    border-radius: var(--xs-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    font-family: var(--xs-font-mono);
}

.uc-hero-title[b-0u5laoobp8] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xs-text-bright);
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}

.uc-hero-subtitle[b-0u5laoobp8] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--xs-text-secondary);
    margin-bottom: 0;
    max-width: 520px;
}

/* ============================================
   Main Section
   ============================================ */
.uc-section[b-0u5laoobp8] {
    padding: 3.5rem 0 4rem;
}

/* ============================================
   Filter Bar
   ============================================ */
.filter-bar[b-0u5laoobp8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

.filter-chip[b-0u5laoobp8] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: 999px;
    padding: 0.4rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--xs-text-secondary);
    cursor: pointer;
    transition: all 200ms ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.filter-chip:hover[b-0u5laoobp8] {
    border-color: rgba(34, 211, 238, 0.35);
    color: var(--xs-accent);
    background: rgba(34, 211, 238, 0.05);
}

.filter-chip.active[b-0u5laoobp8] {
    background: var(--xs-primary);
    border-color: var(--xs-primary);
    color: #fff;
    box-shadow: 0 0 12px var(--xs-glow-color);
}

.filter-chip.active:hover[b-0u5laoobp8] {
    background: var(--xs-primary-hover);
    border-color: var(--xs-primary-hover);
    color: #fff;
}

/* ============================================
   Card Grid
   ============================================ */
.use-case-grid[b-0u5laoobp8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* ============================================
   Use Case Card
   ============================================ */
.use-case-card[b-0u5laoobp8] {
    background: var(--xs-bg-card);
    border: 1px solid var(--xs-card-border);
    border-radius: var(--xs-radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}

.use-case-card:hover[b-0u5laoobp8] {
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.08);
    transform: translateY(-2px);
}

.uc-icon[b-0u5laoobp8] {
    width: 52px;
    height: 52px;
    border-radius: var(--xs-radius);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
    color: var(--xs-accent);
    flex-shrink: 0;
}

.use-case-card h3[b-0u5laoobp8] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
    color: var(--xs-text-bright);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.use-case-card p[b-0u5laoobp8] {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--xs-text-secondary);
    margin-bottom: 1.25rem;
    flex: 1;
}

/* ============================================
   Tags
   ============================================ */
.uc-tags[b-0u5laoobp8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
}

.uc-tag[b-0u5laoobp8] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--xs-font-mono);
    padding: 0.2rem 0.55rem;
    border-radius: var(--xs-radius-sm);
    background: var(--xs-bg-surface);
    color: var(--xs-text-muted);
    border: 1px solid var(--xs-card-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Responsive — Tablet (2 columns)
   ============================================ */
@media (max-width: 991.98px) {
    .use-case-grid[b-0u5laoobp8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .uc-hero[b-0u5laoobp8] {
        padding: 3.5rem calc(50vw - 50% + 1.5rem);
    }

    .uc-hero-title[b-0u5laoobp8] {
        font-size: 2.5rem;
    }

    .uc-section[b-0u5laoobp8] {
        padding: 2.5rem 0 3rem;
    }

    .filter-bar[b-0u5laoobp8] {
        margin-bottom: 2rem;
    }

    .use-case-card[b-0u5laoobp8] {
        padding: 1.5rem;
    }
}

/* ============================================
   Responsive — Phone (1 column)
   ============================================ */
@media (max-width: 640.98px) {
    .uc-hero[b-0u5laoobp8] {
        padding: 2.5rem calc(50vw - 50% + 1rem);
        margin-top: -1.5rem;
    }

    .hero-badge[b-0u5laoobp8] {
        font-size: 0.65rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 1rem;
    }

    .uc-hero-title[b-0u5laoobp8] {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .uc-hero-subtitle[b-0u5laoobp8] {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .uc-section[b-0u5laoobp8] {
        padding: 2rem 0 2.5rem;
    }

    .use-case-grid[b-0u5laoobp8] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filter-bar[b-0u5laoobp8] {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .filter-chip[b-0u5laoobp8] {
        font-size: 0.72rem;
        padding: 0.35rem 1rem;
    }

    .use-case-card[b-0u5laoobp8] {
        padding: 1.25rem;
    }

    .uc-icon[b-0u5laoobp8] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .use-case-card h3[b-0u5laoobp8] {
        font-size: 0.925rem;
    }

    .use-case-card p[b-0u5laoobp8] {
        font-size: 0.825rem;
    }

    .uc-tag[b-0u5laoobp8] {
        font-size: 0.6rem;
    }
}
/* _content/xsubi-website/Components/Shared/Footer.razor.rz.scp.css */
.site-footer[b-ai6qtnw5h0] {
    background: var(--xs-bg-surface, #111827);
    border-top: 1px solid var(--xs-border, #1e3a5f);
    margin-top: auto;
    padding: 3rem 0 1.5rem;
}

.footer-inner[b-ai6qtnw5h0] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-grid[b-ai6qtnw5h0] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--xs-border-subtle, rgba(99, 102, 241, 0.15));
}

/* Brand column */
.footer-logo[b-ai6qtnw5h0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--xs-text-bright, #f8fafc);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.footer-logo i[b-ai6qtnw5h0] {
    color: var(--xs-primary, #6366f1);
    font-size: 1.5rem;
}

.footer-tagline[b-ai6qtnw5h0] {
    color: var(--xs-text-secondary, #8b9ab5);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.footer-social[b-ai6qtnw5h0] {
    display: flex;
    gap: 0.75rem;
}

.footer-social a[b-ai6qtnw5h0] {
    color: var(--xs-text-muted, #5a6b80);
    font-size: 1.25rem;
    transition: color 0.2s ease;
}

.footer-social a:hover[b-ai6qtnw5h0] {
    color: var(--xs-accent, #22d3ee);
}

/* Link columns */
.footer-col h4[b-ai6qtnw5h0] {
    color: var(--xs-text, #e2e8f0);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.footer-col nav[b-ai6qtnw5h0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col nav a[b-ai6qtnw5h0] {
    color: var(--xs-text-secondary, #8b9ab5);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.footer-col nav a:hover[b-ai6qtnw5h0] {
    color: var(--xs-text, #e2e8f0);
}

/* Bottom bar */
.footer-bottom[b-ai6qtnw5h0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
}

.footer-copyright[b-ai6qtnw5h0] {
    color: var(--xs-text-muted, #5a6b80);
    font-size: 0.8125rem;
    margin: 0;
}

.footer-tech[b-ai6qtnw5h0] {
    display: flex;
    gap: 0.5rem;
}

.tech-badge[b-ai6qtnw5h0] {
    color: var(--xs-text-muted, #5a6b80);
    font-size: 0.6875rem;
    font-family: var(--xs-font-mono, 'SF Mono', 'Fira Code', monospace);
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--xs-border-subtle, rgba(99, 102, 241, 0.15));
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Mobile */
@media (max-width: 767.98px) {
    .footer-grid[b-ai6qtnw5h0] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .footer-brand[b-ai6qtnw5h0] {
        grid-column: 1 / -1;
    }

    .footer-bottom[b-ai6qtnw5h0] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 640.98px) {
    .footer-grid[b-ai6qtnw5h0] {
        grid-template-columns: 1fr;
    }

    .site-footer[b-ai6qtnw5h0] {
        padding: 2rem 0 1rem;
    }
}
/* _content/xsubi-website/Components/Shared/TerminalDemo.razor.rz.scp.css */
.terminal-demo[b-rrf4zvlwip] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.terminal-chrome[b-rrf4zvlwip] {
    width: 100%;
    max-width: 700px;
    background-color: #0d1117;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    font-family: 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    overflow: hidden;
}

/* Title bar */
.terminal-titlebar[b-rrf4zvlwip] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1c1f26;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}

.terminal-dots[b-rrf4zvlwip] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.terminal-dots-spacer[b-rrf4zvlwip] {
    width: 42px;
}

.dot[b-rrf4zvlwip] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-red[b-rrf4zvlwip]    { background-color: #ff5f57; }
.dot-yellow[b-rrf4zvlwip] { background-color: #febc2e; }
.dot-green[b-rrf4zvlwip]  { background-color: #28c840; }

.terminal-title[b-rrf4zvlwip] {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

/* Body */
.terminal-body[b-rrf4zvlwip] {
    padding: 1rem 1.25rem 1.25rem;
    min-height: 160px;
    line-height: 1.6;
}

.terminal-line[b-rrf4zvlwip] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.terminal-prompt[b-rrf4zvlwip] {
    color: #3fb950;
    flex-shrink: 0;
    font-weight: 600;
}

.terminal-command[b-rrf4zvlwip] {
    color: #e6edf3;
}

.terminal-output[b-rrf4zvlwip] {
    color: #adbac7;
    padding-left: 1.375rem;
    display: block;
}

/* Blinking block cursor */
.terminal-cursor[b-rrf4zvlwip] {
    display: inline-block;
    width: 0.55em;
    height: 1em;
    background-color: #e6edf3;
    vertical-align: text-bottom;
    margin-left: 1px;
    animation: blink-cursor-b-rrf4zvlwip 1s step-end infinite;
}

@keyframes blink-cursor-b-rrf4zvlwip {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Responsive */
@media (max-width: 576px) {
    .terminal-chrome[b-rrf4zvlwip] {
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .terminal-body[b-rrf4zvlwip] {
        padding: 0.75rem 0.875rem 1rem;
    }
}
/* _content/xsubi-website/Components/Shared/ThemeToggle.razor.rz.scp.css */
.theme-selector[b-bujt4wu6ui] {
    position: relative;
}

.theme-toggle[b-bujt4wu6ui] {
    background: transparent;
    border: 1px solid var(--xs-border);
    color: var(--xs-text);
    height: 2.25rem;
    padding: 0 0.625rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
}

.theme-toggle:hover[b-bujt4wu6ui],
.theme-selector.open .theme-toggle[b-bujt4wu6ui] {
    border-color: var(--xs-accent);
    color: var(--xs-accent);
    background: var(--xs-accent-subtle);
}

.theme-menu[b-bujt4wu6ui] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 10rem;
    background: var(--xs-bg-elevated);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-radius);
    box-shadow: var(--xs-shadow-md);
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    z-index: 1000;
}

.theme-option[b-bujt4wu6ui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--xs-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--xs-text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}

.theme-option:hover[b-bujt4wu6ui] {
    background: var(--xs-nav-hover-bg);
    color: var(--xs-text);
}

.theme-option.active[b-bujt4wu6ui] {
    color: var(--xs-accent);
    background: var(--xs-accent-subtle);
}

.theme-option i[b-bujt4wu6ui] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.theme-label[b-bujt4wu6ui] {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}