@import '_content/SLYD.Components/SLYD.Components.ow53efcp5t.bundle.scp.css';

/* /Components/Layout/Footer.razor.rz.scp.css */
/* Footer Styles */
.site-footer[b-54d45n6w6i] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 6, 23, 0.98));
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    padding: 60px 0 20px;
    margin-top: 80px;
    position: relative;
    z-index: 10;
}

.container[b-54d45n6w6i] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content[b-54d45n6w6i] {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section[b-54d45n6w6i] {
    color: var(--light);
}

.footer-logo[b-54d45n6w6i] {
    margin-bottom: 20px;
}

.footer-logo img[b-54d45n6w6i] {
    max-width: 150px;
    height: auto;
}

.footer-description[b-54d45n6w6i] {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-partner-badge[b-54d45n6w6i] {
    margin-top: 24px;
}

.footer-partner-badge img[b-54d45n6w6i] {
    max-width: 140px;
    height: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-partner-badge img:hover[b-54d45n6w6i] {
    opacity: 1;
}

.footer-heading[b-54d45n6w6i] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--light);
}

.footer-links[b-54d45n6w6i] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li[b-54d45n6w6i] {
    margin-bottom: 10px;
}

.footer-links a[b-54d45n6w6i] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: inline-block;
    position: relative;
    padding: 2px 0;
}

.footer-links a[b-54d45n6w6i]::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background: var(--primary);
    transition: width 0.3s ease;
}

.footer-links a:hover[b-54d45n6w6i] {
    color: var(--light);
    transform: translateX(4px);
}

.footer-links a:hover[b-54d45n6w6i]::after {
    width: 100%;
}

.contact-info .contact-label[b-54d45n6w6i] {
    display: block;
    font-weight: 600;
    color: var(--light);
    margin-bottom: 6px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-info a[b-54d45n6w6i] {
    display: inline-block;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-info a:hover[b-54d45n6w6i] {
    color: var(--primary);
    transform: translateX(2px);
}

.footer-bottom[b-54d45n6w6i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.social-links[b-54d45n6w6i] {
    display: flex;
    gap: 15px;
}

.social-links a[b-54d45n6w6i] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    color: var(--primary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover[b-54d45n6w6i] {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-content[b-54d45n6w6i] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .site-footer[b-54d45n6w6i] {
        padding: 40px 0 20px;
        margin-top: 60px;
    }

    .footer-content[b-54d45n6w6i] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom[b-54d45n6w6i] {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-skospf7ysc] {
    position: relative;
    z-index: 1;
    padding-top: 70px; /* Match nav height exactly - no gap */
    padding-bottom: 60px; /* Space at the bottom */
    min-height: 100vh;
}

#blazor-error-ui[b-skospf7ysc] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

#particles-js[b-skospf7ysc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

@media (max-width: 768px) {
    main[b-skospf7ysc] {
        padding-top: 70px; /* Match nav height */
        padding-bottom: 40px;
    }
}
/* /Components/Layout/PageHeader.razor.rz.scp.css */
/* /Components/Layout/TopNavigation.razor.rz.scp.css */
/* Navigation styles are in wwwroot/css/navigation.css */
/* /Components/Pages/About.razor.rz.scp.css */
/* ============================================================
   About (/about) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD About v1.html (L34-192),
   namespaced v3abt-, scoped under .v3abt wrapper.
   ============================================================ */

.v3abt[b-cxbp5i0xkj] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04));
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3abt *[b-cxbp5i0xkj],
.v3abt *[b-cxbp5i0xkj]::before,
.v3abt *[b-cxbp5i0xkj]::after { box-sizing: border-box; }

.v3abt a[b-cxbp5i0xkj] { color: inherit; text-decoration: none; }
.v3abt button[b-cxbp5i0xkj] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3abt .v3abt-wrap[b-cxbp5i0xkj] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3abt .v3abt-wrap[b-cxbp5i0xkj] { padding: 0 20px; } }

.v3abt .v3abt-a[b-cxbp5i0xkj] { color: var(--primary); }

/* Buttons */
.v3abt .v3abt-btn[b-cxbp5i0xkj] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3abt .v3abt-btn-ghost[b-cxbp5i0xkj] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3abt .v3abt-btn-ghost:hover[b-cxbp5i0xkj] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3abt .v3abt-btn-primary[b-cxbp5i0xkj] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3abt .v3abt-btn-primary:hover[b-cxbp5i0xkj] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3abt .v3abt-arr[b-cxbp5i0xkj] { font-family: var(--font-mono); opacity: .7; }

/* ───── HERO ───── */

.v3abt .v3abt-hero[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
    padding: 84px 0 56px;
}

.v3abt .v3abt-hero[b-cxbp5i0xkj]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 560px at 75% 0%, var(--primary-glow), transparent 65%);
}

.v3abt .v3abt-hero[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 820px 560px at 60% 25%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 820px 560px at 60% 25%, #000 30%, transparent 75%);
}

.v3abt .v3abt-eyebrow[b-cxbp5i0xkj] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 22px;
}

.v3abt .v3abt-eyebrow[b-cxbp5i0xkj]::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

.v3abt .v3abt-h1[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 6.5vw, 82px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    max-width: 1040px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3abt .v3abt-sub[b-cxbp5i0xkj] {
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--text-secondary);
    max-width: 760px;
    line-height: 1.5;
    margin: 0;
}

/* ───── TRACK RECORD STATS ───── */

.v3abt .v3abt-record[b-cxbp5i0xkj] { padding: 32px 0 8px; }

.v3abt .v3abt-record-grid[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v3abt .v3abt-rec-card[b-cxbp5i0xkj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 30px 26px;
    position: relative;
    overflow: hidden;
}

.v3abt .v3abt-rec-card[b-cxbp5i0xkj]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    opacity: .4;
    pointer-events: none;
}

.v3abt .v3abt-rv[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 4.5vw, 56px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--primary);
    margin-bottom: 10px;
}

.v3abt .v3abt-rv .v3abt-u[b-cxbp5i0xkj] {
    font-size: 0.5em;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 3px;
}

.v3abt .v3abt-rl[b-cxbp5i0xkj] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    position: relative;
}

.v3abt .v3abt-rl strong[b-cxbp5i0xkj] { color: var(--text-primary); font-weight: 600; }

/* ───── SECTION CHROME ───── */

.v3abt .v3abt-section[b-cxbp5i0xkj] {
    padding: 80px 0;
    border-top: 1px solid var(--border-subtle);
}

.v3abt .v3abt-section-alt[b-cxbp5i0xkj] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3abt .v3abt-section-head[b-cxbp5i0xkj] { margin-bottom: 40px; max-width: 820px; }

.v3abt .v3abt-kicker[b-cxbp5i0xkj] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3abt .v3abt-sh[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 16px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3abt .v3abt-lede[b-cxbp5i0xkj] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ───── STORY PROSE ───── */

.v3abt .v3abt-story[b-cxbp5i0xkj] { max-width: 760px; }

.v3abt .v3abt-story p[b-cxbp5i0xkj] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 22px;
}

.v3abt .v3abt-story p:last-child[b-cxbp5i0xkj] { margin-bottom: 0; }
.v3abt .v3abt-story p strong[b-cxbp5i0xkj] { color: var(--text-primary); font-weight: 600; }
.v3abt .v3abt-em[b-cxbp5i0xkj] { color: var(--primary); font-weight: 500; }

/* ───── WHAT WE KNOW ───── */

.v3abt .v3abt-know-grid[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.v3abt .v3abt-know-card[b-cxbp5i0xkj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    transition: border-color .15s, transform .15s;
}

.v3abt .v3abt-know-card:hover[b-cxbp5i0xkj] { border-color: var(--primary); transform: translateY(-2px); }

.v3abt .v3abt-ic[b-cxbp5i0xkj] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.v3abt .v3abt-ic svg[b-cxbp5i0xkj] { width: 21px; height: 21px; }

.v3abt .v3abt-kh[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3abt .v3abt-kp[b-cxbp5i0xkj] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ───── EXPERIENCE BAND ───── */

.v3abt .v3abt-exp[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3abt .v3abt-exp-cell[b-cxbp5i0xkj] {
    padding: 30px 28px;
    border-right: 1px solid var(--border);
}

.v3abt .v3abt-exp-cell:last-child[b-cxbp5i0xkj] { border-right: none; }

.v3abt .v3abt-et[b-cxbp5i0xkj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3abt .v3abt-eh[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3abt .v3abt-ep[b-cxbp5i0xkj] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ───── PARTNERS ───── */

.v3abt .v3abt-partners-note[b-cxbp5i0xkj] {
    max-width: 760px;
    margin-bottom: 32px;
}

.v3abt .v3abt-partners-note p[b-cxbp5i0xkj] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

.v3abt .v3abt-partners-note p strong[b-cxbp5i0xkj] { color: var(--text-primary); }

.v3abt .v3abt-partner-row[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.v3abt .v3abt-partner-chip[b-cxbp5i0xkj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    transition: border-color .15s, color .15s;
}

.v3abt .v3abt-partner-chip:hover[b-cxbp5i0xkj] { border-color: var(--primary); color: var(--text-primary); }

.v3abt .v3abt-partner-cap[b-cxbp5i0xkj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 18px;
    text-align: center;
}

/* ───── PRINCIPLES ───── */

.v3abt .v3abt-principles[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.v3abt .v3abt-principle[b-cxbp5i0xkj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.v3abt .v3abt-pn[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
    width: 36px;
}

.v3abt .v3abt-prh[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    margin: 0 0 7px;
    color: var(--text-primary);
}

.v3abt .v3abt-prp[b-cxbp5i0xkj] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ───── LEADERSHIP ───── */

.v3abt .v3abt-lead-grid[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.v3abt .v3abt-lead-card[b-cxbp5i0xkj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 26px;
    transition: border-color .15s, transform .15s;
    position: relative;
    overflow: hidden;
}

.v3abt .v3abt-lead-card:hover[b-cxbp5i0xkj] { border-color: var(--primary); transform: translateY(-2px); }

.v3abt .v3abt-avatar[b-cxbp5i0xkj] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.v3abt .v3abt-ln[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.v3abt .v3abt-lr[b-cxbp5i0xkj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 16px;
}

.v3abt .v3abt-lb[b-cxbp5i0xkj] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ───── CTA STRIP ───── */

.v3abt .v3abt-cta-strip[b-cxbp5i0xkj] { padding: 72px 0 96px; }

.v3abt .v3abt-cta-card[b-cxbp5i0xkj] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.v3abt .v3abt-cta-card[b-cxbp5i0xkj]::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3abt .v3abt-ctt[b-cxbp5i0xkj] { position: relative; }

.v3abt .v3abt-cth[b-cxbp5i0xkj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.1;
    color: var(--text-primary);
}

.v3abt .v3abt-ctp[b-cxbp5i0xkj] {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 520px;
    line-height: 1.55;
}

.v3abt .v3abt-cact[b-cxbp5i0xkj] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3abt .v3abt-record-grid[b-cxbp5i0xkj] { grid-template-columns: repeat(2, 1fr); }
    .v3abt .v3abt-know-grid[b-cxbp5i0xkj] { grid-template-columns: 1fr; }
    .v3abt .v3abt-lead-grid[b-cxbp5i0xkj] { grid-template-columns: 1fr; }
    .v3abt .v3abt-exp[b-cxbp5i0xkj] { grid-template-columns: 1fr; }
    .v3abt .v3abt-exp-cell[b-cxbp5i0xkj] { border-right: none; border-bottom: 1px solid var(--border); }
    .v3abt .v3abt-partner-row[b-cxbp5i0xkj] { grid-template-columns: repeat(3, 1fr); }
    .v3abt .v3abt-principles[b-cxbp5i0xkj] { grid-template-columns: 1fr; }
    .v3abt .v3abt-cta-card[b-cxbp5i0xkj] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
    .v3abt .v3abt-record-grid[b-cxbp5i0xkj] { grid-template-columns: 1fr; }
    .v3abt .v3abt-partner-row[b-cxbp5i0xkj] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Pages/Blog/Blog.razor.rz.scp.css */
/* Blog Index Page Styles */

/* ========================================
   FILTER BAR
   ======================================== */

.blog-filter-section[b-r1xsyot9cx] {
    background: #0F172A;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 70px;
    z-index: 10;
}

.blog-filter-bar[b-r1xsyot9cx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.blog-filter-tabs[b-r1xsyot9cx] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.blog-filter-tab[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-filter-tab:hover[b-r1xsyot9cx] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.blog-filter-tab.active[b-r1xsyot9cx] {
    color: #020617;
    background: #06b6d4;
    border-color: #06b6d4;
}

/* ========================================
   FEATURED POST
   ======================================== */

.blog-featured-section[b-r1xsyot9cx] {
    padding: 60px 0 40px;
    background: #020617;
}

.blog-featured-label[b-r1xsyot9cx] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #f59e0b;
    margin-bottom: 16px;
}

.blog-featured-card[b-r1xsyot9cx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-featured-card:hover[b-r1xsyot9cx] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.2);
    transform: translateY(-4px);
}

.blog-featured-content[b-r1xsyot9cx] {
    display: flex;
    flex-direction: column;
}

.blog-featured-title[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #f1f5f9;
    margin: 16px 0;
}

.blog-featured-excerpt[b-r1xsyot9cx] {
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 20px;
    flex: 1;
}

.blog-featured-meta[b-r1xsyot9cx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.blog-featured-link[b-r1xsyot9cx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #06b6d4;
    transition: gap 0.2s ease;
}

.blog-featured-card:hover .blog-featured-link[b-r1xsyot9cx] {
    gap: 12px;
}

.blog-featured-visual[b-r1xsyot9cx] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 280px;
}

.blog-featured-gradient[b-r1xsyot9cx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
}

.blog-featured-gradient.cyan[b-r1xsyot9cx] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.blog-featured-gradient.gold[b-r1xsyot9cx] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.blog-featured-gradient.green[b-r1xsyot9cx] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.blog-featured-gradient.purple[b-r1xsyot9cx] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.blog-featured-visual[b-r1xsyot9cx]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px
        );
}

/* ========================================
   CATEGORY BADGES
   ======================================== */

.blog-category-badge[b-r1xsyot9cx] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
}

.blog-category-badge.cyan[b-r1xsyot9cx] {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.blog-category-badge.gold[b-r1xsyot9cx] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.blog-category-badge.green[b-r1xsyot9cx] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.blog-category-badge.purple[b-r1xsyot9cx] {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* ========================================
   META STYLES
   ======================================== */

.blog-meta-date[b-r1xsyot9cx],
.blog-meta-time[b-r1xsyot9cx] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #64748b;
}

.blog-meta-separator[b-r1xsyot9cx] {
    color: #475569;
}

/* ========================================
   POSTS GRID
   ======================================== */

.blog-posts-section[b-r1xsyot9cx] {
    padding: 60px 0 80px;
    background: #020617;
}

.blog-posts-grid[b-r1xsyot9cx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-post-card[b-r1xsyot9cx] {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-post-card:hover[b-r1xsyot9cx] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.2);
    transform: translateY(-4px);
}

.blog-post-thumbnail[b-r1xsyot9cx] {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.blog-post-thumbnail.cyan[b-r1xsyot9cx] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.blog-post-thumbnail.gold[b-r1xsyot9cx] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.blog-post-thumbnail.green[b-r1xsyot9cx] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.blog-post-thumbnail.purple[b-r1xsyot9cx] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.blog-post-thumbnail-pattern[b-r1xsyot9cx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px
        );
}

.blog-post-content[b-r1xsyot9cx] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-post-title[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #f1f5f9;
    margin: 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-excerpt[b-r1xsyot9cx] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-meta[b-r1xsyot9cx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.blog-empty-state[b-r1xsyot9cx] {
    text-align: center;
    padding: 80px 24px;
}

.blog-empty-state i[b-r1xsyot9cx] {
    font-size: 3rem;
    color: #475569;
    margin-bottom: 20px;
}

.blog-empty-state h3[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.blog-empty-state p[b-r1xsyot9cx] {
    font-size: 1rem;
    color: #94a3b8;
}

/* ========================================
   NEWSLETTER
   ======================================== */

.blog-newsletter-section[b-r1xsyot9cx] {
    padding: 80px 0;
    background: #0a1018;
}

.blog-newsletter-card[b-r1xsyot9cx] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.blog-newsletter-tag[b-r1xsyot9cx] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #06b6d4;
    margin-bottom: 16px;
}

.blog-newsletter-card h2[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.blog-newsletter-content p[b-r1xsyot9cx] {
    font-size: 1rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 24px;
}

.blog-newsletter-form[b-r1xsyot9cx] {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto 16px;
}

.blog-newsletter-input[b-r1xsyot9cx] {
    flex: 1;
    padding: 14px 18px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.blog-newsletter-input:focus[b-r1xsyot9cx] {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.blog-newsletter-input[b-r1xsyot9cx]::placeholder {
    color: #64748b;
}

.blog-newsletter-btn[b-r1xsyot9cx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #020617;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.blog-newsletter-btn:hover[b-r1xsyot9cx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.blog-newsletter-note[b-r1xsyot9cx] {
    font-size: 0.8125rem;
    color: #64748b;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .blog-posts-grid[b-r1xsyot9cx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .blog-featured-card[b-r1xsyot9cx] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .blog-featured-visual[b-r1xsyot9cx] {
        min-height: 200px;
        order: -1;
    }
}

@media (max-width: 768px) {
    .blog-filter-tabs[b-r1xsyot9cx] {
        gap: 6px;
    }

    .blog-filter-tab[b-r1xsyot9cx] {
        font-size: 0.8125rem;
        padding: 6px 12px;
    }

    .blog-posts-grid[b-r1xsyot9cx] {
        grid-template-columns: 1fr;
    }

    .blog-featured-card[b-r1xsyot9cx] {
        padding: 24px;
    }

    .blog-featured-title[b-r1xsyot9cx] {
        font-size: 1.375rem;
    }

    .blog-newsletter-card[b-r1xsyot9cx] {
        padding: 32px 24px;
    }

    .blog-newsletter-form[b-r1xsyot9cx] {
        flex-direction: column;
    }

    .blog-newsletter-btn[b-r1xsyot9cx] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .blog-filter-section[b-r1xsyot9cx] {
        top: 60px;
    }

    .blog-filter-tabs[b-r1xsyot9cx] {
        flex-wrap: wrap;
    }

    .blog-post-thumbnail[b-r1xsyot9cx] {
        height: 140px;
    }

    .blog-post-content[b-r1xsyot9cx] {
        padding: 20px;
    }
}

/* ===========================================
   CONTENT INTRO SECTION (New)
   =========================================== */
.content-intro[b-r1xsyot9cx] {
    max-width: 1100px;
    margin: 0 auto;
}

.content-intro.centered[b-r1xsyot9cx] {
    text-align: center;
}

.content-intro-title[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 20px;
    line-height: 1.2;
}

.content-intro-lead[b-r1xsyot9cx] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.content-intro-cta[b-r1xsyot9cx] {
    font-size: 1rem;
    line-height: 1.7;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
}

/* Topics Grid */
.content-topics-grid[b-r1xsyot9cx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 2.5rem;
    text-align: left;
}

.content-topic[b-r1xsyot9cx] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
}

.content-topic-icon[b-r1xsyot9cx] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.content-topic-icon :deep(svg)[b-r1xsyot9cx] {
    width: 20px;
    height: 20px;
}

.content-topic-icon.cyan[b-r1xsyot9cx] { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.content-topic-icon.purple[b-r1xsyot9cx] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.content-topic-icon.green[b-r1xsyot9cx] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.content-topic-icon.gold[b-r1xsyot9cx] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.content-topic h3[b-r1xsyot9cx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.content-topic p[b-r1xsyot9cx] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

@media (max-width: 1024px) {
    .content-topics-grid[b-r1xsyot9cx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .content-topics-grid[b-r1xsyot9cx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Blog/BlogPost.razor.rz.scp.css */
/* BlogPost Page Styles */

/* ========================================
   POST HEADER
   ======================================== */

.blogpost-header[b-4zwges2yyr] {
    padding: 140px 0 60px;
    background: linear-gradient(135deg, #020617 0%, #0F172A 50%, #0a1018 100%);
    position: relative;
}

.blogpost-header[b-4zwges2yyr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.blogpost-header-container[b-4zwges2yyr] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

.blogpost-back-link[b-4zwges2yyr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 32px;
    transition: color 0.2s ease;
}

.blogpost-back-link:hover[b-4zwges2yyr] {
    color: #06b6d4;
}

.blogpost-back-link i[b-4zwges2yyr] {
    transition: transform 0.2s ease;
}

.blogpost-back-link:hover i[b-4zwges2yyr] {
    transform: translateX(-4px);
}

.blogpost-header-meta[b-4zwges2yyr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.blogpost-meta-date[b-4zwges2yyr],
.blogpost-meta-time[b-4zwges2yyr] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #64748b;
}

.blogpost-meta-separator[b-4zwges2yyr] {
    color: #475569;
}

.blogpost-title[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: #f1f5f9;
    margin-bottom: 32px;
}

.blogpost-author[b-4zwges2yyr] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blogpost-author-avatar[b-4zwges2yyr] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 50%;
    color: #06b6d4;
    font-size: 1.125rem;
}

.blogpost-author-info[b-4zwges2yyr] {
    display: flex;
    flex-direction: column;
}

.blogpost-author-name[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.blogpost-author-title[b-4zwges2yyr] {
    font-size: 0.875rem;
    color: #64748b;
}

/* ========================================
   BREADCRUMB WRAPPER
   ======================================== */

.blogpost-breadcrumb-wrapper[b-4zwges2yyr] {
    background: #0F172A;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 0;
}

/* ========================================
   CONTENT SECTION
   ======================================== */

.blogpost-content-section[b-4zwges2yyr] {
    padding: 60px 0 80px;
    background: #020617;
}

.blogpost-container[b-4zwges2yyr] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 60px;
}

/* ========================================
   ARTICLE CONTENT
   ======================================== */

.blogpost-article[b-4zwges2yyr] {
    max-width: 720px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: #cbd5e1;
}

.blogpost-article[b-4zwges2yyr]  h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 48px 0 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    scroll-margin-top: 100px;
}

.blogpost-article[b-4zwges2yyr]  h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.blogpost-article[b-4zwges2yyr]  h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 36px 0 16px;
    scroll-margin-top: 100px;
}

.blogpost-article[b-4zwges2yyr]  h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 28px 0 12px;
}

.blogpost-article[b-4zwges2yyr]  p {
    margin-bottom: 20px;
}

.blogpost-article[b-4zwges2yyr]  a {
    color: #06b6d4;
    text-decoration: none;
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
    transition: border-color 0.2s ease;
}

.blogpost-article[b-4zwges2yyr]  a:hover {
    border-bottom-color: #06b6d4;
}

.blogpost-article[b-4zwges2yyr]  strong {
    color: #f1f5f9;
    font-weight: 600;
}

.blogpost-article[b-4zwges2yyr]  ul,
.blogpost-article[b-4zwges2yyr]  ol {
    margin: 20px 0;
    padding-left: 24px;
}

.blogpost-article[b-4zwges2yyr]  li {
    margin-bottom: 12px;
}

.blogpost-article[b-4zwges2yyr]  ul li::marker {
    color: #06b6d4;
}

.blogpost-article[b-4zwges2yyr]  ol li::marker {
    color: #06b6d4;
    font-weight: 600;
}

/* ========================================
   ENHANCED BLOCKQUOTE / CALLOUT STYLES
   ======================================== */

.blogpost-article[b-4zwges2yyr]  blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(6, 182, 212, 0.03) 100%);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-left: 4px solid #06b6d4;
    border-radius: 0 12px 12px 0;
    font-style: normal;
    color: #cbd5e1;
    position: relative;
}

.blogpost-article[b-4zwges2yyr]  blockquote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #06b6d4 0%, transparent 100%);
}

.blogpost-article[b-4zwges2yyr]  blockquote p:last-child {
    margin-bottom: 0;
}

/* TL;DR style - first blockquote in article */
.blogpost-article[b-4zwges2yyr]  blockquote:first-child {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.03) 100%);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: #f59e0b;
    padding: 28px 32px;
}

.blogpost-article[b-4zwges2yyr]  blockquote:first-child::before {
    background: linear-gradient(90deg, #f59e0b 0%, transparent 100%);
}

.blogpost-article[b-4zwges2yyr]  blockquote strong {
    color: #f1f5f9;
    font-weight: 600;
}

/* Blockquote with bold text at start (callouts) */
.blogpost-article[b-4zwges2yyr]  blockquote p:first-child strong:first-child {
    display: inline-block;
    color: #06b6d4;
    margin-right: 4px;
}

.blogpost-article[b-4zwges2yyr]  blockquote:first-child p:first-child strong:first-child {
    color: #f59e0b;
}

/* Pro tip / Key insight callouts */
.blogpost-article[b-4zwges2yyr]  blockquote p:only-child {
    font-size: 1rem;
    line-height: 1.65;
}

/* Nested content in blockquotes */
.blogpost-article[b-4zwges2yyr]  blockquote ul,
.blogpost-article[b-4zwges2yyr]  blockquote ol {
    margin: 12px 0 0 0;
}

.blogpost-article[b-4zwges2yyr]  blockquote li {
    margin-bottom: 8px;
    font-size: 0.9375rem;
}

/* HR styling (section separators) */
.blogpost-article[b-4zwges2yyr]  hr {
    margin: 48px 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(6, 182, 212, 0.3) 20%,
        rgba(139, 92, 246, 0.3) 50%,
        rgba(6, 182, 212, 0.3) 80%,
        transparent 100%
    );
}

/* Checklist styling */
.blogpost-article[b-4zwges2yyr]  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(6, 182, 212, 0.4);
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.5);
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    cursor: default;
}

.blogpost-article[b-4zwges2yyr]  input[type="checkbox"]:checked {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
}

.blogpost-article[b-4zwges2yyr]  input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #06b6d4;
    font-size: 12px;
    font-weight: bold;
}

.blogpost-article[b-4zwges2yyr]  code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875em;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: #f59e0b;
}

.blogpost-article[b-4zwges2yyr]  pre {
    margin: 24px 0;
    padding: 20px;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow-x: auto;
}

.blogpost-article[b-4zwges2yyr]  pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ========================================
   ENHANCED TABLE STYLES
   ======================================== */

.blogpost-article[b-4zwges2yyr]  table {
    width: 100%;
    margin: 32px 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.blogpost-article[b-4zwges2yyr]  thead {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
}

.blogpost-article[b-4zwges2yyr]  th {
    padding: 16px 20px;
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06b6d4;
    border-bottom: 2px solid rgba(6, 182, 212, 0.2);
    white-space: nowrap;
}

.blogpost-article[b-4zwges2yyr]  th:first-child {
    border-top-left-radius: 12px;
}

.blogpost-article[b-4zwges2yyr]  th:last-child {
    border-top-right-radius: 12px;
}

.blogpost-article[b-4zwges2yyr]  td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
    transition: background 0.2s ease;
}

.blogpost-article[b-4zwges2yyr]  tbody tr:last-child td {
    border-bottom: none;
}

.blogpost-article[b-4zwges2yyr]  tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.blogpost-article[b-4zwges2yyr]  tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.blogpost-article[b-4zwges2yyr]  tbody tr:hover td {
    background: rgba(6, 182, 212, 0.05);
}

.blogpost-article[b-4zwges2yyr]  tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.3);
}

.blogpost-article[b-4zwges2yyr]  tr:nth-child(even):hover td {
    background: rgba(6, 182, 212, 0.08);
}

/* First column emphasis */
.blogpost-article[b-4zwges2yyr]  td:first-child {
    font-weight: 500;
    color: #f1f5f9;
}

/* Bold values in cells */
.blogpost-article[b-4zwges2yyr]  td strong {
    color: #f59e0b;
    font-weight: 600;
}

/* Mobile table responsiveness */
@media (max-width: 768px) {
    .blogpost-article[b-4zwges2yyr]  table {
        font-size: 0.8125rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .blogpost-article[b-4zwges2yyr]  th,
    .blogpost-article[b-4zwges2yyr]  td {
        padding: 12px 14px;
        min-width: 100px;
    }

    .blogpost-article[b-4zwges2yyr]  th {
        font-size: 0.75rem;
    }
}

.blogpost-article[b-4zwges2yyr]  hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blogpost-article[b-4zwges2yyr]  img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 24px 0;
}

/* ========================================
   SIDEBAR / TABLE OF CONTENTS
   ======================================== */

.blogpost-sidebar[b-4zwges2yyr] {
    position: sticky;
    top: 100px;
    align-self: start;
}

.blogpost-toc[b-4zwges2yyr] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
}

.blogpost-toc-header[b-4zwges2yyr] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blogpost-toc-header i[b-4zwges2yyr] {
    color: #06b6d4;
}

.blogpost-toc-nav[b-4zwges2yyr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blogpost-toc-link[b-4zwges2yyr] {
    font-size: 0.8125rem;
    color: #94a3b8;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s ease;
    display: block;
}

.blogpost-toc-link:hover[b-4zwges2yyr] {
    color: #06b6d4;
}

.blogpost-toc-link.indent[b-4zwges2yyr] {
    padding-left: 16px;
    font-size: 0.75rem;
    color: #64748b;
}

/* ========================================
   SHARE SECTION
   ======================================== */

.blogpost-share-section[b-4zwges2yyr] {
    padding: 40px 0;
    background: #0a1018;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.blogpost-share[b-4zwges2yyr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.blogpost-share-label[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #94a3b8;
}

.blogpost-share-buttons[b-4zwges2yyr] {
    display: flex;
    gap: 12px;
}

.blogpost-share-btn[b-4zwges2yyr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.blogpost-share-btn.linkedin[b-4zwges2yyr] {
    background: rgba(10, 102, 194, 0.15);
    border: 1px solid rgba(10, 102, 194, 0.3);
    color: #0a66c2;
}

.blogpost-share-btn.linkedin:hover[b-4zwges2yyr] {
    background: rgba(10, 102, 194, 0.25);
}

.blogpost-share-btn.twitter[b-4zwges2yyr] {
    background: rgba(29, 155, 240, 0.15);
    border: 1px solid rgba(29, 155, 240, 0.3);
    color: #1d9bf0;
}

.blogpost-share-btn.twitter:hover[b-4zwges2yyr] {
    background: rgba(29, 155, 240, 0.25);
}

.blogpost-share-btn.copy[b-4zwges2yyr] {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.blogpost-share-btn.copy:hover[b-4zwges2yyr] {
    background: rgba(148, 163, 184, 0.2);
}

/* ========================================
   RELATED POSTS
   ======================================== */

.blogpost-related-section[b-4zwges2yyr] {
    padding: 80px 0;
    background: #020617;
}

.blogpost-related-title[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 32px;
    text-align: center;
}

.blogpost-related-grid[b-4zwges2yyr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blogpost-related-card[b-4zwges2yyr] {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blogpost-related-card:hover[b-4zwges2yyr] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.2);
    transform: translateY(-4px);
}

.blogpost-related-thumbnail[b-4zwges2yyr] {
    position: relative;
    height: 140px;
}

.blogpost-related-thumbnail.cyan[b-4zwges2yyr] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.blogpost-related-thumbnail.gold[b-4zwges2yyr] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.blogpost-related-thumbnail.green[b-4zwges2yyr] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.blogpost-related-thumbnail.purple[b-4zwges2yyr] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.blogpost-related-pattern[b-4zwges2yyr] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px
        );
}

.blogpost-related-content[b-4zwges2yyr] {
    padding: 20px;
}

.blogpost-related-content h3[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogpost-related-meta[b-4zwges2yyr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #64748b;
}

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

.blogpost-cta[b-4zwges2yyr] {
    padding: 80px 0;
    background: linear-gradient(135deg, #0F172A 0%, #020617 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.blogpost-cta-content[b-4zwges2yyr] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.blogpost-cta-content h2[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
}

.blogpost-cta-content p[b-4zwges2yyr] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 32px;
}

.blogpost-cta-actions[b-4zwges2yyr] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ========================================
   NOT FOUND STATE
   ======================================== */

.blogpost-notfound[b-4zwges2yyr] {
    padding: 200px 0;
    background: #020617;
    text-align: center;
}

.blogpost-notfound i[b-4zwges2yyr] {
    font-size: 4rem;
    color: #475569;
    margin-bottom: 24px;
}

.blogpost-notfound h1[b-4zwges2yyr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.blogpost-notfound p[b-4zwges2yyr] {
    font-size: 1.125rem;
    color: #94a3b8;
    margin-bottom: 32px;
}

/* ========================================
   CATEGORY BADGES (duplicated from Blog.razor.css for scoping)
   ======================================== */

.blog-category-badge[b-4zwges2yyr] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
}

.blog-category-badge.cyan[b-4zwges2yyr] {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.blog-category-badge.gold[b-4zwges2yyr] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.blog-category-badge.green[b-4zwges2yyr] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.blog-category-badge.purple[b-4zwges2yyr] {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .blogpost-container[b-4zwges2yyr] {
        grid-template-columns: 1fr 240px;
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .blogpost-container[b-4zwges2yyr] {
        grid-template-columns: 1fr;
    }

    .blogpost-sidebar[b-4zwges2yyr] {
        display: none;
    }

    .blogpost-article[b-4zwges2yyr] {
        max-width: none;
    }

    .blogpost-related-grid[b-4zwges2yyr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blogpost-header[b-4zwges2yyr] {
        padding: 120px 0 40px;
    }

    .blogpost-title[b-4zwges2yyr] {
        font-size: 1.75rem;
    }

    .blogpost-article[b-4zwges2yyr] {
        font-size: 1rem;
    }

    .blogpost-article[b-4zwges2yyr]  h2 {
        font-size: 1.5rem;
    }

    .blogpost-article[b-4zwges2yyr]  h3 {
        font-size: 1.25rem;
    }

    .blogpost-share[b-4zwges2yyr] {
        flex-direction: column;
    }

    .blogpost-related-grid[b-4zwges2yyr] {
        grid-template-columns: 1fr;
    }

    .blogpost-cta-content h2[b-4zwges2yyr] {
        font-size: 1.5rem;
    }

    .blogpost-cta-actions[b-4zwges2yyr] {
        flex-direction: column;
    }

    .btn-gold[b-4zwges2yyr],
    .btn-outline[b-4zwges2yyr] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .blogpost-header-container[b-4zwges2yyr] {
        padding: 0 16px;
    }

    .blogpost-title[b-4zwges2yyr] {
        font-size: 1.5rem;
    }

    .blogpost-header-meta[b-4zwges2yyr] {
        gap: 8px;
    }

    .blogpost-share-buttons[b-4zwges2yyr] {
        flex-direction: column;
        width: 100%;
    }

    .blogpost-share-btn[b-4zwges2yyr] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Broker.razor.rz.scp.css */
.broker[b-lke9ejpfkt] {
    background: #020617;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.broker-hero[b-lke9ejpfkt] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 24px 120px;
    text-align: center;
}

.broker-hero-inner[b-lke9ejpfkt] {
    max-width: 720px;
}

.broker-hero-tag[b-lke9ejpfkt] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #06b6d4;
    padding: 6px 14px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 100px;
    margin-bottom: 28px;
}

.broker-hero-headline[b-lke9ejpfkt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    color: #f1f5f9;
    margin: 0 0 20px;
}

.broker-hero-sub[b-lke9ejpfkt] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0 0 40px;
}

.broker-hero-actions[b-lke9ejpfkt] {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* FAQ */
.broker-faq[b-lke9ejpfkt] {
    padding: 0 24px 96px;
}

.broker-faq-inner[b-lke9ejpfkt] {
    max-width: 720px;
    margin: 0 auto;
}

.broker-faq-title[b-lke9ejpfkt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f1f5f9;
    margin: 0 0 24px;
    text-align: center;
}

.broker-faq-item[b-lke9ejpfkt] {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
    margin-bottom: 12px;
    overflow: hidden;
}

.broker-faq-item[open][b-lke9ejpfkt] {
    border-color: rgba(6, 182, 212, 0.2);
}

.broker-faq-q[b-lke9ejpfkt] {
    cursor: pointer;
    list-style: none;
    padding: 18px 44px 18px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    position: relative;
}

.broker-faq-q[b-lke9ejpfkt]::-webkit-details-marker {
    display: none;
}

.broker-faq-q[b-lke9ejpfkt]::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    color: #06b6d4;
}

.broker-faq-item[open] .broker-faq-q[b-lke9ejpfkt]::after {
    content: "−";
}

.broker-faq-a[b-lke9ejpfkt] {
    padding: 0 20px 18px;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.broker-faq-cta[b-lke9ejpfkt] {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
/* /Components/Pages/Careers.razor.rz.scp.css */
/* ===========================================
   CAREERS PAGE - SLYD DESIGN SYSTEM
   Uses shared CSS: generic-hero.css, generic-sections.css, brand-colors.css
   =========================================== */


/* ===========================================
   HERO PREVIEW (page-specific)
   =========================================== */
.careers-culture-card[b-jlw2i9evaf] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
}

.careers-culture-stats[b-jlw2i9evaf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.careers-culture-stat[b-jlw2i9evaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.careers-culture-stat:hover[b-jlw2i9evaf] {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
}

.careers-culture-stat-icon[b-jlw2i9evaf] {
    font-size: 1.5rem;
    color: #06b6d4;
    margin-bottom: 12px;
}

.careers-culture-stat-icon :deep(.icon)[b-jlw2i9evaf] {
    font-size: 22px;
}

.careers-culture-stat-label[b-jlw2i9evaf] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
}

/* ===========================================
   CONTENT INTRO SECTION
   =========================================== */
.content-intro[b-jlw2i9evaf] {
    max-width: 1100px;
    margin: 0 auto;
}

.content-intro.centered[b-jlw2i9evaf] {
    text-align: center;
}

.content-intro-title[b-jlw2i9evaf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 20px;
    line-height: 1.2;
}

.content-intro-lead[b-jlw2i9evaf] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* Values Grid */
.careers-values-grid[b-jlw2i9evaf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 2.5rem;
    text-align: left;
}

.careers-value[b-jlw2i9evaf] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
}

.careers-value-icon[b-jlw2i9evaf] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
    font-size: 12px;
}

.careers-value-icon.cyan[b-jlw2i9evaf] { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.careers-value-icon.purple[b-jlw2i9evaf] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.careers-value-icon.green[b-jlw2i9evaf] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.careers-value-icon.gold[b-jlw2i9evaf] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.careers-value h3[b-jlw2i9evaf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.careers-value p[b-jlw2i9evaf] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* Stage Info */
.careers-stage-info[b-jlw2i9evaf] {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 24px 32px;
}

.careers-stage-info p[b-jlw2i9evaf] {
    font-size: 1rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0;
}

.careers-stage-info strong[b-jlw2i9evaf] {
    color: #f1f5f9;
}

/* ===========================================
   BENEFITS GRID
   =========================================== */
.careers-benefits-grid[b-jlw2i9evaf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.careers-benefit-card[b-jlw2i9evaf] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 32px;
    transition: all 0.3s ease;
}

.careers-benefit-card:hover[b-jlw2i9evaf] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.careers-benefit-icon[b-jlw2i9evaf] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 20px;
    flex-shrink: 0;
    font-size: 14px;
}

.careers-benefit-icon.cyan[b-jlw2i9evaf] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.careers-benefit-icon.purple[b-jlw2i9evaf] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.careers-benefit-icon.green[b-jlw2i9evaf] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.careers-benefit-icon.gold[b-jlw2i9evaf] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.careers-benefit-card h3[b-jlw2i9evaf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.careers-benefit-card p[b-jlw2i9evaf] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

/* ===========================================
   JOB CATEGORIES
   =========================================== */
.careers-category[b-jlw2i9evaf] {
    margin-bottom: 48px;
}

.careers-category:last-child[b-jlw2i9evaf] {
    margin-bottom: 0;
}

.careers-category-title[b-jlw2i9evaf] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.careers-category-title :deep(.icon)[b-jlw2i9evaf] {
    font-size: 18px;
    color: #06b6d4;
}

.careers-jobs-list[b-jlw2i9evaf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.careers-job-card[b-jlw2i9evaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
}

.careers-job-card:hover[b-jlw2i9evaf] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.2);
}

.careers-job-info[b-jlw2i9evaf] {
    flex: 1;
}

.careers-job-info h4[b-jlw2i9evaf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.careers-job-info p[b-jlw2i9evaf] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #94a3b8;
    margin-bottom: 12px;
}

.careers-job-tags[b-jlw2i9evaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.careers-job-tags span[b-jlw2i9evaf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 10px;
    border-radius: 4px;
}

.careers-job-tags span :deep(.icon)[b-jlw2i9evaf] {
    font-size: 11px;
    color: #64748b;
}

.careers-job-apply[b-jlw2i9evaf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #06b6d4;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.careers-job-apply:hover[b-jlw2i9evaf] {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.5);
}

.careers-job-apply :deep(.icon)[b-jlw2i9evaf] {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.careers-job-apply:hover :deep(.icon)[b-jlw2i9evaf] {
    transform: translateX(4px);
}

/* ===========================================
   GENERAL APPLICATION
   =========================================== */
.careers-general-application[b-jlw2i9evaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 48px;
}

.careers-general-content[b-jlw2i9evaf] {
    flex: 1;
}

.careers-general-content h2[b-jlw2i9evaf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.careers-general-content p[b-jlw2i9evaf] {
    font-size: 1rem;
    line-height: 1.6;
    color: #94a3b8;
}

.careers-general-actions[b-jlw2i9evaf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.careers-general-email[b-jlw2i9evaf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #64748b;
}

.careers-general-email a[b-jlw2i9evaf] {
    color: #06b6d4;
    text-decoration: none;
}

.careers-general-email a:hover[b-jlw2i9evaf] {
    text-decoration: underline;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.careers-cta[b-jlw2i9evaf] {
    padding: 100px 0;
    background: linear-gradient(135deg, #0F172A 0%, #020617 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.careers-cta-content[b-jlw2i9evaf] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.careers-cta-content h2[b-jlw2i9evaf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
}

.careers-cta-content p[b-jlw2i9evaf] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 32px;
}

.careers-cta-actions[b-jlw2i9evaf] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .careers-benefits-grid[b-jlw2i9evaf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .careers-culture-card[b-jlw2i9evaf] {
        max-width: 500px;
        margin: 0 auto;
    }

    .careers-general-application[b-jlw2i9evaf] {
        flex-direction: column;
        text-align: center;
    }

    .careers-general-actions[b-jlw2i9evaf] {
        align-items: center;
    }

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

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

    .careers-job-card[b-jlw2i9evaf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .careers-job-apply[b-jlw2i9evaf] {
        width: 100%;
        justify-content: center;
    }

    .careers-general-application[b-jlw2i9evaf] {
        padding: 32px;
    }

    .careers-cta-content h2[b-jlw2i9evaf] {
        font-size: 1.75rem;
    }

    .careers-culture-stats[b-jlw2i9evaf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .careers-values-grid[b-jlw2i9evaf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .careers-cta-actions[b-jlw2i9evaf] {
        flex-direction: column;
    }

    .btn-gold[b-jlw2i9evaf],
    .btn-outline[b-jlw2i9evaf] {
        width: 100%;
        justify-content: center;
    }

    .careers-benefit-card[b-jlw2i9evaf] {
        padding: 24px;
    }
}
/* /Components/Pages/CaseStudies/CaseStudies.razor.rz.scp.css */
/* ===========================================
   CASE STUDIES INDEX PAGE
   CSS Prefix: cases-
   =========================================== */

/* ===========================================
   ACCESSIBILITY
   =========================================== */
.skip-link[b-tatdahbhoc] {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 12px 24px;
    background: #f59e0b;
    color: #030508;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus[b-tatdahbhoc] {
    top: 16px;
}

/* ===========================================
   HERO STATS (Keep page-specific)
   =========================================== */
/* Hero Stats */
.cases-hero-stats[b-tatdahbhoc] {
    display: flex;
    justify-content: center;
    gap: 48px;
}

.cases-hero-stat[b-tatdahbhoc] {
    text-align: center;
}

.cases-hero-stat .stat-value[b-tatdahbhoc] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: #06b6d4;
    line-height: 1.1;
}

.cases-hero-stat .stat-label[b-tatdahbhoc] {
    display: block;
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 8px;
}

/* ===========================================
   FILTER BAR
   =========================================== */
.cases-filter-section[b-tatdahbhoc] {
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 20px 0;
    position: sticky;
    top: 72px;
    z-index: 100;
}

.cases-filter-section .container[b-tatdahbhoc] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.cases-filter-bar[b-tatdahbhoc] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.cases-filter-btn[b-tatdahbhoc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cases-filter-btn:hover[b-tatdahbhoc] {
    color: #f1f5f9;
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.02);
}

.cases-filter-btn.active[b-tatdahbhoc] {
    color: #f1f5f9;
    background: rgba(6,182,212,0.1);
    border-color: rgba(6,182,212,0.4);
}

.filter-dot[b-tatdahbhoc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.filter-dot.healthcare[b-tatdahbhoc] { background: #10b981; }
.filter-dot.legal[b-tatdahbhoc] { background: #6366f1; }
.filter-dot.financial[b-tatdahbhoc] { background: #f59e0b; }
.filter-dot.manufacturing[b-tatdahbhoc] { background: #06b6d4; }
.filter-dot.enterprise[b-tatdahbhoc] { background: #8b5cf6; }
.filter-dot.research[b-tatdahbhoc] { background: #ec4899; }

/* ===========================================
   INDUSTRY BADGES
   =========================================== */
.cases-industry-badge[b-tatdahbhoc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
}

.cases-industry-badge.healthcare[b-tatdahbhoc] {
    color: #10b981;
    background: rgba(16,185,129,0.1);
}

.cases-industry-badge.legal[b-tatdahbhoc] {
    color: #6366f1;
    background: rgba(99,102,241,0.1);
}

.cases-industry-badge.financial[b-tatdahbhoc] {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
}

.cases-industry-badge.manufacturing[b-tatdahbhoc] {
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
}

.cases-industry-badge.enterprise[b-tatdahbhoc] {
    color: #8b5cf6;
    background: rgba(139,92,246,0.1);
}

.cases-industry-badge.research[b-tatdahbhoc] {
    color: #ec4899;
    background: rgba(236,72,153,0.1);
}

/* ===========================================
   FEATURED CASE STUDIES
   =========================================== */
.cases-featured-grid[b-tatdahbhoc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cases-featured-card[b-tatdahbhoc] {
    display: block;
    padding: 36px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cases-featured-card:hover[b-tatdahbhoc] {
    border-color: rgba(6,182,212,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.cases-featured-content[b-tatdahbhoc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cases-featured-title[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.3;
}

.cases-featured-quote[b-tatdahbhoc] {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid rgba(6,182,212,0.4);
}

.cases-featured-metrics[b-tatdahbhoc] {
    display: flex;
    gap: 24px;
    margin-top: 8px;
}

.cases-metric[b-tatdahbhoc] {
    text-align: center;
    padding: 16px 20px;
    background: rgba(6,182,212,0.05);
    border: 1px solid rgba(6,182,212,0.1);
    border-radius: 10px;
    min-width: 100px;
}

.cases-metric .metric-value[b-tatdahbhoc] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: #06b6d4;
    line-height: 1.1;
}

.cases-metric .metric-label[b-tatdahbhoc] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

.cases-card-cta[b-tatdahbhoc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #06b6d4;
    margin-top: 8px;
}

.cases-card-cta :deep(.icon)[b-tatdahbhoc] {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.cases-featured-card:hover .cases-card-cta :deep(.icon)[b-tatdahbhoc] {
    transform: translateX(4px);
}

/* ===========================================
   CASE STUDY CARDS GRID
   =========================================== */
.cases-grid[b-tatdahbhoc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cases-card[b-tatdahbhoc] {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cases-card:hover[b-tatdahbhoc] {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

.cases-card-header[b-tatdahbhoc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cases-featured-badge[b-tatdahbhoc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.cases-featured-badge :deep(.icon)[b-tatdahbhoc] {
    width: 10px;
    height: 10px;
}

.cases-card-title[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.cases-card-headline[b-tatdahbhoc] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
    line-height: 1.5;
    flex-grow: 1;
}

.cases-card-metrics[b-tatdahbhoc] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.cases-metric-small[b-tatdahbhoc] {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
}

.cases-metric-small .metric-value[b-tatdahbhoc] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    color: #06b6d4;
    line-height: 1.1;
}

.cases-metric-small .metric-label[b-tatdahbhoc] {
    display: block;
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cases-card-link[b-tatdahbhoc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #06b6d4;
}

.cases-card-link :deep(.icon)[b-tatdahbhoc] {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.cases-card:hover .cases-card-link :deep(.icon)[b-tatdahbhoc] {
    transform: translateX(4px);
}

/* ===========================================
   EMPTY STATE
   =========================================== */
.cases-empty-state[b-tatdahbhoc] {
    text-align: center;
    padding: 80px 40px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 16px;
}

.cases-empty-state :deep(.icon)[b-tatdahbhoc] {
    width: 48px;
    height: 48px;
    color: #475569;
    margin-bottom: 16px;
}

.cases-empty-state h3[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.cases-empty-state p[b-tatdahbhoc] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.cases-cta[b-tatdahbhoc] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

.cases-cta .container[b-tatdahbhoc] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.cases-cta-content[b-tatdahbhoc] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cases-cta-content h2[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.cases-cta-content > p[b-tatdahbhoc] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.cases-cta-actions[b-tatdahbhoc] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   SHARE YOUR STORY
   =========================================== */
.cases-share-story[b-tatdahbhoc] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 40px;
    background: rgba(6,182,212,0.04);
    border: 1px solid rgba(6,182,212,0.15);
    border-radius: 16px;
}

.cases-share-icon[b-tatdahbhoc] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 14px;
    flex-shrink: 0;
}

.cases-share-icon :deep(.icon)[b-tatdahbhoc] {
    width: 28px;
    height: 28px;
    color: #06b6d4;
}

.cases-share-content[b-tatdahbhoc] {
    flex-grow: 1;
}

.cases-share-content h3[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.cases-share-content p[b-tatdahbhoc] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .cases-grid[b-tatdahbhoc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .cases-hero-stats[b-tatdahbhoc] {
        gap: 32px;
    }
    .cases-hero-stat .stat-value[b-tatdahbhoc] {
        font-size: 2rem;
    }
    .cases-featured-grid[b-tatdahbhoc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cases-cta .container[b-tatdahbhoc],
    .cases-filter-section .container[b-tatdahbhoc] {
        padding: 0 24px;
    }
    .cases-hero-stats[b-tatdahbhoc] {
        flex-direction: column;
        gap: 24px;
    }
    .cases-filter-bar[b-tatdahbhoc] {
        gap: 8px;
    }
    .cases-filter-btn[b-tatdahbhoc] {
        padding: 8px 16px;
        font-size: 0.8125rem;
    }
    .cases-grid[b-tatdahbhoc] {
        grid-template-columns: 1fr;
    }
    .cases-featured-metrics[b-tatdahbhoc] {
        flex-wrap: wrap;
    }
    .cases-metric[b-tatdahbhoc] {
        min-width: 80px;
        padding: 12px 16px;
    }
    .cases-cta-actions[b-tatdahbhoc] {
        flex-direction: column;
    }
    .btn-gold[b-tatdahbhoc],
    .btn-outline[b-tatdahbhoc] {
        width: 100%;
        justify-content: center;
    }
    .cases-share-story[b-tatdahbhoc] {
        flex-direction: column;
        text-align: center;
        padding: 28px 24px;
    }
    .cases-share-story .btn-outline[b-tatdahbhoc] {
        width: auto;
    }
}

@media (max-width: 480px) {
    .cases-card-metrics[b-tatdahbhoc] {
        flex-direction: column;
    }
    .cases-metric-small[b-tatdahbhoc] {
        flex: none;
    }
}

/* ===========================================
   CONTENT INTRO SECTION (New)
   =========================================== */
.content-intro[b-tatdahbhoc] {
    max-width: 1100px;
    margin: 0 auto;
}

.content-intro.centered[b-tatdahbhoc] {
    text-align: center;
}

.content-intro-title[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 20px;
    line-height: 1.2;
}

.content-intro-lead[b-tatdahbhoc] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* Industries Grid */
.content-industries-grid[b-tatdahbhoc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 3rem;
    text-align: left;
}

.content-industry[b-tatdahbhoc] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
}

.content-industry-icon[b-tatdahbhoc] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.content-industry-icon :deep(svg)[b-tatdahbhoc] {
    width: 22px;
    height: 22px;
}

.content-industry-icon.healthcare[b-tatdahbhoc] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.content-industry-icon.legal[b-tatdahbhoc] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.content-industry-icon.manufacturing[b-tatdahbhoc] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.content-industry-icon.financial[b-tatdahbhoc] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.content-industry h3[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.content-industry p[b-tatdahbhoc] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* Results Summary */
.content-results-summary[b-tatdahbhoc] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 16px;
    padding: 32px;
}

.content-results-summary h3[b-tatdahbhoc] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 24px;
}

.content-results-grid[b-tatdahbhoc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.content-result[b-tatdahbhoc] {
    text-align: center;
}

.content-result-value[b-tatdahbhoc] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: #06b6d4;
    margin-bottom: 4px;
}

.content-result-label[b-tatdahbhoc] {
    font-size: 0.875rem;
    color: #94a3b8;
}

@media (max-width: 1024px) {
    .content-industries-grid[b-tatdahbhoc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-results-grid[b-tatdahbhoc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .content-industries-grid[b-tatdahbhoc] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CaseStudies/CaseStudy.razor.rz.scp.css */
/* ===========================================
   INDIVIDUAL CASE STUDY PAGE
   CSS Prefix: case-
   =========================================== */

/* ===========================================
   ACCESSIBILITY
   =========================================== */
.skip-link[b-ez1zc5aizs] {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 12px 24px;
    background: #f59e0b;
    color: #030508;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus[b-ez1zc5aizs] {
    top: 16px;
}

/* ===========================================
   BACK LINK (page-specific)
   =========================================== */
.case-back-link[b-ez1zc5aizs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.2s ease;
}

.case-back-link:hover[b-ez1zc5aizs] {
    color: #06b6d4;
}

.case-back-link :deep(.icon)[b-ez1zc5aizs] {
    width: 14px;
    height: 14px;
}

/* ===========================================
   INDUSTRY BADGES
   =========================================== */
.case-industry-badge[b-ez1zc5aizs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
}

.case-industry-badge.healthcare[b-ez1zc5aizs] {
    color: #10b981;
    background: rgba(16,185,129,0.1);
}

.case-industry-badge.legal[b-ez1zc5aizs] {
    color: #6366f1;
    background: rgba(99,102,241,0.1);
}

.case-industry-badge.financial[b-ez1zc5aizs] {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
}

.case-industry-badge.manufacturing[b-ez1zc5aizs] {
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
}

.case-industry-badge.enterprise[b-ez1zc5aizs] {
    color: #8b5cf6;
    background: rgba(139,92,246,0.1);
}

.case-industry-badge.research[b-ez1zc5aizs] {
    color: #ec4899;
    background: rgba(236,72,153,0.1);
}

/* ===========================================
   BREADCRUMB
   =========================================== */
.case-breadcrumb-wrapper[b-ez1zc5aizs] {
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 16px 0;
}

.case-breadcrumb-wrapper .container[b-ez1zc5aizs] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ===========================================
   RESULTS AT A GLANCE
   =========================================== */
.case-results-section[b-ez1zc5aizs] {
    padding: 48px 0;
    background: linear-gradient(180deg, rgba(6,182,212,0.04) 0%, transparent 100%);
}

.case-results-header[b-ez1zc5aizs] {
    text-align: center;
    margin-bottom: 32px;
}

.case-results-grid[b-ez1zc5aizs] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.case-result-card[b-ez1zc5aizs] {
    min-width: 140px;
    padding: 24px 28px;
    background: #0f1620;
    border: 1px solid rgba(6,182,212,0.2);
    border-radius: 12px;
    text-align: center;
}

.case-result-card .result-value[b-ez1zc5aizs] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.25rem;
    font-weight: 700;
    color: #06b6d4;
    line-height: 1.1;
}

.case-result-card .result-label[b-ez1zc5aizs] {
    display: block;
    font-size: 0.8125rem;
    color: #94a3b8;
    margin-top: 8px;
}

/* ===========================================
   COMPANY OVERVIEW
   =========================================== */
.case-overview-grid[b-ez1zc5aizs] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
}

.case-overview-content .case-section-tag[b-ez1zc5aizs] {
    margin-bottom: 20px;
}

.case-overview-text[b-ez1zc5aizs] {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0;
}

.case-overview-sidebar[b-ez1zc5aizs] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 24px;
}

.case-overview-item[b-ez1zc5aizs] {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.case-overview-item:first-child[b-ez1zc5aizs] {
    padding-top: 0;
}

.case-overview-item:last-child[b-ez1zc5aizs] {
    border-bottom: none;
    padding-bottom: 0;
}

.case-overview-item .overview-label[b-ez1zc5aizs] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.case-overview-item .overview-value[b-ez1zc5aizs] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f1f5f9;
}

/* ===========================================
   CONTENT BLOCKS (Challenge, Solution, Results)
   =========================================== */
.case-content-block[b-ez1zc5aizs] {
    max-width: 700px;
}

.case-content-header[b-ez1zc5aizs] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.case-header-line[b-ez1zc5aizs] {
    flex-grow: 1;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
}

.case-header-line.red[b-ez1zc5aizs] {
    background: linear-gradient(90deg, rgba(239,68,68,0.5) 0%, transparent 100%);
}

.case-header-line.cyan[b-ez1zc5aizs] {
    background: linear-gradient(90deg, rgba(6,182,212,0.5) 0%, transparent 100%);
}

.case-header-line.green[b-ez1zc5aizs] {
    background: linear-gradient(90deg, rgba(16,185,129,0.5) 0%, transparent 100%);
}

.case-content-text[b-ez1zc5aizs] {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0 0 28px 0;
}

/* Challenge List */
.case-challenge-list[b-ez1zc5aizs] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-challenge-list li[b-ez1zc5aizs] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(239,68,68,0.04);
    border: 1px solid rgba(239,68,68,0.1);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.case-challenge-list li :deep(.icon)[b-ez1zc5aizs] {
    width: 16px;
    height: 16px;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Infrastructure Box */
.case-infrastructure-box[b-ez1zc5aizs] {
    background: rgba(6,182,212,0.04);
    border: 1px solid rgba(6,182,212,0.15);
    border-radius: 12px;
    padding: 24px;
    margin-top: 28px;
}

.case-infra-header[b-ez1zc5aizs] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(6,182,212,0.15);
}

.case-infra-header :deep(.icon)[b-ez1zc5aizs] {
    width: 20px;
    height: 20px;
    color: #06b6d4;
}

.case-infra-header span[b-ez1zc5aizs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.case-infra-list[b-ez1zc5aizs] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case-infra-list li[b-ez1zc5aizs] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.case-infra-list li :deep(.icon)[b-ez1zc5aizs] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
}

/* Testimonial */
.case-testimonial[b-ez1zc5aizs] {
    margin: 40px 0 0 0;
    padding: 32px;
    background: rgba(6,182,212,0.04);
    border: 1px solid rgba(6,182,212,0.15);
    border-left: 4px solid #06b6d4;
    border-radius: 0 12px 12px 0;
}

.testimonial-quote[b-ez1zc5aizs] {
    display: flex;
    gap: 16px;
}

.testimonial-quote :deep(.icon)[b-ez1zc5aizs] {
    width: 24px;
    height: 24px;
    color: #06b6d4;
    opacity: 0.5;
    flex-shrink: 0;
    margin-top: 4px;
}

.testimonial-quote p[b-ez1zc5aizs] {
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
    color: #f1f5f9;
    margin: 0;
}

.testimonial-attribution[b-ez1zc5aizs] {
    display: block;
    font-style: normal;
    font-size: 0.9375rem;
    color: #94a3b8;
    margin-top: 20px;
    padding-left: 40px;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.case-cta[b-ez1zc5aizs] {
    position: relative;
    z-index: 1;
    padding: 80px 0;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

.case-cta .container[b-ez1zc5aizs] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 48px;
}

.case-cta-content[b-ez1zc5aizs] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.case-cta-content h2[b-ez1zc5aizs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.case-cta-content > p[b-ez1zc5aizs] {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
}

.case-cta-actions[b-ez1zc5aizs] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   RELATED CASE STUDIES
   =========================================== */
.case-related-grid[b-ez1zc5aizs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.case-related-card[b-ez1zc5aizs] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.case-related-card:hover[b-ez1zc5aizs] {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

.case-related-card h3[b-ez1zc5aizs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 12px 0 16px 0;
    line-height: 1.4;
}

.case-related-metrics[b-ez1zc5aizs] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.case-related-metric[b-ez1zc5aizs] {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
}

.case-related-metric .metric-value[b-ez1zc5aizs] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #06b6d4;
    line-height: 1.1;
}

.case-related-metric .metric-label[b-ez1zc5aizs] {
    display: block;
    font-size: 0.625rem;
    color: #64748b;
    margin-top: 4px;
}

.case-related-link[b-ez1zc5aizs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #06b6d4;
    margin-top: auto;
}

.case-related-link :deep(.icon)[b-ez1zc5aizs] {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.case-related-card:hover .case-related-link :deep(.icon)[b-ez1zc5aizs] {
    transform: translateX(4px);
}

.case-view-all[b-ez1zc5aizs] {
    text-align: center;
    margin-top: 40px;
}

/* ===========================================
   NOT FOUND STATE
   =========================================== */
.case-not-found[b-ez1zc5aizs] {
    padding: 200px 0;
}

.case-not-found .container[b-ez1zc5aizs] {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 48px;
}

.case-not-found-content[b-ez1zc5aizs] {
    text-align: center;
}

.case-not-found-content :deep(.icon)[b-ez1zc5aizs] {
    width: 64px;
    height: 64px;
    color: #475569;
    margin-bottom: 24px;
}

.case-not-found-content h1[b-ez1zc5aizs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.case-not-found-content p[b-ez1zc5aizs] {
    font-size: 1.0625rem;
    color: #94a3b8;
    margin: 0 0 32px 0;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    .case-overview-grid[b-ez1zc5aizs] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .case-overview-sidebar[b-ez1zc5aizs] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 24px;
    }
    .case-overview-item[b-ez1zc5aizs] {
        padding: 12px 0;
    }
    .case-related-grid[b-ez1zc5aizs] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .case-cta .container[b-ez1zc5aizs],
    .case-breadcrumb-wrapper .container[b-ez1zc5aizs],
    .case-not-found .container[b-ez1zc5aizs] {
        padding: 0 24px;
    }
    .case-results-grid[b-ez1zc5aizs] {
        flex-direction: column;
        align-items: center;
    }
    .case-result-card[b-ez1zc5aizs] {
        width: 100%;
        max-width: 200px;
    }
    .case-result-card .result-value[b-ez1zc5aizs] {
        font-size: 1.75rem;
    }
    .case-overview-sidebar[b-ez1zc5aizs] {
        grid-template-columns: 1fr;
    }
    .case-cta-actions[b-ez1zc5aizs] {
        flex-direction: column;
    }
    .btn-gold[b-ez1zc5aizs],
    .btn-outline[b-ez1zc5aizs] {
        width: 100%;
        justify-content: center;
    }
    .case-related-grid[b-ez1zc5aizs] {
        grid-template-columns: 1fr;
    }
    .case-testimonial[b-ez1zc5aizs] {
        padding: 24px;
    }
    .testimonial-quote[b-ez1zc5aizs] {
        flex-direction: column;
        gap: 12px;
    }
    .testimonial-attribution[b-ez1zc5aizs] {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .case-challenge-list li[b-ez1zc5aizs] {
        flex-direction: column;
        gap: 8px;
    }
    .case-challenge-list li :deep(.icon)[b-ez1zc5aizs] {
        margin-top: 0;
    }
}
/* /Components/Pages/Configure.razor.rz.scp.css */
/* ============================================================
   Configure (/configure) — Track 2 V3 energy-backwards configurator.
   Translated from the v3-platform mockup (configure.html/.css) into
   the website's V3 token conventions: local aliases over --slyd-*
   tokens (same pattern as HardwareSales.razor.css / Need.razor.css),
   namespaced v3cfg-, scoped under the .v3cfg wrapper, dark anchor.
   ============================================================ */

.v3cfg[b-3sxkas64r0] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3cfg *[b-3sxkas64r0],
.v3cfg *[b-3sxkas64r0]::before,
.v3cfg *[b-3sxkas64r0]::after { box-sizing: border-box; }

.v3cfg a[b-3sxkas64r0] { color: inherit; text-decoration: none; }
.v3cfg button[b-3sxkas64r0] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3cfg .v3cfg-wrap[b-3sxkas64r0] {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3cfg .v3cfg-wrap[b-3sxkas64r0] { padding: 0 20px; } }

/* Buttons */
.v3cfg .v3cfg-btn[b-3sxkas64r0] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3cfg .v3cfg-btn-ghost[b-3sxkas64r0] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3cfg .v3cfg-btn-ghost:hover[b-3sxkas64r0] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3cfg .v3cfg-btn-primary[b-3sxkas64r0] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3cfg .v3cfg-btn-primary:hover[b-3sxkas64r0] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3cfg .v3cfg-arr[b-3sxkas64r0] { font-family: var(--font-mono); opacity: .7; }

/* Shared accent */
.v3cfg .v3cfg-a[b-3sxkas64r0] { color: var(--primary); }

/* ───── PAGE HEAD ───── */

.v3cfg .v3cfg-head[b-3sxkas64r0] {
    padding: 44px 0 28px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.v3cfg .v3cfg-head[b-3sxkas64r0]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(800px 400px at 80% 0%, color-mix(in oklab, var(--primary) 30%, transparent), transparent 70%);
    opacity: .4;
}

.v3cfg .v3cfg-head-row[b-3sxkas64r0] {
    display: flex;
    align-items: flex-end;
    gap: 48px;
    justify-content: space-between;
}

@media (max-width: 900px) { .v3cfg .v3cfg-head-row[b-3sxkas64r0] { flex-direction: column; align-items: flex-start; gap: 18px; } }

.v3cfg .v3cfg-eyebrow[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.v3cfg .v3cfg-eyebrow[b-3sxkas64r0]::before { content: ""; width: 24px; height: 1px; background: var(--primary); }

.v3cfg .v3cfg-h1[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3cfg .v3cfg-h1 .v3cfg-a[b-3sxkas64r0] { color: var(--primary); font-style: italic; }

.v3cfg .v3cfg-lede[b-3sxkas64r0] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 680px;
    margin: 0;
}

.v3cfg .v3cfg-badges[b-3sxkas64r0] { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.v3cfg .v3cfg-badge[b-3sxkas64r0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-hover);
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.v3cfg .v3cfg-badge[b-3sxkas64r0]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
}

.v3cfg .v3cfg-badge-no-login[b-3sxkas64r0]::before {
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* ───── MODE SELECTOR ───── */

.v3cfg .v3cfg-modes[b-3sxkas64r0] { padding: 26px 0 4px; }

.v3cfg .v3cfg-modes-row[b-3sxkas64r0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1080px) { .v3cfg .v3cfg-modes-row[b-3sxkas64r0] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .v3cfg .v3cfg-modes-row[b-3sxkas64r0] { grid-template-columns: 1fr; } }

.v3cfg .v3cfg-mode[b-3sxkas64r0] {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, background .15s;
}

.v3cfg .v3cfg-mode:hover[b-3sxkas64r0] { border-color: var(--border-hover); transform: translateY(-2px); }

.v3cfg .v3cfg-mode.v3cfg-on[b-3sxkas64r0] {
    border-color: var(--primary);
    background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg-card) 90%);
}

.v3cfg .v3cfg-mode-ic[b-3sxkas64r0] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.v3cfg .v3cfg-mode-ic svg[b-3sxkas64r0] { width: 15px; height: 15px; }

.v3cfg .v3cfg-mode-tag[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.v3cfg .v3cfg-mode-name[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.v3cfg .v3cfg-mode.v3cfg-on .v3cfg-mode-name[b-3sxkas64r0] { color: var(--primary); }

.v3cfg .v3cfg-mode-desc[b-3sxkas64r0] {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin: 0;
}

/* ───── MAIN GRID ───── */

.v3cfg .v3cfg-grid[b-3sxkas64r0] {
    padding: 26px 0 80px;
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1080px) {
    .v3cfg .v3cfg-grid[b-3sxkas64r0] { grid-template-columns: 1fr; gap: 18px; }
}

/* ───── LEFT COLUMN (form + save panel) ───── */

.v3cfg .v3cfg-col-left[b-3sxkas64r0] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* ───── FORM ───── */

.v3cfg .v3cfg-form[b-3sxkas64r0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3cfg .v3cfg-form-section[b-3sxkas64r0] {
    padding: 24px 26px;
    border-bottom: 1px solid var(--border);
}

.v3cfg .v3cfg-form-section:last-of-type[b-3sxkas64r0] { border-bottom: none; }

.v3cfg .v3cfg-fsh[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v3cfg .v3cfg-n[b-3sxkas64r0] {
    font-family: var(--font-mono);
    display: inline-flex;
    width: 18px;
    height: 18px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
}

.v3cfg .v3cfg-field[b-3sxkas64r0] { margin-bottom: 16px; }
.v3cfg .v3cfg-field:last-child[b-3sxkas64r0] { margin-bottom: 0; }
.v3cfg .v3cfg-field[hidden][b-3sxkas64r0] { display: none; }

.v3cfg .v3cfg-label[b-3sxkas64r0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.v3cfg .v3cfg-hint[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    font-weight: 400;
}

.v3cfg .v3cfg-hv[b-3sxkas64r0] { color: var(--primary); font-weight: 600; }

/* Sliders + number entry */
.v3cfg .v3cfg-rng[b-3sxkas64r0] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--pct, 50%), var(--bg-input) var(--pct, 50%), var(--bg-input) 100%);
    border-radius: 3px;
    outline: none;
    margin: 0;
}

.v3cfg .v3cfg-rng[b-3sxkas64r0]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--primary);
    cursor: pointer;
}

.v3cfg .v3cfg-rng[b-3sxkas64r0]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--primary);
    cursor: pointer;
}

.v3cfg .v3cfg-rng-scale[b-3sxkas64r0] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 6px;
}

.v3cfg .v3cfg-inp-row[b-3sxkas64r0] { display: flex; align-items: center; gap: 12px; }
.v3cfg .v3cfg-inp-row .v3cfg-rng[b-3sxkas64r0] { flex: 1; min-width: 0; }

.v3cfg .v3cfg-num-inp[b-3sxkas64r0] {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .1s, box-shadow .1s;
    flex-shrink: 0;
}

.v3cfg .v3cfg-num-inp:focus-within[b-3sxkas64r0] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.v3cfg .v3cfg-num-inp input[b-3sxkas64r0] {
    width: 64px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    -moz-appearance: textfield;
}

.v3cfg .v3cfg-num-inp input[b-3sxkas64r0]::-webkit-outer-spin-button,
.v3cfg .v3cfg-num-inp input[b-3sxkas64r0]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v3cfg .v3cfg-num-unit[b-3sxkas64r0] {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
}

/* Pills — use ::deep so dynamically-injected pills (GPU catalog) inherit styling */
.v3cfg[b-3sxkas64r0]  .v3cfg-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.v3cfg[b-3sxkas64r0]  .v3cfg-pill {
    font-family: var(--font-body);
    padding: 8px 13px;
    font-size: 13px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .1s;
}

.v3cfg[b-3sxkas64r0]  .v3cfg-pill:hover { border-color: var(--border-hover); color: var(--text-primary); }

.v3cfg[b-3sxkas64r0]  .v3cfg-pill.v3cfg-on {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.v3cfg[b-3sxkas64r0]  .v3cfg-pills-loading {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding: 8px 0;
}

.v3cfg .v3cfg-accel-spec[b-3sxkas64r0] {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.v3cfg .v3cfg-accel-spec[hidden][b-3sxkas64r0] { display: none; }

.v3cfg .v3cfg-offtake-note[b-3sxkas64r0] {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* ───── OFFTAKE DIAL — step-rendered §5.2 track ─────
   The APR rule is a step function and the track shows it as three
   visible zones: a muted notch at exactly 0 (base APR), the partial
   zone up to the published threshold, the best zone after. Zone
   widths and the tick position are set from the API's
   financingTiers.thresholdFraction — never hardcoded here. */

.v3cfg .v3cfg-dial[b-3sxkas64r0] {
    position: relative;
    height: 28px;
    margin-top: 20px; /* room for the threshold label */
    display: flex;
    align-items: center;
}

.v3cfg .v3cfg-dial-zones[b-3sxkas64r0] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-input); /* shows until the API zones land */
}

/* the 0% point-zone — base APR applies ONLY at exactly zero */
.v3cfg .v3cfg-dial-zone-none[b-3sxkas64r0] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: var(--text-muted);
    border-right: 2px solid var(--bg-card);
    z-index: 1;
}

.v3cfg .v3cfg-dial-zone-partial[b-3sxkas64r0] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0; /* set from thresholdFraction */
    background: color-mix(in oklab, var(--primary) 55%, var(--bg-input));
}

.v3cfg .v3cfg-dial-zone-full[b-3sxkas64r0] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 0; /* set from thresholdFraction */
    background: color-mix(in oklab, var(--success) 60%, var(--bg-input));
    border-left: 2px solid var(--bg-card); /* the step edge is visible */
}

/* threshold tick + label (position + text from the API) */
.v3cfg .v3cfg-dial-thresh[b-3sxkas64r0] {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 2px;
    transform: translateX(-1px);
    background: var(--text-secondary);
    z-index: 2;
    pointer-events: none;
}

.v3cfg .v3cfg-dial-thresh[hidden][b-3sxkas64r0] { display: none; }

.v3cfg .v3cfg-dial-thresh-lbl[b-3sxkas64r0] {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* the range input rides transparently over the zone track */
.v3cfg .v3cfg-dial-rng[b-3sxkas64r0] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 3;
    width: 100%;
    height: 28px;
    background: transparent;
    outline: none;
    margin: 0;
}

.v3cfg .v3cfg-dial-rng[b-3sxkas64r0]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.v3cfg .v3cfg-dial-rng[b-3sxkas64r0]::-moz-range-track { background: transparent; }

.v3cfg .v3cfg-dial-rng[b-3sxkas64r0]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 5px; /* center on the 28px hit area (webkit) */
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--primary);
    cursor: pointer;
}

.v3cfg .v3cfg-dial-rng[b-3sxkas64r0]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--primary);
    cursor: pointer;
}

/* zone legend — values rendered from the API tiers */
.v3cfg .v3cfg-dial-legend[b-3sxkas64r0] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.v3cfg .v3cfg-dial-legend[hidden][b-3sxkas64r0] { display: none; }

.v3cfg .v3cfg-dlg[b-3sxkas64r0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.v3cfg .v3cfg-dlg-sw[b-3sxkas64r0] { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.v3cfg .v3cfg-dlg-none[b-3sxkas64r0]    { background: var(--text-muted); }
.v3cfg .v3cfg-dlg-partial[b-3sxkas64r0] { background: color-mix(in oklab, var(--primary) 70%, transparent); }
.v3cfg .v3cfg-dlg-full[b-3sxkas64r0]    { background: var(--success); }

.v3cfg .v3cfg-form-foot[b-3sxkas64r0] {
    padding: 18px 26px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.v3cfg .v3cfg-live[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v3cfg .v3cfg-live[b-3sxkas64r0]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3cfg-pulse-b-3sxkas64r0 1.8s ease-in-out infinite;
}

@keyframes v3cfg-pulse-b-3sxkas64r0 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; transform: scale(1.3); }
}

/* ───── BUILD COLUMN ───── */

.v3cfg .v3cfg-build[b-3sxkas64r0] { display: flex; flex-direction: column; gap: 18px; }

.v3cfg .v3cfg-card[b-3sxkas64r0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3cfg .v3cfg-card-lbl[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0;
    font-weight: 500;
}

/* Notice */
.v3cfg .v3cfg-notice[b-3sxkas64r0] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
    background: var(--primary-soft);
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.v3cfg .v3cfg-notice strong[b-3sxkas64r0] { color: var(--text-primary); }

.v3cfg .v3cfg-nic[b-3sxkas64r0] { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.v3cfg .v3cfg-nic svg[b-3sxkas64r0] { width: 16px; height: 16px; }

/* Error strip */
.v3cfg .v3cfg-error[b-3sxkas64r0] {
    padding: 12px 18px;
    border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent);
    background: color-mix(in oklab, var(--warning) 10%, transparent);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--warning);
}

.v3cfg .v3cfg-error[hidden][b-3sxkas64r0] { display: none; }

/* Power envelope */
.v3cfg .v3cfg-envel[b-3sxkas64r0] { padding: 22px 26px 18px; }

.v3cfg .v3cfg-envel-head[b-3sxkas64r0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.v3cfg .v3cfg-envel-bar[b-3sxkas64r0] {
    display: flex;
    height: 44px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-input);
}

.v3cfg .v3cfg-envel-bar .v3cfg-seg[b-3sxkas64r0] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    color: hsl(229, 50%, 8%);
    transition: flex-basis .35s ease;
    flex-basis: 0%;
}

.v3cfg .v3cfg-seg-compute[b-3sxkas64r0] { background: var(--primary); }
.v3cfg .v3cfg-seg-ovh[b-3sxkas64r0]     { background: var(--accent); }
.v3cfg .v3cfg-seg-fac[b-3sxkas64r0]     { background: var(--text-tertiary); }

.v3cfg .v3cfg-envel-legend[b-3sxkas64r0] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.v3cfg .v3cfg-leg-it[b-3sxkas64r0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3cfg .v3cfg-sw[b-3sxkas64r0] { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.v3cfg .v3cfg-sw-primary[b-3sxkas64r0]   { background: var(--primary); }
.v3cfg .v3cfg-sw-secondary[b-3sxkas64r0] { background: var(--secondary); }
.v3cfg .v3cfg-sw-accent[b-3sxkas64r0]    { background: var(--accent); }
.v3cfg .v3cfg-sw-success[b-3sxkas64r0]   { background: var(--success); }
.v3cfg .v3cfg-sw-warning[b-3sxkas64r0]   { background: var(--warning); }
.v3cfg .v3cfg-sw-tert[b-3sxkas64r0]      { background: var(--text-tertiary); }

.v3cfg .v3cfg-envel-foot[b-3sxkas64r0] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Build spec */
.v3cfg .v3cfg-spec[b-3sxkas64r0] { padding: 22px 26px 24px; }

.v3cfg .v3cfg-spec-head[b-3sxkas64r0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.v3cfg .v3cfg-spec-h[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.6vw, 28px);
    letter-spacing: -0.02em;
    margin: 8px 0 0;
    color: var(--text-primary);
}

.v3cfg .v3cfg-change[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--success);
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
    background: color-mix(in oklab, var(--success) 10%, transparent);
    white-space: nowrap;
}

.v3cfg .v3cfg-change[hidden][b-3sxkas64r0] { display: none; }
.v3cfg .v3cfg-change.v3cfg-tick[b-3sxkas64r0] { animation: v3cfg-tickFlash-b-3sxkas64r0 0.9s ease-out; }

@keyframes v3cfg-tickFlash-b-3sxkas64r0 {
    0%   { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.v3cfg .v3cfg-spec-grid[b-3sxkas64r0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 640px) { .v3cfg .v3cfg-spec-grid[b-3sxkas64r0] { grid-template-columns: repeat(2, 1fr); } }

.v3cfg .v3cfg-spec-cell[b-3sxkas64r0] {
    background: var(--bg-elevated);
    padding: 14px 16px;
}

.v3cfg .v3cfg-k[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 5px;
}

.v3cfg .v3cfg-v[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.v3cfg .v3cfg-unit[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 3px;
}

/* Cost band */
.v3cfg .v3cfg-cost[b-3sxkas64r0] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border-top: 2px solid var(--primary);
}

.v3cfg .v3cfg-cost-head[b-3sxkas64r0] { padding: 26px 28px 18px; }

.v3cfg .v3cfg-cost-total[b-3sxkas64r0] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.v3cfg .v3cfg-px[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 52px);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text-primary);
}

.v3cfg .v3cfg-px .v3cfg-px-a[b-3sxkas64r0] { color: var(--primary); }

.v3cfg .v3cfg-band-tag[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}

.v3cfg .v3cfg-cost-rows[b-3sxkas64r0] { padding: 4px 0 8px; border-top: 1px dashed var(--border); }

.v3cfg .v3cfg-cost-row[b-3sxkas64r0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 28px;
}

.v3cfg .v3cfg-cost-row .v3cfg-sw[b-3sxkas64r0] { width: 4px; height: 30px; border-radius: 2px; }

.v3cfg .v3cfg-cost-nm[b-3sxkas64r0] {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
}

.v3cfg .v3cfg-cost-sub[b-3sxkas64r0] {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-top: 2px;
    font-weight: 400;
}

.v3cfg .v3cfg-cost-pct[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    min-width: 64px;
    text-align: right;
}

.v3cfg .v3cfg-cost-bar[b-3sxkas64r0] {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--bg-input);
    margin: 8px 28px 0;
}

.v3cfg .v3cfg-cost-bar .v3cfg-seg[b-3sxkas64r0] { transition: flex-basis .35s ease; flex-basis: 0%; }
.v3cfg .v3cfg-seg-gpu[b-3sxkas64r0]        { background: var(--primary); }
.v3cfg .v3cfg-seg-electrical[b-3sxkas64r0] { background: var(--secondary); }
.v3cfg .v3cfg-seg-cooling[b-3sxkas64r0]    { background: var(--accent); }
.v3cfg .v3cfg-seg-networking[b-3sxkas64r0] { background: var(--success); }
.v3cfg .v3cfg-seg-install[b-3sxkas64r0]    { background: var(--warning); }
.v3cfg .v3cfg-seg-other[b-3sxkas64r0]      { background: var(--text-tertiary); }

.v3cfg .v3cfg-cost-foot[b-3sxkas64r0] {
    padding: 12px 28px 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Financing */
.v3cfg .v3cfg-fin[b-3sxkas64r0] { padding: 22px 26px 20px; }

.v3cfg .v3cfg-fin-head[b-3sxkas64r0] { margin-bottom: 16px; }

.v3cfg .v3cfg-fin-h[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    margin: 8px 0 0;
    color: var(--text-primary);
}

.v3cfg .v3cfg-fin-grid[b-3sxkas64r0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 640px) { .v3cfg .v3cfg-fin-grid[b-3sxkas64r0] { grid-template-columns: repeat(2, 1fr); } }

.v3cfg .v3cfg-fin-it[b-3sxkas64r0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--bg-elevated);
    padding: 14px 16px;
}

.v3cfg .v3cfg-fin-l[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3cfg .v3cfg-fin-v[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

/* brief swap animation when the dial crosses a zone boundary */
.v3cfg .v3cfg-fin-v.v3cfg-swap[b-3sxkas64r0] { animation: v3cfg-finSwap-b-3sxkas64r0 0.28s ease; }

@keyframes v3cfg-finSwap-b-3sxkas64r0 {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* delta chips vs the 0%-offtake baseline (hidden at 0%) */
.v3cfg .v3cfg-chips[b-3sxkas64r0] { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.v3cfg .v3cfg-chips[hidden][b-3sxkas64r0] { display: none; }

.v3cfg .v3cfg-chip[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--success);
    border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
    background: color-mix(in oklab, var(--success) 10%, transparent);
}

/* a delta that COSTS more (larger advance can outweigh the lower APR) */
.v3cfg .v3cfg-chip-up[b-3sxkas64r0] {
    color: var(--warning);
    border-color: color-mix(in oklab, var(--warning) 40%, transparent);
    background: color-mix(in oklab, var(--warning) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .v3cfg .v3cfg-fin-v.v3cfg-swap[b-3sxkas64r0] { animation: none; }
    .v3cfg .v3cfg-live[b-3sxkas64r0]::before { animation: none; }
    .v3cfg .v3cfg-change.v3cfg-tick[b-3sxkas64r0] { animation: none; }
}

.v3cfg .v3cfg-fin-foot[b-3sxkas64r0] {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Revenue */
.v3cfg .v3cfg-rev[b-3sxkas64r0] { padding: 20px 26px; }

.v3cfg .v3cfg-rev-row[b-3sxkas64r0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.v3cfg .v3cfg-rev-h[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    margin: 8px 0 0;
    color: var(--text-primary);
}

.v3cfg .v3cfg-rev-band[b-3sxkas64r0] { color: var(--success); font-weight: 700; }

.v3cfg .v3cfg-rev-assume[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-align: right;
    max-width: 280px;
    line-height: 1.6;
}

/* SLYD Cloud panel */
.v3cfg .v3cfg-sc[b-3sxkas64r0] {
    padding: 24px 28px;
    border-color: color-mix(in oklab, var(--secondary) 35%, var(--border));
    background: linear-gradient(160deg, color-mix(in oklab, var(--secondary) 9%, var(--bg-card)) 0%, var(--bg-card) 70%);
}

.v3cfg .v3cfg-sc-tag[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--secondary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.v3cfg .v3cfg-sc-dot[b-3sxkas64r0] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--secondary) 25%, transparent);
}

.v3cfg .v3cfg-sc-h[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3cfg .v3cfg-sc-h .v3cfg-a[b-3sxkas64r0] { color: var(--secondary); font-style: italic; }

.v3cfg .v3cfg-sc-p[b-3sxkas64r0] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 720px;
}

.v3cfg .v3cfg-sc-options[b-3sxkas64r0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) { .v3cfg .v3cfg-sc-options[b-3sxkas64r0] { grid-template-columns: 1fr; } }

.v3cfg .v3cfg-sc-opt[b-3sxkas64r0] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    padding: 16px 18px;
}

.v3cfg .v3cfg-sc-opt-alt[b-3sxkas64r0] { border-color: color-mix(in oklab, var(--secondary) 40%, var(--border)); }

.v3cfg .v3cfg-sc-ft[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.v3cfg .v3cfg-sc-on[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.v3cfg .v3cfg-sc-od[b-3sxkas64r0] {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0 0 12px;
}

.v3cfg .v3cfg-sc-fs[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--secondary);
}

/* Save / CTA */
.v3cfg .v3cfg-save[b-3sxkas64r0] { padding: 24px 28px; }

.v3cfg .v3cfg-save-h[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3cfg .v3cfg-save-h .v3cfg-a[b-3sxkas64r0] { color: var(--gold); font-style: italic; }

.v3cfg .v3cfg-save-p[b-3sxkas64r0] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 720px;
}

/* Contact capture on the save card */
.v3cfg .v3cfg-contact[b-3sxkas64r0] { margin: 0 0 18px; }

.v3cfg .v3cfg-contact-grid[b-3sxkas64r0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    max-width: 720px;
}

.v3cfg .v3cfg-cfield[b-3sxkas64r0] { display: flex; flex-direction: column; gap: 6px; }

.v3cfg .v3cfg-clabel[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3cfg .v3cfg-creq[b-3sxkas64r0] { color: var(--gold); }

.v3cfg .v3cfg-cinput[b-3sxkas64r0] {
    width: 100%;
    padding: 9px 11px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .1s, box-shadow .1s;
}

.v3cfg .v3cfg-cinput[b-3sxkas64r0]::placeholder { color: var(--text-tertiary); }

.v3cfg .v3cfg-cinput:focus[b-3sxkas64r0] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.v3cfg .v3cfg-cinput.v3cfg-cinput-bad[b-3sxkas64r0] { border-color: var(--danger); }

.v3cfg .v3cfg-contact-err[b-3sxkas64r0] {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--danger);
}

.v3cfg .v3cfg-contact-err[hidden][b-3sxkas64r0] { display: none; }

@media (max-width: 640px) {
    .v3cfg .v3cfg-contact-grid[b-3sxkas64r0] { grid-template-columns: minmax(0, 1fr); }
}

.v3cfg .v3cfg-save-actions[b-3sxkas64r0] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.v3cfg .v3cfg-save-note[b-3sxkas64r0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
}

.v3cfg .v3cfg-save-note svg[b-3sxkas64r0] { width: 12px; height: 12px; flex-shrink: 0; }

/* ───── FAQ ───── */

.v3cfg .v3cfg-faq-sec[b-3sxkas64r0] {
    padding: 56px 0 72px;
    border-top: 1px solid var(--border);
    margin-top: 48px;
}

.v3cfg .v3cfg-faq-head[b-3sxkas64r0] { margin-bottom: 24px; max-width: 880px; }

.v3cfg .v3cfg-faq-kicker[b-3sxkas64r0] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.v3cfg .v3cfg-faq-h[b-3sxkas64r0] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.v3cfg .v3cfg-faq-list[b-3sxkas64r0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3cfg .v3cfg-faq[b-3sxkas64r0] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.v3cfg .v3cfg-faq-q[b-3sxkas64r0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    list-style: none;
}

.v3cfg .v3cfg-faq-q[b-3sxkas64r0]::-webkit-details-marker { display: none; }

.v3cfg .v3cfg-faq-q[b-3sxkas64r0]::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform .15s;
}

.v3cfg .v3cfg-faq[open] .v3cfg-faq-q[b-3sxkas64r0]::after {
    transform: rotate(45deg);
    color: var(--primary);
}

.v3cfg .v3cfg-faq-q:hover[b-3sxkas64r0] { background: var(--bg-elevated); }

.v3cfg .v3cfg-faq-a[b-3sxkas64r0] {
    padding: 0 22px 18px;
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}
/* /Components/Pages/ContactSales.razor.rz.scp.css */
/* Contact Sales Page Styles */
/* Uses: generic-hero.css, generic-sections.css */

/* ========================================
   BRAND COLORS & HERO OVERRIDES
   ======================================== */
:root[b-6hqgwiracl] {
    --brand-color: #06b6d4;
    --brand-color-rgb: 6, 182, 212;
    --brand-color-dark: #8b5cf6;
}

/* Contact page hero has a custom grid for form layout */
.contact-hero-container[b-6hqgwiracl] {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
}

/* Contact Info Cards */
.contact-info-cards[b-6hqgwiracl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-card[b-6hqgwiracl] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.contact-info-card:hover[b-6hqgwiracl] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.2);
}

.contact-info-icon[b-6hqgwiracl] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 10px;
    color: #06b6d4;
    font-size: 1.125rem;
}

.contact-info-details[b-6hqgwiracl] {
    display: flex;
    flex-direction: column;
}

.contact-info-label[b-6hqgwiracl] {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 4px;
}

.contact-info-details a[b-6hqgwiracl] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-info-details a:hover[b-6hqgwiracl] {
    color: #06b6d4;
}

/* ========================================
   FORM STYLES
   ======================================== */

.contact-form-wrapper[b-6hqgwiracl] {
    position: relative;
}

.contact-form-card[b-6hqgwiracl] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.contact-form-title[b-6hqgwiracl] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 24px;
}

.contact-form-row[b-6hqgwiracl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form-group[b-6hqgwiracl] {
    margin-bottom: 20px;
}

.contact-form-label[b-6hqgwiracl] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.required[b-6hqgwiracl] {
    color: #ef4444;
    margin-left: 4px;
}

[b-6hqgwiracl] .contact-form-input,
[b-6hqgwiracl] .contact-form-select,
[b-6hqgwiracl] .contact-form-textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

[b-6hqgwiracl] .contact-form-input:focus,
[b-6hqgwiracl] .contact-form-select:focus,
[b-6hqgwiracl] .contact-form-textarea:focus {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

[b-6hqgwiracl] .contact-form-input.error,
[b-6hqgwiracl] .contact-form-select.error,
[b-6hqgwiracl] .contact-form-textarea.error {
    border-color: #ef4444;
}

.contact-form-textarea[b-6hqgwiracl] {
    min-height: 120px;
    resize: vertical;
}

.contact-form-select[b-6hqgwiracl] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F8FAFC' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.contact-error-message[b-6hqgwiracl] {
    display: none;
    color: #ef4444;
    font-size: 0.8125rem;
    margin-top: 6px;
}

.contact-error-message.show[b-6hqgwiracl] {
    display: block;
}

/* Dropdown Form Field - matches TextInput styling */
.dropdown-form-field[b-6hqgwiracl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.dropdown-label[b-6hqgwiracl] {
    font-size: var(--slyd-font-size-sm, 0.875rem);
    font-weight: var(--slyd-font-weight-medium, 500);
    color: var(--slyd-text-secondary, #94a3b8);
}

.dropdown-form-field.has-error[b-6hqgwiracl]  .dropdown-trigger {
    border-color: hsla(0, 84%, 60%, 0.5);
}

.dropdown-form-field.has-error[b-6hqgwiracl]  .dropdown-trigger:focus {
    border-color: hsla(0, 84%, 60%, 0.7);
    box-shadow: 0 0 0 3px hsla(0, 84%, 60%, 0.1);
}

.dropdown-error[b-6hqgwiracl] {
    font-size: var(--slyd-font-size-xs, 0.75rem);
    color: var(--slyd-danger, #ef4444);
}

/* Status Message */
.contact-status-message[b-6hqgwiracl] {
    display: none;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
}

.contact-status-message.show[b-6hqgwiracl] {
    display: block;
}

.contact-status-message.success[b-6hqgwiracl] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.contact-status-message.error[b-6hqgwiracl] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.contact-status-message i[b-6hqgwiracl] {
    margin-right: 8px;
}

/* Submit Button */
.contact-submit-btn[b-6hqgwiracl] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #020617;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 28px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.contact-submit-btn:hover:not(:disabled)[b-6hqgwiracl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

.contact-submit-btn:disabled[b-6hqgwiracl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-spinner[b-6hqgwiracl] {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: #020617;
    border-radius: 50%;
    animation: spin-b-6hqgwiracl 0.8s linear infinite;
}

@keyframes spin-b-6hqgwiracl {
    to { transform: rotate(360deg); }
}

.contact-submit-btn.loading .loading-spinner[b-6hqgwiracl] {
    display: inline-block;
}

.contact-submit-btn.loading .btn-text[b-6hqgwiracl] {
    display: none;
}

/* ========================================
   STEPS GRID
   ======================================== */

.contact-steps-grid[b-6hqgwiracl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.contact-step[b-6hqgwiracl] {
    text-align: center;
    padding: 32px 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.contact-step:hover[b-6hqgwiracl] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.15);
    transform: translateY(-4px);
}

.contact-step-number[b-6hqgwiracl] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #06b6d4;
    margin: 0 auto 20px;
}

.contact-step h3[b-6hqgwiracl] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.contact-step p[b-6hqgwiracl] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

/* ========================================
   TRUST SECTION
   ======================================== */

.contact-trust-section[b-6hqgwiracl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-trust-content h2[b-6hqgwiracl] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
}

.contact-trust-content p[b-6hqgwiracl] {
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 24px;
}

.contact-nvidia-badge[b-6hqgwiracl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #76b900 0%, #5a8f00 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
}

.contact-nvidia-badge i[b-6hqgwiracl] {
    font-size: 1rem;
}

.contact-trust-logos[b-6hqgwiracl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 32px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.contact-trust-logos img[b-6hqgwiracl] {
    width: 100%;
    height: 50px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.contact-trust-logos img:hover[b-6hqgwiracl] {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
    .contact-hero-container[b-6hqgwiracl] {
        gap: 60px;
    }

    .contact-steps-grid[b-6hqgwiracl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .contact-hero-container[b-6hqgwiracl] {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contact-info-cards[b-6hqgwiracl] {
        flex-direction: row;
        justify-content: center;
    }

    .contact-info-card[b-6hqgwiracl] {
        flex: 1;
        max-width: 280px;
    }

    .contact-form-card[b-6hqgwiracl] {
        max-width: 600px;
        margin: 0 auto;
    }

    .contact-trust-section[b-6hqgwiracl] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-trust-logos[b-6hqgwiracl] {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .contact-form-row[b-6hqgwiracl] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-card[b-6hqgwiracl] {
        padding: 28px;
    }

    .contact-steps-grid[b-6hqgwiracl] {
        grid-template-columns: 1fr;
    }

    .contact-info-cards[b-6hqgwiracl] {
        flex-direction: column;
    }

    .contact-info-card[b-6hqgwiracl] {
        max-width: none;
    }

    .contact-trust-logos[b-6hqgwiracl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .contact-form-card[b-6hqgwiracl] {
        padding: 24px;
    }

    .contact-step[b-6hqgwiracl] {
        padding: 24px;
    }
}
/* /Components/Pages/Docs/Features/Instances.razor.rz.scp.css */
/* Instances Documentation Page Styles */

/* Progress Overview */
.instances-overview[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 12px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.instances-overview .overview-phase[b-epyrewzdyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.instances-overview .phase-icon[b-epyrewzdyu] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.instances-overview .overview-phase span[b-epyrewzdyu] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.instances-overview .overview-connector[b-epyrewzdyu] {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
}

/* Collapsible Phase Sections */
.instances-phase[b-epyrewzdyu] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.instances-phase .phase-header[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.instances-phase .phase-header:hover[b-epyrewzdyu] {
    background: rgba(255, 255, 255, 0.02);
}

.instances-phase .phase-number[b-epyrewzdyu] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.instances-phase .phase-info[b-epyrewzdyu] {
    flex: 1;
}

.instances-phase .phase-info h2[b-epyrewzdyu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.25rem 0;
}

.instances-phase .phase-info p[b-epyrewzdyu] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.instances-phase .phase-toggle[b-epyrewzdyu] {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease;
}

.instances-phase .phase-toggle i[b-epyrewzdyu] {
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.instances-phase.expanded .phase-toggle i[b-epyrewzdyu] {
    transform: rotate(0deg);
}

.instances-phase .phase-content[b-epyrewzdyu] {
    display: none;
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.instances-phase.expanded .phase-content[b-epyrewzdyu] {
    display: block;
}

/* Navigation Path */
.nav-path[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.nav-path .nav-item[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.nav-path .nav-item i[b-epyrewzdyu] {
    font-size: 0.875rem;
}

.nav-path .nav-item.active[b-epyrewzdyu] {
    color: #8B5CF6;
    font-weight: 600;
}

.nav-path .nav-arrow[b-epyrewzdyu] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

/* Feature Grid */
.feature-grid[b-epyrewzdyu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.feature-grid .feature-item[b-epyrewzdyu] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.feature-grid .feature-item i[b-epyrewzdyu] {
    color: #8B5CF6;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.feature-grid .feature-item strong[b-epyrewzdyu] {
    display: block;
    color: #f1f5f9;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.feature-grid .feature-item span[b-epyrewzdyu] {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

/* Config Checklist */
.config-checklist[b-epyrewzdyu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.config-checklist .config-item[b-epyrewzdyu] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.config-checklist .config-item i[b-epyrewzdyu] {
    color: #10B981;
    font-size: 1rem;
    margin-top: 0.125rem;
}

.config-checklist .config-item strong[b-epyrewzdyu] {
    display: block;
    color: #f1f5f9;
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}

.config-checklist .config-item span[b-epyrewzdyu] {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
}

/* Lifecycle Diagram */
.lifecycle-diagram[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.lifecycle-stage[b-epyrewzdyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.lifecycle-icon[b-epyrewzdyu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: white;
}

.lifecycle-icon.create[b-epyrewzdyu] {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.lifecycle-icon.start[b-epyrewzdyu] {
    background: linear-gradient(135deg, #10B981, #06B6D4);
}

.lifecycle-icon.stop[b-epyrewzdyu] {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
}

.lifecycle-icon.terminate[b-epyrewzdyu] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.lifecycle-details h3[b-epyrewzdyu] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.25rem 0;
}

.lifecycle-details p[b-epyrewzdyu] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.lifecycle-arrow[b-epyrewzdyu] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.25rem;
    padding: 0 0.5rem;
}

/* Instance States */
.instance-states[b-epyrewzdyu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.instance-state[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.instance-state.inline-state[b-epyrewzdyu] {
    display: inline-flex;
    margin-top: 0.5rem;
}

.state-indicator[b-epyrewzdyu] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.state-indicator.creating[b-epyrewzdyu] {
    background: #F59E0B;
    animation: pulse-b-epyrewzdyu 2s infinite;
}

.state-indicator.running[b-epyrewzdyu] {
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.state-indicator.starting[b-epyrewzdyu] {
    background: #06B6D4;
    animation: pulse-b-epyrewzdyu 1.5s infinite;
}

.state-indicator.stopping[b-epyrewzdyu] {
    background: #F59E0B;
    animation: pulse-b-epyrewzdyu 1.5s infinite;
}

.state-indicator.stopped[b-epyrewzdyu] {
    background: #64748B;
}

.state-indicator.restarting[b-epyrewzdyu] {
    background: #8B5CF6;
    animation: pulse-b-epyrewzdyu 1.5s infinite;
}

.state-indicator.deleted[b-epyrewzdyu] {
    background: #374151;
}

.state-indicator.error[b-epyrewzdyu] {
    background: #EF4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

@keyframes pulse-b-epyrewzdyu {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.state-details h4[b-epyrewzdyu] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.125rem 0;
}

.state-details p[b-epyrewzdyu] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Tabs */
.tabs[b-epyrewzdyu] {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
    width: fit-content;
}

.tab[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab:hover[b-epyrewzdyu] {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.tab.active[b-epyrewzdyu] {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
}

.tab-content[b-epyrewzdyu] {
    display: none;
    margin-top: 1rem;
    animation: fadeIn-b-epyrewzdyu 0.3s ease;
}

.tab-content.active[b-epyrewzdyu] {
    display: block;
}

@keyframes fadeIn-b-epyrewzdyu {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Management Grid */
.management-grid[b-epyrewzdyu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.management-card[b-epyrewzdyu] {
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.management-card.warning[b-epyrewzdyu] {
    border-color: rgba(239, 68, 68, 0.3);
}

.management-card h3[b-epyrewzdyu] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0.75rem 0 0.5rem 0;
}

.management-card > p[b-epyrewzdyu] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1rem 0;
}

.management-icon[b-epyrewzdyu] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.management-icon.start[b-epyrewzdyu] {
    background: linear-gradient(135deg, #10B981, #06B6D4);
}

.management-icon.stop[b-epyrewzdyu] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.management-icon.restart[b-epyrewzdyu] {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.management-icon.terminate[b-epyrewzdyu] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.management-steps[b-epyrewzdyu] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.management-steps span[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.management-steps span i[b-epyrewzdyu] {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.management-warning[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.management-warning i[b-epyrewzdyu] {
    color: #EF4444;
    font-size: 0.875rem;
}

.management-warning span[b-epyrewzdyu] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Monitoring Grid */
.monitoring-grid[b-epyrewzdyu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.monitoring-card[b-epyrewzdyu] {
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.monitoring-header[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.monitoring-header i[b-epyrewzdyu] {
    color: #8B5CF6;
    font-size: 1.25rem;
}

.monitoring-header h3[b-epyrewzdyu] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.monitoring-card > p[b-epyrewzdyu] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.25rem 0;
}

/* Metric List */
.metric-list[b-epyrewzdyu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.metric[b-epyrewzdyu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.metric-name[b-epyrewzdyu] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    width: 110px;
    flex-shrink: 0;
}

.metric-bar[b-epyrewzdyu] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.metric-fill[b-epyrewzdyu] {
    height: 100%;
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.metric-value[b-epyrewzdyu] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    width: 40px;
    text-align: right;
}

/* Alert List */
.alert-list[b-epyrewzdyu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alert-item[b-epyrewzdyu] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
}

.alert-item i[b-epyrewzdyu] {
    font-size: 1rem;
    margin-top: 0.125rem;
}

.alert-item.warning i[b-epyrewzdyu] {
    color: #F59E0B;
}

.alert-item.error i[b-epyrewzdyu] {
    color: #EF4444;
}

.alert-item.info i[b-epyrewzdyu] {
    color: #06B6D4;
}

.alert-item strong[b-epyrewzdyu] {
    display: block;
    font-size: 0.8125rem;
    color: #f1f5f9;
    margin-bottom: 0.125rem;
}

.alert-item span[b-epyrewzdyu] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Coming Soon Badge */
.coming-soon-badge[b-epyrewzdyu] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #F59E0B;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 768px) {
    .instances-overview[b-epyrewzdyu] {
        gap: 1rem;
    }

    .instances-overview .overview-connector[b-epyrewzdyu] {
        display: none;
    }

    .instances-overview .overview-phase[b-epyrewzdyu] {
        width: 45%;
    }

    .feature-grid[b-epyrewzdyu],
    .config-checklist[b-epyrewzdyu],
    .instance-states[b-epyrewzdyu],
    .management-grid[b-epyrewzdyu],
    .monitoring-grid[b-epyrewzdyu] {
        grid-template-columns: 1fr;
    }

    .lifecycle-diagram[b-epyrewzdyu] {
        flex-direction: column;
        gap: 1rem;
    }

    .lifecycle-arrow[b-epyrewzdyu] {
        transform: rotate(90deg);
    }

    .instances-phase .phase-header[b-epyrewzdyu] {
        padding: 1rem;
    }

    .instances-phase .phase-info h2[b-epyrewzdyu] {
        font-size: 1.125rem;
    }

    .tabs[b-epyrewzdyu] {
        width: 100%;
    }

    .tab[b-epyrewzdyu] {
        flex: 1;
        justify-content: center;
    }

    .metric[b-epyrewzdyu] {
        flex-wrap: wrap;
    }

    .metric-name[b-epyrewzdyu] {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .metric-bar[b-epyrewzdyu] {
        flex: 1;
    }
}
/* /Components/Pages/Financing/Financing.razor.rz.scp.css */
/* ============================================================
   Financing (/financing) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD Financing v1.html (L34-204),
   namespaced v3fin-, scoped under .v3fin wrapper.
   ============================================================ */

.v3fin[b-ncau2jtjlk] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --primary-dark: var(--slyd-primary-dark);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04));
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3fin *[b-ncau2jtjlk],
.v3fin *[b-ncau2jtjlk]::before,
.v3fin *[b-ncau2jtjlk]::after { box-sizing: border-box; }

.v3fin a[b-ncau2jtjlk] { color: inherit; text-decoration: none; }
.v3fin button[b-ncau2jtjlk] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3fin .v3fin-wrap[b-ncau2jtjlk] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3fin .v3fin-wrap[b-ncau2jtjlk] { padding: 0 20px; } }

.v3fin .v3fin-a[b-ncau2jtjlk] { color: var(--primary); }

/* Buttons */
.v3fin .v3fin-btn[b-ncau2jtjlk] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3fin .v3fin-btn-ghost[b-ncau2jtjlk] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3fin .v3fin-btn-ghost:hover[b-ncau2jtjlk] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3fin .v3fin-btn-primary[b-ncau2jtjlk] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3fin .v3fin-btn-primary:hover[b-ncau2jtjlk] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3fin .v3fin-btn-indigo[b-ncau2jtjlk] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.v3fin .v3fin-btn-indigo:hover[b-ncau2jtjlk] { filter: brightness(1.1); transform: translateY(-1px); }

.v3fin .v3fin-arr[b-ncau2jtjlk] { font-family: var(--font-mono); opacity: .7; }

/* ───── HERO ───── */

.v3fin .v3fin-hero[b-ncau2jtjlk] {
    position: relative;
    overflow: hidden;
    padding: 80px 0 48px;
}

.v3fin .v3fin-hero[b-ncau2jtjlk]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 520px at 75% 0%, var(--primary-glow), transparent 65%);
}

.v3fin .v3fin-hero[b-ncau2jtjlk]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
}

.v3fin .v3fin-eyebrow[b-ncau2jtjlk] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 20px;
}

.v3fin .v3fin-eyebrow[b-ncau2jtjlk]::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

.v3fin .v3fin-h1[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 6.5vw, 80px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
    max-width: 1050px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3fin .v3fin-sub[b-ncau2jtjlk] {
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.5;
    margin: 0 0 40px;
}

/* ───── THREE PATHS ───── */

.v3fin .v3fin-paths[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.v3fin .v3fin-path[b-ncau2jtjlk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 30px 28px 26px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}

.v3fin .v3fin-path:hover[b-ncau2jtjlk] { transform: translateY(-3px); border-color: var(--primary); }

.v3fin .v3fin-path-feature[b-ncau2jtjlk] {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 16px 50px -20px var(--primary-glow);
}

.v3fin .v3fin-path-feature[b-ncau2jtjlk]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3fin .v3fin-pl[b-ncau2jtjlk] {
    position: relative;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v3fin .v3fin-path-feature .v3fin-pl[b-ncau2jtjlk] { color: var(--primary); }

.v3fin .v3fin-rec[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--primary);
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--primary-soft);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3fin .v3fin-ph[b-ncau2jtjlk] {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3fin .v3fin-ptag[b-ncau2jtjlk] {
    position: relative;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 20px;
    min-height: 42px;
}

.v3fin .v3fin-pquote[b-ncau2jtjlk] {
    position: relative;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.v3fin .v3fin-big[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text-primary);
}

.v3fin .v3fin-u[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}

.v3fin .v3fin-qsub[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 6px;
}

.v3fin .v3fin-pfeats[b-ncau2jtjlk] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
}

.v3fin .v3fin-pf[b-ncau2jtjlk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.v3fin .v3fin-ck[b-ncau2jtjlk] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--success) 16%, transparent);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.v3fin .v3fin-ck svg[b-ncau2jtjlk] { width: 10px; height: 10px; }
.v3fin .v3fin-pf strong[b-ncau2jtjlk] { color: var(--text-primary); font-weight: 600; }

.v3fin .v3fin-pcta[b-ncau2jtjlk] { position: relative; }
.v3fin .v3fin-pcta .v3fin-btn[b-ncau2jtjlk] { width: 100%; justify-content: center; }

/* ───── SECTION CHROME ───── */

.v3fin .v3fin-section[b-ncau2jtjlk] {
    padding: 72px 0;
    border-top: 1px solid var(--border-subtle);
}

.v3fin .v3fin-section-alt[b-ncau2jtjlk] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3fin .v3fin-section-head[b-ncau2jtjlk] { margin-bottom: 36px; max-width: 760px; }

.v3fin .v3fin-kicker[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

.v3fin .v3fin-sh[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3fin .v3fin-lede[b-ncau2jtjlk] {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ───── OFFTAKE ───── */

.v3fin .v3fin-offtake[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.v3fin .v3fin-off-card[b-ncau2jtjlk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
}

.v3fin .v3fin-ol[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.v3fin .v3fin-apr[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
}

.v3fin .v3fin-off-none .v3fin-apr[b-ncau2jtjlk] { color: var(--text-secondary); }
.v3fin .v3fin-off-partial .v3fin-apr[b-ncau2jtjlk] { color: var(--primary); }
.v3fin .v3fin-off-full .v3fin-apr[b-ncau2jtjlk] { color: var(--success); }

.v3fin .v3fin-od[b-ncau2jtjlk] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.v3fin .v3fin-obar[b-ncau2jtjlk] {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-input);
    overflow: hidden;
    margin-top: 16px;
}

.v3fin .v3fin-of[b-ncau2jtjlk] { height: 100%; border-radius: 3px; }
.v3fin .v3fin-off-none .v3fin-of[b-ncau2jtjlk] { width: 35%; background: var(--text-tertiary); }
.v3fin .v3fin-off-partial .v3fin-of[b-ncau2jtjlk] { width: 68%; background: var(--primary); }
.v3fin .v3fin-off-full .v3fin-of[b-ncau2jtjlk] { width: 100%; background: var(--success); }

/* ───── HOW IT WORKS ───── */

.v3fin .v3fin-steps[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v3fin .v3fin-fstep[b-ncau2jtjlk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    position: relative;
}

.v3fin .v3fin-n[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v3fin .v3fin-dot[b-ncau2jtjlk] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.v3fin .v3fin-fh[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3fin .v3fin-fp[b-ncau2jtjlk] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

.v3fin .v3fin-fstep[b-ncau2jtjlk]::after {
    content: "→";
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-body);
    width: 14px;
    text-align: center;
    z-index: 1;
}

.v3fin .v3fin-fstep:last-child[b-ncau2jtjlk]::after { display: none; }
.v3fin .v3fin-section-alt .v3fin-fstep[b-ncau2jtjlk]::after { background: var(--bg-elevated); }

/* ───── LENDER STRIP ───── */

.v3fin .v3fin-lender[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}

.v3fin .v3fin-lh[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--text-primary);
}

.v3fin .v3fin-lp[b-ncau2jtjlk] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 18px;
}

.v3fin .v3fin-lfeats[b-ncau2jtjlk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v3fin .v3fin-lf[b-ncau2jtjlk] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3fin .v3fin-lc[b-ncau2jtjlk] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.v3fin .v3fin-lc svg[b-ncau2jtjlk] { width: 11px; height: 11px; }
.v3fin .v3fin-lf strong[b-ncau2jtjlk] { color: var(--text-primary); font-weight: 600; }

.v3fin .v3fin-lender-visual[b-ncau2jtjlk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
}

.v3fin .v3fin-lender-visual[b-ncau2jtjlk]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    opacity: .5;
    pointer-events: none;
}

.v3fin .v3fin-lv-lbl[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    position: relative;
}

.v3fin .v3fin-lv-rows[b-ncau2jtjlk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.v3fin .v3fin-lv-row[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.v3fin .v3fin-lv-ic[b-ncau2jtjlk] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v3fin .v3fin-lv-ic svg[b-ncau2jtjlk] { width: 15px; height: 15px; }

.v3fin .v3fin-lv-n[b-ncau2jtjlk] {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.v3fin .v3fin-lv-v[b-ncau2jtjlk] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

/* ───── FAQ ───── */

.v3fin .v3fin-faq-list[b-ncau2jtjlk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3fin .v3fin-faq[b-ncau2jtjlk] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.v3fin .v3fin-faq-q[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.v3fin .v3fin-faq-q:hover[b-ncau2jtjlk] { background: var(--bg-elevated); }

.v3fin .v3fin-ic[b-ncau2jtjlk] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform .15s;
}

.v3fin .v3fin-ic svg[b-ncau2jtjlk] { width: 100%; height: 100%; }

.v3fin .v3fin-faq.v3fin-open .v3fin-faq-q .v3fin-ic[b-ncau2jtjlk] {
    transform: rotate(45deg);
    color: var(--primary);
}

.v3fin .v3fin-faq-a[b-ncau2jtjlk] {
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.v3fin .v3fin-faq.v3fin-open .v3fin-faq-a[b-ncau2jtjlk] {
    padding: 0 22px 18px;
    max-height: 400px;
}

/* ───── CTA STRIP ───── */

.v3fin .v3fin-cta-strip[b-ncau2jtjlk] { padding: 72px 0 96px; }

.v3fin .v3fin-cta-card[b-ncau2jtjlk] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.v3fin .v3fin-cta-card[b-ncau2jtjlk]::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3fin .v3fin-ctt[b-ncau2jtjlk] { position: relative; }

.v3fin .v3fin-cth[b-ncau2jtjlk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.1;
    color: var(--text-primary);
}

.v3fin .v3fin-ctp[b-ncau2jtjlk] {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 520px;
    line-height: 1.55;
}

.v3fin .v3fin-cact[b-ncau2jtjlk] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3fin .v3fin-paths[b-ncau2jtjlk] { grid-template-columns: 1fr; }
    .v3fin .v3fin-offtake[b-ncau2jtjlk] { grid-template-columns: 1fr; }
    .v3fin .v3fin-steps[b-ncau2jtjlk] { grid-template-columns: repeat(2, 1fr); }
    .v3fin .v3fin-fstep[b-ncau2jtjlk]::after { display: none; }
    .v3fin .v3fin-lender[b-ncau2jtjlk] { grid-template-columns: 1fr; gap: 32px; }
    .v3fin .v3fin-cta-card[b-ncau2jtjlk] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
    .v3fin .v3fin-steps[b-ncau2jtjlk] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Financing/FinancingApplication.razor.rz.scp.css */
/* ==========================================================================
   FINANCING APPLICATION PAGE STYLES
   Prefix: finapply-
   Page-specific styles only - uses generic-hero.css and generic-sections.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   BRAND COLORS
   -------------------------------------------------------------------------- */
:root[b-hjtayshnqb] {
    --brand-primary: #06b6d4;
    --brand-primary-rgb: 6, 182, 212;
    --brand-secondary: #8b5cf6;
    --brand-secondary-rgb: 139, 92, 246;
}

/* --------------------------------------------------------------------------
   HERO SECTION (custom - not using Hero component)
   -------------------------------------------------------------------------- */
.finapply-hero[b-hjtayshnqb] {
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    background: linear-gradient(180deg, #020617 0%, #0a1018 100%);
}

.finapply-hero[b-hjtayshnqb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.finapply-hero-container[b-hjtayshnqb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Hero Content */
.finapply-hero-content[b-hjtayshnqb] {
    max-width: 600px;
}

.finapply-tag[b-hjtayshnqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #06b6d4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.finapply-headline[b-hjtayshnqb] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    color: #f1f5f9;
    margin: 0 0 24px;
}

.finapply-headline .accent[b-hjtayshnqb] {
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.finapply-subhead[b-hjtayshnqb] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px;
}

/* Hero Props */
.finapply-props[b-hjtayshnqb] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.finapply-prop[b-hjtayshnqb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #cbd5e1;
}

.finapply-prop :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

/* Hero Preview */
.finapply-hero-preview[b-hjtayshnqb] {
    position: relative;
}

.finapply-grid-deco[b-hjtayshnqb] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
}

.finapply-preview-card[b-hjtayshnqb] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(10px);
}

.finapply-preview-icon[b-hjtayshnqb] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
    margin-bottom: 20px;
}

.finapply-preview-icon :global(svg)[b-hjtayshnqb] {
    width: 28px;
    height: 28px;
    color: #06b6d4;
}

.finapply-preview-card h4[b-hjtayshnqb] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px;
}

.finapply-preview-list[b-hjtayshnqb] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.finapply-preview-list li[b-hjtayshnqb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.finapply-preview-list li:last-child[b-hjtayshnqb] {
    border-bottom: none;
}

.finapply-preview-list li :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
    color: #22c55e;
}

/* --------------------------------------------------------------------------
   FORM INTRO
   -------------------------------------------------------------------------- */
.finapply-intro[b-hjtayshnqb] {
    max-width: 800px;
    margin: 0 auto 48px;
    text-align: center;
}

.finapply-intro > p[b-hjtayshnqb] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0 0 24px;
}

.finapply-intro-details[b-hjtayshnqb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: left;
    margin-bottom: 24px;
}

.finapply-intro-item[b-hjtayshnqb] {
    padding: 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.finapply-intro-item strong[b-hjtayshnqb] {
    display: block;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.finapply-intro-item ul[b-hjtayshnqb] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.finapply-intro-item li[b-hjtayshnqb] {
    padding: 4px 0;
    color: #94a3b8;
    font-size: 0.9375rem;
}

.finapply-intro-item li[b-hjtayshnqb]::before {
    content: '•';
    color: #06b6d4;
    margin-right: 8px;
}

.finapply-intro-item p[b-hjtayshnqb] {
    margin: 0;
    color: #94a3b8;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.finapply-privacy-note[b-hjtayshnqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.finapply-privacy-note :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

/* --------------------------------------------------------------------------
   PROGRESS INDICATOR
   -------------------------------------------------------------------------- */
.finapply-progress[b-hjtayshnqb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 600px;
    margin: 0 auto 48px;
}

.finapply-progress-step[b-hjtayshnqb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.finapply-step-circle[b-hjtayshnqb] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s ease;
}

.finapply-progress-step.active .finapply-step-circle[b-hjtayshnqb] {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
    color: #06b6d4;
}

.finapply-progress-step.completed .finapply-step-circle[b-hjtayshnqb] {
    background: #06b6d4;
    border-color: #06b6d4;
    color: #020617;
}

.finapply-progress-step.completed .finapply-step-circle :global(svg)[b-hjtayshnqb] {
    width: 18px;
    height: 18px;
}

.finapply-step-label[b-hjtayshnqb] {
    font-size: 0.8125rem;
    color: #64748b;
    transition: color 0.3s ease;
}

.finapply-progress-step.active .finapply-step-label[b-hjtayshnqb],
.finapply-progress-step.completed .finapply-step-label[b-hjtayshnqb] {
    color: #cbd5e1;
}

.finapply-progress-line[b-hjtayshnqb] {
    flex: 1;
    height: 2px;
    min-width: 40px;
    max-width: 80px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 8px;
    margin-bottom: 28px;
    transition: background 0.3s ease;
}

.finapply-progress-line.active[b-hjtayshnqb] {
    background: #06b6d4;
}

/* --------------------------------------------------------------------------
   FORM CARD
   -------------------------------------------------------------------------- */
.finapply-form-card[b-hjtayshnqb] {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 48px;
    backdrop-filter: blur(10px);
}

.finapply-step-content[b-hjtayshnqb] {
    margin-bottom: 32px;
}

.finapply-step-title[b-hjtayshnqb] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Form Layout */
.finapply-form-row[b-hjtayshnqb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.finapply-form-group[b-hjtayshnqb] {
    margin-bottom: 24px;
}

.finapply-form-group label[b-hjtayshnqb] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f1f5f9;
}

.finapply-form-group .required[b-hjtayshnqb] {
    color: #ef4444;
    margin-left: 2px;
}

.finapply-form-group .label-hint[b-hjtayshnqb] {
    font-weight: 400;
    color: #64748b;
    font-size: 0.875rem;
}

/* Input Styles */
.finapply-form-group :global(input[type="text"])[b-hjtayshnqb],
.finapply-form-group :global(input[type="email"])[b-hjtayshnqb],
.finapply-form-group :global(input[type="tel"])[b-hjtayshnqb],
.finapply-form-group :global(select)[b-hjtayshnqb],
.finapply-form-group :global(textarea)[b-hjtayshnqb] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.finapply-form-group :global(input)[b-hjtayshnqb]::placeholder,
.finapply-form-group :global(textarea)[b-hjtayshnqb]::placeholder {
    color: #475569;
}

.finapply-form-group :global(input):focus[b-hjtayshnqb],
.finapply-form-group :global(select):focus[b-hjtayshnqb],
.finapply-form-group :global(textarea):focus[b-hjtayshnqb] {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.finapply-form-group :global(select)[b-hjtayshnqb] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F8FAFC' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.finapply-form-group :global(textarea)[b-hjtayshnqb] {
    min-height: 120px;
    resize: vertical;
}

/* Validation Messages */
.finapply-form-group :global(.validation-message)[b-hjtayshnqb],
.validation-message[b-hjtayshnqb] {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #ef4444;
}

.finapply-helper-text[b-hjtayshnqb] {
    margin-top: 8px;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.finapply-char-count[b-hjtayshnqb] {
    text-align: right;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 4px;
}

/* Checkbox Grid */
.finapply-checkbox-grid[b-hjtayshnqb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.finapply-checkbox-item[b-hjtayshnqb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.finapply-checkbox-item:hover[b-hjtayshnqb] {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

.finapply-checkbox-item input[type="checkbox"][b-hjtayshnqb] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #06b6d4;
    cursor: pointer;
}

.finapply-checkbox-item span[b-hjtayshnqb] {
    font-size: 0.9375rem;
    color: #cbd5e1;
    line-height: 1.4;
}

/* Terms Checkbox */
.finapply-terms-group[b-hjtayshnqb] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.finapply-terms-checkbox[b-hjtayshnqb] {
    background: transparent;
    border: none;
    padding: 0;
}

.finapply-terms-checkbox span[b-hjtayshnqb] {
    font-size: 0.875rem;
    line-height: 1.6;
}

.finapply-terms-checkbox a[b-hjtayshnqb] {
    color: #06b6d4;
    text-decoration: none;
}

.finapply-terms-checkbox a:hover[b-hjtayshnqb] {
    text-decoration: underline;
}

/* Error Banner */
.finapply-error-banner[b-hjtayshnqb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    margin-bottom: 24px;
    color: #fca5a5;
    font-size: 0.9375rem;
}

.finapply-error-banner :global(svg)[b-hjtayshnqb] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   NAVIGATION BUTTONS
   -------------------------------------------------------------------------- */
.finapply-nav-buttons[b-hjtayshnqb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.finapply-btn-back[b-hjtayshnqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #cbd5e1;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.finapply-btn-back:hover[b-hjtayshnqb] {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.finapply-btn-back :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
}

.finapply-btn-next[b-hjtayshnqb],
.finapply-btn-submit[b-hjtayshnqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 8px;
    color: #020617;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.finapply-btn-next:hover[b-hjtayshnqb],
.finapply-btn-submit:hover:not(:disabled)[b-hjtayshnqb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.finapply-btn-next :global(svg)[b-hjtayshnqb],
.finapply-btn-submit :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
}

.finapply-btn-submit:disabled[b-hjtayshnqb] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.finapply-spinner[b-hjtayshnqb] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(2, 6, 23, 0.3);
    border-top-color: #020617;
    border-radius: 50%;
    animation: finapply-spin-b-hjtayshnqb 0.8s linear infinite;
}

@keyframes finapply-spin-b-hjtayshnqb {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   SUCCESS STATE
   -------------------------------------------------------------------------- */
.finapply-success[b-hjtayshnqb] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 48px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 16px;
}

.finapply-success-icon[b-hjtayshnqb] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    background: rgba(6, 182, 212, 0.1);
    border: 2px solid #06b6d4;
    border-radius: 50%;
}

.finapply-success-icon :global(svg)[b-hjtayshnqb] {
    width: 40px;
    height: 40px;
    color: #06b6d4;
}

.finapply-success h2[b-hjtayshnqb] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px;
}

.finapply-success-message[b-hjtayshnqb] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px;
}

.finapply-success-next[b-hjtayshnqb] {
    text-align: left;
    padding: 24px;
    background: rgba(2, 6, 23, 0.5);
    border-radius: 12px;
    margin-bottom: 24px;
}

.finapply-success-next h4[b-hjtayshnqb] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px;
}

.finapply-success-next ol[b-hjtayshnqb] {
    margin: 0;
    padding-left: 20px;
}

.finapply-success-next li[b-hjtayshnqb] {
    padding: 8px 0;
    color: #cbd5e1;
    font-size: 0.9375rem;
}

.finapply-success-email[b-hjtayshnqb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    color: #cbd5e1;
    font-size: 0.9375rem;
}

.finapply-success-email :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.finapply-success-contact[b-hjtayshnqb] {
    margin: 0 0 32px;
    color: #64748b;
    font-size: 0.9375rem;
}

.finapply-success-contact a[b-hjtayshnqb] {
    color: #06b6d4;
    text-decoration: none;
}

.finapply-success-contact a:hover[b-hjtayshnqb] {
    text-decoration: underline;
}

.finapply-success-actions[b-hjtayshnqb] {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.finapply-btn-secondary[b-hjtayshnqb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 8px;
    color: #06b6d4;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.finapply-btn-secondary:hover[b-hjtayshnqb] {
    background: rgba(6, 182, 212, 0.1);
    border-color: #06b6d4;
}

.finapply-btn-secondary :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   PROCESS SECTION
   -------------------------------------------------------------------------- */
.finapply-process-grid[b-hjtayshnqb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.finapply-process-step[b-hjtayshnqb] {
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-align: center;
}

.finapply-process-number[b-hjtayshnqb] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    color: #06b6d4;
}

.finapply-process-step h4[b-hjtayshnqb] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px;
}

.finapply-process-time[b-hjtayshnqb] {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #06b6d4;
    margin-bottom: 12px;
}

.finapply-process-step p:not(.finapply-process-time)[b-hjtayshnqb] {
    margin: 0;
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   TRUST SECTION
   -------------------------------------------------------------------------- */
.finapply-trust-grid[b-hjtayshnqb] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
}

.finapply-trust-card[b-hjtayshnqb] {
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.finapply-trust-card h4[b-hjtayshnqb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
}

.finapply-partner-logos[b-hjtayshnqb] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.finapply-partner-link[b-hjtayshnqb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.finapply-partner-link img[b-hjtayshnqb] {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.finapply-partner-link span[b-hjtayshnqb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.finapply-partner-link:hover img[b-hjtayshnqb] {
    opacity: 1;
}

.finapply-partner-link:hover span[b-hjtayshnqb] {
    color: #06b6d4;
}

.finapply-partner-link span.light[b-hjtayshnqb] {
    color: #cbd5e1;
}

.finapply-stats[b-hjtayshnqb] {
    display: flex;
    gap: 24px;
}

.finapply-stat[b-hjtayshnqb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.finapply-stat-value[b-hjtayshnqb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #06b6d4;
}

.finapply-stat-label[b-hjtayshnqb] {
    font-size: 0.8125rem;
    color: #64748b;
}

.finapply-security-notes p[b-hjtayshnqb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.finapply-security-notes p:last-child[b-hjtayshnqb] {
    margin-bottom: 0;
}

.finapply-security-notes :global(svg)[b-hjtayshnqb] {
    width: 16px;
    height: 16px;
    color: #22c55e;
}

/* --------------------------------------------------------------------------
   RESPONSIVE STYLES
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .finapply-hero-container[b-hjtayshnqb] {
        gap: 48px;
    }

    .finapply-trust-grid[b-hjtayshnqb] {
        grid-template-columns: 1fr 1fr;
    }

    .finapply-trust-card:first-child[b-hjtayshnqb] {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    .finapply-hero-container[b-hjtayshnqb] {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .finapply-hero-preview[b-hjtayshnqb] {
        max-width: 400px;
        margin: 0 auto;
    }

    .finapply-process-grid[b-hjtayshnqb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .finapply-hero[b-hjtayshnqb] {
        padding: 80px 0 60px;
    }

    .finapply-hero-container[b-hjtayshnqb] {
        padding: 0 24px;
    }

    .finapply-props[b-hjtayshnqb] {
        flex-direction: column;
        gap: 12px;
    }

    .finapply-prop[b-hjtayshnqb] {
        justify-content: center;
    }

    .finapply-intro-details[b-hjtayshnqb] {
        grid-template-columns: 1fr;
    }

    .finapply-progress[b-hjtayshnqb] {
        gap: 0;
    }

    .finapply-step-label[b-hjtayshnqb] {
        font-size: 0.6875rem;
    }

    .finapply-progress-line[b-hjtayshnqb] {
        min-width: 20px;
        max-width: 40px;
    }

    .finapply-form-card[b-hjtayshnqb] {
        padding: 24px;
    }

    .finapply-form-row[b-hjtayshnqb] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .finapply-checkbox-grid[b-hjtayshnqb] {
        grid-template-columns: 1fr;
    }

    .finapply-nav-buttons[b-hjtayshnqb] {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .finapply-btn-back[b-hjtayshnqb],
    .finapply-btn-next[b-hjtayshnqb],
    .finapply-btn-submit[b-hjtayshnqb] {
        width: 100%;
        justify-content: center;
    }

    .finapply-process-grid[b-hjtayshnqb] {
        grid-template-columns: 1fr;
    }

    .finapply-trust-grid[b-hjtayshnqb] {
        grid-template-columns: 1fr;
    }

    .finapply-trust-card:first-child[b-hjtayshnqb] {
        grid-column: span 1;
    }

    .finapply-partner-logos[b-hjtayshnqb] {
        justify-content: center;
    }

    .finapply-success-actions[b-hjtayshnqb] {
        flex-direction: column;
    }

    .finapply-btn-secondary[b-hjtayshnqb] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .finapply-headline[b-hjtayshnqb] {
        font-size: 2rem;
    }

    .finapply-step-circle[b-hjtayshnqb] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .finapply-progress-line[b-hjtayshnqb] {
        min-width: 16px;
        max-width: 24px;
        margin: 0 4px;
        margin-bottom: 24px;
    }
}
/* /Components/Pages/Financing/GpuFinancing.razor.rz.scp.css */
/* ===========================================
   GPU FINANCING PAGE - SLYD DESIGN SYSTEM
   Prefix: gpufin-
   Page-specific styles only - uses generic-hero.css and generic-sections.css
   =========================================== */

/* ===========================================
   BRAND COLORS
   =========================================== */
:root[b-fp95el57um] {
    --brand-primary: #10b981;
    --brand-primary-rgb: 16, 185, 129;
    --brand-secondary: #f59e0b;
    --brand-secondary-rgb: 245, 158, 11;
}

/* ===========================================
   HERO PREVIEW - FINANCING CALCULATOR
   =========================================== */
.gpufin-preview-card[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}

.gpufin-preview-header[b-fp95el57um] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gpufin-preview-title[b-fp95el57um] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.gpufin-preview-title :deep(.icon)[b-fp95el57um] {
    width: 16px;
    height: 16px;
    color: #f59e0b;
}

.gpufin-preview-badge[b-fp95el57um] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
    border-radius: 4px;
}

.gpufin-preview-content[b-fp95el57um] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gpufin-calc-item[b-fp95el57um] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gpufin-calc-label[b-fp95el57um] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.gpufin-calc-value[b-fp95el57um] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.gpufin-calc-value.large[b-fp95el57um] {
    font-size: 1.5rem;
    color: #f59e0b;
}

.gpufin-calc-item.highlight[b-fp95el57um] {
    padding: 16px;
    background: rgba(245,158,11,0.08);
    border-radius: 8px;
    margin-top: 8px;
}

.gpufin-calc-divider[b-fp95el57um] {
    height: 1px;
    background: rgba(255,255,255,0.06);
}

.gpufin-calc-note[b-fp95el57um] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    color: #64748b;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
}

.gpufin-calc-note :deep(.icon)[b-fp95el57um] {
    width: 14px;
    height: 14px;
    color: #64748b;
    flex-shrink: 0;
    margin-top: 1px;
}

.gpufin-preview-gpu[b-fp95el57um] {
    margin-top: 8px;
}

.gpufin-gpu-badge[b-fp95el57um] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.2);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #06b6d4;
}

.gpufin-gpu-badge :deep(.icon)[b-fp95el57um] {
    width: 14px;
    height: 14px;
}

/* ===========================================
   BREADCRUMB
   =========================================== */
.gpufin-breadcrumb-wrapper[b-fp95el57um] {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.container[b-fp95el57um] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.gpufin-opening[b-fp95el57um] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.gpufin-opening p[b-fp95el57um] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0 0 24px 0;
}

.gpufin-opening-lead[b-fp95el57um] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
}

.gpufin-opening-highlight[b-fp95el57um] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    margin-top: 32px !important;
    padding: 24px 32px;
    background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 12px;
}

/* ===========================================
   EQUIPMENT TABLES
   =========================================== */
.gpufin-equipment-grid[b-fp95el57um] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.gpufin-equipment-card[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
}

.gpufin-equipment-header[b-fp95el57um] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gpufin-equipment-header.nvidia[b-fp95el57um] {
    background: rgba(118, 185, 0, 0.08);
}

.gpufin-equipment-header.nvidia :deep(.icon)[b-fp95el57um] {
    color: #76b900;
}

.gpufin-equipment-header.amd[b-fp95el57um] {
    background: rgba(192, 192, 192, 0.08);
}

.gpufin-equipment-header.amd :deep(.icon)[b-fp95el57um] {
    color: #c0c0c0;
}

.gpufin-equipment-header :deep(.icon)[b-fp95el57um] {
    width: 20px;
    height: 20px;
}

.gpufin-equipment-header h3[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.gpufin-equipment-table[b-fp95el57um] {
    width: 100%;
    border-collapse: collapse;
}

.gpufin-equipment-table th[b-fp95el57um],
.gpufin-equipment-table td[b-fp95el57um] {
    padding: 14px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gpufin-equipment-table th[b-fp95el57um] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: rgba(255,255,255,0.02);
}

.gpufin-equipment-table td[b-fp95el57um] {
    font-size: 0.875rem;
    color: #cbd5e1;
}

.gpufin-equipment-table td:first-child[b-fp95el57um] {
    font-weight: 600;
    color: #f1f5f9;
}

.gpufin-equipment-table td:last-child[b-fp95el57um] {
    text-align: center;
}

.gpufin-equipment-table td :deep(.icon)[b-fp95el57um] {
    width: 16px;
    height: 16px;
    color: #22c55e;
}

.gpufin-equipment-table tbody tr:hover[b-fp95el57um] {
    background: rgba(255,255,255,0.02);
}

/* Systems Card */
.gpufin-systems-card[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
    text-align: center;
}

.gpufin-systems-card h3[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.gpufin-systems-card > p[b-fp95el57um] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

.gpufin-oem-list[b-fp95el57um] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.gpufin-oem-list span[b-fp95el57um] {
    padding: 10px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 0.875rem;
    color: #cbd5e1;
}

.gpufin-amount-badges[b-fp95el57um] {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.gpufin-amount-badge[b-fp95el57um] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 32px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 10px;
}

.gpufin-amount-label[b-fp95el57um] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.gpufin-amount-value[b-fp95el57um] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f59e0b;
}

/* ===========================================
   FINANCING TERMS
   =========================================== */
.gpufin-terms-grid[b-fp95el57um] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.gpufin-term-card[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.gpufin-term-card:hover[b-fp95el57um] {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-4px);
}

.gpufin-term-months[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #f59e0b;
    line-height: 1;
}

.gpufin-term-label[b-fp95el57um] {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 16px;
}

.gpufin-term-card p[b-fp95el57um] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

.gpufin-terms-notes[b-fp95el57um] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.gpufin-terms-note[b-fp95el57um] {
    font-size: 0.9375rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.gpufin-terms-note strong[b-fp95el57um] {
    color: #f1f5f9;
}

.gpufin-terms-disclaimer[b-fp95el57um] {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    margin: 24px 0 0 0;
}

/* ===========================================
   COST COMPARISON
   =========================================== */
.gpufin-comparison[b-fp95el57um] {
    max-width: 900px;
    margin: 0 auto;
}

.gpufin-comparison-table[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 32px;
}

.gpufin-comparison-row[b-fp95el57um] {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gpufin-comparison-row:last-child[b-fp95el57um] {
    border-bottom: none;
}

.gpufin-comparison-row.header[b-fp95el57um] {
    background: rgba(255,255,255,0.02);
}

.gpufin-comparison-row.header span[b-fp95el57um] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.gpufin-comparison-row span[b-fp95el57um] {
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.gpufin-comparison-row span:first-child[b-fp95el57um] {
    font-weight: 600;
    color: #f1f5f9;
}

.gpufin-comparison-row span:not(:first-child)[b-fp95el57um] {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}

.gpufin-comparison-row.capex span:not(:first-child)[b-fp95el57um] {
    color: #ef4444;
}

.gpufin-comparison-row.financed span:not(:first-child)[b-fp95el57um] {
    color: #22c55e;
}

.gpufin-comparison-details[b-fp95el57um] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.gpufin-comparison-side[b-fp95el57um] {
    padding: 24px;
    border-radius: 12px;
}

.gpufin-comparison-side.capex[b-fp95el57um] {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.gpufin-comparison-side.financed[b-fp95el57um] {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.gpufin-comparison-side h4[b-fp95el57um] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.gpufin-comparison-side.capex h4[b-fp95el57um] {
    color: #ef4444;
}

.gpufin-comparison-side.financed h4[b-fp95el57um] {
    color: #22c55e;
}

.gpufin-comparison-side h4 :deep(.icon)[b-fp95el57um] {
    width: 18px;
    height: 18px;
}

.gpufin-comparison-side ul[b-fp95el57um] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gpufin-comparison-side ul li[b-fp95el57um] {
    font-size: 0.875rem;
    color: #cbd5e1;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gpufin-comparison-side ul li:last-child[b-fp95el57um] {
    border-bottom: none;
}

.gpufin-comparison-note[b-fp95el57um] {
    font-size: 0.875rem;
    color: #64748b;
    text-align: center;
    font-style: italic;
    margin: 0;
}

/* ===========================================
   BENEFITS
   =========================================== */
.gpufin-benefits-grid[b-fp95el57um] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gpufin-benefit-card[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
    transition: all 0.3s ease;
}

.gpufin-benefit-card:hover[b-fp95el57um] {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.gpufin-benefit-icon[b-fp95el57um] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.gpufin-benefit-icon.cyan[b-fp95el57um] {
    background: rgba(6,182,212,0.12);
}

.gpufin-benefit-icon.cyan :deep(.icon)[b-fp95el57um] {
    color: #06b6d4;
}

.gpufin-benefit-icon.gold[b-fp95el57um] {
    background: rgba(245,158,11,0.12);
}

.gpufin-benefit-icon.gold :deep(.icon)[b-fp95el57um] {
    color: #f59e0b;
}

.gpufin-benefit-icon.purple[b-fp95el57um] {
    background: rgba(139,92,246,0.12);
}

.gpufin-benefit-icon.purple :deep(.icon)[b-fp95el57um] {
    color: #8b5cf6;
}

.gpufin-benefit-icon.green[b-fp95el57um] {
    background: rgba(34,197,94,0.12);
}

.gpufin-benefit-icon.green :deep(.icon)[b-fp95el57um] {
    color: #22c55e;
}

.gpufin-benefit-icon :deep(.icon)[b-fp95el57um] {
    width: 24px;
    height: 24px;
}

.gpufin-benefit-card h3[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.gpufin-benefit-card p[b-fp95el57um] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   SUPPORTED HARDWARE
   =========================================== */
.gpufin-hardware-grid[b-fp95el57um] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.gpufin-hardware-card[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
}

.gpufin-hardware-card h3[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gpufin-hardware-section[b-fp95el57um] {
    margin-bottom: 24px;
}

.gpufin-hardware-section:last-child[b-fp95el57um] {
    margin-bottom: 0;
}

.gpufin-hardware-section h4[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #06b6d4;
    margin: 0 0 12px 0;
}

.gpufin-hardware-section ul[b-fp95el57um] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gpufin-hardware-section ul li[b-fp95el57um] {
    font-size: 0.875rem;
    color: #cbd5e1;
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

.gpufin-hardware-section ul li[b-fp95el57um]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #64748b;
    border-radius: 50%;
}

/* ===========================================
   PROCESS TIMELINE
   =========================================== */
.gpufin-process-timeline[b-fp95el57um] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.gpufin-process-timeline[b-fp95el57um]::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(180deg, #f59e0b 0%, #06b6d4 100%);
}

.gpufin-process-step[b-fp95el57um] {
    display: flex;
    gap: 32px;
    position: relative;
}

.gpufin-process-marker[b-fp95el57um] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(245,158,11,0.12);
    border: 2px solid #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.gpufin-process-number[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f59e0b;
}

.gpufin-process-content[b-fp95el57um] {
    flex: 1;
    padding: 8px 0 48px 0;
}

.gpufin-process-content h4[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.gpufin-process-time[b-fp95el57um] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #f59e0b;
    margin-bottom: 12px;
}

.gpufin-process-content p[b-fp95el57um] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.gpufin-cta[b-fp95el57um] {
    padding: 120px 0;
    background: linear-gradient(180deg, transparent 0%, rgba(245,158,11,0.03) 50%, transparent 100%);
}

.gpufin-cta-content[b-fp95el57um] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.gpufin-cta-content h2[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 20px 0;
}

.gpufin-cta-content p[b-fp95el57um] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.gpufin-cta-actions[b-fp95el57um] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===========================================
   RELATED PAGES
   =========================================== */
.gpufin-related[b-fp95el57um] {
    padding: 60px 0 100px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.gpufin-related h3[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 0 24px 0;
}

.gpufin-related-links[b-fp95el57um] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.gpufin-related-links a[b-fp95el57um] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gpufin-related-links a:hover[b-fp95el57um] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255,255,255,0.12);
    color: #f1f5f9;
}

.gpufin-related-links a :deep(.icon)[b-fp95el57um] {
    width: 14px;
    height: 14px;
    color: #64748b;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .gpufin-terms-grid[b-fp95el57um] {
        grid-template-columns: repeat(2, 1fr);
    }

    .gpufin-benefits-grid[b-fp95el57um] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .gpufin-equipment-grid[b-fp95el57um],
    .gpufin-hardware-grid[b-fp95el57um] {
        grid-template-columns: 1fr;
    }

    .gpufin-comparison-details[b-fp95el57um] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container[b-fp95el57um] {
        padding: 0 24px;
    }

    .gpufin-terms-grid[b-fp95el57um],
    .gpufin-benefits-grid[b-fp95el57um] {
        grid-template-columns: 1fr;
    }

    .gpufin-comparison-row[b-fp95el57um] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gpufin-comparison-row span:not(:first-child)[b-fp95el57um] {
        text-align: left;
    }

    .gpufin-comparison-row.header[b-fp95el57um] {
        display: none;
    }

    .gpufin-comparison-row span[b-fp95el57um]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 4px;
    }

    .gpufin-amount-badges[b-fp95el57um] {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .gpufin-process-timeline[b-fp95el57um]::before {
        left: 20px;
    }

    .gpufin-process-marker[b-fp95el57um] {
        width: 42px;
        height: 42px;
    }

    .gpufin-process-step[b-fp95el57um] {
        gap: 20px;
    }

    .gpufin-cta-actions[b-fp95el57um] {
        flex-direction: column;
        align-items: center;
    }

    .btn-gold[b-fp95el57um],
    .btn-outline[b-fp95el57um] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .gpufin-equipment-table th:nth-child(2)[b-fp95el57um],
    .gpufin-equipment-table td:nth-child(2)[b-fp95el57um] {
        display: none;
    }

    .gpufin-process-content[b-fp95el57um] {
        padding-bottom: 32px;
    }
}
/* /Components/Pages/Financing/InfrastructureFinancing.razor.rz.scp.css */
/* ===========================================
   INFRASTRUCTURE FINANCING PAGE - SLYD DESIGN SYSTEM
   Page-specific styles only - uses generic-hero.css and generic-sections.css
   =========================================== */

/* ===========================================
   BRAND COLORS
   =========================================== */
:root[b-w6f8erdrt3] {
    --brand-primary: #8b5cf6;
    --brand-primary-rgb: 139, 92, 246;
    --brand-secondary: #06b6d4;
    --brand-secondary-rgb: 6, 182, 212;
}

/* ===========================================
   HERO PREVIEW CARD (page-specific content for Hero slot)
   =========================================== */
.infrafin-preview-card[b-w6f8erdrt3] {
    position: relative;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.infrafin-preview-header[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.infrafin-preview-title[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.infrafin-preview-title .icon[b-w6f8erdrt3] {
    width: 16px;
    height: 16px;
    color: #f59e0b;
}

.infrafin-preview-badge[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.infrafin-preview-stack[b-w6f8erdrt3] {
    padding: 16px;
}

.infrafin-stack-item[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.infrafin-stack-item:last-child[b-w6f8erdrt3] {
    margin-bottom: 0;
}

.infrafin-stack-item:hover[b-w6f8erdrt3] {
    border-color: rgba(245,158,11,0.2);
    background: rgba(245,158,11,0.02);
}

.stack-icon[b-w6f8erdrt3] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.stack-icon .icon[b-w6f8erdrt3] {
    width: 18px;
    height: 18px;
}

.stack-icon.compute[b-w6f8erdrt3] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.stack-icon.network[b-w6f8erdrt3] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.stack-icon.storage[b-w6f8erdrt3] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.stack-icon.power[b-w6f8erdrt3] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.stack-icon.services[b-w6f8erdrt3] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.stack-info[b-w6f8erdrt3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stack-name[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.stack-range[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748b;
}

.infrafin-preview-footer[b-w6f8erdrt3] {
    padding: 16px 20px;
    background: rgba(245,158,11,0.05);
    border-top: 1px solid rgba(245,158,11,0.1);
    text-align: center;
}

.preview-total-label[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.infrafin-opening[b-w6f8erdrt3] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.infrafin-opening p[b-w6f8erdrt3] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.infrafin-opening-lead[b-w6f8erdrt3] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    font-weight: 500;
}

.infrafin-opening-result[b-w6f8erdrt3] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
    margin-top: 32px !important;
}

.infrafin-opening strong[b-w6f8erdrt3] {
    color: #f59e0b;
}

/* ===========================================
   CATEGORY CARDS
   =========================================== */
.infrafin-categories-grid[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.infrafin-category-card[b-w6f8erdrt3] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.infrafin-category-card:hover[b-w6f8erdrt3] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.infrafin-category-card.full-width[b-w6f8erdrt3] {
    grid-column: 1 / -1;
}

.infrafin-category-header[b-w6f8erdrt3] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.infrafin-category-icon[b-w6f8erdrt3] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.infrafin-category-icon .icon[b-w6f8erdrt3] {
    width: 22px;
    height: 22px;
}

.infrafin-category-icon.cyan[b-w6f8erdrt3] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.infrafin-category-icon.purple[b-w6f8erdrt3] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.infrafin-category-icon.green[b-w6f8erdrt3] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.infrafin-category-icon.gold[b-w6f8erdrt3] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.infrafin-category-title[b-w6f8erdrt3] {
    flex: 1;
}

.infrafin-category-title h3[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.infrafin-category-range[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #64748b;
}

.infrafin-category-desc[b-w6f8erdrt3] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.infrafin-category-items[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.infrafin-category-items.wide[b-w6f8erdrt3] {
    grid-template-columns: repeat(3, 1fr);
}

.infrafin-category-items span[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #cbd5e1;
}

.infrafin-category-items .icon[b-w6f8erdrt3] {
    width: 14px;
    height: 14px;
    color: #22c55e;
    flex-shrink: 0;
}

/* ===========================================
   COMPARISON
   =========================================== */
.infrafin-comparison[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 64px;
}

.infrafin-comparison-side[b-w6f8erdrt3] {
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.infrafin-comparison-side.separate[b-w6f8erdrt3] {
    border-top: 3px solid #ef4444;
}

.infrafin-comparison-side.bundled[b-w6f8erdrt3] {
    border-top: 3px solid #22c55e;
}

.infrafin-comparison-header[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.infrafin-comparison-header .icon[b-w6f8erdrt3] {
    width: 24px;
    height: 24px;
}

.infrafin-comparison-side.separate .infrafin-comparison-header .icon[b-w6f8erdrt3] {
    color: #ef4444;
}

.infrafin-comparison-side.bundled .infrafin-comparison-header .icon[b-w6f8erdrt3] {
    color: #22c55e;
}

.infrafin-comparison-header h3[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.infrafin-comparison-list[b-w6f8erdrt3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.infrafin-comparison-list li[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 0.9375rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.infrafin-comparison-list li:last-child[b-w6f8erdrt3] {
    border-bottom: none;
}

.infrafin-comparison-list .icon[b-w6f8erdrt3] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.infrafin-comparison-list.negative .icon[b-w6f8erdrt3] {
    color: #ef4444;
}

.infrafin-comparison-list.positive .icon[b-w6f8erdrt3] {
    color: #22c55e;
}

/* Benefits Grid */
.infrafin-benefits-grid[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.infrafin-benefit[b-w6f8erdrt3] {
    text-align: center;
    padding: 32px 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.infrafin-benefit:hover[b-w6f8erdrt3] {
    border-color: rgba(6,182,212,0.2);
}

.infrafin-benefit-icon[b-w6f8erdrt3] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 14px;
    margin: 0 auto 20px;
    color: #06b6d4;
}

.infrafin-benefit-icon .icon[b-w6f8erdrt3] {
    width: 24px;
    height: 24px;
}

.infrafin-benefit h4[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.infrafin-benefit p[b-w6f8erdrt3] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   DEAL STRUCTURES
   =========================================== */
.infrafin-structures-grid[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.infrafin-structure-card[b-w6f8erdrt3] {
    position: relative;
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.infrafin-structure-card:hover[b-w6f8erdrt3] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.infrafin-structure-badge[b-w6f8erdrt3] {
    position: absolute;
    top: -10px;
    right: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
}

.infrafin-structure-badge.popular[b-w6f8erdrt3] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #030508;
}

.infrafin-structure-badge.turnkey[b-w6f8erdrt3] {
    background: rgba(139,92,246,0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139,92,246,0.3);
}

.infrafin-structure-card h3[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.infrafin-structure-desc[b-w6f8erdrt3] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.infrafin-structure-details[b-w6f8erdrt3] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.infrafin-structure-details span[b-w6f8erdrt3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: #cbd5e1;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
}

.infrafin-structure-details .icon[b-w6f8erdrt3] {
    width: 14px;
    height: 14px;
    color: #06b6d4;
}

.infrafin-structure-best[b-w6f8erdrt3] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.infrafin-structure-best strong[b-w6f8erdrt3] {
    color: #94a3b8;
}

/* ===========================================
   EXAMPLE DEALS
   =========================================== */
.infrafin-examples-grid[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

.infrafin-example-card[b-w6f8erdrt3] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
}

.infrafin-example-header[b-w6f8erdrt3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.infrafin-example-header h3[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.infrafin-example-size[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
}

.infrafin-example-table[b-w6f8erdrt3] {
    width: 100%;
    border-collapse: collapse;
}

.infrafin-example-table td[b-w6f8erdrt3] {
    padding: 14px 24px;
    font-size: 0.9375rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.infrafin-example-table td .icon[b-w6f8erdrt3] {
    width: 14px;
    height: 14px;
    color: #64748b;
    margin-right: 8px;
}

.infrafin-example-table td.amount[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    text-align: right;
    color: #94a3b8;
}

.infrafin-example-table tr.total td[b-w6f8erdrt3] {
    font-weight: 600;
    color: #f1f5f9;
    background: rgba(245,158,11,0.05);
    border-bottom: none;
}

.infrafin-example-table tr.total td.amount[b-w6f8erdrt3] {
    color: #f59e0b;
    font-size: 1rem;
}

.infrafin-example-payments[b-w6f8erdrt3] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: #0a1018;
}

.payment-option[b-w6f8erdrt3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
}

.payment-option.highlight[b-w6f8erdrt3] {
    background: rgba(245,158,11,0.05);
    border-color: rgba(245,158,11,0.2);
}

.payment-option .term[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #64748b;
}

.payment-option .monthly[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.payment-option.highlight .monthly[b-w6f8erdrt3] {
    color: #f59e0b;
}

.infrafin-examples-note[b-w6f8erdrt3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.875rem;
    color: #64748b;
    padding: 20px 24px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    margin: 0;
}

.infrafin-examples-note .icon[b-w6f8erdrt3] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #06b6d4;
}

/* ===========================================
   QUALIFICATION
   =========================================== */
.infrafin-qualification-grid[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.infrafin-qual-card[b-w6f8erdrt3] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.infrafin-qual-icon[b-w6f8erdrt3] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 14px;
    margin-bottom: 24px;
    color: #06b6d4;
}

.infrafin-qual-icon .icon[b-w6f8erdrt3] {
    width: 24px;
    height: 24px;
}

.infrafin-qual-card h3[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 20px 0;
}

.infrafin-qual-list[b-w6f8erdrt3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.infrafin-qual-list li[b-w6f8erdrt3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.infrafin-qual-list li:last-child[b-w6f8erdrt3] {
    border-bottom: none;
}

.infrafin-qual-list .icon[b-w6f8erdrt3] {
    width: 14px;
    height: 14px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 3px;
}

/* ===========================================
   TIMELINE
   =========================================== */
.infrafin-timeline[b-w6f8erdrt3] {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.infrafin-timeline-item[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 32px;
    align-items: flex-start;
}

.infrafin-timeline-week[b-w6f8erdrt3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    padding: 10px 16px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    text-align: center;
}

.infrafin-timeline-content[b-w6f8erdrt3] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.infrafin-timeline-content h4[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.infrafin-timeline-content p[b-w6f8erdrt3] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

.infrafin-timeline-connector[b-w6f8erdrt3] {
    width: 2px;
    height: 40px;
    background: rgba(245,158,11,0.3);
    margin: 0 0 0 49px;
}

/* ===========================================
   CTA
   =========================================== */
.infrafin-cta[b-w6f8erdrt3] {
    position: relative;
    padding: 120px 0;
    text-align: center;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

.infrafin-cta .container[b-w6f8erdrt3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.infrafin-cta-content[b-w6f8erdrt3] {
    max-width: 700px;
    margin: 0 auto;
}

.infrafin-cta-content h2[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.infrafin-cta-content > p[b-w6f8erdrt3] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.infrafin-cta-actions[b-w6f8erdrt3] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .infrafin-benefits-grid[b-w6f8erdrt3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .infrafin-categories-grid[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-category-items.wide[b-w6f8erdrt3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .infrafin-comparison[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-structures-grid[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-examples-grid[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-qualification-grid[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .infrafin-cta .container[b-w6f8erdrt3] {
        padding: 0 24px;
    }

    .infrafin-cta-actions[b-w6f8erdrt3] {
        flex-direction: column;
    }

    .btn-gold[b-w6f8erdrt3],
    .btn-outline[b-w6f8erdrt3] {
        width: 100%;
        justify-content: center;
    }

    .infrafin-benefits-grid[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-category-items[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-category-items.wide[b-w6f8erdrt3] {
        grid-template-columns: 1fr;
    }

    .infrafin-timeline-item[b-w6f8erdrt3] {
        grid-template-columns: 80px 1fr;
        gap: 20px;
    }

    .infrafin-timeline-week[b-w6f8erdrt3] {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    .infrafin-timeline-connector[b-w6f8erdrt3] {
        margin-left: 39px;
    }

    .infrafin-example-payments[b-w6f8erdrt3] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .infrafin-comparison-side[b-w6f8erdrt3] {
        padding: 24px;
    }

    .infrafin-structure-card[b-w6f8erdrt3] {
        padding: 24px;
    }

    .infrafin-qual-card[b-w6f8erdrt3] {
        padding: 24px;
    }
}
/* /Components/Pages/Guides/CoolingRequirements.razor.rz.scp.css */
/* ================================================================
   AI Data Center Cooling Requirements - 2026 Redesign
   ================================================================ */

/* Typography */
body[b-2qbvavkt6x] { font-family: 'Space Grotesk', sans-serif; }

/* Root CSS Variables */
:root[b-2qbvavkt6x] {
    --primary: #6366F1;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --bg-dark: #020617;
    --bg-darker: #0F172A;
    --light: #F8FAFC;

    /* Thermal Color Palette */
    --cooling-cyan: #06B6D4;
    --cooling-cyan-dark: #0891B2;
    --cooling-blue: #0EA5E9;
    --cooling-blue-dark: #0284C7;
    --cooling-teal: #14B8A6;
    --cooling-teal-dark: #0D9488;
    --cooling-indigo: #6366F1;
    --cooling-purple: #8B5CF6;

    /* Vendor Colors */
    --nvidia-green: #76B900;
    --amd-gray: #9ca3af;

    /* Status Colors */
    --status-good: #10B981;
    --status-warning: #F59E0B;
    --status-critical: #EF4444;
}

/* ================================================================
   Container & Utilities
   ================================================================ */
.container[b-2qbvavkt6x] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.sr-only[b-2qbvavkt6x] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   Hero Section - Page-Specific Overrides
   ================================================================ */

/* Guide hero overrides for shared page-hero styles */
.guide-hero[b-2qbvavkt6x] {
    padding: 140px 0 80px;
}

/* Custom accent gradient for cooling guide */
.guide-hero .page-hero-headline .accent[b-2qbvavkt6x] {
    display: block;
    background: linear-gradient(135deg, #667eea 0%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Badges - page-specific badge variants */
.hero-badges[b-2qbvavkt6x] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.badge-thermal[b-2qbvavkt6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #06b6d4;
    padding: 8px 14px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 4px;
}

.badge-updated[b-2qbvavkt6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #10b981;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
}

/* Hero Stats Row - page-specific stats grid with borders */
.hero-stats-row[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat[b-2qbvavkt6x] {
    text-align: center;
}

.hero-stat-value[b-2qbvavkt6x] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: 6px;
}

.hero-stat-label[b-2qbvavkt6x] {
    display: block;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

/* Page-specific button styling */
.btn-primary[b-2qbvavkt6x] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--cooling-cyan), var(--cooling-blue));
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary:hover[b-2qbvavkt6x] {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(6, 182, 212, 0.4);
}

[b-2qbvavkt6x] .btn-primary svg {
    width: 20px;
    height: 20px;
}

/* Hero Visual - Thermal Showcase (page-specific) */

.thermal-showcase[b-2qbvavkt6x] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    perspective: 1000px;
}

.thermal-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.thermal-card:hover[b-2qbvavkt6x] {
    transform: translateY(-5px);
}

.thermal-card.air[b-2qbvavkt6x] {
    border-color: rgba(6, 182, 212, 0.3);
}

.thermal-card.air:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-cyan);
    box-shadow: 0 10px 40px rgba(6, 182, 212, 0.3);
}

.thermal-card.liquid[b-2qbvavkt6x] {
    border-color: rgba(14, 165, 233, 0.3);
}

.thermal-card.liquid:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-blue);
    box-shadow: 0 10px 40px rgba(14, 165, 233, 0.3);
}

.thermal-card.immersion[b-2qbvavkt6x] {
    border-color: rgba(139, 92, 246, 0.3);
}

.thermal-card.immersion:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-purple);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.3);
}

.thermal-icon[b-2qbvavkt6x] {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

[b-2qbvavkt6x] .thermal-icon svg {
    width: 28px;
    height: 28px;
}

.thermal-card.air .thermal-icon[b-2qbvavkt6x] { color: var(--cooling-cyan); }
.thermal-card.liquid .thermal-icon[b-2qbvavkt6x] { color: var(--cooling-blue); }
.thermal-card.immersion .thermal-icon[b-2qbvavkt6x] { color: var(--cooling-purple); }

.thermal-label[b-2qbvavkt6x] {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.thermal-limit[b-2qbvavkt6x] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
}

.thermal-glow[b-2qbvavkt6x] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2), transparent 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}

/* ================================================================
   Section Styles - Page-Specific Overrides
   ================================================================ */

/* Page-section-alt override for cooling guide */
.page-section--alt[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.5);
}

/* Cooling guide has custom section tag and title styling */
.page-section-tag[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.15);
    color: #67e8f9;
}

.page-section-title[b-2qbvavkt6x] {
    background: linear-gradient(135deg, var(--light), rgba(6, 182, 212, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================
   GPU TDP Specification Tables
   ================================================================ */
.spec-table-container[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 32px;
}

.table-title[b-2qbvavkt6x] {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.table-title.nvidia[b-2qbvavkt6x] {
    color: var(--nvidia-green);
    border-bottom-color: rgba(118, 185, 0, 0.3);
}

.table-title.amd[b-2qbvavkt6x] {
    color: var(--amd-gray);
    border-bottom-color: rgba(156, 163, 175, 0.3);
}

.table-wrapper[b-2qbvavkt6x] {
    overflow-x: auto;
}

.spec-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.spec-table thead[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.1);
}

.spec-table th[b-2qbvavkt6x] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.spec-table td[b-2qbvavkt6x] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.spec-table tr:hover[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.05);
}

.spec-table td a[b-2qbvavkt6x] {
    color: var(--cooling-cyan);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.spec-table td a:hover[b-2qbvavkt6x] {
    color: var(--cooling-blue);
    text-decoration: underline;
}

.tdp-value[b-2qbvavkt6x] {
    font-weight: 700;
    color: white;
}

.tdp-value.highlight[b-2qbvavkt6x] {
    color: var(--status-warning);
}

.tdp-value.critical[b-2qbvavkt6x] {
    color: var(--status-critical);
}

.tdp-value.extreme[b-2qbvavkt6x] {
    color: #F472B6;
    font-weight: 800;
}

/* Calculation Box */
.calculation-box[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.05));
    border: 2px solid rgba(6, 182, 212, 0.3);
    border-radius: 16px;
    padding: 32px;
    margin-top: 40px;
}

.calculation-box h3[b-2qbvavkt6x] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cooling-cyan);
    margin-bottom: 24px;
}

[b-2qbvavkt6x] .calculation-box h3 svg {
    width: 24px;
    height: 24px;
}

.calc-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.calc-example[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
}

.calc-example h4[b-2qbvavkt6x] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
}

.calc-content p[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
    margin-bottom: 8px;
}

.calc-content p strong[b-2qbvavkt6x] {
    color: var(--cooling-cyan);
}

.calc-content p.result[b-2qbvavkt6x] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cooling-cyan);
    background: rgba(6, 182, 212, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
}

/* ================================================================
   ASHRAE Guidelines
   ================================================================ */
.ashrae-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.ashrae-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.ashrae-card h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ashrae-table-wrapper[b-2qbvavkt6x] {
    overflow-x: auto;
}

.ashrae-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ashrae-table th[b-2qbvavkt6x] {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.ashrae-table td[b-2qbvavkt6x] {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.ashrae-table tr.highlight-row[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.1);
}

.ashrae-table tr.highlight-row td[b-2qbvavkt6x] {
    color: var(--cooling-cyan);
}

.ashrae-note[b-2qbvavkt6x] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
    margin-bottom: 20px;
}

.ashrae-list[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ashrae-list li[b-2qbvavkt6x] {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ashrae-list li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.ashrae-label[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.7);
}

.ashrae-value[b-2qbvavkt6x] {
    font-weight: 600;
    color: white;
}

.ashrae-note-box[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.1);
    border-left: 4px solid var(--cooling-cyan);
    padding: 16px;
    border-radius: 0 8px 8px 0;
    margin-top: 20px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
}

.ashrae-note-box strong[b-2qbvavkt6x] {
    color: var(--cooling-cyan);
}

/* ================================================================
   Cooling Technology Cards
   ================================================================ */
.cooling-tech-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.cooling-tech-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cooling-tech-card:hover[b-2qbvavkt6x] {
    transform: translateY(-3px);
    border-color: rgba(6, 182, 212, 0.4);
}

.tech-header[b-2qbvavkt6x] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-header.crac[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.05));
}

.tech-header.crah[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.05));
}

.tech-header.containment[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}

[b-2qbvavkt6x] .tech-header svg {
    width: 32px;
    height: 32px;
}

.tech-header.crac svg[b-2qbvavkt6x] { color: var(--cooling-cyan); }
.tech-header.crah svg[b-2qbvavkt6x] { color: var(--cooling-blue); }
.tech-header.containment svg[b-2qbvavkt6x] { color: var(--cooling-purple); }

.tech-header h3[b-2qbvavkt6x] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.tech-badge[b-2qbvavkt6x] {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.tech-content[b-2qbvavkt6x] {
    padding: 24px;
}

.tech-content p[b-2qbvavkt6x] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.6;
    margin-bottom: 20px;
}

.tech-specs[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.tech-specs li[b-2qbvavkt6x] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.tech-specs li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.tech-specs li span:first-child[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.6);
}

.tech-specs li span:last-child[b-2qbvavkt6x],
.tech-specs li:not(:has(span:nth-child(2)))[b-2qbvavkt6x] {
    color: white;
    font-weight: 500;
    text-align: right;
}

.tech-considerations[b-2qbvavkt6x] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.7);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
}

.tech-considerations strong[b-2qbvavkt6x] {
    color: var(--cooling-cyan);
}

/* Density Guide */
.density-guide[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.density-guide h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.density-table-wrapper[b-2qbvavkt6x] {
    overflow-x: auto;
}

.density-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.density-table th[b-2qbvavkt6x] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.density-table td[b-2qbvavkt6x] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.density-table tr.transition-row[b-2qbvavkt6x] {
    background: rgba(239, 68, 68, 0.1);
}

.density-table tr.transition-row td[b-2qbvavkt6x] {
    color: var(--status-critical);
}

/* ================================================================
   Liquid Cooling Section
   ================================================================ */
.liquid-overview[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    margin-bottom: 48px;
}

.liquid-how-it-works[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.liquid-how-it-works h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.process-list[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.process-list li[b-2qbvavkt6x] {
    position: relative;
    padding: 16px 0 16px 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    counter-increment: step;
}

.process-list li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.process-list li[b-2qbvavkt6x]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 16px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--cooling-cyan), var(--cooling-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
}

.process-list li strong[b-2qbvavkt6x] {
    color: white;
}

.heat-capture-table[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.heat-capture-table h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.efficiency-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.efficiency-table th[b-2qbvavkt6x] {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.efficiency-table td[b-2qbvavkt6x] {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.efficiency-table tr.best[b-2qbvavkt6x] {
    background: rgba(16, 185, 129, 0.1);
}

.efficiency-table tr.best td[b-2qbvavkt6x] {
    color: var(--status-good);
}

/* Phase Comparison */
.phase-comparison[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.phase-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.phase-card:hover[b-2qbvavkt6x] {
    transform: translateY(-3px);
}

.phase-card.single-phase[b-2qbvavkt6x] {
    border-color: rgba(6, 182, 212, 0.3);
}

.phase-card.single-phase:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-cyan);
    box-shadow: 0 10px 40px rgba(6, 182, 212, 0.2);
}

.phase-card.two-phase[b-2qbvavkt6x] {
    border-color: rgba(139, 92, 246, 0.3);
}

.phase-card.two-phase:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-purple);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.2);
}

.phase-header[b-2qbvavkt6x] {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.phase-card.single-phase .phase-header[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.05));
}

.phase-card.two-phase .phase-header[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}

.phase-header h3[b-2qbvavkt6x] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.phase-badge[b-2qbvavkt6x] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(248, 250, 252, 0.8);
}

.phase-badge.premium[b-2qbvavkt6x] {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

.phase-specs[b-2qbvavkt6x] {
    list-style: none;
    padding: 24px;
    margin: 0;
}

.phase-specs li[b-2qbvavkt6x] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.phase-specs li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.phase-specs li span:first-child[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.6);
}

.phase-note[b-2qbvavkt6x] {
    padding: 16px 24px 24px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.7);
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* CDU Section */
.cdu-section[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.cdu-section h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.cdu-section > p[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 24px;
}

.cdu-table-wrapper[b-2qbvavkt6x] {
    overflow-x: auto;
}

.cdu-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cdu-table th[b-2qbvavkt6x] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.cdu-table td[b-2qbvavkt6x] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

/* ================================================================
   RDHx Section
   ================================================================ */
.rdhx-content[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.rdhx-overview[b-2qbvavkt6x] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rdhx-how[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
}

.rdhx-how h3[b-2qbvavkt6x] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.rdhx-steps[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rdhx;
}

.rdhx-steps li[b-2qbvavkt6x] {
    position: relative;
    padding: 12px 0 12px 40px;
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
    counter-increment: rdhx;
}

.rdhx-steps li[b-2qbvavkt6x]::before {
    content: counter(rdhx);
    position: absolute;
    left: 0;
    top: 12px;
    width: 28px;
    height: 28px;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid var(--cooling-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--cooling-cyan);
    font-size: 0.8rem;
}

.rdhx-types[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
}

.rdhx-types h3[b-2qbvavkt6x] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.rdhx-type[b-2qbvavkt6x] {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.rdhx-type:last-child[b-2qbvavkt6x] {
    margin-bottom: 0;
}

.rdhx-type h4[b-2qbvavkt6x] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

[b-2qbvavkt6x] .rdhx-type h4 svg {
    width: 18px;
    height: 18px;
}

.rdhx-type.passive h4 svg[b-2qbvavkt6x] { color: var(--cooling-cyan); }
.rdhx-type.active h4 svg[b-2qbvavkt6x] { color: var(--status-warning); }

.rdhx-type ul[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rdhx-type ul li[b-2qbvavkt6x] {
    padding: 6px 0;
    color: rgba(248, 250, 252, 0.7);
    font-size: 0.9rem;
}

.rdhx-specs[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
}

.rdhx-specs h3[b-2qbvavkt6x] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.spec-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.spec-item[b-2qbvavkt6x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.spec-label[b-2qbvavkt6x] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value[b-2qbvavkt6x] {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
}

.rdhx-benefits h4[b-2qbvavkt6x] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cooling-cyan);
    margin-bottom: 16px;
}

.rdhx-benefits ul[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rdhx-benefits ul li[b-2qbvavkt6x] {
    position: relative;
    padding: 10px 0 10px 24px;
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rdhx-benefits ul li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.rdhx-benefits ul li[b-2qbvavkt6x]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--status-good);
    font-weight: bold;
}

.rdhx-benefits ul li strong[b-2qbvavkt6x] {
    color: white;
}

/* ================================================================
   Immersion Cooling Section
   ================================================================ */
.immersion-comparison[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.immersion-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.immersion-card:hover[b-2qbvavkt6x] {
    transform: translateY(-3px);
}

.immersion-card.single-phase[b-2qbvavkt6x] {
    border-color: rgba(20, 184, 166, 0.3);
}

.immersion-card.single-phase:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-teal);
    box-shadow: 0 10px 40px rgba(20, 184, 166, 0.2);
}

.immersion-card.two-phase[b-2qbvavkt6x] {
    border-color: rgba(139, 92, 246, 0.3);
}

.immersion-card.two-phase:hover[b-2qbvavkt6x] {
    border-color: var(--cooling-purple);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.2);
}

.immersion-header[b-2qbvavkt6x] {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.immersion-card.single-phase .immersion-header[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(20, 184, 166, 0.05));
}

.immersion-card.two-phase .immersion-header[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}

.immersion-header h3[b-2qbvavkt6x] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.premium-badge[b-2qbvavkt6x] {
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--cooling-purple), var(--primary));
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.immersion-content[b-2qbvavkt6x] {
    padding: 24px;
}

.immersion-content > p[b-2qbvavkt6x] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.6;
    margin-bottom: 20px;
}

.immersion-specs[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.immersion-specs li[b-2qbvavkt6x] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.immersion-specs li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.immersion-specs li span:first-child[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.6);
}

.immersion-advantages[b-2qbvavkt6x] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
}

.immersion-advantages h4[b-2qbvavkt6x] {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

.immersion-advantages ul[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.immersion-advantages ul li[b-2qbvavkt6x] {
    position: relative;
    padding: 8px 0 8px 20px;
    color: rgba(248, 250, 252, 0.7);
    font-size: 0.85rem;
}

.immersion-advantages ul li[b-2qbvavkt6x]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--cooling-cyan);
}

/* Immersion Comparison Table */
.immersion-table-wrapper[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.immersion-table-wrapper h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.immersion-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.immersion-table th[b-2qbvavkt6x] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.immersion-table td[b-2qbvavkt6x] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.immersion-table td.best[b-2qbvavkt6x] {
    color: var(--status-good);
    font-weight: 600;
}

/* ================================================================
   Water Quality Section
   ================================================================ */
.water-quality-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.water-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.water-card h3[b-2qbvavkt6x] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.water-table[b-2qbvavkt6x],
.filtration-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 24px;
}

.water-table th[b-2qbvavkt6x],
.filtration-table th[b-2qbvavkt6x] {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.water-table td[b-2qbvavkt6x],
.filtration-table td[b-2qbvavkt6x] {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.water-table td.critical[b-2qbvavkt6x] {
    color: var(--status-warning);
    font-weight: 600;
}

.treatment-box[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.treatment-box h4[b-2qbvavkt6x] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cooling-cyan);
    margin-bottom: 16px;
}

.treatment-box ul[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.treatment-box ul li[b-2qbvavkt6x] {
    padding: 8px 0;
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.9rem;
}

.treatment-box ul li strong[b-2qbvavkt6x] {
    color: white;
}

/* ================================================================
   PUE Section
   ================================================================ */
.pue-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.pue-benchmarks[b-2qbvavkt6x],
.pue-by-technology[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.pue-benchmarks h3[b-2qbvavkt6x],
.pue-by-technology h3[b-2qbvavkt6x] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.pue-benchmark-table[b-2qbvavkt6x],
.pue-tech-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pue-benchmark-table th[b-2qbvavkt6x],
.pue-tech-table th[b-2qbvavkt6x] {
    padding: 14px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.pue-benchmark-table td[b-2qbvavkt6x],
.pue-tech-table td[b-2qbvavkt6x] {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.pue-benchmark-table tr.highlight[b-2qbvavkt6x],
.pue-tech-table tr.highlight[b-2qbvavkt6x] {
    background: rgba(16, 185, 129, 0.08);
}

.pue-benchmark-table td.best[b-2qbvavkt6x],
.pue-tech-table td.best[b-2qbvavkt6x] {
    color: var(--status-good);
    font-weight: 700;
}

/* ================================================================
   Selection Guide Section
   ================================================================ */
.selection-table-wrapper[b-2qbvavkt6x] {
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
}

.selection-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.selection-table th[b-2qbvavkt6x] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.selection-table td[b-2qbvavkt6x] {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.selection-table tr.highlight[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.08);
}

.selection-table tr.critical[b-2qbvavkt6x] {
    background: rgba(139, 92, 246, 0.1);
}

.selection-table tr.critical td[b-2qbvavkt6x] {
    color: var(--cooling-purple);
    font-weight: 600;
}

/* Tech Comparison Grid */
.tech-comparison-grid[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
}

.tech-comparison-grid h3[b-2qbvavkt6x] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

.tech-comparison-table[b-2qbvavkt6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tech-comparison-table th[b-2qbvavkt6x] {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.tech-comparison-table td[b-2qbvavkt6x] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.tech-comparison-table td.best[b-2qbvavkt6x] {
    color: var(--status-good);
    font-weight: 600;
}

/* ================================================================
   Quick Reference Section
   ================================================================ */
.reference-grid[b-2qbvavkt6x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.reference-card[b-2qbvavkt6x] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
}

.reference-card:hover[b-2qbvavkt6x] {
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-3px);
}

.reference-card h3[b-2qbvavkt6x] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.formula-list[b-2qbvavkt6x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.formula-list li[b-2qbvavkt6x] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.formula-list li:last-child[b-2qbvavkt6x] {
    border-bottom: none;
}

.formula-list li span:first-child[b-2qbvavkt6x] {
    color: rgba(248, 250, 252, 0.6);
}

.formula-box[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.1);
    border-radius: 10px;
    padding: 16px;
}

.formula-box p[b-2qbvavkt6x] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.9);
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
}

.formula-box p:last-child[b-2qbvavkt6x] {
    margin-bottom: 0;
}

.formula-note[b-2qbvavkt6x] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
    font-style: italic;
    font-family: inherit !important;
}

.formula-example[b-2qbvavkt6x] {
    font-size: 0.85rem;
    color: var(--cooling-cyan);
    font-family: inherit !important;
}

/* ================================================================
   CTA Section
   ================================================================ */
.cta-section[b-2qbvavkt6x] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
    border-radius: 24px;
    padding: 60px;
    margin: 0 24px 80px;
    border: 2px solid rgba(6, 182, 212, 0.3);
    text-align: center;
}

.cta-header[b-2qbvavkt6x] {
    margin-bottom: 40px;
}

.cta-title[b-2qbvavkt6x] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.cta-description[b-2qbvavkt6x] {
    font-size: 1.1rem;
    color: rgba(248, 250, 252, 0.8);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.cta-features[b-2qbvavkt6x] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cta-feature[b-2qbvavkt6x] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248, 250, 252, 0.9);
    font-size: 1rem;
    font-weight: 500;
}

.cta-feature-icon[b-2qbvavkt6x] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-2qbvavkt6x] .cta-feature-icon svg {
    width: 20px;
    height: 20px;
    color: var(--status-good);
}

.cta-buttons[b-2qbvavkt6x] {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-btn[b-2qbvavkt6x] {
    padding: 16px 36px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

[b-2qbvavkt6x] .cta-btn svg {
    width: 20px;
    height: 20px;
}

.cta-btn-primary[b-2qbvavkt6x] {
    background: linear-gradient(135deg, var(--cooling-cyan), var(--cooling-blue));
    color: white;
    border: none;
}

.cta-btn-primary:hover[b-2qbvavkt6x] {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(6, 182, 212, 0.4);
}

.cta-btn-secondary[b-2qbvavkt6x] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.cta-btn-secondary:hover[b-2qbvavkt6x] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ================================================================
   Responsive Design
   ================================================================ */

/* Large screens */
@media (max-width: 1200px) {
    .hero-container[b-2qbvavkt6x] {
        gap: 48px;
    }

    .hero-title[b-2qbvavkt6x] {
        font-size: 3rem;
    }

    .cooling-tech-grid[b-2qbvavkt6x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reference-grid[b-2qbvavkt6x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .liquid-overview[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .hero-container[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }

    .hero-content[b-2qbvavkt6x] {
        order: 1;
    }

    .hero-visual[b-2qbvavkt6x] {
        order: 2;
    }

    .hero-badges[b-2qbvavkt6x] {
        justify-content: center;
    }

    .hero-tagline[b-2qbvavkt6x] {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stats-row[b-2qbvavkt6x] {
        justify-content: center;
    }

    .hero-actions[b-2qbvavkt6x] {
        justify-content: center;
    }

    .thermal-showcase[b-2qbvavkt6x] {
        max-width: 400px;
        margin: 0 auto;
    }

    .ashrae-grid[b-2qbvavkt6x],
    .phase-comparison[b-2qbvavkt6x],
    .immersion-comparison[b-2qbvavkt6x],
    .water-quality-grid[b-2qbvavkt6x],
    .pue-grid[b-2qbvavkt6x],
    .rdhx-content[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
    }

    .calc-grid[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
    }

    .cooling-tech-grid[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
    }

    .section-title[b-2qbvavkt6x] {
        font-size: 2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .guide-hero[b-2qbvavkt6x] {
        min-height: auto;
        padding: 120px 0 60px;
    }

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

    .hero-stats-row[b-2qbvavkt6x] {
        gap: 20px;
    }

    .hero-stat-value[b-2qbvavkt6x] {
        font-size: 1.5rem;
    }

    .thermal-showcase[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
        max-width: 280px;
    }

    .reference-grid[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
    }

    .spec-grid[b-2qbvavkt6x] {
        grid-template-columns: 1fr;
    }

    .section[b-2qbvavkt6x] {
        padding: 60px 0;
    }

    .section-header[b-2qbvavkt6x] {
        margin-bottom: 40px;
    }

    .cta-section[b-2qbvavkt6x] {
        padding: 40px 24px;
        margin: 0 16px 60px;
    }

    .cta-title[b-2qbvavkt6x] {
        font-size: 1.75rem;
    }

    .cta-features[b-2qbvavkt6x] {
        gap: 20px;
    }

    .cta-buttons[b-2qbvavkt6x] {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn[b-2qbvavkt6x] {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .spec-table-container[b-2qbvavkt6x],
    .density-guide[b-2qbvavkt6x],
    .selection-table-wrapper[b-2qbvavkt6x],
    .immersion-table-wrapper[b-2qbvavkt6x],
    .tech-comparison-grid[b-2qbvavkt6x],
    .cdu-section[b-2qbvavkt6x] {
        padding: 20px;
    }

    .spec-table th[b-2qbvavkt6x],
    .spec-table td[b-2qbvavkt6x],
    .density-table th[b-2qbvavkt6x],
    .density-table td[b-2qbvavkt6x],
    .selection-table th[b-2qbvavkt6x],
    .selection-table td[b-2qbvavkt6x] {
        padding: 10px;
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container[b-2qbvavkt6x] {
        padding: 0 16px;
    }

    .hero-title[b-2qbvavkt6x] {
        font-size: 1.875rem;
    }

    .hero-badges[b-2qbvavkt6x] {
        gap: 8px;
    }

    .badge-primary[b-2qbvavkt6x],
    .badge-thermal[b-2qbvavkt6x],
    .badge-updated[b-2qbvavkt6x] {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .hero-stats-row[b-2qbvavkt6x] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .hero-stat[b-2qbvavkt6x] {
        text-align: center;
    }

    .hero-actions[b-2qbvavkt6x] {
        flex-direction: column;
    }

    .btn-primary[b-2qbvavkt6x],
    .btn-outline[b-2qbvavkt6x] {
        width: 100%;
        justify-content: center;
    }

    .section-title[b-2qbvavkt6x] {
        font-size: 1.75rem;
    }

    .ashrae-card[b-2qbvavkt6x],
    .water-card[b-2qbvavkt6x],
    .pue-benchmarks[b-2qbvavkt6x],
    .pue-by-technology[b-2qbvavkt6x],
    .rdhx-how[b-2qbvavkt6x],
    .rdhx-types[b-2qbvavkt6x],
    .rdhx-specs[b-2qbvavkt6x],
    .reference-card[b-2qbvavkt6x] {
        padding: 20px;
    }

    .phase-card[b-2qbvavkt6x],
    .immersion-card[b-2qbvavkt6x],
    .cooling-tech-card[b-2qbvavkt6x] {
        border-radius: 12px;
    }

    .table-title[b-2qbvavkt6x] {
        font-size: 1.2rem;
    }
}
/* /Components/Pages/Guides/InferenceGPUGuide.razor.rz.scp.css */
/* Inference GPU Guide Styles */
/* ========================== */

:root[b-e8so6tuivm] {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --bg-dark: #020617;
    --bg-darker: #0F172A;
    --light: #F8FAFC;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Tier Colors */
    --consumer: #10B981;
    --workstation: #6366F1;
    --datacenter: #EC4899;
    --enterprise: #f59e0b;

    /* Vendor Colors */
    --nvidia: #76B900;
    --amd: #9ca3af;
    --intel: #0071C5;
}

/* NOTE: Global resets removed - Blazor scoped CSS should not override global styles
   The page-hero-container centering comes from generic-hero.css */

/* ========================== */
/* Hero Section - Page-Specific Overrides */
/* ========================== */

/* Guide hero - uses standard page-hero split layout */

.guide-hero[b-e8so6tuivm]::before {
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(16, 185, 129, 0.04) 0%, transparent 50%);
}

/* Custom accent gradient for inference guide */
.guide-hero .page-hero-headline .accent[b-e8so6tuivm] {
    display: block;
    background: linear-gradient(135deg, #667eea 0%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Badges - page-specific badge variants */
.hero-badges[b-e8so6tuivm] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.badge-nvidia[b-e8so6tuivm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #76b900;
    padding: 8px 14px;
    background: rgba(118, 185, 0, 0.1);
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 4px;
}

.badge-amd[b-e8so6tuivm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 8px 14px;
    background: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.3);
    border-radius: 4px;
}

/* Hero Stats Row - page-specific stats grid with borders */
.hero-stats-row[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat[b-e8so6tuivm] {
    text-align: center;
}

.hero-stat-value[b-e8so6tuivm] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: 6px;
}

.hero-stat-label[b-e8so6tuivm] {
    display: block;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

/* Hero Visual - Architecture Showcase (page-specific) */

.architecture-showcase[b-e8so6tuivm] {
    position: relative;
    width: 100%;
    max-width: 480px;
    display: grid;
    gap: 20px;
}

.architecture-showcase .showcase-card[b-e8so6tuivm] {
    position: relative;
    padding: 32px 28px;
    background: linear-gradient(145deg, #0f1620 0%, #0a1018 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

.architecture-showcase .showcase-card.nvidia[b-e8so6tuivm] {
    border-color: rgba(118, 185, 0, 0.2);
}

.architecture-showcase .showcase-card.nvidia[b-e8so6tuivm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #76b900, #06b6d4);
}

.architecture-showcase .showcase-card.amd[b-e8so6tuivm] {
    border-color: rgba(156, 163, 175, 0.2);
}

.architecture-showcase .showcase-card.amd[b-e8so6tuivm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9ca3af, #d1d5db);
}

.architecture-showcase .showcase-card:hover[b-e8so6tuivm] {
    transform: translateY(-4px);
}

.showcase-label[b-e8so6tuivm] {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
}

.showcase-card.nvidia .showcase-label[b-e8so6tuivm] {
    color: #76b900;
}

.showcase-card.amd .showcase-label[b-e8so6tuivm] {
    color: #9ca3af;
}

.showcase-model[b-e8so6tuivm] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.showcase-spec[b-e8so6tuivm] {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 4px;
}

.showcase-perf[b-e8so6tuivm] {
    font-size: 0.75rem;
    color: #64748b;
}

.showcase-glow[b-e8so6tuivm] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.05) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* ========================== */
/* Buttons */
/* ========================== */

.btn-primary[b-e8so6tuivm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-primary:hover[b-e8so6tuivm] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-e8so6tuivm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover[b-e8so6tuivm] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ========================== */
/* Section Styles - Page-Specific Overrides */
/* ========================== */

/* Tier-specific tag colors (extends page-section-tag) */
.tier-consumer-tag[b-e8so6tuivm] { background: rgba(16, 185, 129, 0.15); color: var(--consumer); }
.tier-workstation-tag[b-e8so6tuivm] { background: rgba(99, 102, 241, 0.15); color: var(--workstation); }
.tier-datacenter-tag[b-e8so6tuivm] { background: rgba(236, 72, 153, 0.15); color: var(--datacenter); }
.tier-enterprise-tag[b-e8so6tuivm] { background: rgba(245, 158, 11, 0.15); color: var(--enterprise); }
.amd-tag[b-e8so6tuivm] { background: rgba(156, 163, 175, 0.15); color: var(--amd); }
.intel-tag[b-e8so6tuivm] { background: rgba(0, 113, 197, 0.15); color: var(--intel); }

/* Page-section-alt override for guide pages */
.page-section--alt[b-e8so6tuivm] { background: rgba(15, 23, 42, 0.4); }

/* ========================== */
/* Quick Reference Table */
/* ========================== */

.quick-reference-table[b-e8so6tuivm] {
    overflow-x: auto;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-reference-table table[b-e8so6tuivm] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.quick-reference-table th[b-e8so6tuivm],
.quick-reference-table td[b-e8so6tuivm] {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-reference-table th[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.quick-reference-table td[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.85);
}

.quick-reference-table tr:last-child td[b-e8so6tuivm] {
    border-bottom: none;
}

.quick-reference-table a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.quick-reference-table a:hover[b-e8so6tuivm] {
    color: #818cf8;
    text-decoration: underline;
}

.tier-link[b-e8so6tuivm] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.tier-link.consumer[b-e8so6tuivm] { background: rgba(16, 185, 129, 0.15); color: var(--consumer); }
.tier-link.workstation[b-e8so6tuivm] { background: rgba(99, 102, 241, 0.15); color: var(--workstation); }
.tier-link.datacenter[b-e8so6tuivm] { background: rgba(236, 72, 153, 0.15); color: var(--datacenter); }
.tier-link.enterprise[b-e8so6tuivm] { background: rgba(245, 158, 11, 0.15); color: var(--enterprise); }

/* ========================== */
/* Requirements Section */
/* ========================== */

.requirements-grid[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.requirement-card[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.requirement-card:hover[b-e8so6tuivm] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);
}

.requirement-icon[b-e8so6tuivm] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary);
    font-size: 1.5rem;
}

.requirement-card h3[b-e8so6tuivm] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--light);
}

.requirement-card p[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ========================== */
/* VRAM Tables */
/* ========================== */

.vram-tables[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.vram-table[b-e8so6tuivm],
.tensor-core-table[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
}

.vram-table h4[b-e8so6tuivm],
.tensor-core-table h4[b-e8so6tuivm] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary);
}

.vram-table table[b-e8so6tuivm],
.tensor-core-table table[b-e8so6tuivm] {
    width: 100%;
    border-collapse: collapse;
}

.vram-table th[b-e8so6tuivm],
.vram-table td[b-e8so6tuivm],
.tensor-core-table th[b-e8so6tuivm],
.tensor-core-table td[b-e8so6tuivm] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.vram-table th[b-e8so6tuivm],
.tensor-core-table th[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.vram-table td[b-e8so6tuivm],
.tensor-core-table td[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.75);
}

.vram-table tr:last-child td[b-e8so6tuivm],
.tensor-core-table tr:last-child td[b-e8so6tuivm] {
    border-bottom: none;
}

.highlight-row[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.1) !important;
}

.highlight-row td[b-e8so6tuivm] {
    color: var(--light) !important;
}

/* ========================== */
/* GPU Cards */
/* ========================== */

.tier-section[b-e8so6tuivm] { scroll-margin-top: 100px; }

.gpu-cards-grid[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.gpu-cards-grid.single-card[b-e8so6tuivm] {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gpu-card[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 28px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.gpu-card:hover[b-e8so6tuivm] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

.gpu-card.featured[b-e8so6tuivm] {
    border-color: rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(99, 102, 241, 0.05));
}

.gpu-card-header[b-e8so6tuivm] {
    margin-bottom: 24px;
}

.gpu-card-header h3[b-e8so6tuivm] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 6px;
}

.gpu-card-header h3 a[b-e8so6tuivm] {
    color: var(--light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gpu-card-header h3 a:hover[b-e8so6tuivm] {
    color: var(--primary);
}

.gpu-tagline[b-e8so6tuivm] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.6);
}

/* GPU Badges */
.gpu-badge[b-e8so6tuivm] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.gpu-badge.new[b-e8so6tuivm] { background: rgba(16, 185, 129, 0.2); color: var(--secondary); }
.gpu-badge.value[b-e8so6tuivm] { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.gpu-badge.budget[b-e8so6tuivm] { background: rgba(16, 185, 129, 0.15); color: var(--consumer); }
.gpu-badge.recommended[b-e8so6tuivm] { background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(236, 72, 153, 0.3)); color: #fff; }
.gpu-badge.professional[b-e8so6tuivm] { background: rgba(236, 72, 153, 0.2); color: var(--tertiary); }
.gpu-badge.edge[b-e8so6tuivm] { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.gpu-badge.standard[b-e8so6tuivm] { background: rgba(255, 255, 255, 0.1); color: rgba(248, 250, 252, 0.8); }
.gpu-badge.coming[b-e8so6tuivm] { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.gpu-badge.amd[b-e8so6tuivm] { background: rgba(156, 163, 175, 0.15); color: var(--amd); }
.gpu-badge.intel[b-e8so6tuivm] { background: rgba(0, 113, 197, 0.15); color: var(--intel); }

/* GPU Specs Grid */
.gpu-specs-grid[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.gpu-specs-grid .spec[b-e8so6tuivm] {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 8px;
}

.gpu-specs-grid .spec .label[b-e8so6tuivm] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.gpu-specs-grid .spec .value[b-e8so6tuivm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light);
}

/* GPU Highlights */
.gpu-highlights[b-e8so6tuivm] {
    margin-bottom: 20px;
}

.gpu-highlights h4[b-e8so6tuivm] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    margin-bottom: 12px;
}

.gpu-highlights ul[b-e8so6tuivm] {
    list-style: none;
    padding: 0;
}

.gpu-highlights li[b-e8so6tuivm] {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.5;
}

.gpu-highlights li[b-e8so6tuivm]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* GPU Best For / Considerations / Pricing */
.gpu-best-for[b-e8so6tuivm],
.gpu-considerations[b-e8so6tuivm],
.gpu-cloud-pricing[b-e8so6tuivm] {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 12px;
}

.gpu-best-for[b-e8so6tuivm] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: rgba(248, 250, 252, 0.85);
}

.gpu-best-for strong[b-e8so6tuivm] {
    color: var(--secondary);
}

.gpu-considerations[b-e8so6tuivm] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: rgba(248, 250, 252, 0.85);
}

.gpu-considerations strong[b-e8so6tuivm] {
    color: var(--warning);
}

.gpu-cloud-pricing[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: rgba(248, 250, 252, 0.85);
}

.gpu-cloud-pricing strong[b-e8so6tuivm] {
    color: var(--primary);
}

/* ========================== */
/* Cloud Pricing Section */
/* ========================== */

.pricing-tables[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.pricing-table[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
}

.pricing-table h4[b-e8so6tuivm] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary);
}

.pricing-table table[b-e8so6tuivm] {
    width: 100%;
    border-collapse: collapse;
}

.pricing-table th[b-e8so6tuivm],
.pricing-table td[b-e8so6tuivm] {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.pricing-table th[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.pricing-table td[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.75);
}

.pricing-table tr:last-child td[b-e8so6tuivm] {
    border-bottom: none;
}

.pricing-note[b-e8so6tuivm] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
    font-style: italic;
}

/* Cost Strategies */
.cost-strategies[b-e8so6tuivm] {
    margin-top: 50px;
}

.cost-strategies h4[b-e8so6tuivm] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--light);
    text-align: center;
}

.strategies-grid[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.strategy-card[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.strategy-card:hover[b-e8so6tuivm] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
}

.strategy-card[b-e8so6tuivm]  svg,
.strategy-card i[b-e8so6tuivm] {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.strategy-card h5[b-e8so6tuivm] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--light);
}

.strategy-card p[b-e8so6tuivm] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
}

.strategy-card a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
}

.strategy-card a:hover[b-e8so6tuivm] {
    text-decoration: underline;
}

/* ========================== */
/* Decision Framework */
/* ========================== */

.decision-tree[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.decision-tree h4[b-e8so6tuivm] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 28px;
    color: var(--primary);
    text-align: center;
}

.tree-content[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.tree-branch[b-e8so6tuivm] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.branch-header[b-e8so6tuivm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.branch-header[b-e8so6tuivm]  svg,
.branch-header i[b-e8so6tuivm] {
    color: var(--primary);
    font-size: 1.2rem;
}

.branch-header span[b-e8so6tuivm] {
    font-weight: 600;
    color: var(--light);
}

.branch-options[b-e8so6tuivm] {
    list-style: none;
    padding: 0;
}

.branch-options li[b-e8so6tuivm] {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.5;
}

.branch-options li[b-e8so6tuivm]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--secondary);
}

.branch-options a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
}

.branch-options a:hover[b-e8so6tuivm] {
    text-decoration: underline;
}

/* ========================== */
/* TCO Analysis */
/* ========================== */

.tco-content[b-e8so6tuivm] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tco-table[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
}

.tco-table h4[b-e8so6tuivm] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--primary);
}

.tco-assumptions[b-e8so6tuivm] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 16px;
    font-style: italic;
}

.tco-table table[b-e8so6tuivm] {
    width: 100%;
    border-collapse: collapse;
}

.tco-table th[b-e8so6tuivm],
.tco-table td[b-e8so6tuivm] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.tco-table th[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.tco-table td[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.75);
}

.tco-rule[b-e8so6tuivm] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 20px 24px;
}

.tco-rule[b-e8so6tuivm]  svg,
.tco-rule i[b-e8so6tuivm] {
    color: var(--secondary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tco-rule strong[b-e8so6tuivm] {
    color: var(--secondary);
    display: block;
    margin-bottom: 8px;
}

.tco-rule ul[b-e8so6tuivm] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tco-rule li[b-e8so6tuivm] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    margin-bottom: 4px;
}

.cost-components[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.cost-column[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cost-column h5[b-e8so6tuivm] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--light);
    margin-bottom: 16px;
}

.cost-column[b-e8so6tuivm]  svg,
.cost-column i[b-e8so6tuivm] {
    color: var(--primary);
}

.cost-column ul[b-e8so6tuivm] {
    list-style: none;
    padding: 0;
}

.cost-column li[b-e8so6tuivm] {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
}

.cost-column li[b-e8so6tuivm]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* ========================== */
/* Benchmark Tables */
/* ========================== */

.benchmark-tables[b-e8so6tuivm] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.benchmark-table[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
}

.benchmark-table h4[b-e8so6tuivm] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary);
}

.benchmark-table table[b-e8so6tuivm] {
    width: 100%;
    border-collapse: collapse;
}

.benchmark-table th[b-e8so6tuivm],
.benchmark-table td[b-e8so6tuivm] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.benchmark-table th[b-e8so6tuivm] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.benchmark-table td[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.75);
}

.benchmark-table a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
}

.benchmark-table a:hover[b-e8so6tuivm] {
    text-decoration: underline;
}

.benchmark-note[b-e8so6tuivm] {
    margin-top: 16px;
    padding: 14px 18px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.65);
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    line-height: 1.6;
}

.benchmark-note strong[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.85);
}

.pricing-disclaimer[b-e8so6tuivm] {
    margin-top: 12px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    font-style: italic;
}

.pricing-disclaimer strong[b-e8so6tuivm] {
    color: rgba(248, 250, 252, 0.9);
    font-style: normal;
}

/* ========================== */
/* Key Takeaways */
/* ========================== */

.takeaways-grid[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.takeaway-card[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.takeaway-card:hover[b-e8so6tuivm] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
}

.takeaway-icon[b-e8so6tuivm] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.takeaway-icon.local[b-e8so6tuivm] { background: rgba(16, 185, 129, 0.15); color: var(--secondary); }
.takeaway-icon.cloud[b-e8so6tuivm] { background: rgba(99, 102, 241, 0.15); color: var(--primary); }
.takeaway-icon.enterprise[b-e8so6tuivm] { background: rgba(236, 72, 153, 0.15); color: var(--tertiary); }
.takeaway-icon.future[b-e8so6tuivm] { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

.takeaway-card h4[b-e8so6tuivm] {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--light);
}

.takeaway-card ul[b-e8so6tuivm] {
    list-style: none;
    padding: 0;
}

.takeaway-card li[b-e8so6tuivm] {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.6;
}

.takeaway-card li[b-e8so6tuivm]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.takeaway-card strong[b-e8so6tuivm] {
    color: var(--light);
}

.takeaway-card a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
}

.takeaway-card a:hover[b-e8so6tuivm] {
    text-decoration: underline;
}

/* ========================== */
/* SLYD Solutions */
/* ========================== */

.solutions-grid[b-e8so6tuivm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.solution-card[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.solution-card:hover[b-e8so6tuivm] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
}

.solution-icon[b-e8so6tuivm] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    color: var(--primary);
}

.solution-card h4[b-e8so6tuivm] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--light);
}

.solution-card p[b-e8so6tuivm] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 8px;
}

.solution-card a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
}

.solution-card a:hover[b-e8so6tuivm] {
    text-decoration: underline;
}

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

.cta-section[b-e8so6tuivm] { padding: 80px 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); text-align: center; }

.cta-title[b-e8so6tuivm] { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; color: var(--light); }

.cta-description[b-e8so6tuivm] { font-size: 1.1rem; color: rgba(248, 250, 252, 0.7); max-width: 800px; margin: 0 auto 40px; line-height: 1.8; }

.cta-buttons[b-e8so6tuivm] { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

.cta-btn[b-e8so6tuivm] { padding: 15px 35px; border-radius: 30px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; }

.cta-btn-primary[b-e8so6tuivm] { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; }

.cta-btn-primary:hover[b-e8so6tuivm] { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); }

.cta-btn-secondary[b-e8so6tuivm] { background: rgba(255, 255, 255, 0.05); color: white; border: 2px solid rgba(255, 255, 255, 0.2); }

.cta-btn-secondary:hover[b-e8so6tuivm] { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.cta-btn-outline[b-e8so6tuivm] {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-btn-outline:hover[b-e8so6tuivm] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ========================== */
/* Guide Footer */
/* ========================== */

.guide-footer[b-e8so6tuivm] {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-updated[b-e8so6tuivm],
.guide-sources[b-e8so6tuivm] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 8px;
}

/* ========================== */
/* Feature Grid (Legacy) */
/* ========================== */

.feature-grid[b-e8so6tuivm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }

.feature-card[b-e8so6tuivm] { background: rgba(15, 23, 42, 0.6); border-radius: 16px; padding: 30px; border: 2px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; }

.feature-card:hover[b-e8so6tuivm] { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2); border-color: rgba(102, 126, 234, 0.3); }

.feature-icon[b-e8so6tuivm] { font-size: 2.5rem; color: #667eea; margin-bottom: 20px; }

.feature-title[b-e8so6tuivm] { font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; color: var(--light); }

.feature-description[b-e8so6tuivm] { color: rgba(248, 250, 252, 0.7); line-height: 1.6; }

/* Info Box (Legacy) */
.info-box[b-e8so6tuivm] { background: rgba(15, 23, 42, 0.6); border-radius: 16px; padding: 30px; border: 2px solid rgba(102, 126, 234, 0.3); margin-top: 40px; }

.info-box-title[b-e8so6tuivm] { font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; color: #667eea; }

.info-box-content[b-e8so6tuivm] { margin-top: 15px; }

.info-box-list[b-e8so6tuivm] { list-style: none; padding: 0; }

.info-box-list li[b-e8so6tuivm] { padding: 10px 0; padding-left: 30px; position: relative; color: rgba(248, 250, 252, 0.8); }

.info-box-list li[b-e8so6tuivm]::before { content: "→"; position: absolute; left: 0; color: #667eea; font-weight: bold; }

/* ========================== */
/* Responsive Breakpoints */
/* ========================== */

@media (max-width: 1200px) {
    /* page-hero-container responsive handled by generic-hero.css */

    .gpu-cards-grid[b-e8so6tuivm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-tables[b-e8so6tuivm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    /* Page-specific hero overrides */
    .hero-badges[b-e8so6tuivm] {
        justify-content: center;
    }

    .hero-stats-row[b-e8so6tuivm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero-actions[b-e8so6tuivm] {
        justify-content: center;
    }

    .architecture-showcase[b-e8so6tuivm] {
        max-width: 380px;
        margin: 0 auto;
    }

    .vram-tables[b-e8so6tuivm] {
        grid-template-columns: 1fr;
    }

    .tree-content[b-e8so6tuivm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-stats-row[b-e8so6tuivm] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hero-stat-value[b-e8so6tuivm] {
        font-size: 1.25rem;
    }

    .page-hero-actions[b-e8so6tuivm] {
        flex-direction: column;
    }

    .btn-primary[b-e8so6tuivm], .btn-outline[b-e8so6tuivm], .btn-secondary[b-e8so6tuivm] {
        width: 100%;
        justify-content: center;
    }

    .showcase-model[b-e8so6tuivm] {
        font-size: 2.25rem;
    }

    .gpu-cards-grid[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .gpu-specs-grid[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .requirements-grid[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .takeaways-grid[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .solutions-grid[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .strategies-grid[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .cost-components[b-e8so6tuivm] { grid-template-columns: 1fr; }

    .cta-title[b-e8so6tuivm] { font-size: 1.8rem; }

    .cta-buttons[b-e8so6tuivm] { flex-direction: column; }

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

}

@media (max-width: 480px) {
    .container[b-e8so6tuivm] { padding: 0 16px; }

    .hero h1[b-e8so6tuivm] { font-size: 1.8rem; }

    .section-title[b-e8so6tuivm] { font-size: 1.5rem; }

    .gpu-card[b-e8so6tuivm] { padding: 20px; }

    .gpu-card-header h3[b-e8so6tuivm] { font-size: 1.2rem; }

    .requirement-card[b-e8so6tuivm] { padding: 20px; }

    .decision-tree[b-e8so6tuivm] { padding: 20px; }

    .tree-branch[b-e8so6tuivm] { padding: 16px; }

    .tco-rule[b-e8so6tuivm] { flex-direction: column; text-align: center; }

    .solution-card[b-e8so6tuivm] { padding: 20px; }

    .takeaway-card[b-e8so6tuivm] { padding: 20px; }
}
/* /Components/Pages/Guides/TrainingGPUGuide.razor.rz.scp.css */
/* Training GPU Guide Styles */
/* =========================== */

:root[b-014eqkxfp3] {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --bg-dark: #020617;
    --bg-darker: #0F172A;
    --light: #F8FAFC;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Tier Colors */
    --consumer: #10B981;
    --workstation: #6366F1;
    --datacenter: #EC4899;
    --enterprise: #f59e0b;

    /* Vendor Colors */
    --nvidia: #76B900;
    --amd: #9ca3af;
    --intel: #0071C5;
}

/* NOTE: Global resets removed - Blazor scoped CSS should not override global styles
   The page-hero-container centering comes from generic-hero.css */

/* =========================== */
/* Hero Section - Page-Specific Overrides */
/* =========================== */

/* Guide hero - uses standard page-hero split layout */

.guide-hero[b-014eqkxfp3]::before {
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(16, 185, 129, 0.04) 0%, transparent 50%);
}

/* Custom accent gradient for training guide */
.guide-hero .page-hero-headline .accent[b-014eqkxfp3] {
    display: block;
    background: linear-gradient(135deg, #667eea 0%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Badges - page-specific badge variants */
.hero-badges[b-014eqkxfp3] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.badge-nvidia[b-014eqkxfp3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #76b900;
    padding: 8px 14px;
    background: rgba(118, 185, 0, 0.1);
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 4px;
}

.badge-amd[b-014eqkxfp3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 8px 14px;
    background: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.3);
    border-radius: 4px;
}

/* Hero Stats Row - page-specific stats grid with borders */
.hero-stats-row[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat[b-014eqkxfp3] {
    text-align: center;
}

.hero-stat-value[b-014eqkxfp3] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: 6px;
}

.hero-stat-label[b-014eqkxfp3] {
    display: block;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

/* Hero Visual - Architecture Showcase (page-specific) */

.architecture-showcase[b-014eqkxfp3] {
    position: relative;
    width: 100%;
    max-width: 480px;
    display: grid;
    gap: 20px;
}

.architecture-showcase .showcase-card[b-014eqkxfp3] {
    position: relative;
    padding: 32px 28px;
    background: linear-gradient(145deg, #0f1620 0%, #0a1018 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

.architecture-showcase .showcase-card.nvidia[b-014eqkxfp3] {
    border-color: rgba(118, 185, 0, 0.2);
}

.architecture-showcase .showcase-card.nvidia[b-014eqkxfp3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #76b900, #06b6d4);
}

.architecture-showcase .showcase-card.amd[b-014eqkxfp3] {
    border-color: rgba(156, 163, 175, 0.2);
}

.architecture-showcase .showcase-card.amd[b-014eqkxfp3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9ca3af, #d1d5db);
}

.architecture-showcase .showcase-card:hover[b-014eqkxfp3] {
    transform: translateY(-4px);
}

.showcase-label[b-014eqkxfp3] {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
}

.showcase-card.nvidia .showcase-label[b-014eqkxfp3] {
    color: #76b900;
}

.showcase-card.amd .showcase-label[b-014eqkxfp3] {
    color: #9ca3af;
}

.showcase-model[b-014eqkxfp3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.showcase-spec[b-014eqkxfp3] {
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 4px;
}

.showcase-perf[b-014eqkxfp3] {
    font-size: 0.75rem;
    color: #64748b;
}

.showcase-glow[b-014eqkxfp3] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.05) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* =========================== */
/* Buttons */
/* =========================== */

.btn-primary[b-014eqkxfp3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-primary:hover[b-014eqkxfp3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-014eqkxfp3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover[b-014eqkxfp3] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* =========================== */
/* Section Styles - Page-Specific Overrides */
/* =========================== */

/* Tier-specific tag colors (extends page-section-tag) */
.tier-consumer-tag[b-014eqkxfp3] { background: rgba(16, 185, 129, 0.15); color: var(--consumer); }
.tier-workstation-tag[b-014eqkxfp3] { background: rgba(99, 102, 241, 0.15); color: var(--workstation); }
.tier-datacenter-tag[b-014eqkxfp3] { background: rgba(236, 72, 153, 0.15); color: var(--datacenter); }
.tier-enterprise-tag[b-014eqkxfp3] { background: rgba(245, 158, 11, 0.15); color: var(--enterprise); }
.amd-tag[b-014eqkxfp3] { background: rgba(156, 163, 175, 0.15); color: var(--amd); }
.intel-tag[b-014eqkxfp3] { background: rgba(0, 113, 197, 0.15); color: var(--intel); }

/* Page-section-alt override for guide pages */
.page-section--alt[b-014eqkxfp3] { background: rgba(15, 23, 42, 0.4); }

/* =========================== */
/* Quick Reference Table */
/* =========================== */

.quick-reference-table[b-014eqkxfp3] {
    overflow-x: auto;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-reference-table table[b-014eqkxfp3] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.quick-reference-table th[b-014eqkxfp3],
.quick-reference-table td[b-014eqkxfp3] {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-reference-table th[b-014eqkxfp3] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.quick-reference-table td[b-014eqkxfp3] {
    color: rgba(248, 250, 252, 0.85);
}

.quick-reference-table tr:last-child td[b-014eqkxfp3] {
    border-bottom: none;
}

.quick-reference-table a[b-014eqkxfp3] {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.quick-reference-table a:hover[b-014eqkxfp3] {
    color: #818cf8;
    text-decoration: underline;
}

.tier-link[b-014eqkxfp3] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.tier-link.consumer[b-014eqkxfp3] { background: rgba(16, 185, 129, 0.15); color: var(--consumer); }
.tier-link.workstation[b-014eqkxfp3] { background: rgba(99, 102, 241, 0.15); color: var(--workstation); }
.tier-link.datacenter[b-014eqkxfp3] { background: rgba(236, 72, 153, 0.15); color: var(--datacenter); }
.tier-link.enterprise[b-014eqkxfp3] { background: rgba(245, 158, 11, 0.15); color: var(--enterprise); }
.tier-link.amd[b-014eqkxfp3] { background: rgba(156, 163, 175, 0.15); color: var(--amd); }

/* =========================== */
/* Requirements Section */
/* =========================== */

.requirements-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.requirement-card[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.requirement-card:hover[b-014eqkxfp3] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);
}

.requirement-icon[b-014eqkxfp3] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary);
    font-size: 1.5rem;
}

.requirement-card h3[b-014eqkxfp3] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--light);
}

.requirement-card p[b-014eqkxfp3] {
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* =========================== */
/* Memory Tables */
/* =========================== */

.memory-table-wrapper[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    margin-top: 30px;
}

.memory-table-wrapper h4[b-014eqkxfp3] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary);
}

.memory-table[b-014eqkxfp3] {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.memory-table th[b-014eqkxfp3],
.memory-table td[b-014eqkxfp3] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.memory-table th[b-014eqkxfp3] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.memory-table td[b-014eqkxfp3] {
    color: rgba(248, 250, 252, 0.75);
}

.memory-table tr:last-child td[b-014eqkxfp3] {
    border-bottom: none;
}

.table-note[b-014eqkxfp3] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
    font-style: italic;
}

/* =========================== */
/* GPU Cards */
/* =========================== */

.tier-section[b-014eqkxfp3] { scroll-margin-top: 100px; }

.gpu-cards-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.gpu-cards-grid.single-card[b-014eqkxfp3] {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gpu-cards-grid.single-featured[b-014eqkxfp3] {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.gpu-card[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 28px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.gpu-card:hover[b-014eqkxfp3] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

.gpu-card.featured[b-014eqkxfp3] {
    border-color: rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(99, 102, 241, 0.05));
}

.gpu-card.wide[b-014eqkxfp3] {
    grid-column: 1 / -1;
}

.gpu-card-header[b-014eqkxfp3] {
    margin-bottom: 24px;
}

.gpu-card-header h3[b-014eqkxfp3] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 6px;
}

.gpu-card-header h3 a[b-014eqkxfp3] {
    color: var(--light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gpu-card-header h3 a:hover[b-014eqkxfp3] {
    color: var(--primary);
}

.gpu-tagline[b-014eqkxfp3] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.6);
}

/* GPU Badges */
.gpu-badge[b-014eqkxfp3] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    margin-right: 8px;
}

.gpu-badge.new[b-014eqkxfp3] { background: rgba(16, 185, 129, 0.2); color: var(--secondary); }
.gpu-badge.value[b-014eqkxfp3] { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.gpu-badge.budget[b-014eqkxfp3] { background: rgba(16, 185, 129, 0.15); color: var(--consumer); }
.gpu-badge.recommended[b-014eqkxfp3] { background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(236, 72, 153, 0.3)); color: #fff; }
.gpu-badge.professional[b-014eqkxfp3] { background: rgba(236, 72, 153, 0.2); color: var(--tertiary); }
.gpu-badge.edge[b-014eqkxfp3] { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.gpu-badge.standard[b-014eqkxfp3] { background: rgba(255, 255, 255, 0.1); color: rgba(248, 250, 252, 0.8); }
.gpu-badge.coming[b-014eqkxfp3] { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.gpu-badge.amd[b-014eqkxfp3] { background: rgba(156, 163, 175, 0.15); color: var(--amd); }
.gpu-badge.intel[b-014eqkxfp3] { background: rgba(0, 113, 197, 0.15); color: var(--intel); }

/* GPU Specs Grid */
.gpu-specs-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.gpu-specs-grid .spec[b-014eqkxfp3] {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 8px;
}

.gpu-specs-grid .spec .label[b-014eqkxfp3] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.gpu-specs-grid .spec .value[b-014eqkxfp3] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light);
}

/* GPU Highlights */
.gpu-highlights[b-014eqkxfp3] {
    margin-bottom: 20px;
}

.gpu-highlights h4[b-014eqkxfp3] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    margin-bottom: 12px;
}

.gpu-highlights ul[b-014eqkxfp3] {
    list-style: none;
    padding: 0;
}

.gpu-highlights li[b-014eqkxfp3] {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.5;
}

.gpu-highlights li[b-014eqkxfp3]::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* GPU Variants */
.gpu-variants[b-014eqkxfp3] {
    margin-bottom: 20px;
}

.gpu-variants h4[b-014eqkxfp3] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    margin-bottom: 12px;
}

.variants-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.variant[b-014eqkxfp3] {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    border-radius: 8px;
}

.variant strong[b-014eqkxfp3] {
    display: block;
    font-size: 0.85rem;
    color: var(--light);
    margin-bottom: 4px;
}

.variant span[b-014eqkxfp3] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
}

/* GPU Best For / Considerations / Pricing */
.gpu-best-for[b-014eqkxfp3],
.gpu-considerations[b-014eqkxfp3],
.gpu-cloud-pricing[b-014eqkxfp3] {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 12px;
}

.gpu-best-for[b-014eqkxfp3] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: rgba(248, 250, 252, 0.85);
}

.gpu-best-for strong[b-014eqkxfp3] {
    color: var(--secondary);
}

.gpu-considerations[b-014eqkxfp3] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: rgba(248, 250, 252, 0.85);
}

.gpu-considerations strong[b-014eqkxfp3] {
    color: var(--warning);
}

.gpu-cloud-pricing[b-014eqkxfp3] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: rgba(248, 250, 252, 0.85);
}

.gpu-cloud-pricing strong[b-014eqkxfp3] {
    color: var(--primary);
}

/* =========================== */
/* Cloud Pricing Section */
/* =========================== */

.pricing-tables[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.pricing-table[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
}

.pricing-table h4[b-014eqkxfp3] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary);
}

.pricing-table table[b-014eqkxfp3] {
    width: 100%;
    border-collapse: collapse;
}

.pricing-table th[b-014eqkxfp3],
.pricing-table td[b-014eqkxfp3] {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.pricing-table th[b-014eqkxfp3] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.pricing-table td[b-014eqkxfp3] {
    color: rgba(248, 250, 252, 0.75);
}

.pricing-table tr:last-child td[b-014eqkxfp3] {
    border-bottom: none;
}

.pricing-note[b-014eqkxfp3] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
    font-style: italic;
}

.pricing-disclaimer[b-014eqkxfp3] {
    margin-top: 12px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    font-style: italic;
}

.pricing-disclaimer strong[b-014eqkxfp3] {
    color: rgba(248, 250, 252, 0.9);
    font-style: normal;
}

/* Cost Strategies */
.cost-strategies[b-014eqkxfp3] {
    margin-top: 50px;
}

.cost-strategies h4[b-014eqkxfp3] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--light);
    text-align: center;
}

.strategies-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.strategy-card[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.strategy-card:hover[b-014eqkxfp3] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
}

.strategy-card[b-014eqkxfp3]  svg,
.strategy-card i[b-014eqkxfp3] {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.strategy-card h5[b-014eqkxfp3] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--light);
}

.strategy-card p[b-014eqkxfp3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
}

.strategy-card a[b-014eqkxfp3] {
    color: var(--primary);
    text-decoration: none;
}

.strategy-card a:hover[b-014eqkxfp3] {
    text-decoration: underline;
}

/* =========================== */
/* Decision Framework */
/* =========================== */

.decision-tree[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.decision-tree h4[b-014eqkxfp3] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 28px;
    color: var(--primary);
    text-align: center;
}

.tree-content[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.tree-branch[b-014eqkxfp3] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.branch-header[b-014eqkxfp3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.branch-header[b-014eqkxfp3]  svg,
.branch-header i[b-014eqkxfp3] {
    color: var(--primary);
    font-size: 1.2rem;
}

.branch-header span[b-014eqkxfp3] {
    font-weight: 600;
    color: var(--light);
}

.branch-options[b-014eqkxfp3] {
    list-style: none;
    padding: 0;
}

.branch-options li[b-014eqkxfp3] {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.5;
}

.branch-options li[b-014eqkxfp3]::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--secondary);
}

.branch-options a[b-014eqkxfp3] {
    color: var(--primary);
    text-decoration: none;
}

.branch-options a:hover[b-014eqkxfp3] {
    text-decoration: underline;
}

/* =========================== */
/* TCO Analysis */
/* =========================== */

.tco-content[b-014eqkxfp3] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tco-table[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
}

.tco-table h4[b-014eqkxfp3] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--primary);
}

.tco-table table[b-014eqkxfp3] {
    width: 100%;
    border-collapse: collapse;
}

.tco-table th[b-014eqkxfp3],
.tco-table td[b-014eqkxfp3] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.tco-table th[b-014eqkxfp3] {
    background: rgba(99, 102, 241, 0.08);
    color: rgba(248, 250, 252, 0.9);
    font-weight: 600;
}

.tco-table td[b-014eqkxfp3] {
    color: rgba(248, 250, 252, 0.75);
}

.tco-rule[b-014eqkxfp3] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 20px 24px;
}

.tco-rule[b-014eqkxfp3]  svg,
.tco-rule i[b-014eqkxfp3] {
    color: var(--secondary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tco-rule strong[b-014eqkxfp3] {
    color: var(--secondary);
    display: block;
    margin-bottom: 8px;
}

.tco-rule ul[b-014eqkxfp3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tco-rule li[b-014eqkxfp3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    margin-bottom: 4px;
}

/* TCO Recommendations */
.tco-recommendations[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.tco-card[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tco-card h5[b-014eqkxfp3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--light);
    margin-bottom: 16px;
}

.tco-card h5[b-014eqkxfp3]  svg {
    flex-shrink: 0;
}

.tco-card.buy[b-014eqkxfp3] {
    border-color: rgba(16, 185, 129, 0.3);
}

.tco-card.buy h5[b-014eqkxfp3] {
    color: var(--secondary);
}

.tco-card.buy h5[b-014eqkxfp3]  svg {
    color: var(--secondary);
}

.tco-card.rent[b-014eqkxfp3] {
    border-color: rgba(99, 102, 241, 0.3);
}

.tco-card.rent h5[b-014eqkxfp3] {
    color: var(--primary);
}

.tco-card.rent h5[b-014eqkxfp3]  svg {
    color: var(--primary);
}

.tco-card ul[b-014eqkxfp3] {
    list-style: none;
    padding: 0;
}

.tco-card li[b-014eqkxfp3] {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
}

.tco-card li[b-014eqkxfp3]::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.tco-card.buy li[b-014eqkxfp3]::before {
    color: var(--secondary);
}

/* =========================== */
/* Key Takeaways */
/* =========================== */

.takeaways-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.takeaway-card[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.takeaway-card:hover[b-014eqkxfp3] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
}

.takeaway-icon[b-014eqkxfp3] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.takeaway-icon.local[b-014eqkxfp3] { background: rgba(16, 185, 129, 0.15); color: var(--secondary); }
.takeaway-icon.cloud[b-014eqkxfp3] { background: rgba(99, 102, 241, 0.15); color: var(--primary); }
.takeaway-icon.enterprise[b-014eqkxfp3] { background: rgba(236, 72, 153, 0.15); color: var(--tertiary); }
.takeaway-icon.future[b-014eqkxfp3] { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.takeaway-icon.researchers[b-014eqkxfp3] { background: rgba(16, 185, 129, 0.15); color: var(--secondary); }
.takeaway-icon.performance[b-014eqkxfp3] { background: rgba(236, 72, 153, 0.15); color: var(--tertiary); }
.takeaway-icon.amd[b-014eqkxfp3] { background: rgba(156, 163, 175, 0.15); color: var(--amd); }

.takeaway-card h4[b-014eqkxfp3] {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--light);
}

.takeaway-card ul[b-014eqkxfp3] {
    list-style: none;
    padding: 0;
}

.takeaway-card li[b-014eqkxfp3] {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.6;
}

.takeaway-card li[b-014eqkxfp3]::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.takeaway-card strong[b-014eqkxfp3] {
    color: var(--light);
}

.takeaway-card a[b-014eqkxfp3] {
    color: var(--primary);
    text-decoration: none;
}

.takeaway-card a:hover[b-014eqkxfp3] {
    text-decoration: underline;
}

/* =========================== */
/* SLYD Solutions */
/* =========================== */

.solutions-grid[b-014eqkxfp3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.solution-card[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.solution-card:hover[b-014eqkxfp3] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
}

.solution-icon[b-014eqkxfp3] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    color: var(--primary);
}

.solution-card h4[b-014eqkxfp3] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--light);
}

.solution-card p[b-014eqkxfp3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 8px;
}

.solution-card a[b-014eqkxfp3] {
    color: var(--primary);
    text-decoration: none;
}

.solution-card a:hover[b-014eqkxfp3] {
    text-decoration: underline;
}

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

.cta-section[b-014eqkxfp3] { padding: 80px 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); text-align: center; }

.cta-title[b-014eqkxfp3] { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; color: var(--light); }

.cta-description[b-014eqkxfp3] { font-size: 1.1rem; color: rgba(248, 250, 252, 0.7); max-width: 800px; margin: 0 auto 40px; line-height: 1.8; }

.cta-buttons[b-014eqkxfp3] { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

.cta-btn[b-014eqkxfp3] { padding: 15px 35px; border-radius: 30px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; }

.cta-btn-primary[b-014eqkxfp3] { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; }

.cta-btn-primary:hover[b-014eqkxfp3] { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); }

.cta-btn-secondary[b-014eqkxfp3] { background: rgba(255, 255, 255, 0.05); color: white; border: 2px solid rgba(255, 255, 255, 0.2); }

.cta-btn-secondary:hover[b-014eqkxfp3] { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.cta-btn-outline[b-014eqkxfp3] {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-btn-outline:hover[b-014eqkxfp3] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
}

/* =========================== */
/* Guide Footer */
/* =========================== */

.guide-footer[b-014eqkxfp3] {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-updated[b-014eqkxfp3],
.guide-sources[b-014eqkxfp3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 8px;
}

/* =========================== */
/* Responsive Breakpoints */
/* =========================== */

@media (max-width: 1200px) {
    /* page-hero-container responsive handled by generic-hero.css */

    .gpu-cards-grid[b-014eqkxfp3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-tables[b-014eqkxfp3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    /* Page-specific hero overrides */
    .hero-badges[b-014eqkxfp3] {
        justify-content: center;
    }

    .hero-stats-row[b-014eqkxfp3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-hero-actions[b-014eqkxfp3] {
        justify-content: center;
    }

    .architecture-showcase[b-014eqkxfp3] {
        max-width: 380px;
        margin: 0 auto;
    }

    .tree-content[b-014eqkxfp3] {
        grid-template-columns: 1fr;
    }

    .tco-recommendations[b-014eqkxfp3] {
        grid-template-columns: 1fr;
    }

    .variants-grid[b-014eqkxfp3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-stats-row[b-014eqkxfp3] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hero-stat-value[b-014eqkxfp3] {
        font-size: 1.25rem;
    }

    .hero-actions[b-014eqkxfp3] {
        flex-direction: column;
    }

    .btn-primary[b-014eqkxfp3], .btn-outline[b-014eqkxfp3], .btn-secondary[b-014eqkxfp3] {
        width: 100%;
        justify-content: center;
    }

    .showcase-model[b-014eqkxfp3] {
        font-size: 2.25rem;
    }

    .section-title[b-014eqkxfp3] { font-size: 1.8rem; }

    .gpu-cards-grid[b-014eqkxfp3] { grid-template-columns: 1fr; }

    .gpu-specs-grid[b-014eqkxfp3] { grid-template-columns: 1fr; }

    .requirements-grid[b-014eqkxfp3] { grid-template-columns: 1fr; }

    .takeaways-grid[b-014eqkxfp3] { grid-template-columns: 1fr; }

    .solutions-grid[b-014eqkxfp3] { grid-template-columns: 1fr; }

    .strategies-grid[b-014eqkxfp3] { grid-template-columns: 1fr; }

    .cta-title[b-014eqkxfp3] { font-size: 1.8rem; }

    .cta-buttons[b-014eqkxfp3] { flex-direction: column; }

    .cta-btn[b-014eqkxfp3] { width: 100%; justify-content: center; }

}

@media (max-width: 480px) {
    .container[b-014eqkxfp3] { padding: 0 16px; }

    .hero h1[b-014eqkxfp3] { font-size: 1.8rem; }

    .section-title[b-014eqkxfp3] { font-size: 1.5rem; }

    .gpu-card[b-014eqkxfp3] { padding: 20px; }

    .gpu-card.wide[b-014eqkxfp3] { padding: 20px; }

    .gpu-card-header h3[b-014eqkxfp3] { font-size: 1.2rem; }

    .requirement-card[b-014eqkxfp3] { padding: 20px; }

    .decision-tree[b-014eqkxfp3] { padding: 20px; }

    .tree-branch[b-014eqkxfp3] { padding: 16px; }

    .tco-rule[b-014eqkxfp3] { flex-direction: column; text-align: center; }

    .tco-card[b-014eqkxfp3] { padding: 20px; }

    .solution-card[b-014eqkxfp3] { padding: 20px; }

    .takeaway-card[b-014eqkxfp3] { padding: 20px; }

    .memory-table-wrapper[b-014eqkxfp3] { padding: 16px; }
}
/* /Components/Pages/Hardware/AIInfrastructure.razor.rz.scp.css */
/* ===========================================
   AI INFRASTRUCTURE PAGE
   Enterprise GPU Infrastructure Solutions
   Color scheme: Cyan (#06b6d4) / Purple (#a855f7)
   =========================================== */

/* ===========================================
   HERO SECTION
   =========================================== */
.ai-hero[b-2ohcav7wds] {
    position: relative;
    z-index: 1;
    min-height: 85vh;
    padding: 140px 0 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ai-hero[b-2ohcav7wds]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(168, 85, 247, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.hero-container[b-2ohcav7wds] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
}

.hero-content[b-2ohcav7wds] {
    position: relative;
}

.hero-badges[b-2ohcav7wds] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.badge-primary[b-2ohcav7wds] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #06b6d4;
    padding: 8px 14px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 4px;
}

.badge-nvidia[b-2ohcav7wds] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #76b900;
    padding: 8px 14px;
    background: rgba(118, 185, 0, 0.1);
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 4px;
}

.badge-amd[b-2ohcav7wds] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ef4444;
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
}

.hero-title[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0 0 20px 0;
}

.hero-title .accent[b-2ohcav7wds] {
    display: block;
    background: linear-gradient(135deg, #06b6d4 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline[b-2ohcav7wds] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 520px;
}

.hero-stats-row[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat[b-2ohcav7wds] {
    text-align: center;
}

.hero-stat-value[b-2ohcav7wds] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: 6px;
}

.hero-stat-label[b-2ohcav7wds] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.hero-actions[b-2ohcav7wds] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Visual - Architecture Showcase */
.hero-visual[b-2ohcav7wds] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.architecture-showcase[b-2ohcav7wds] {
    position: relative;
    width: 100%;
    max-width: 480px;
    display: grid;
    gap: 20px;
}

.architecture-showcase .showcase-card[b-2ohcav7wds] {
    position: relative;
    padding: 32px 28px;
    background: linear-gradient(145deg, #0f1620 0%, #0a1018 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

.architecture-showcase .showcase-card.nvidia[b-2ohcav7wds] {
    border-color: rgba(118, 185, 0, 0.2);
}

.architecture-showcase .showcase-card.nvidia[b-2ohcav7wds]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #76b900, #06b6d4);
}

.architecture-showcase .showcase-card.amd[b-2ohcav7wds] {
    border-color: rgba(239, 68, 68, 0.2);
}

.architecture-showcase .showcase-card.amd[b-2ohcav7wds]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ef4444, #fb923c);
}

.architecture-showcase .showcase-card:hover[b-2ohcav7wds] {
    transform: translateY(-4px);
}

.showcase-logo[b-2ohcav7wds] {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.showcase-glow[b-2ohcav7wds] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, rgba(168, 85, 247, 0.05) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn-primary[b-2ohcav7wds] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 40px rgba(6, 182, 212, 0.2);
}

.btn-primary:hover[b-2ohcav7wds] {
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(6, 182, 212, 0.3);
}

.btn-primary .icon[b-2ohcav7wds] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   STATS STRIP
   =========================================== */
.stats-strip[b-2ohcav7wds] {
    position: relative;
    z-index: 1;
    padding: 32px 0;
    background: #0a1018;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-strip .container[b-2ohcav7wds] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.stats-strip-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-strip-item[b-2ohcav7wds] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.stat-strip-item .icon[b-2ohcav7wds] {
    width: 28px;
    height: 28px;
    color: #06b6d4;
    flex-shrink: 0;
}

.stat-strip-content[b-2ohcav7wds] {
    display: flex;
    flex-direction: column;
}

.stat-strip-value[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
}

.stat-strip-label[b-2ohcav7wds] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* ===========================================
   SECTION STYLES
   =========================================== */
.section[b-2ohcav7wds] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
}

.section .container[b-2ohcav7wds] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.section-alt[b-2ohcav7wds] {
    background: #0a1018;
}

/* .section-header - inherited from components-base.css */

.section-tag[b-2ohcav7wds] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #06b6d4;
    margin-bottom: 16px;
}

.section-tag.nvidia-tag[b-2ohcav7wds] {
    color: #76b900;
}

.section-tag.amd-tag[b-2ohcav7wds] {
    color: #ef4444;
}

.section-title[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.section-subtitle[b-2ohcav7wds] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto;
}

/* ===========================================
   GPU GRID
   =========================================== */
.gpu-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gpu-grid.amd-grid[b-2ohcav7wds] {
    grid-template-columns: repeat(3, 1fr);
}

.gpu-card[b-2ohcav7wds] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gpu-card:hover[b-2ohcav7wds] {
    transform: translateY(-6px);
    border-color: rgba(118, 185, 0, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.gpu-card.amd:hover[b-2ohcav7wds] {
    border-color: rgba(217, 119, 6, 0.4);
}

.gpu-card-header[b-2ohcav7wds] {
    display: flex;
    gap: 8px;
    padding: 20px 24px 0;
    flex-wrap: wrap;
}

.gpu-badge[b-2ohcav7wds] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
}

.gpu-badge.ultra[b-2ohcav7wds] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.2), rgba(168, 85, 247, 0.2));
    color: #a855f7;
}

.gpu-badge.flagship[b-2ohcav7wds] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.gpu-badge.premium[b-2ohcav7wds] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.gpu-badge.enterprise[b-2ohcav7wds] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.gpu-badge.proven[b-2ohcav7wds] {
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
}

.gpu-badge.inference[b-2ohcav7wds] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.gpu-badge.training[b-2ohcav7wds] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.gpu-badge.nextgen[b-2ohcav7wds] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(251, 146, 60, 0.2));
    color: #fb923c;
}

.gpu-badge.enhanced[b-2ohcav7wds] {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.gpu-badge.available[b-2ohcav7wds] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.gpu-card-body[b-2ohcav7wds] {
    padding: 20px 24px;
    flex: 1;
}

.gpu-model[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.gpu-arch[b-2ohcav7wds] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 20px 0;
}

.gpu-specs[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gpu-spec[b-2ohcav7wds] {
    display: flex;
    flex-direction: column;
}

.gpu-spec .spec-value[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.gpu-spec .spec-label[b-2ohcav7wds] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.gpu-highlight[b-2ohcav7wds] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: #76b900;
}

.gpu-highlight .icon[b-2ohcav7wds] {
    width: 16px;
    height: 16px;
}

.gpu-highlight.amd[b-2ohcav7wds] {
    color: #f1f5f9;
}

.gpu-card-footer[b-2ohcav7wds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gpu-cta[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.3s ease;
}

.gpu-card:hover .gpu-cta[b-2ohcav7wds] {
    color: #76b900;
}

.gpu-card.amd:hover .gpu-cta[b-2ohcav7wds] {
    color: #f1f5f9;
}

.gpu-card-footer .icon[b-2ohcav7wds] {
    width: 16px;
    height: 16px;
    color: #475569;
    transition: all 0.3s ease;
}

.gpu-card:hover .gpu-card-footer .icon[b-2ohcav7wds] {
    color: #76b900;
    transform: translateX(4px);
}

.gpu-card.amd:hover .gpu-card-footer .icon[b-2ohcav7wds] {
    color: #f1f5f9;
}

/* ===========================================
   USE CASES GRID
   =========================================== */
.use-cases-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.use-case-card[b-2ohcav7wds] {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.use-case-card:hover[b-2ohcav7wds] {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
    transform: translateY(-4px);
}

.use-case-icon[b-2ohcav7wds] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

.use-case-icon .icon[b-2ohcav7wds] {
    width: 24px;
    height: 24px;
    color: #06b6d4;
}

.use-case-content[b-2ohcav7wds] {
    flex: 1;
}

.use-case-content h3[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.use-case-content p[b-2ohcav7wds] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 16px 0;
}

.use-case-gpus[b-2ohcav7wds] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gpu-tag[b-2ohcav7wds] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.gpu-tag.nvidia[b-2ohcav7wds] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.gpu-tag.amd[b-2ohcav7wds] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.use-case-arrow[b-2ohcav7wds] {
    display: flex;
    align-items: center;
    color: #475569;
    transition: color 0.3s ease;
}

.use-case-arrow .icon[b-2ohcav7wds] {
    width: 20px;
    height: 20px;
}

.use-case-card:hover .use-case-arrow[b-2ohcav7wds] {
    color: #06b6d4;
}

/* ===========================================
   PARTNERS GRID
   =========================================== */
.partners-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.partner-card[b-2ohcav7wds] {
    padding: 32px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.partner-card:hover[b-2ohcav7wds] {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

.partner-logo[b-2ohcav7wds] {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.partner-logo img[b-2ohcav7wds] {
    max-height: 40px;
    width: auto;
    opacity: 0.9;
    filter: none;
    transition: all 0.3s ease;
}

.partner-card:hover .partner-logo img[b-2ohcav7wds] {
    opacity: 1;
}

/* Invert dark-text logos (HPE, GigaComputing) so text appears white on dark bg */
.partner-logo.invert-logo img[b-2ohcav7wds] {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.partner-card:hover .partner-logo.invert-logo img[b-2ohcav7wds] {
    opacity: 1;
}

.partner-card h4[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.partner-card p[b-2ohcav7wds] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* ===========================================
   MONETIZE HARDWARE SECTION
   =========================================== */
.monetize-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.monetize-card[b-2ohcav7wds] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.monetize-card:hover[b-2ohcav7wds] {
    border-color: rgba(6, 182, 212, 0.2);
    background: rgba(15, 23, 42, 0.8);
}

.monetize-icon[b-2ohcav7wds] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    margin-bottom: 20px;
}

.monetize-icon :deep(svg)[b-2ohcav7wds] {
    width: 22px;
    height: 22px;
}

.monetize-card h3[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px;
}

.monetize-card p[b-2ohcav7wds] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

.monetize-cta[b-2ohcav7wds] {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

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

/* ===========================================
   SERVICES STRIP
   =========================================== */
.services-strip[b-2ohcav7wds] {
    position: relative;
    z-index: 1;
    padding: 64px 0;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.05) 0%, transparent 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.services-strip .container[b-2ohcav7wds] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.services-strip-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-strip-item[b-2ohcav7wds] {
    text-align: center;
}

.service-strip-item .icon[b-2ohcav7wds] {
    width: 40px;
    height: 40px;
    color: #06b6d4;
    margin: 0 auto 16px;
}

.service-strip-item h4[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.service-strip-item p[b-2ohcav7wds] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.ai-cta[b-2ohcav7wds] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    background: linear-gradient(180deg, transparent 0%, #050a12 100%);
}

.ai-cta .container[b-2ohcav7wds] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.ai-cta .cta-content[b-2ohcav7wds] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.ai-cta .cta-content h2[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.ai-cta .cta-content > p[b-2ohcav7wds] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.cta-actions[b-2ohcav7wds] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cta-partners[b-2ohcav7wds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cta-partners > span[b-2ohcav7wds] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #475569;
}

.partner-logos-inline[b-2ohcav7wds] {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.partner-logos-inline img[b-2ohcav7wds] {
    opacity: 0.9;
    filter: none;
    transition: all 0.3s ease;
}

.partner-logos-inline img:hover[b-2ohcav7wds] {
    opacity: 1;
}

.partner-logos-inline img.invert-logo[b-2ohcav7wds] {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.partner-logos-inline img.invert-logo:hover[b-2ohcav7wds] {
    opacity: 1;
}

/* ===========================================
   SECONDARY CTA
   =========================================== */
.secondary-cta[b-2ohcav7wds] {
    position: relative;
    z-index: 1;
    padding: 48px 0 80px;
    background: #050a12;
}

.secondary-cta .container[b-2ohcav7wds] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.secondary-cta-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.secondary-cta-card[b-2ohcav7wds] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    color: #94a3b8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.secondary-cta-card:hover[b-2ohcav7wds] {
    border-color: rgba(6, 182, 212, 0.3);
    color: #f1f5f9;
    background: rgba(6, 182, 212, 0.05);
}

.secondary-cta-card .icon[b-2ohcav7wds] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */
@media (max-width: 1200px) {
    .hero-container[b-2ohcav7wds] {
        gap: 48px;
    }

    .gpu-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
    }

    .gpu-grid.amd-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(3, 1fr);
    }

    .partners-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero-container[b-2ohcav7wds] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content[b-2ohcav7wds] {
        max-width: 600px;
        margin: 0 auto;
    }

    .hero-badges[b-2ohcav7wds] {
        justify-content: center;
    }

    .hero-tagline[b-2ohcav7wds] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-2ohcav7wds] {
        justify-content: center;
    }

    .hero-visual[b-2ohcav7wds] {
        max-width: 480px;
        margin: 0 auto;
    }

    .gpu-grid.amd-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(3, 1fr);
    }

    .use-cases-grid[b-2ohcav7wds] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .gpu-grid[b-2ohcav7wds],
    .gpu-grid.amd-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
    }

    .partners-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-strip-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .secondary-cta-grid[b-2ohcav7wds] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section[b-2ohcav7wds] {
        padding: 80px 0;
    }

    .ai-hero[b-2ohcav7wds] {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .hero-container[b-2ohcav7wds],
    .section .container[b-2ohcav7wds],
    .stats-strip .container[b-2ohcav7wds],
    .services-strip .container[b-2ohcav7wds],
    .ai-cta .container[b-2ohcav7wds],
    .secondary-cta .container[b-2ohcav7wds] {
        padding: 0 24px;
    }

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

    .hero-stats-row[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hero-stat-value[b-2ohcav7wds] {
        font-size: 1.375rem;
    }

    .hero-actions[b-2ohcav7wds] {
        flex-direction: column;
    }

    .btn-primary[b-2ohcav7wds],
    .btn-outline[b-2ohcav7wds] {
        width: 100%;
        justify-content: center;
    }

    .stats-strip-grid[b-2ohcav7wds] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-strip-item[b-2ohcav7wds] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .gpu-grid[b-2ohcav7wds],
    .gpu-grid.amd-grid[b-2ohcav7wds] {
        grid-template-columns: 1fr;
    }

    .use-case-card[b-2ohcav7wds] {
        flex-direction: column;
        text-align: center;
    }

    .use-case-icon[b-2ohcav7wds] {
        margin: 0 auto;
    }

    .use-case-gpus[b-2ohcav7wds] {
        justify-content: center;
    }

    .use-case-arrow[b-2ohcav7wds] {
        display: none;
    }

    .partners-grid[b-2ohcav7wds] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-2ohcav7wds] {
        flex-direction: column;
    }

    .partner-logos-inline[b-2ohcav7wds] {
        gap: 20px;
    }

    .partner-logos-inline img[b-2ohcav7wds] {
        max-width: 60px;
        height: auto;
    }

    .architecture-showcase[b-2ohcav7wds] {
        max-width: 320px;
    }

}

@media (max-width: 480px) {
    .hero-title[b-2ohcav7wds] {
        font-size: 1.875rem;
    }

    .hero-stats-row[b-2ohcav7wds] {
        grid-template-columns: 1fr 1fr;
    }

    .stats-strip-grid[b-2ohcav7wds] {
        grid-template-columns: 1fr;
    }

    .services-strip-grid[b-2ohcav7wds] {
        grid-template-columns: 1fr;
    }

}
/* /Components/Pages/Hardware/Cooling.razor.rz.scp.css */
/* =====================================================
   COOLING PAGE STYLES
   Color Theme: Cyan/Sky Blue (#06b6d4, #0ea5e9)
   ===================================================== */

/* Container */
.container[b-ao0d9nmbrv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* =====================================================
   HERO THEME OVERRIDES (Cyan/Sky Blue)
   Note: Tag, Badge, and Accent colors are now set via Hero parameters
   ===================================================== */

/* Override primary button for cyan (not yet parameterized) */
[b-ao0d9nmbrv] .btn-gold {
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
}

[b-ao0d9nmbrv] .btn-gold:hover {
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
}

/* =====================================================
   HERO STATS (in Props slot)
   ===================================================== */
.cool-stats-row[b-ao0d9nmbrv] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    width: 100%;
}

.cool-stat[b-ao0d9nmbrv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cool-stat-value[b-ao0d9nmbrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #06b6d4;
}

.cool-stat-label[b-ao0d9nmbrv] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =====================================================
   HERO SHOWCASE CARD (in Preview slot)
   ===================================================== */
.cool-showcase[b-ao0d9nmbrv] {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.cool-showcase-card[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(14, 165, 233, 0.1) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cool-showcase-card[b-ao0d9nmbrv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #06b6d4, #0ea5e9, #38bdf8);
}

.cool-showcase-label[b-ao0d9nmbrv] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.cool-showcase-model[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.cool-showcase-spec[b-ao0d9nmbrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    color: white;
    margin-bottom: 24px;
}

.cool-showcase-features[b-ao0d9nmbrv] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cool-showcase-features span[b-ao0d9nmbrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    background: rgba(6, 182, 212, 0.15);
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.cool-showcase-glow[b-ao0d9nmbrv] {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* =====================================================
   STATS STRIP
   ===================================================== */
.stats-strip[b-ao0d9nmbrv] {
    background: linear-gradient(180deg, #082f49 0%, #020617 100%);
    padding: 48px 0;
    border-top: 1px solid rgba(6, 182, 212, 0.2);
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

.stats-strip-grid[b-ao0d9nmbrv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.stat-strip-item[b-ao0d9nmbrv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(6, 182, 212, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(6, 182, 212, 0.15);
}

.stat-strip-item :deep(svg)[b-ao0d9nmbrv] {
    width: 28px;
    height: 28px;
    color: #06b6d4;
    flex-shrink: 0;
}

.stat-strip-content[b-ao0d9nmbrv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-strip-value[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.stat-strip-label[b-ao0d9nmbrv] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   SECTION STYLES
   ===================================================== */
.section[b-ao0d9nmbrv] {
    padding: 100px 0;
    position: relative;
    background: #020617;
}

.section-alt[b-ao0d9nmbrv] {
    background: linear-gradient(180deg, #0a1628 0%, #020617 100%);
}

.section-header[b-ao0d9nmbrv] {
    text-align: center;
    margin-bottom: 64px;
}

.section-tag[b-ao0d9nmbrv] {
    display: inline-block;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #67e8f9;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.section-title[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.section-subtitle[b-ao0d9nmbrv] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =====================================================
   COOLING GRID
   ===================================================== */
.cooling-grid[b-ao0d9nmbrv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.cooling-card[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cooling-card:hover[b-ao0d9nmbrv] {
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.cooling-card.featured[b-ao0d9nmbrv] {
    border-color: rgba(6, 182, 212, 0.4);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.cooling-card-header[b-ao0d9nmbrv] {
    padding: 24px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.cooling-icon[b-ao0d9nmbrv] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(14, 165, 233, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cooling-icon :deep(svg)[b-ao0d9nmbrv] {
    width: 28px;
    height: 28px;
    color: #06b6d4;
}

.cooling-badge[b-ao0d9nmbrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cooling-badge.liquid[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(14, 165, 233, 0.2));
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.4);
}

.cooling-badge.air[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.2));
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.cooling-badge.immersion[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.2));
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.cooling-card-body[b-ao0d9nmbrv] {
    padding: 24px;
    flex: 1;
}

.cooling-card-body h3[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.cooling-card-body p[b-ao0d9nmbrv] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.cooling-specs[b-ao0d9nmbrv] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.cooling-specs li[b-ao0d9nmbrv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.cooling-specs li:last-child[b-ao0d9nmbrv] {
    border-bottom: none;
}

.cooling-specs li[b-ao0d9nmbrv]::before {
    content: '•';
    color: #06b6d4;
    font-weight: bold;
}

.cooling-highlight[b-ao0d9nmbrv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.cooling-highlight :deep(svg)[b-ao0d9nmbrv] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

.cooling-highlight span[b-ao0d9nmbrv] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #67e8f9;
}

.cooling-card-footer[b-ao0d9nmbrv] {
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.card-btn[b-ao0d9nmbrv] {
    display: block;
    text-align: center;
    padding: 12px 24px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 10px;
    color: #67e8f9;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.card-btn:hover[b-ao0d9nmbrv] {
    background: rgba(6, 182, 212, 0.25);
    border-color: rgba(6, 182, 212, 0.5);
}

/* =====================================================
   INFRASTRUCTURE GRID
   ===================================================== */
.infrastructure-grid[b-ao0d9nmbrv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.infra-card[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 28px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.infra-card:hover[b-ao0d9nmbrv] {
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.infra-icon[b-ao0d9nmbrv] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(14, 165, 233, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.infra-icon :deep(svg)[b-ao0d9nmbrv] {
    width: 26px;
    height: 26px;
    color: #06b6d4;
}

.infra-card h3[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.infra-card p[b-ao0d9nmbrv] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.infra-specs[b-ao0d9nmbrv] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.infra-specs span[b-ao0d9nmbrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #67e8f9;
    background: rgba(6, 182, 212, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* =====================================================
   SERVICES STRIP
   ===================================================== */
.services-strip[b-ao0d9nmbrv] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
    border-top: 1px solid rgba(6, 182, 212, 0.2);
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
    padding: 64px 0;
}

.services-strip-grid[b-ao0d9nmbrv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-strip-item[b-ao0d9nmbrv] {
    text-align: center;
    padding: 24px;
}

.service-strip-item :deep(svg)[b-ao0d9nmbrv] {
    width: 40px;
    height: 40px;
    color: #06b6d4;
    margin-bottom: 16px;
}

.service-strip-item h4[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.service-strip-item p[b-ao0d9nmbrv] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.cooling-cta[b-ao0d9nmbrv] {
    padding: 100px 0;
    background: linear-gradient(135deg, #082f49 0%, #020617 100%);
    position: relative;
    overflow: hidden;
}

.cooling-cta[b-ao0d9nmbrv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.cta-content[b-ao0d9nmbrv] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2[b-ao0d9nmbrv] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.cta-content > p[b-ao0d9nmbrv] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
    margin-bottom: 40px;
}

.cta-actions[b-ao0d9nmbrv] {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.cta-stats[b-ao0d9nmbrv] {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.cta-stat[b-ao0d9nmbrv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.cta-stat-value[b-ao0d9nmbrv] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: #06b6d4;
}

.cta-stat-label[b-ao0d9nmbrv] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   SECONDARY CTA
   ===================================================== */
.secondary-cta[b-ao0d9nmbrv] {
    padding: 64px 0;
    background: #020617;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.secondary-cta-grid[b-ao0d9nmbrv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.secondary-cta-card[b-ao0d9nmbrv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.secondary-cta-card:hover[b-ao0d9nmbrv] {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.1);
    transform: translateY(-2px);
}

.secondary-cta-card :deep(svg)[b-ao0d9nmbrv] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 1200px) {
    .hero-container[b-ao0d9nmbrv] {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .hero-content[b-ao0d9nmbrv] {
        max-width: 100%;
    }

    .hero-badges[b-ao0d9nmbrv] {
        justify-content: center;
    }

    .hero-stats-row[b-ao0d9nmbrv] {
        justify-content: center;
    }

    .hero-actions[b-ao0d9nmbrv] {
        justify-content: center;
    }

    .hero-visual[b-ao0d9nmbrv] {
        order: -1;
    }

    .cooling-showcase[b-ao0d9nmbrv] {
        max-width: 400px;
    }

    .stats-strip-grid[b-ao0d9nmbrv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cooling-grid[b-ao0d9nmbrv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .infrastructure-grid[b-ao0d9nmbrv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero-title[b-ao0d9nmbrv] {
        font-size: 3rem;
    }

    .services-strip-grid[b-ao0d9nmbrv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-stats[b-ao0d9nmbrv] {
        gap: 32px;
    }
}

@media (max-width: 900px) {
    .cooling-grid[b-ao0d9nmbrv] {
        grid-template-columns: 1fr;
    }

    .secondary-cta-grid[b-ao0d9nmbrv] {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   COMPARISON TABLE ENHANCEMENTS
   =========================================== */

/* Dimension column - lighter background */
.comparison-table th:first-child[b-ao0d9nmbrv],
.comparison-table td:first-child[b-ao0d9nmbrv] {
    background: rgba(255, 255, 255, 0.06);
}

/* Column headers - bolder and more prominent */
.comparison-table th[b-ao0d9nmbrv] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f8fafc;
    padding: 18px 20px;
}

/* No hover effect - static table */
.comparison-table tbody tr:hover td[b-ao0d9nmbrv] {
    background: none;
}

@media (max-width: 768px) {
    .cooling-hero[b-ao0d9nmbrv] {
        min-height: auto;
        padding: 100px 0 60px;
    }

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

    .hero-tagline[b-ao0d9nmbrv] {
        font-size: 1.05rem;
    }

    .hero-stats-row[b-ao0d9nmbrv] {
        gap: 20px;
    }

    .hero-stat-value[b-ao0d9nmbrv] {
        font-size: 1.25rem;
    }

    .showcase-model[b-ao0d9nmbrv] {
        font-size: 3.5rem;
    }

    .stats-strip-grid[b-ao0d9nmbrv] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section[b-ao0d9nmbrv] {
        padding: 70px 0;
    }

    .section-title[b-ao0d9nmbrv] {
        font-size: 2rem;
    }

    .infrastructure-grid[b-ao0d9nmbrv] {
        grid-template-columns: 1fr;
    }

    .services-strip-grid[b-ao0d9nmbrv] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cta-content h2[b-ao0d9nmbrv] {
        font-size: 2rem;
    }

    .cta-stats[b-ao0d9nmbrv] {
        flex-direction: column;
        gap: 24px;
    }

    .cta-stat-value[b-ao0d9nmbrv] {
        font-size: 1.75rem;
    }

    .comparison-table th[b-ao0d9nmbrv],
    .comparison-table td[b-ao0d9nmbrv] {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .container[b-ao0d9nmbrv] {
        padding: 0 16px;
    }

    .hero-title[b-ao0d9nmbrv] {
        font-size: 2rem;
    }

    .hero-badges[b-ao0d9nmbrv] {
        flex-direction: column;
        align-items: center;
    }

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

    .btn-primary[b-ao0d9nmbrv],
    .btn-outline[b-ao0d9nmbrv] {
        width: 100%;
        justify-content: center;
    }

    .showcase-card[b-ao0d9nmbrv] {
        padding: 32px 24px;
    }

    .showcase-model[b-ao0d9nmbrv] {
        font-size: 3rem;
    }

    .showcase-features[b-ao0d9nmbrv] {
        gap: 12px;
    }

    .cooling-card-header[b-ao0d9nmbrv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .infra-specs[b-ao0d9nmbrv] {
        flex-direction: column;
    }

}
/* /Components/Pages/Hardware/CustomSolutions.razor.rz.scp.css */
/* ============================================
   Custom Solutions Page Styles
   Color Theme: Violet/Fuchsia (#8b5cf6, #a855f7)
   ============================================ */

/* Container */
.container[b-grkwz0id0r] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* ============================================
   HERO THEME OVERRIDES (Violet/Fuchsia)
   ============================================ */

/* Override tag colors for violet theme */
[b-grkwz0id0r] .hero-tag {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
}

[b-grkwz0id0r] .hero-tag::before {
    background: #a855f7;
}

/* Override headline accent for violet */
[b-grkwz0id0r] .hero-headline .accent {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Override primary button for violet */
[b-grkwz0id0r] .btn-gold {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

[b-grkwz0id0r] .btn-gold:hover {
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}

/* Override grid decoration for violet */
[b-grkwz0id0r] .hero-grid-deco {
    background-image:
        linear-gradient(rgba(139, 92, 246, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.15) 1px, transparent 1px);
}

/* ============================================
   HERO SHOWCASE CARD (in Preview slot)
   ============================================ */

.showcase-card[b-grkwz0id0r] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 0;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);
}

.showcase-header[b-grkwz0id0r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.showcase-badge[b-grkwz0id0r] {
    padding: 4px 12px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.showcase-type[b-grkwz0id0r] {
    font-size: 0.875rem;
    color: rgba(248, 250, 252, 0.6);
}

.showcase-content[b-grkwz0id0r] {
    padding: 32px 24px;
    text-align: center;
}

.showcase-icon[b-grkwz0id0r] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-icon :deep(svg)[b-grkwz0id0r] {
    width: 40px;
    height: 40px;
    color: #a855f7;
}

.showcase-title[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.showcase-subtitle[b-grkwz0id0r] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.6);
    margin-bottom: 24px;
}

.showcase-specs[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.showcase-spec[b-grkwz0id0r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
}

.showcase-spec .spec-label[b-grkwz0id0r] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showcase-spec .spec-value[b-grkwz0id0r] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #a855f7;
}

.showcase-footer[b-grkwz0id0r] {
    padding: 16px 24px;
    background: rgba(139, 92, 246, 0.05);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.showcase-result[b-grkwz0id0r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #a855f7;
    font-weight: 500;
}

.showcase-result :deep(svg)[b-grkwz0id0r] {
    width: 16px;
    height: 16px;
}

/* Stats Strip */
.stats-strip[b-grkwz0id0r] {
    background: rgba(139, 92, 246, 0.05);
    border-top: 1px solid rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    padding: 40px 0;
}

.stats-grid[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.stat-item[b-grkwz0id0r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-value[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #a855f7;
    line-height: 1;
}

.stat-label[b-grkwz0id0r] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
}

/* Section Styles */
.section[b-grkwz0id0r] {
    padding: 100px 0;
    position: relative;
}

.section-alt[b-grkwz0id0r] {
    background: rgba(15, 23, 42, 0.3);
}

.section-header[b-grkwz0id0r] {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge[b-grkwz0id0r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #a855f7;
    margin-bottom: 20px;
}

.section-badge :deep(svg)[b-grkwz0id0r] {
    width: 16px;
    height: 16px;
}

.section-title[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.section-description[b-grkwz0id0r] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Solutions Grid */
.solutions-grid[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.solution-card[b-grkwz0id0r] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.solution-card:hover[b-grkwz0id0r] {
    transform: translateY(-8px);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.15);
}

.solution-card.featured[b-grkwz0id0r] {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.1);
}

.solution-card-header[b-grkwz0id0r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.solution-icon[b-grkwz0id0r] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-icon :deep(svg)[b-grkwz0id0r] {
    width: 28px;
    height: 28px;
    color: #a855f7;
}

.solution-badge[b-grkwz0id0r] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.solution-badge.ai[b-grkwz0id0r] {
    background: rgba(139, 92, 246, 0.1);
    color: #a855f7;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.solution-badge.inference[b-grkwz0id0r] {
    background: rgba(34, 211, 238, 0.1);
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, 0.3);
}

.solution-badge.hpc[b-grkwz0id0r] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.solution-card-body[b-grkwz0id0r] {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.solution-card-body h3[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.solution-subtitle[b-grkwz0id0r] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 16px;
}

.solution-description[b-grkwz0id0r] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.solution-specs-grid[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.solution-spec[b-grkwz0id0r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solution-spec .spec-label[b-grkwz0id0r] {
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.solution-spec .spec-value[b-grkwz0id0r] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a855f7;
}

.solution-features[b-grkwz0id0r] {
    list-style: disc;
    padding: 0 0 0 20px;
    margin: 0 0 24px;
}

.solution-features li[b-grkwz0id0r] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    padding: 6px 0;
}

.solution-features li[b-grkwz0id0r]::marker {
    color: #a855f7;
}


/* Extended Solutions Grid */
.extended-grid[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.extended-card[b-grkwz0id0r] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    transition: all 0.3s ease;
}

.extended-card:hover[b-grkwz0id0r] {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.1);
}

.extended-icon[b-grkwz0id0r] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.extended-icon :deep(svg)[b-grkwz0id0r] {
    width: 24px;
    height: 24px;
    color: #a855f7;
}

.extended-card h3[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.extended-card > p[b-grkwz0id0r] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.extended-features[b-grkwz0id0r] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.extended-features li[b-grkwz0id0r] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.7);
    padding: 6px 0;
}

.extended-features li[b-grkwz0id0r]::before {
    content: '→';
    color: #a855f7;
}

/* Process Timeline */
.process-timeline[b-grkwz0id0r] {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.process-timeline[b-grkwz0id0r]::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #8b5cf6, #a855f7);
    opacity: 0.3;
}

.process-step[b-grkwz0id0r] {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
}

.process-step:last-child[b-grkwz0id0r] {
    margin-bottom: 0;
}

.step-number[b-grkwz0id0r] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.step-content[b-grkwz0id0r] {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px 30px;
}

.step-content h3[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.step-content p[b-grkwz0id0r] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.step-deliverables[b-grkwz0id0r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deliverable[b-grkwz0id0r] {
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #a855f7;
    font-weight: 500;
}

/* Advantages Grid */
.advantages-grid[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.advantage-card[b-grkwz0id0r] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.advantage-card:hover[b-grkwz0id0r] {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.3);
}

.advantage-icon[b-grkwz0id0r] {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-icon :deep(svg)[b-grkwz0id0r] {
    width: 32px;
    height: 32px;
}

.advantage-icon.performance[b-grkwz0id0r] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.advantage-icon.performance :deep(svg)[b-grkwz0id0r] {
    color: #a855f7;
}

.advantage-icon.cost[b-grkwz0id0r] {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.advantage-icon.cost :deep(svg)[b-grkwz0id0r] {
    color: #10b981;
}

.advantage-icon.future[b-grkwz0id0r] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.advantage-icon.future :deep(svg)[b-grkwz0id0r] {
    color: #3b82f6;
}

.advantage-icon.support[b-grkwz0id0r] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.advantage-icon.support :deep(svg)[b-grkwz0id0r] {
    color: #f59e0b;
}

.advantage-card h3[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.advantage-card p[b-grkwz0id0r] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.advantage-stat[b-grkwz0id0r] {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-highlight[b-grkwz0id0r] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #a855f7;
    margin-bottom: 4px;
}

.stat-desc[b-grkwz0id0r] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.5);
}

/* Services Strip */
.services-strip[b-grkwz0id0r] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding: 50px 0;
}

.services-content[b-grkwz0id0r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.services-text h2[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.services-text p[b-grkwz0id0r] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.6);
}

.services-list[b-grkwz0id0r] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.service-item[b-grkwz0id0r] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.95rem;
    font-weight: 500;
}

.service-item :deep(svg)[b-grkwz0id0r] {
    width: 20px;
    height: 20px;
    color: #a855f7;
}

/* CTA Section */
.cta-section[b-grkwz0id0r] {
    padding: 100px 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
}

.cta-content[b-grkwz0id0r] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-icon[b-grkwz0id0r] {
    width: 80px;
    height: 80px;
    margin: 0 auto 32px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon :deep(svg)[b-grkwz0id0r] {
    width: 40px;
    height: 40px;
    color: #a855f7;
}

.cta-content h2[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.cta-content p[b-grkwz0id0r] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
    margin-bottom: 40px;
}

.cta-actions[b-grkwz0id0r] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn-primary[b-grkwz0id0r] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn-primary:hover[b-grkwz0id0r] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
}

.cta-btn-primary :deep(svg)[b-grkwz0id0r] {
    width: 20px;
    height: 20px;
}

.cta-btn-secondary[b-grkwz0id0r] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn-secondary:hover[b-grkwz0id0r] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-btn-secondary :deep(svg)[b-grkwz0id0r] {
    width: 20px;
    height: 20px;
}

/* Secondary CTA */
.secondary-cta[b-grkwz0id0r] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-cta-content[b-grkwz0id0r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.secondary-cta-item[b-grkwz0id0r] {
    text-align: center;
    padding: 40px 30px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.secondary-cta-item:hover[b-grkwz0id0r] {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.3);
}

.secondary-cta-item :deep(svg)[b-grkwz0id0r] {
    width: 40px;
    height: 40px;
    color: #a855f7;
    margin-bottom: 20px;
}

.secondary-cta-item h3[b-grkwz0id0r] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.secondary-cta-item p[b-grkwz0id0r] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 20px;
}

.secondary-cta-item a[b-grkwz0id0r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a855f7;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.secondary-cta-item a:hover[b-grkwz0id0r] {
    gap: 10px;
}

/* ============================================
   Responsive Design
   ============================================ */

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

    .extended-grid[b-grkwz0id0r] {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantages-grid[b-grkwz0id0r] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .showcase-card[b-grkwz0id0r] {
        max-width: 380px;
        margin: 0 auto;
    }

    .services-content[b-grkwz0id0r] {
        flex-direction: column;
        text-align: center;
    }

    .services-list[b-grkwz0id0r] {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .section-title[b-grkwz0id0r] {
        font-size: 2.25rem;
    }

    .solutions-grid[b-grkwz0id0r] {
        grid-template-columns: 1fr;
    }

    .solution-specs-grid[b-grkwz0id0r] {
        grid-template-columns: repeat(3, 1fr);
    }

    .extended-grid[b-grkwz0id0r] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-grkwz0id0r] {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .process-timeline[b-grkwz0id0r]::before {
        left: 25px;
    }

    .step-number[b-grkwz0id0r] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .advantages-grid[b-grkwz0id0r] {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .stat-value[b-grkwz0id0r] {
        font-size: 2rem;
    }

    .section[b-grkwz0id0r] {
        padding: 60px 0;
    }

    .section-title[b-grkwz0id0r] {
        font-size: 1.75rem;
    }

    .section-description[b-grkwz0id0r] {
        font-size: 1rem;
    }

    .process-step[b-grkwz0id0r] {
        flex-direction: column;
        gap: 16px;
    }

    .process-timeline[b-grkwz0id0r]::before {
        display: none;
    }

    .step-number[b-grkwz0id0r] {
        margin: 0;
    }

    .advantages-grid[b-grkwz0id0r] {
        grid-template-columns: 1fr;
    }

    .secondary-cta-content[b-grkwz0id0r] {
        grid-template-columns: 1fr;
    }

    .cta-content h2[b-grkwz0id0r] {
        font-size: 1.75rem;
    }

    .cta-actions[b-grkwz0id0r] {
        flex-direction: column;
    }

    .cta-btn-primary[b-grkwz0id0r],
    .cta-btn-secondary[b-grkwz0id0r] {
        width: 100%;
        justify-content: center;
    }

    .services-list[b-grkwz0id0r] {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .showcase-specs[b-grkwz0id0r] {
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid[b-grkwz0id0r] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .solution-specs-grid[b-grkwz0id0r] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .solution-spec[b-grkwz0id0r] {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px;
        background: rgba(139, 92, 246, 0.05);
        border-radius: 6px;
    }

    .step-deliverables[b-grkwz0id0r] {
        flex-direction: column;
    }

    .deliverable[b-grkwz0id0r] {
        text-align: center;
    }
}
/* /Components/Pages/Hardware/DataCenter.razor.rz.scp.css */
/* ===========================================
   DATA CENTER INFRASTRUCTURE PAGE
   Enterprise Data Center Solutions
   Color scheme: Blue (#3b82f6) / Indigo (#6366f1)
   =========================================== */

/* ===========================================
   BRAND COLOR VARIABLES (for generic-hero.css)
   =========================================== */
.brand-dc[b-4xafj1curz] {
    --brand-color: #3b82f6;
    --brand-color-rgb: 59, 130, 246;
    --brand-color-dark: #6366f1;
}

/* ===========================================
   HERO BADGES (page-specific variants)
   =========================================== */
.page-hero-badges[b-4xafj1curz] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-hero-badge[b-4xafj1curz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
    padding: 8px 14px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

/* ===========================================
   HERO STATS (page-specific)
   =========================================== */
.dc-stats-row[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dc-stat[b-4xafj1curz] {
    text-align: center;
}

.dc-stat-value[b-4xafj1curz] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: 6px;
}

.dc-stat-label[b-4xafj1curz] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn-primary[b-4xafj1curz] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 40px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover[b-4xafj1curz] {
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(59, 130, 246, 0.3);
}

.btn-primary .icon[b-4xafj1curz] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   STATS STRIP
   =========================================== */
.stats-strip[b-4xafj1curz] {
    position: relative;
    z-index: 1;
    padding: 32px 0;
    background: #0a1018;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-strip .container[b-4xafj1curz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.stats-strip-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-strip-item[b-4xafj1curz] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.stat-strip-item .icon[b-4xafj1curz] {
    width: 28px;
    height: 28px;
    color: #3b82f6;
    flex-shrink: 0;
}

.stat-strip-content[b-4xafj1curz] {
    display: flex;
    flex-direction: column;
}

.stat-strip-value[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
}

.stat-strip-label[b-4xafj1curz] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* ===========================================
   SECTION TAG OVERRIDES (for teal accents)
   =========================================== */
.page-section-tag[b-4xafj1curz] {
    color: #3b82f6;
}

.page-section-tag[b-4xafj1curz]::before {
    background: #3b82f6;
}

/* ===========================================
   SERVER GRID
   =========================================== */
.server-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.server-card[b-4xafj1curz] {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.server-card:hover[b-4xafj1curz] {
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.server-card.featured[b-4xafj1curz] {
    border-color: rgba(118, 185, 0, 0.3);
}

.server-card.featured:hover[b-4xafj1curz] {
    border-color: rgba(118, 185, 0, 0.5);
}

.server-card-header[b-4xafj1curz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.server-icon[b-4xafj1curz] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
}

.server-icon .icon[b-4xafj1curz] {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.server-card.featured .server-icon[b-4xafj1curz] {
    background: rgba(118, 185, 0, 0.1);
}

.server-card.featured .server-icon .icon[b-4xafj1curz] {
    color: #76b900;
}

.server-badge[b-4xafj1curz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
}

.server-badge.gpu[b-4xafj1curz] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.server-badge.cpu[b-4xafj1curz] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.server-badge.storage[b-4xafj1curz] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.server-card-body[b-4xafj1curz] {
    padding: 24px;
    flex: 1;
}

.server-card-body h3[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.server-card-body p[b-4xafj1curz] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.server-specs[b-4xafj1curz] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.server-specs li[b-4xafj1curz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: #94a3b8;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.server-specs li:last-child[b-4xafj1curz] {
    border-bottom: none;
}

.server-specs li[b-4xafj1curz]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
}

.server-card.featured .server-specs li[b-4xafj1curz]::before {
    background: #76b900;
}

.server-card-footer[b-4xafj1curz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.server-card:hover .server-card-footer[b-4xafj1curz] {
    color: #3b82f6;
}

.server-card.featured:hover .server-card-footer[b-4xafj1curz] {
    color: #76b900;
}

.server-card-footer .icon[b-4xafj1curz] {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.server-card:hover .server-card-footer .icon[b-4xafj1curz] {
    transform: translateX(4px);
}

/* ===========================================
   OEM GRID
   =========================================== */
.oem-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.oem-card[b-4xafj1curz] {
    padding: 28px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.oem-card:hover[b-4xafj1curz] {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
    transform: translateY(-4px);
}

.oem-logo[b-4xafj1curz] {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.oem-logo img[b-4xafj1curz] {
    max-height: 40px;
    width: auto;
    
}



.oem-card h4[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
    text-align: center;
}

.oem-card p[b-4xafj1curz] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0 0 16px 0;
    text-align: center;
}

.oem-highlights[b-4xafj1curz] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.oem-highlights li[b-4xafj1curz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748b;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
}

/* ===========================================
   INFRASTRUCTURE GRID
   =========================================== */
.infra-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.infra-card[b-4xafj1curz] {
    padding: 32px 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.infra-card:hover[b-4xafj1curz] {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

.infra-icon[b-4xafj1curz] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 14px;
}

.infra-icon .icon[b-4xafj1curz] {
    width: 28px;
    height: 28px;
    color: #3b82f6;
}

.infra-card h3[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.infra-card p[b-4xafj1curz] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.infra-stats[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.infra-stat[b-4xafj1curz] {
    display: flex;
    flex-direction: column;
}

.infra-stat .stat-value[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
}

.infra-stat .stat-label[b-4xafj1curz] {
    font-size: 0.6875rem;
    color: #64748b;
    margin-top: 2px;
}

/* ===========================================
   SERVICES STRIP
   =========================================== */
.services-strip[b-4xafj1curz] {
    position: relative;
    z-index: 1;
    padding: 64px 0;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.services-strip .container[b-4xafj1curz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.services-strip-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-strip-item[b-4xafj1curz] {
    text-align: center;
}

.service-strip-item .icon[b-4xafj1curz] {
    width: 40px;
    height: 40px;
    color: #3b82f6;
    margin: 0 auto 16px;
}

.service-strip-item h4[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.service-strip-item p[b-4xafj1curz] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.dc-cta[b-4xafj1curz] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    background: linear-gradient(180deg, transparent 0%, #050a12 100%);
}

.dc-cta .container[b-4xafj1curz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.dc-cta .cta-content[b-4xafj1curz] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.dc-cta .cta-content h2[b-4xafj1curz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.dc-cta .cta-content > p[b-4xafj1curz] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.cta-actions[b-4xafj1curz] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cta-partners[b-4xafj1curz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cta-partners > span[b-4xafj1curz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #475569;
}

.partner-logos-inline[b-4xafj1curz] {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-partner-link[b-4xafj1curz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-partner-link img[b-4xafj1curz] {
    opacity: 1;
    filter: none;
    transition: transform 0.2s ease;
}

.cta-partner-link:hover img[b-4xafj1curz] {
    transform: scale(1.05);
}

.cta-partner-text[b-4xafj1curz] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-partner-text.light[b-4xafj1curz] {
    color: #cbd5e1;
}

/* ===========================================
   SECONDARY CTA
   =========================================== */
.secondary-cta[b-4xafj1curz] {
    position: relative;
    z-index: 1;
    padding: 48px 0 80px;
    background: #050a12;
}

.secondary-cta .container[b-4xafj1curz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.secondary-cta-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.secondary-cta-card[b-4xafj1curz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    color: #94a3b8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.secondary-cta-card:hover[b-4xafj1curz] {
    border-color: rgba(59, 130, 246, 0.3);
    color: #f1f5f9;
    background: rgba(59, 130, 246, 0.05);
}

.secondary-cta-card .icon[b-4xafj1curz] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */
@media (max-width: 1200px) {
    .dc-stats-row[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .server-grid[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .oem-grid[b-4xafj1curz] {
        grid-template-columns: repeat(3, 1fr);
    }

    .infra-grid[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .dc-stats-row[b-4xafj1curz] {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .server-grid[b-4xafj1curz] {
        grid-template-columns: 1fr;
    }

    .oem-grid[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .infra-grid[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-strip-grid[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .secondary-cta-grid[b-4xafj1curz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dc-stats-row[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .dc-stat-value[b-4xafj1curz] {
        font-size: 1.375rem;
    }

    .stats-strip .container[b-4xafj1curz],
    .services-strip .container[b-4xafj1curz],
    .dc-cta .container[b-4xafj1curz],
    .secondary-cta .container[b-4xafj1curz] {
        padding: 0 24px;
    }

    .stats-strip-grid[b-4xafj1curz] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-strip-item[b-4xafj1curz] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .oem-grid[b-4xafj1curz] {
        grid-template-columns: 1fr;
    }

    .infra-grid[b-4xafj1curz] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-4xafj1curz] {
        flex-direction: column;
    }

    .partner-logos-inline[b-4xafj1curz] {
        gap: 20px;
    }

    .cta-partner-link img[b-4xafj1curz] {
        max-width: 60px;
        height: auto;
    }

    .cta-partner-text[b-4xafj1curz] {
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .dc-stats-row[b-4xafj1curz] {
        grid-template-columns: 1fr 1fr;
    }

    .stats-strip-grid[b-4xafj1curz] {
        grid-template-columns: 1fr;
    }

    .services-strip-grid[b-4xafj1curz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Hardware/Deployment.razor.rz.scp.css */
/* ===========================================
   DEPLOYMENT SERVICES PAGE - SLYD DESIGN SYSTEM
   Prefix: deploy-
   Uses: generic-hero.css, generic-sections.css
   =========================================== */

/* ===========================================
   VARIABLES
   =========================================== */
:root[b-8abefjxf1t] {
    --deploy-cyan: #06b6d4;
    --deploy-purple: #8b5cf6;
    --deploy-green: #22c55e;
    --deploy-gold: #f59e0b;
    /* Brand colors for generic-hero.css */
    --brand-color: #06b6d4;
    --brand-color-rgb: 6, 182, 212;
    --brand-color-dark: #0891b2;
}

/* ===========================================
   HERO PROPS (page-specific styling)
   =========================================== */
.deploy-hero-props[b-8abefjxf1t] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: 40px;
}

.deploy-hero-prop[b-8abefjxf1t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.deploy-hero-prop :deep(.icon)[b-8abefjxf1t] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

.btn-text[b-8abefjxf1t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-text:hover[b-8abefjxf1t] {
    color: #f1f5f9;
}

/* ===========================================
   HERO PREVIEW - DEPLOYMENT PIPELINE
   =========================================== */
.deploy-preview-card[b-8abefjxf1t] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}

.deploy-preview-header[b-8abefjxf1t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.deploy-preview-title[b-8abefjxf1t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.deploy-preview-title :deep(.icon)[b-8abefjxf1t] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.deploy-preview-badge[b-8abefjxf1t] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border-radius: 4px;
}

.deploy-preview-content[b-8abefjxf1t] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Timeline in Preview */
.deploy-preview-timeline[b-8abefjxf1t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deploy-timeline-item[b-8abefjxf1t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.deploy-timeline-dot[b-8abefjxf1t] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}

.deploy-timeline-item.completed .deploy-timeline-dot[b-8abefjxf1t] {
    background: #22c55e;
}

.deploy-timeline-item.active .deploy-timeline-dot[b-8abefjxf1t] {
    background: #f59e0b;
    animation: deploy-pulse-active-b-8abefjxf1t 1.5s ease-in-out infinite;
}

.deploy-timeline-item.pending .deploy-timeline-dot[b-8abefjxf1t] {
    background: #475569;
}

@keyframes deploy-pulse-active-b-8abefjxf1t {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

.deploy-timeline-content[b-8abefjxf1t] {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.deploy-timeline-phase[b-8abefjxf1t] {
    font-size: 0.875rem;
    color: #f1f5f9;
}

.deploy-timeline-status[b-8abefjxf1t] {
    font-size: 0.75rem;
    color: #64748b;
}

.deploy-timeline-item.completed .deploy-timeline-status[b-8abefjxf1t] {
    color: #22c55e;
}

.deploy-timeline-item.active .deploy-timeline-status[b-8abefjxf1t] {
    color: #f59e0b;
}

/* Preview Stats */
.deploy-preview-stats[b-8abefjxf1t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.deploy-stat[b-8abefjxf1t] {
    text-align: center;
}

.deploy-stat-value[b-8abefjxf1t] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #06b6d4;
}

.deploy-stat-label[b-8abefjxf1t] {
    font-size: 0.75rem;
    color: #64748b;
}

/* ===========================================
   BREADCRUMB
   =========================================== */
.deploy-breadcrumb-wrapper[b-8abefjxf1t] {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.deploy-opening[b-8abefjxf1t] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.deploy-opening-lead-block[b-8abefjxf1t] {
    border-left: 3px solid #06b6d4;
    padding-left: 24px;
}

.deploy-opening-lead[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    color: #f1f5f9;
    margin: 0;
}

.deploy-opening-challenges[b-8abefjxf1t] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.deploy-challenge[b-8abefjxf1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.deploy-challenge:hover[b-8abefjxf1t] {
    border-color: rgba(6,182,212,0.3);
    color: #cbd5e1;
}

.deploy-challenge .icon[b-8abefjxf1t] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.deploy-opening-body p[b-8abefjxf1t] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0 0 20px 0;
    text-align: center;
}

.deploy-opening-body p:last-child[b-8abefjxf1t] {
    margin-bottom: 0;
}

.deploy-opening-highlight[b-8abefjxf1t] {
    position: relative;
    text-align: center;
    padding: 36px 40px;
    background: linear-gradient(135deg, rgba(6,182,212,0.08) 0%, rgba(99,102,241,0.06) 100%);
    border: 1px solid rgba(6,182,212,0.2);
    border-radius: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.4;
    overflow: hidden;
}

.deploy-highlight-accent[b-8abefjxf1t] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4, #6366f1, #06b6d4);
    background-size: 200% 100%;
    animation: deploy-accent-shift-b-8abefjxf1t 4s ease infinite;
}

@keyframes deploy-accent-shift-b-8abefjxf1t {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

@media (max-width: 768px) {
    .deploy-opening-lead[b-8abefjxf1t] {
        font-size: 1.25rem;
    }

    .deploy-opening-challenges[b-8abefjxf1t] {
        gap: 8px;
    }

    .deploy-challenge[b-8abefjxf1t] {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }

    .deploy-opening-highlight[b-8abefjxf1t] {
        padding: 28px 24px;
        font-size: 1.125rem;
    }
}

/* ===========================================
   SERVICES GRID
   =========================================== */
.deploy-services-grid[b-8abefjxf1t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.deploy-service-card[b-8abefjxf1t] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
    transition: all 0.3s ease;
}

.deploy-service-card:hover[b-8abefjxf1t] {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.deploy-service-icon[b-8abefjxf1t] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.deploy-service-icon.cyan[b-8abefjxf1t] {
    background: rgba(6,182,212,0.12);
}

.deploy-service-icon.cyan :deep(.icon)[b-8abefjxf1t] {
    color: #06b6d4;
}

.deploy-service-icon.purple[b-8abefjxf1t] {
    background: rgba(139,92,246,0.12);
}

.deploy-service-icon.purple :deep(.icon)[b-8abefjxf1t] {
    color: #8b5cf6;
}

.deploy-service-icon.green[b-8abefjxf1t] {
    background: rgba(34,197,94,0.12);
}

.deploy-service-icon.green :deep(.icon)[b-8abefjxf1t] {
    color: #22c55e;
}

.deploy-service-icon.gold[b-8abefjxf1t] {
    background: rgba(245,158,11,0.12);
}

.deploy-service-icon.gold :deep(.icon)[b-8abefjxf1t] {
    color: #f59e0b;
}

.deploy-service-icon :deep(.icon)[b-8abefjxf1t] {
    width: 24px;
    height: 24px;
}

.deploy-service-card h3[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    margin: 0 0 12px 0;
}

.deploy-service-card p[b-8abefjxf1t] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.deploy-service-deliverable[b-8abefjxf1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #64748b;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.deploy-service-deliverable :deep(.icon)[b-8abefjxf1t] {
    width: 14px;
    height: 14px;
    color: #06b6d4;
}

/* ===========================================
   DIFFERENTIATORS
   =========================================== */
.deploy-diff-grid[b-8abefjxf1t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.deploy-diff-card[b-8abefjxf1t] {
    display: flex;
    gap: 20px;
    padding: 32px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.deploy-diff-card:hover[b-8abefjxf1t] {
    border-color: rgba(255,255,255,0.08);
    background: rgba(15, 23, 42, 0.5);
}

.deploy-diff-icon[b-8abefjxf1t] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(6,182,212,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deploy-diff-icon :deep(.icon)[b-8abefjxf1t] {
    width: 22px;
    height: 22px;
    color: #06b6d4;
}

.deploy-diff-card h3[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    margin: 0 0 10px 0;
}

.deploy-diff-card p[b-8abefjxf1t] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   ENGAGEMENT MODELS
   =========================================== */
.deploy-models-grid[b-8abefjxf1t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.deploy-model-card[b-8abefjxf1t] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
    transition: all 0.3s ease;
}

.deploy-model-card:hover[b-8abefjxf1t] {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.deploy-model-tag[b-8abefjxf1t] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.deploy-model-tag.gold[b-8abefjxf1t] {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}

.deploy-model-tag.purple[b-8abefjxf1t] {
    background: rgba(139,92,246,0.15);
    color: #8b5cf6;
}

.deploy-model-tag.cyan[b-8abefjxf1t] {
    background: rgba(6,182,212,0.15);
    color: #06b6d4;
}

.deploy-model-card h3[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    margin: 0 0 12px 0;
}

.deploy-model-best[b-8abefjxf1t] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 24px 0;
    font-style: italic;
}

.deploy-model-includes[b-8abefjxf1t] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.deploy-model-includes li[b-8abefjxf1t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #cbd5e1;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.deploy-model-includes li:last-child[b-8abefjxf1t] {
    border-bottom: none;
}

.deploy-model-includes :deep(.icon)[b-8abefjxf1t] {
    width: 14px;
    height: 14px;
    color: #22c55e;
}

/* ===========================================
   PROCESS TIMELINE
   =========================================== */
.deploy-process-timeline[b-8abefjxf1t] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.deploy-process-timeline[b-8abefjxf1t]::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(180deg, #06b6d4 0%, #8b5cf6 100%);
}

.deploy-process-step[b-8abefjxf1t] {
    display: flex;
    gap: 32px;
    position: relative;
}

.deploy-process-marker[b-8abefjxf1t] {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(6,182,212,0.12);
    border: 2px solid #06b6d4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.deploy-process-number[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #06b6d4;
}

.deploy-process-content[b-8abefjxf1t] {
    flex: 1;
    padding: 8px 0 48px 0;
}

.deploy-process-content h4[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    margin: 0 0 4px 0;
}

.deploy-process-time[b-8abefjxf1t] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #06b6d4;
    margin-bottom: 12px;
}

.deploy-process-content p[b-8abefjxf1t] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   OEM PARTNERS
   =========================================== */
.deploy-partners-grid[b-8abefjxf1t] {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.deploy-partner-logo[b-8abefjxf1t] {
    padding: 24px 40px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.deploy-partner-logo:hover[b-8abefjxf1t] {
    border-color: rgba(255,255,255,0.12);
    background: rgba(15, 23, 42, 0.7);
}

.deploy-partner-logo span[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #94a3b8;
}

.deploy-partners-note[b-8abefjxf1t] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 24px 32px;
    background: rgba(6,182,212,0.05);
    border: 1px solid rgba(6,182,212,0.15);
    border-radius: 12px;
}

.deploy-partners-note p[b-8abefjxf1t] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

.deploy-partners-note strong[b-8abefjxf1t] {
    color: #f1f5f9;
}

/* ===========================================
   EXAMPLE DEPLOYMENTS
   =========================================== */
.deploy-examples-grid[b-8abefjxf1t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.deploy-example-card[b-8abefjxf1t] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 32px;
    transition: all 0.3s ease;
}

.deploy-example-card:hover[b-8abefjxf1t] {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
}

.deploy-example-industry[b-8abefjxf1t] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06b6d4;
    margin-bottom: 12px;
}

.deploy-example-card h3[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    margin: 0 0 20px 0;
}

.deploy-example-detail[b-8abefjxf1t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.deploy-example-detail:last-child[b-8abefjxf1t] {
    margin-bottom: 0;
}

.deploy-example-label[b-8abefjxf1t] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.deploy-example-detail span:last-child[b-8abefjxf1t] {
    font-size: 0.9375rem;
    color: #cbd5e1;
    line-height: 1.5;
}

/* ===========================================
   PRICING TABLE
   =========================================== */
.deploy-pricing-table[b-8abefjxf1t] {
    max-width: 700px;
    margin: 0 auto 48px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
}

.deploy-pricing-row[b-8abefjxf1t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 20px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.deploy-pricing-row:last-child[b-8abefjxf1t] {
    border-bottom: none;
}

.deploy-pricing-row.header[b-8abefjxf1t] {
    background: rgba(6,182,212,0.05);
}

.deploy-pricing-row.header span[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.deploy-pricing-row span:first-child[b-8abefjxf1t] {
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.deploy-pricing-row span:last-child[b-8abefjxf1t] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    color: #06b6d4;
    text-align: right;
}

.deploy-pricing-notes[b-8abefjxf1t] {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.deploy-pricing-notes h4[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    margin: 0 0 16px 0;
}

.deploy-pricing-notes ul[b-8abefjxf1t] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.deploy-pricing-notes li[b-8abefjxf1t] {
    font-size: 0.875rem;
    color: #64748b;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .deploy-services-grid[b-8abefjxf1t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .deploy-models-grid[b-8abefjxf1t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .deploy-models-grid .deploy-model-card:last-child[b-8abefjxf1t] {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }

    .deploy-examples-grid[b-8abefjxf1t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .deploy-examples-grid .deploy-example-card:last-child[b-8abefjxf1t] {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 1024px) {
    .deploy-diff-grid[b-8abefjxf1t] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .deploy-services-grid[b-8abefjxf1t],
    .deploy-models-grid[b-8abefjxf1t],
    .deploy-examples-grid[b-8abefjxf1t] {
        grid-template-columns: 1fr;
    }

    .deploy-models-grid .deploy-model-card:last-child[b-8abefjxf1t],
    .deploy-examples-grid .deploy-example-card:last-child[b-8abefjxf1t] {
        grid-column: span 1;
        max-width: none;
    }

    .deploy-process-timeline[b-8abefjxf1t]::before {
        left: 20px;
    }

    .deploy-process-marker[b-8abefjxf1t] {
        width: 42px;
        height: 42px;
    }

    .deploy-process-step[b-8abefjxf1t] {
        gap: 20px;
    }

    .deploy-partners-grid[b-8abefjxf1t] {
        gap: 16px;
    }

    .deploy-partner-logo[b-8abefjxf1t] {
        padding: 16px 24px;
    }

    .deploy-pricing-row[b-8abefjxf1t] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .deploy-pricing-row span:last-child[b-8abefjxf1t] {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .deploy-hero-props[b-8abefjxf1t] {
        flex-direction: column;
        gap: 12px;
    }

    .deploy-preview-stats[b-8abefjxf1t] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .deploy-process-content[b-8abefjxf1t] {
        padding-bottom: 32px;
    }
}
/* /Components/Pages/Hardware/GPU/AmdInstinct.razor.rz.scp.css */
/* AMD Instinct Product Page Styles - Silver/Gray Professional Branding */

.product-page[b-gibfa5jb9x] {
    min-height: 100vh;
}

.container[b-gibfa5jb9x] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* AMD Brand Colors - Silver/Gray Professional Palette */
:root[b-gibfa5jb9x] {
    --amd-silver: #c0c0c0;
    --amd-silver-light: #d4d4d4;
    --amd-silver-dark: #9ca3af;
    --amd-slate: #64748b;
    --amd-charcoal: #374151;
}

/* Product Hero */
.product-hero[b-gibfa5jb9x] {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.03) 0%, transparent 50%);
}

.product-hero.amd[b-gibfa5jb9x] {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.05) 0%, rgba(100, 116, 139, 0.03) 100%);
}

.hero-content[b-gibfa5jb9x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-badges[b-gibfa5jb9x] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge[b-gibfa5jb9x] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-amd[b-gibfa5jb9x] {
    background: rgba(192, 192, 192, 0.15);
    color: #d4d4d4;
    border: 1px solid rgba(192, 192, 192, 0.3);
}

.badge-instinct[b-gibfa5jb9x] {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.badge-datacenter[b-gibfa5jb9x] {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.hero-text h1[b-gibfa5jb9x] {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero-description[b-gibfa5jb9x] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.hero-cta[b-gibfa5jb9x] {
    display: flex;
    gap: 16px;
}

.btn-primary[b-gibfa5jb9x] {
    padding: 14px 28px;
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-gibfa5jb9x] {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    transform: translateY(-2px);
}

.btn-secondary[b-gibfa5jb9x] {
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-gibfa5jb9x] {
    border-color: #9ca3af;
    color: #d4d4d4;
}

/* Triple GPU Showcase */
.gpu-showcase[b-gibfa5jb9x] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpu-showcase.triple[b-gibfa5jb9x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gpu-card[b-gibfa5jb9x] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.gpu-card.mi300x[b-gibfa5jb9x] {
    border-color: rgba(148, 163, 184, 0.3);
}

.gpu-card.mi325x[b-gibfa5jb9x] {
    border-color: rgba(156, 163, 175, 0.4);
}

.gpu-card.mi355x[b-gibfa5jb9x] {
    border-color: rgba(209, 213, 219, 0.4);
    background: linear-gradient(145deg, rgba(209, 213, 219, 0.08), rgba(15, 23, 42, 0.9));
    box-shadow: 0 20px 60px rgba(209, 213, 219, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gpu-card:hover[b-gibfa5jb9x] {
    transform: translateY(-4px);
}

.gpu-tier[b-gibfa5jb9x] {
    font-size: 9px;
    font-weight: 700;
    color: #d4d4d4;
    background: rgba(209, 213, 219, 0.2);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.gpu-model[b-gibfa5jb9x] {
    font-size: 28px;
    font-weight: 800;
    color: #9ca3af;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 4px;
}

.gpu-card.mi355x .gpu-model[b-gibfa5jb9x] {
    color: #d4d4d4;
}

.gpu-arch[b-gibfa5jb9x] {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.gpu-highlight[b-gibfa5jb9x] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 6px 12px;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 6px;
    display: inline-block;
}

.gpu-card.mi355x .gpu-highlight[b-gibfa5jb9x] {
    background: rgba(209, 213, 219, 0.1);
}

/* Stats Strip - AMD Brand Overrides */
.amd-stats-section[b-gibfa5jb9x] {
    background: rgba(30, 41, 59, 0.3);
}

.amd-stats-section .stats-strip--bordered[b-gibfa5jb9x] {
    border-top-color: rgba(148, 163, 184, 0.2);
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

.amd-stats-section .stats-strip-value[b-gibfa5jb9x] {
    color: #9ca3af;
}

/* Instinct Benefits Section */
.instinct-benefits[b-gibfa5jb9x] {
    padding: 80px 0;
}

.instinct-benefits h2[b-gibfa5jb9x] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-intro[b-gibfa5jb9x] {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 48px;
}

.benefits-grid[b-gibfa5jb9x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.benefit-card[b-gibfa5jb9x] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.benefit-card:hover[b-gibfa5jb9x] {
    border-color: rgba(148, 163, 184, 0.3);
    transform: translateY(-4px);
}

.benefit-metric[b-gibfa5jb9x] {
    font-size: 48px;
    font-weight: 800;
    color: #9ca3af;
    line-height: 1;
    margin-bottom: 8px;
}

.benefit-label[b-gibfa5jb9x] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.benefit-detail[b-gibfa5jb9x] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* =============================================================================
   VARIANT CARDS - Brand-specific overrides (uses shared variant-cards.css)
   ============================================================================= */

/* AMD Instinct badge colors */
.variant-badge.cdna3[b-gibfa5jb9x] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.variant-badge.cdna4[b-gibfa5jb9x] {
    background: rgba(209, 213, 219, 0.2);
    color: #d4d4d4;
}

/* AMD Instinct featured card accent */
.variant-card.featured[b-gibfa5jb9x] {
    border-color: rgba(209, 213, 219, 0.4);
    box-shadow: 0 0 30px rgba(209, 213, 219, 0.08);
}

/* AMD Instinct price colors */
.variant-price[b-gibfa5jb9x] {
    background: rgba(148, 163, 184, 0.08);
}

.variant-card.featured .variant-price[b-gibfa5jb9x] {
    background: rgba(209, 213, 219, 0.1);
}

.price-value[b-gibfa5jb9x] {
    color: #9ca3af;
}

.variant-card.featured .price-value[b-gibfa5jb9x] {
    color: #d4d4d4;
}

/* =============================================================================
   SPECS TABLE - AMD Instinct Brand Overrides (uses shared specs-table.css)
   ============================================================================= */
.specs-section[b-gibfa5jb9x] {
    padding: 80px 0;
}

.specs-section h2[b-gibfa5jb9x] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Brand-specific column colors */
.specs-table th:nth-child(2)[b-gibfa5jb9x],
.specs-table th:nth-child(3)[b-gibfa5jb9x] {
    color: #94a3b8;
}

.specs-table th:nth-child(4)[b-gibfa5jb9x] {
    color: #d4d4d4;
}

.specs-table td.highlight[b-gibfa5jb9x] {
    color: #d4d4d4;
}

.spec-group-header td[b-gibfa5jb9x] {
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
}

/* =============================================================================
   USE CASES SECTION - AMD Instinct Brand Overrides (uses shared use-case-cards.css)
   ============================================================================= */
.use-cases-section[b-gibfa5jb9x] {
    background: rgba(30, 41, 59, 0.2);
}

.use-case-card:hover[b-gibfa5jb9x] {
    border-color: rgba(148, 163, 184, 0.3);
}

.use-case-icon[b-gibfa5jb9x] {
    background: rgba(148, 163, 184, 0.1);
    color: #9ca3af;
}

/* Comparison Section */
.comparison-section[b-gibfa5jb9x] {
    padding: 80px 0;
}

.comparison-section h2[b-gibfa5jb9x] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-cards[b-gibfa5jb9x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.comparison-card[b-gibfa5jb9x] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.comparison-card h3[b-gibfa5jb9x] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.comparison-list[b-gibfa5jb9x] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.comparison-list li[b-gibfa5jb9x] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

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

.comparison-list .label[b-gibfa5jb9x] {
    color: var(--text-secondary);
}

.comparison-list .value[b-gibfa5jb9x] {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-verdict[b-gibfa5jb9x] {
    padding: 16px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.comparison-verdict strong[b-gibfa5jb9x] {
    color: #9ca3af;
}

/* CTA Section - AMD Brand Overrides */
.amd-cta-section[b-gibfa5jb9x] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.05) 0%, rgba(100, 116, 139, 0.05) 100%);
}

.amd-cta-section .cta-section[b-gibfa5jb9x] {
    border: none;
    background: transparent;
}

/* AMD Primary Button */
.btn-amd-primary[b-gibfa5jb9x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-amd-primary:hover[b-gibfa5jb9x] {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    transform: translateY(-2px);
}

/* Partner Logos */
.partner-logos[b-gibfa5jb9x] {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.partner-label[b-gibfa5jb9x] {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.logos[b-gibfa5jb9x] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.partner-name[b-gibfa5jb9x] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text h1[b-gibfa5jb9x] {
        font-size: 40px;
    }

    .gpu-showcase.triple[b-gibfa5jb9x] {
        max-width: 450px;
        margin: 0 auto;
    }

    .benefits-grid[b-gibfa5jb9x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .variants-grid.three-col[b-gibfa5jb9x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .use-cases-grid[b-gibfa5jb9x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-hero[b-gibfa5jb9x] {
        padding: 60px 0 40px;
    }

    .hero-text h1[b-gibfa5jb9x] {
        font-size: 32px;
    }

    .hero-description[b-gibfa5jb9x] {
        font-size: 16px;
    }

    .hero-cta[b-gibfa5jb9x] {
        flex-direction: column;
    }

    .gpu-showcase.triple[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 200px;
    }

    .gpu-card[b-gibfa5jb9x] {
        padding: 16px;
    }

    .gpu-model[b-gibfa5jb9x] {
        font-size: 24px;
    }

    .benefits-grid[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
    }

    .benefit-card[b-gibfa5jb9x] {
        padding: 24px;
    }

    .benefit-metric[b-gibfa5jb9x] {
        font-size: 40px;
    }

    .variants-grid[b-gibfa5jb9x],
    .variants-grid.three-col[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .use-cases-grid[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
    }

    .variant-specs[b-gibfa5jb9x] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-gibfa5jb9x] {
        flex-direction: column;
        align-items: center;
    }

    .logos[b-gibfa5jb9x] {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container[b-gibfa5jb9x] {
        padding: 0 16px;
    }

    .hero-text h1[b-gibfa5jb9x] {
        font-size: 28px;
    }

    .gpu-card[b-gibfa5jb9x] {
        padding: 14px 12px;
    }

    .gpu-model[b-gibfa5jb9x] {
        font-size: 22px;
    }

}
/* /Components/Pages/Hardware/GPU/NvidiaBlackwell.razor.rz.scp.css */
/* NVIDIA Blackwell B200/B300 Combined Product Page Styles */

.product-page[b-e8woxo8yzb] {
    min-height: 100vh;
}

.container[b-e8woxo8yzb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Product Hero */
.product-hero[b-e8woxo8yzb] {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.03) 0%, transparent 50%);
}

.product-hero.blackwell[b-e8woxo8yzb] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
}

.hero-content[b-e8woxo8yzb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-badges[b-e8woxo8yzb] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge[b-e8woxo8yzb] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-nvidia[b-e8woxo8yzb] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.badge-blackwell[b-e8woxo8yzb] {
    background: rgba(118, 185, 0, 0.1);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.2);
}

.badge-datacenter[b-e8woxo8yzb] {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.hero-text h1[b-e8woxo8yzb] {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero-description[b-e8woxo8yzb] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.hero-cta[b-e8woxo8yzb] {
    display: flex;
    gap: 16px;
}

.btn-primary[b-e8woxo8yzb] {
    padding: 14px 28px;
    background: #76b900;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-e8woxo8yzb] {
    background: #8acc00;
    transform: translateY(-2px);
}

.btn-secondary[b-e8woxo8yzb] {
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-e8woxo8yzb] {
    border-color: #76b900;
    color: #76b900;
}

/* Dual GPU Showcase */
.gpu-showcase[b-e8woxo8yzb] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpu-showcase.dual[b-e8woxo8yzb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gpu-card[b-e8woxo8yzb] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.gpu-card.b200[b-e8woxo8yzb] {
    border-color: rgba(118, 185, 0, 0.3);
}

.gpu-card.b300[b-e8woxo8yzb] {
    border-color: rgba(139, 92, 246, 0.4);
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.1), rgba(15, 23, 42, 0.9));
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gpu-card:hover[b-e8woxo8yzb] {
    transform: translateY(-4px);
}

.gpu-tier[b-e8woxo8yzb] {
    font-size: 10px;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.gpu-model[b-e8woxo8yzb] {
    font-size: 48px;
    font-weight: 800;
    color: #76b900;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.gpu-card.b300 .gpu-model[b-e8woxo8yzb] {
    color: #a78bfa;
}

.gpu-arch[b-e8woxo8yzb] {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.gpu-highlight[b-e8woxo8yzb] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 8px 16px;
    background: rgba(118, 185, 0, 0.1);
    border-radius: 6px;
    display: inline-block;
}

.gpu-card.b300 .gpu-highlight[b-e8woxo8yzb] {
    background: rgba(139, 92, 246, 0.1);
}

/* =============================================================================
   STATS STRIP - NVIDIA Brand Overrides (uses shared stats-strip.css)
   ============================================================================= */
.blackwell-stats-section[b-e8woxo8yzb] {
    background: rgba(30, 41, 59, 0.3);
}

.blackwell-stats-section .stats-strip-value[b-e8woxo8yzb] {
    color: #76b900;
}

/* Generation Leap Section */
.generation-leap[b-e8woxo8yzb] {
    padding: 80px 0;
}

.generation-leap h2[b-e8woxo8yzb] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-intro[b-e8woxo8yzb] {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 48px;
}

.leap-grid[b-e8woxo8yzb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.leap-card[b-e8woxo8yzb] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.leap-card:hover[b-e8woxo8yzb] {
    border-color: rgba(118, 185, 0, 0.3);
    transform: translateY(-4px);
}

.leap-metric[b-e8woxo8yzb] {
    font-size: 48px;
    font-weight: 800;
    color: #76b900;
    line-height: 1;
    margin-bottom: 8px;
}

.leap-label[b-e8woxo8yzb] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.leap-detail[b-e8woxo8yzb] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* =============================================================================
   VARIANT CARDS - Brand-specific overrides (uses shared variant-cards.css)
   ============================================================================= */

/* Blackwell badge colors */
.variant-badge.sxm[b-e8woxo8yzb] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.variant-badge.ultra[b-e8woxo8yzb] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* Blackwell featured card accent */
.variant-card.featured[b-e8woxo8yzb] {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.1);
}

/* Blackwell price colors */
.variant-price[b-e8woxo8yzb] {
    background: rgba(118, 185, 0, 0.08);
}

.variant-card.featured .variant-price[b-e8woxo8yzb] {
    background: rgba(139, 92, 246, 0.1);
}

.price-value[b-e8woxo8yzb] {
    color: #76b900;
}

.variant-card.featured .price-value[b-e8woxo8yzb] {
    color: #a78bfa;
}

/* =============================================================================
   SPECS TABLE - NVIDIA Blackwell Brand Overrides (uses shared specs-table.css)
   ============================================================================= */
.specs-section[b-e8woxo8yzb] {
    padding: 80px 0;
}

.specs-section h2[b-e8woxo8yzb] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Brand-specific column colors */
.specs-table th:nth-child(2)[b-e8woxo8yzb] {
    color: #76b900;
}

.specs-table th:nth-child(3)[b-e8woxo8yzb] {
    color: #a78bfa;
}

.specs-table td.highlight[b-e8woxo8yzb] {
    color: #76b900;
}

.spec-group-header td[b-e8woxo8yzb] {
    background: rgba(118, 185, 0, 0.08);
    color: #76b900;
}

/* =============================================================================
   USE CASES SECTION - NVIDIA Blackwell Brand Overrides (uses shared use-case-cards.css)
   ============================================================================= */
.use-cases-section[b-e8woxo8yzb] {
    background: rgba(30, 41, 59, 0.2);
}

.use-case-card:hover[b-e8woxo8yzb] {
    border-color: rgba(118, 185, 0, 0.3);
}

.use-case-icon[b-e8woxo8yzb] {
    background: rgba(118, 185, 0, 0.1);
    color: #76b900;
}

/* Comparison Section */
.comparison-section[b-e8woxo8yzb] {
    padding: 80px 0;
}

.comparison-section h2[b-e8woxo8yzb] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-cards[b-e8woxo8yzb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.comparison-card[b-e8woxo8yzb] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.comparison-card h3[b-e8woxo8yzb] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.comparison-list[b-e8woxo8yzb] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.comparison-list li[b-e8woxo8yzb] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

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

.comparison-list .label[b-e8woxo8yzb] {
    color: var(--text-secondary);
}

.comparison-list .value[b-e8woxo8yzb] {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-verdict[b-e8woxo8yzb] {
    padding: 16px;
    background: rgba(118, 185, 0, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.comparison-verdict strong[b-e8woxo8yzb] {
    color: #76b900;
}

/* =============================================================================
   CTA SECTION - NVIDIA Brand Overrides (uses shared cta-section.css)
   ============================================================================= */
.blackwell-cta-section[b-e8woxo8yzb]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(118, 185, 0, 0.08) 0%, transparent 70%);
}

.blackwell-cta-section .cta-title .accent[b-e8woxo8yzb] {
    background: linear-gradient(135deg, #76b900, #8acc00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NVIDIA brand button */
.btn-nvidia-primary[b-e8woxo8yzb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #76b900, #5a8c00);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(118, 185, 0, 0.3);
}

.btn-nvidia-primary:hover[b-e8woxo8yzb] {
    background: linear-gradient(135deg, #8acc00, #76b900);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 185, 0, 0.4);
}

/* Partner logos in CTA */
.partner-logos[b-e8woxo8yzb] {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.partner-label[b-e8woxo8yzb] {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.logos[b-e8woxo8yzb] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.partner-name[b-e8woxo8yzb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text h1[b-e8woxo8yzb] {
        font-size: 40px;
    }

    .gpu-showcase.dual[b-e8woxo8yzb] {
        max-width: 400px;
        margin: 0 auto;
    }

    .leap-grid[b-e8woxo8yzb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .variants-grid[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .use-cases-grid[b-e8woxo8yzb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-hero[b-e8woxo8yzb] {
        padding: 60px 0 40px;
    }

    .hero-text h1[b-e8woxo8yzb] {
        font-size: 32px;
    }

    .hero-description[b-e8woxo8yzb] {
        font-size: 16px;
    }

    .hero-cta[b-e8woxo8yzb] {
        flex-direction: column;
    }

    .gpu-showcase.dual[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gpu-card[b-e8woxo8yzb] {
        padding: 24px;
    }

    .gpu-model[b-e8woxo8yzb] {
        font-size: 40px;
    }

    .leap-grid[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
    }

    .leap-card[b-e8woxo8yzb] {
        padding: 24px;
    }

    .leap-metric[b-e8woxo8yzb] {
        font-size: 40px;
    }

    .use-cases-grid[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
    }

    .variant-specs[b-e8woxo8yzb] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-e8woxo8yzb] {
        flex-direction: column;
        align-items: center;
    }

    .logos[b-e8woxo8yzb] {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container[b-e8woxo8yzb] {
        padding: 0 16px;
    }

    .hero-text h1[b-e8woxo8yzb] {
        font-size: 28px;
    }

    .gpu-card[b-e8woxo8yzb] {
        padding: 20px 16px;
    }

    .gpu-model[b-e8woxo8yzb] {
        font-size: 36px;
    }
}
/* /Components/Pages/Hardware/GPU/NvidiaGraceBlackwell.razor.rz.scp.css */
/* NVIDIA Grace Blackwell Superchip Product Page Styles */
/* Extends base GPU page styles with Grace-specific additions */

.product-page[b-6nto2oj75d] {
    min-height: 100vh;
}

.container[b-6nto2oj75d] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Product Hero */
.product-hero[b-6nto2oj75d] {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.03) 0%, rgba(139, 92, 246, 0.02) 50%, transparent 100%);
}

.hero-content[b-6nto2oj75d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-badges[b-6nto2oj75d] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge[b-6nto2oj75d] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-nvidia[b-6nto2oj75d] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.badge-grace[b-6nto2oj75d] {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.badge-superchip[b-6nto2oj75d] {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.hero-text h1[b-6nto2oj75d] {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero-description[b-6nto2oj75d] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.hero-cta[b-6nto2oj75d] {
    display: flex;
    gap: 16px;
}

.btn-primary[b-6nto2oj75d] {
    padding: 14px 28px;
    background: linear-gradient(135deg, #76b900, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-6nto2oj75d] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(118, 185, 0, 0.2);
}

.btn-secondary[b-6nto2oj75d] {
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-6nto2oj75d] {
    border-color: #8b5cf6;
    color: #a78bfa;
}

/* GPU Showcase */
.gpu-showcase[b-6nto2oj75d] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpu-card[b-6nto2oj75d] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    min-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gpu-card.superchip[b-6nto2oj75d] {
    border-image: linear-gradient(135deg, rgba(118, 185, 0, 0.5), rgba(139, 92, 246, 0.5)) 1;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
}

.gpu-model[b-6nto2oj75d] {
    font-size: 72px;
    font-weight: 800;
    background: linear-gradient(135deg, #76b900, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.gpu-arch[b-6nto2oj75d] {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.gpu-highlight[b-6nto2oj75d] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 12px 24px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    display: inline-block;
}

/* =============================================================================
   STATS STRIP - Grace Blackwell Brand Overrides (uses shared stats-strip.css)
   ============================================================================= */
.grace-stats-section[b-6nto2oj75d] {
    background: rgba(30, 41, 59, 0.3);
}

.grace-stats-section .stats-strip-value[b-6nto2oj75d] {
    background: linear-gradient(135deg, #76b900, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Generation Leap Section */
.generation-leap[b-6nto2oj75d] {
    padding: 80px 0;
}

.generation-leap h2[b-6nto2oj75d] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-intro[b-6nto2oj75d] {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 48px;
}

.leap-grid[b-6nto2oj75d] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.leap-card[b-6nto2oj75d] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.leap-card:hover[b-6nto2oj75d] {
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-4px);
}

.leap-metric[b-6nto2oj75d] {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #76b900, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.leap-label[b-6nto2oj75d] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.leap-detail[b-6nto2oj75d] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* =============================================================================
   VARIANT CARDS - Brand-specific overrides (uses shared variant-cards.css)
   ============================================================================= */

/* Grace Blackwell badge colors */
.variant-badge.sxm[b-6nto2oj75d] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.variant-badge.ultra[b-6nto2oj75d] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* Grace Blackwell featured card accent */
.variant-card.featured[b-6nto2oj75d] {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.1);
}

/* Grace Blackwell SXM card gradient border */
.variant-card.sxm[b-6nto2oj75d] {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #76b900, #8b5cf6) 1;
}

/* Grace Blackwell price colors */
.variant-price[b-6nto2oj75d] {
    background: rgba(139, 92, 246, 0.08);
}

.price-value[b-6nto2oj75d] {
    color: #a78bfa;
}

/* NVL Section */
.nvl-section[b-6nto2oj75d] {
    padding: 80px 0;
}

.nvl-section h2[b-6nto2oj75d] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.nvl-grid[b-6nto2oj75d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.nvl-card[b-6nto2oj75d] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
}

.nvl-card.featured[b-6nto2oj75d] {
    border-color: rgba(6, 182, 212, 0.3);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(6, 182, 212, 0.05));
}

.nvl-header[b-6nto2oj75d] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.nvl-badge[b-6nto2oj75d] {
    padding: 4px 12px;
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.nvl-name[b-6nto2oj75d] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.nvl-specs[b-6nto2oj75d] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nvl-specs li[b-6nto2oj75d] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

.nvl-specs li:last-child[b-6nto2oj75d] {
    border-bottom: none;
}

.nvl-specs .label[b-6nto2oj75d] {
    color: var(--text-secondary);
}

.nvl-specs .value[b-6nto2oj75d] {
    color: var(--text-primary);
    font-weight: 500;
}

/* =============================================================================
   SPECS TABLE - Grace Blackwell Brand Overrides (uses shared specs-table.css)
   ============================================================================= */
.specs-section[b-6nto2oj75d] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.specs-section h2[b-6nto2oj75d] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Brand-specific colors */
.spec-group-header td[b-6nto2oj75d] {
    background: rgba(139, 92, 246, 0.08);
    color: #a78bfa;
}

/* =============================================================================
   USE CASES SECTION - Grace Blackwell Brand Overrides (uses shared use-case-cards.css)
   ============================================================================= */
.use-case-card:hover[b-6nto2oj75d] {
    border-color: rgba(139, 92, 246, 0.3);
}

.use-case-icon[b-6nto2oj75d] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.1), rgba(139, 92, 246, 0.1));
    color: #a78bfa;
}

/* Comparison Section */
.comparison-section[b-6nto2oj75d] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.comparison-section h2[b-6nto2oj75d] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-cards[b-6nto2oj75d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.comparison-card[b-6nto2oj75d] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.comparison-card h3[b-6nto2oj75d] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.comparison-list[b-6nto2oj75d] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.comparison-list li[b-6nto2oj75d] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

.comparison-list li:last-child[b-6nto2oj75d] {
    border-bottom: none;
}

.comparison-list .label[b-6nto2oj75d] {
    color: var(--text-secondary);
}

.comparison-list .value[b-6nto2oj75d] {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-verdict[b-6nto2oj75d] {
    padding: 16px;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.comparison-verdict strong[b-6nto2oj75d] {
    color: #a78bfa;
}

/* =============================================================================
   CTA SECTION - Grace Blackwell Brand Overrides (uses shared cta-section.css)
   ============================================================================= */
.grace-cta-section[b-6nto2oj75d]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
}

.grace-cta-section .cta-title .accent[b-6nto2oj75d] {
    background: linear-gradient(135deg, #76b900, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NVIDIA brand button with Grace gradient */
.btn-nvidia-primary[b-6nto2oj75d] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #76b900, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-nvidia-primary:hover[b-6nto2oj75d] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

/* Partner logos in CTA */
.partner-logos[b-6nto2oj75d] {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.partner-label[b-6nto2oj75d] {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.logos[b-6nto2oj75d] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.partner-name[b-6nto2oj75d] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content[b-6nto2oj75d] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text h1[b-6nto2oj75d] {
        font-size: 40px;
    }

    .gpu-card[b-6nto2oj75d] {
        min-width: 280px;
    }

    .leap-grid[b-6nto2oj75d] {
        grid-template-columns: repeat(2, 1fr);
    }

    .variants-grid[b-6nto2oj75d],
    .nvl-grid[b-6nto2oj75d] {
        grid-template-columns: 1fr;
    }

    .use-cases-grid[b-6nto2oj75d] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards[b-6nto2oj75d] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-hero[b-6nto2oj75d] {
        padding: 60px 0 40px;
    }

    .hero-text h1[b-6nto2oj75d] {
        font-size: 32px;
    }

    .hero-description[b-6nto2oj75d] {
        font-size: 16px;
    }

    .hero-cta[b-6nto2oj75d] {
        flex-direction: column;
    }

    .leap-grid[b-6nto2oj75d] {
        grid-template-columns: 1fr;
    }

    .leap-card[b-6nto2oj75d] {
        padding: 24px;
    }

    .leap-metric[b-6nto2oj75d] {
        font-size: 40px;
    }

    .use-cases-grid[b-6nto2oj75d] {
        grid-template-columns: 1fr;
    }

    .variant-specs[b-6nto2oj75d] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-6nto2oj75d] {
        flex-direction: column;
        align-items: center;
    }

    .logos[b-6nto2oj75d] {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container[b-6nto2oj75d] {
        padding: 0 16px;
    }

    .hero-text h1[b-6nto2oj75d] {
        font-size: 28px;
    }

    .gpu-card[b-6nto2oj75d] {
        padding: 32px 24px;
        min-width: unset;
    }

    .gpu-model[b-6nto2oj75d] {
        font-size: 56px;
    }
}
/* /Components/Pages/Hardware/GPU/NvidiaHopper.razor.rz.scp.css */
/* NVIDIA Hopper H100/H200 Combined Product Page Styles */

.product-page[b-3qg4yj72vp] {
    min-height: 100vh;
}

.container[b-3qg4yj72vp] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Product Hero */
.product-hero[b-3qg4yj72vp] {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.03) 0%, transparent 50%);
}

.product-hero.hopper[b-3qg4yj72vp] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.05) 0%, rgba(6, 182, 212, 0.03) 100%);
}

.hero-content[b-3qg4yj72vp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-badges[b-3qg4yj72vp] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge[b-3qg4yj72vp] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-nvidia[b-3qg4yj72vp] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.badge-hopper[b-3qg4yj72vp] {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.badge-datacenter[b-3qg4yj72vp] {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.hero-text h1[b-3qg4yj72vp] {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero-description[b-3qg4yj72vp] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.hero-cta[b-3qg4yj72vp] {
    display: flex;
    gap: 16px;
}

.btn-primary[b-3qg4yj72vp] {
    padding: 14px 28px;
    background: #76b900;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-3qg4yj72vp] {
    background: #8acc00;
    transform: translateY(-2px);
}

.btn-secondary[b-3qg4yj72vp] {
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-3qg4yj72vp] {
    border-color: #76b900;
    color: #76b900;
}

/* Dual GPU Showcase */
.gpu-showcase[b-3qg4yj72vp] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpu-showcase.dual[b-3qg4yj72vp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gpu-card[b-3qg4yj72vp] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.gpu-card.h100[b-3qg4yj72vp] {
    border-color: rgba(118, 185, 0, 0.3);
}

.gpu-card.h200[b-3qg4yj72vp] {
    border-color: rgba(6, 182, 212, 0.4);
    background: linear-gradient(145deg, rgba(6, 182, 212, 0.08), rgba(15, 23, 42, 0.9));
    box-shadow: 0 20px 60px rgba(6, 182, 212, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gpu-card:hover[b-3qg4yj72vp] {
    transform: translateY(-4px);
}

.gpu-tier[b-3qg4yj72vp] {
    font-size: 10px;
    font-weight: 700;
    color: #22d3ee;
    background: rgba(6, 182, 212, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.gpu-model[b-3qg4yj72vp] {
    font-size: 48px;
    font-weight: 800;
    color: #76b900;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.gpu-card.h200 .gpu-model[b-3qg4yj72vp] {
    color: #22d3ee;
}

.gpu-arch[b-3qg4yj72vp] {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.gpu-highlight[b-3qg4yj72vp] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 8px 16px;
    background: rgba(118, 185, 0, 0.1);
    border-radius: 6px;
    display: inline-block;
}

.gpu-card.h200 .gpu-highlight[b-3qg4yj72vp] {
    background: rgba(6, 182, 212, 0.1);
}

/* =============================================================================
   STATS STRIP - NVIDIA Brand Overrides (uses shared stats-strip.css)
   ============================================================================= */
.hopper-stats-section[b-3qg4yj72vp] {
    background: rgba(30, 41, 59, 0.3);
}

.hopper-stats-section .stats-strip-value[b-3qg4yj72vp] {
    color: #76b900;
}

/* Hopper Benefits Section */
.hopper-benefits[b-3qg4yj72vp] {
    padding: 80px 0;
}

.hopper-benefits h2[b-3qg4yj72vp] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-intro[b-3qg4yj72vp] {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 48px;
}

.benefits-grid[b-3qg4yj72vp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.benefit-card[b-3qg4yj72vp] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.benefit-card:hover[b-3qg4yj72vp] {
    border-color: rgba(118, 185, 0, 0.3);
    transform: translateY(-4px);
}

.benefit-metric[b-3qg4yj72vp] {
    font-size: 48px;
    font-weight: 800;
    color: #76b900;
    line-height: 1;
    margin-bottom: 8px;
}

.benefit-label[b-3qg4yj72vp] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.benefit-detail[b-3qg4yj72vp] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* =============================================================================
   VARIANT CARDS - Brand-specific overrides (uses shared variant-cards.css)
   ============================================================================= */

/* Hopper badge colors */
.variant-badge.pcie[b-3qg4yj72vp] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.variant-badge.sxm[b-3qg4yj72vp] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.variant-badge.premium[b-3qg4yj72vp] {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

/* Hopper featured card accent */
.variant-card.featured[b-3qg4yj72vp] {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.1);
}

/* Hopper price colors */
.variant-price[b-3qg4yj72vp] {
    background: rgba(118, 185, 0, 0.08);
}

.variant-card.featured .variant-price[b-3qg4yj72vp] {
    background: rgba(6, 182, 212, 0.1);
}

.price-value[b-3qg4yj72vp] {
    color: #76b900;
}

.variant-card.featured .price-value[b-3qg4yj72vp] {
    color: #22d3ee;
}

/* =============================================================================
   SPECS TABLE - NVIDIA Hopper Brand Overrides (uses shared specs-table.css)
   ============================================================================= */
.specs-section[b-3qg4yj72vp] {
    padding: 80px 0;
}

.specs-section h2[b-3qg4yj72vp] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Brand-specific column colors */
.specs-table th:nth-child(2)[b-3qg4yj72vp],
.specs-table th:nth-child(3)[b-3qg4yj72vp] {
    color: #76b900;
}

.specs-table th:nth-child(4)[b-3qg4yj72vp] {
    color: #22d3ee;
}

.specs-table td.highlight[b-3qg4yj72vp] {
    color: #22d3ee;
}

.spec-group-header td[b-3qg4yj72vp] {
    background: rgba(118, 185, 0, 0.08);
    color: #76b900;
}

/* =============================================================================
   USE CASES SECTION - NVIDIA Hopper Brand Overrides (uses shared use-case-cards.css)
   ============================================================================= */
.use-cases-section[b-3qg4yj72vp] {
    background: rgba(30, 41, 59, 0.2);
}

.use-case-card:hover[b-3qg4yj72vp] {
    border-color: rgba(118, 185, 0, 0.3);
}

.use-case-icon[b-3qg4yj72vp] {
    background: rgba(118, 185, 0, 0.1);
    color: #76b900;
}

/* Comparison Section */
.comparison-section[b-3qg4yj72vp] {
    padding: 80px 0;
}

.comparison-section h2[b-3qg4yj72vp] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-cards[b-3qg4yj72vp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.comparison-card[b-3qg4yj72vp] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.comparison-card h3[b-3qg4yj72vp] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.comparison-list[b-3qg4yj72vp] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.comparison-list li[b-3qg4yj72vp] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

.comparison-list li:last-child[b-3qg4yj72vp] {
    border-bottom: none;
}

.comparison-list .label[b-3qg4yj72vp] {
    color: var(--text-secondary);
}

.comparison-list .value[b-3qg4yj72vp] {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-verdict[b-3qg4yj72vp] {
    padding: 16px;
    background: rgba(118, 185, 0, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.comparison-verdict strong[b-3qg4yj72vp] {
    color: #76b900;
}

/* =============================================================================
   CTA SECTION - NVIDIA Brand Overrides (uses shared cta-section.css)
   ============================================================================= */
.hopper-cta-section[b-3qg4yj72vp]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(118, 185, 0, 0.08) 0%, transparent 70%);
}

.hopper-cta-section .cta-title .accent[b-3qg4yj72vp] {
    background: linear-gradient(135deg, #76b900, #8acc00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NVIDIA brand button */
.btn-nvidia-primary[b-3qg4yj72vp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #76b900, #5a8c00);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(118, 185, 0, 0.3);
}

.btn-nvidia-primary:hover[b-3qg4yj72vp] {
    background: linear-gradient(135deg, #8acc00, #76b900);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118, 185, 0, 0.4);
}

/* Partner logos in CTA */
.partner-logos[b-3qg4yj72vp] {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.partner-label[b-3qg4yj72vp] {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.logos[b-3qg4yj72vp] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.partner-name[b-3qg4yj72vp] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text h1[b-3qg4yj72vp] {
        font-size: 40px;
    }

    .gpu-showcase.dual[b-3qg4yj72vp] {
        max-width: 400px;
        margin: 0 auto;
    }

    .benefits-grid[b-3qg4yj72vp] {
        grid-template-columns: repeat(2, 1fr);
    }

    .variants-grid.three-col[b-3qg4yj72vp] {
        grid-template-columns: repeat(2, 1fr);
    }

    .use-cases-grid[b-3qg4yj72vp] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-hero[b-3qg4yj72vp] {
        padding: 60px 0 40px;
    }

    .hero-text h1[b-3qg4yj72vp] {
        font-size: 32px;
    }

    .hero-description[b-3qg4yj72vp] {
        font-size: 16px;
    }

    .hero-cta[b-3qg4yj72vp] {
        flex-direction: column;
    }

    .gpu-showcase.dual[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gpu-card[b-3qg4yj72vp] {
        padding: 24px;
    }

    .gpu-model[b-3qg4yj72vp] {
        font-size: 40px;
    }

    .benefits-grid[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
    }

    .benefit-card[b-3qg4yj72vp] {
        padding: 24px;
    }

    .benefit-metric[b-3qg4yj72vp] {
        font-size: 40px;
    }

    .variants-grid[b-3qg4yj72vp],
    .variants-grid.three-col[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .use-cases-grid[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
    }

    .variant-specs[b-3qg4yj72vp] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-3qg4yj72vp] {
        flex-direction: column;
        align-items: center;
    }

    .logos[b-3qg4yj72vp] {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container[b-3qg4yj72vp] {
        padding: 0 16px;
    }

    .hero-text h1[b-3qg4yj72vp] {
        font-size: 28px;
    }

    .gpu-card[b-3qg4yj72vp] {
        padding: 20px 16px;
    }

    .gpu-model[b-3qg4yj72vp] {
        font-size: 36px;
    }
}
/* /Components/Pages/Hardware/GPU/NvidiaRTXPro.razor.rz.scp.css */
/* NVIDIA RTX PRO 6000 Blackwell Product Page Styles */

.product-page[b-37je9hoi24] {
    min-height: 100vh;
}

.container[b-37je9hoi24] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Product Hero */
.product-hero[b-37je9hoi24] {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.03) 0%, transparent 50%);
}

.product-hero.rtxpro[b-37je9hoi24] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.05) 0%, rgba(245, 158, 11, 0.03) 100%);
}

.hero-content[b-37je9hoi24] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-badges[b-37je9hoi24] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge[b-37je9hoi24] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-nvidia[b-37je9hoi24] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.badge-blackwell[b-37je9hoi24] {
    background: rgba(118, 185, 0, 0.1);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.2);
}

.badge-professional[b-37je9hoi24] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.hero-text h1[b-37je9hoi24] {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero-description[b-37je9hoi24] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.hero-cta[b-37je9hoi24] {
    display: flex;
    gap: 16px;
}

.btn-primary[b-37je9hoi24] {
    padding: 14px 28px;
    background: #76b900;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-37je9hoi24] {
    background: #8acc00;
    transform: translateY(-2px);
}

.btn-secondary[b-37je9hoi24] {
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-37je9hoi24] {
    border-color: #76b900;
    color: #76b900;
}

/* GPU Showcase */
.gpu-showcase[b-37je9hoi24] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpu-card[b-37je9hoi24] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    min-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gpu-card.rtxpro[b-37je9hoi24] {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.08), rgba(15, 23, 42, 0.9));
    box-shadow: 0 20px 60px rgba(245, 158, 11, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gpu-tier[b-37je9hoi24] {
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.2);
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.gpu-model[b-37je9hoi24] {
    font-size: 72px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.gpu-arch[b-37je9hoi24] {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.gpu-highlight[b-37je9hoi24] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 12px 24px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    display: inline-block;
}

/* =============================================================================
   STATS STRIP - RTX PRO Brand Overrides (uses shared stats-strip.css)
   ============================================================================= */
.rtxpro-stats-section[b-37je9hoi24] {
    background: rgba(30, 41, 59, 0.3);
}

.rtxpro-stats-section .stats-strip-value[b-37je9hoi24] {
    color: #f59e0b;
}

/* Blackwell Benefits Section */
.blackwell-benefits[b-37je9hoi24] {
    padding: 80px 0;
}

.blackwell-benefits h2[b-37je9hoi24] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-intro[b-37je9hoi24] {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 48px;
}

.benefits-grid[b-37je9hoi24] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.benefit-card[b-37je9hoi24] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.benefit-card:hover[b-37je9hoi24] {
    border-color: rgba(245, 158, 11, 0.3);
    transform: translateY(-4px);
}

.benefit-metric[b-37je9hoi24] {
    font-size: 48px;
    font-weight: 800;
    color: #f59e0b;
    line-height: 1;
    margin-bottom: 8px;
}

.benefit-label[b-37je9hoi24] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.benefit-detail[b-37je9hoi24] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* =============================================================================
   VARIANT CARDS - Brand-specific overrides (uses shared variant-cards.css)
   ============================================================================= */

/* RTX PRO badge colors */
.variant-badge.workstation[b-37je9hoi24] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.variant-badge.maxq[b-37je9hoi24] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.variant-badge.server[b-37je9hoi24] {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

/* RTX PRO featured card accent */
.variant-card.featured[b-37je9hoi24] {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.1);
}

/* RTX PRO price colors */
.variant-price[b-37je9hoi24] {
    background: rgba(245, 158, 11, 0.08);
}

.price-value[b-37je9hoi24] {
    color: #f59e0b;
}

/* =============================================================================
   SPECS TABLE - RTX PRO Brand Overrides (uses shared specs-table.css)
   ============================================================================= */
.specs-section[b-37je9hoi24] {
    padding: 80px 0;
}

.specs-section h2[b-37je9hoi24] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* RTX PRO specific: narrower table for single-column specs */
.specs-table[b-37je9hoi24] {
    max-width: 700px;
    margin: 0 auto;
}

/* RTX PRO orange brand color for headers */
.specs-table th:nth-child(2)[b-37je9hoi24] {
    color: #f59e0b;
}

.spec-group-header td[b-37je9hoi24] {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
}

/* =============================================================================
   USE CASES SECTION - RTX PRO Brand Overrides (uses shared use-case-cards.css)
   ============================================================================= */
.use-cases-section[b-37je9hoi24] {
    background: rgba(30, 41, 59, 0.2);
}

.use-case-card:hover[b-37je9hoi24] {
    border-color: rgba(245, 158, 11, 0.3);
}

.use-case-icon[b-37je9hoi24] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

/* Comparison Section */
.comparison-section[b-37je9hoi24] {
    padding: 80px 0;
}

.comparison-section h2[b-37je9hoi24] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-cards[b-37je9hoi24] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.comparison-card[b-37je9hoi24] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.comparison-card h3[b-37je9hoi24] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.comparison-list[b-37je9hoi24] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.comparison-list li[b-37je9hoi24] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

.comparison-list li:last-child[b-37je9hoi24] {
    border-bottom: none;
}

.comparison-list .label[b-37je9hoi24] {
    color: var(--text-secondary);
}

.comparison-list .value[b-37je9hoi24] {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-verdict[b-37je9hoi24] {
    padding: 16px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.comparison-verdict strong[b-37je9hoi24] {
    color: #f59e0b;
}

/* =============================================================================
   CTA SECTION - RTX PRO Brand Overrides (uses shared cta-section.css)
   ============================================================================= */
.rtxpro-cta-section[b-37je9hoi24]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
}

.rtxpro-cta-section .cta-title .accent[b-37je9hoi24] {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* RTX PRO brand button */
.btn-rtxpro-primary[b-37je9hoi24] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-rtxpro-primary:hover[b-37je9hoi24] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Partner logos in CTA */
.partner-logos[b-37je9hoi24] {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.partner-label[b-37je9hoi24] {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.logos[b-37je9hoi24] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.partner-name[b-37je9hoi24] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content[b-37je9hoi24] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text h1[b-37je9hoi24] {
        font-size: 40px;
    }

    .gpu-card[b-37je9hoi24] {
        min-width: 280px;
    }

    .benefits-grid[b-37je9hoi24] {
        grid-template-columns: repeat(2, 1fr);
    }

    .variants-grid.three-col[b-37je9hoi24] {
        grid-template-columns: repeat(2, 1fr);
    }

    .use-cases-grid[b-37je9hoi24] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards[b-37je9hoi24] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-hero[b-37je9hoi24] {
        padding: 60px 0 40px;
    }

    .hero-text h1[b-37je9hoi24] {
        font-size: 32px;
    }

    .hero-description[b-37je9hoi24] {
        font-size: 16px;
    }

    .hero-cta[b-37je9hoi24] {
        flex-direction: column;
    }

    .benefits-grid[b-37je9hoi24] {
        grid-template-columns: 1fr;
    }

    .benefit-card[b-37je9hoi24] {
        padding: 24px;
    }

    .benefit-metric[b-37je9hoi24] {
        font-size: 40px;
    }

    .variants-grid[b-37je9hoi24],
    .variants-grid.three-col[b-37je9hoi24] {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .use-cases-grid[b-37je9hoi24] {
        grid-template-columns: 1fr;
    }

    .variant-specs[b-37je9hoi24] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-37je9hoi24] {
        flex-direction: column;
        align-items: center;
    }

    .logos[b-37je9hoi24] {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container[b-37je9hoi24] {
        padding: 0 16px;
    }

    .hero-text h1[b-37je9hoi24] {
        font-size: 28px;
    }

    .gpu-card[b-37je9hoi24] {
        padding: 32px 24px;
        min-width: unset;
    }

    .gpu-model[b-37je9hoi24] {
        font-size: 56px;
    }
}
/* /Components/Pages/Hardware/GPU/NvidiaRubin.razor.rz.scp.css */
/* NVIDIA Rubin R100 Product Page Styles */
/* Next-gen styling with distinct Rubin branding */

.product-page[b-ft66f6fs4m] {
    min-height: 100vh;
}

.container[b-ft66f6fs4m] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Product Hero - Rubin Variant */
.product-hero[b-ft66f6fs4m] {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.03) 0%, rgba(16, 185, 129, 0.02) 50%, transparent 100%);
}

.product-hero.rubin[b-ft66f6fs4m] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(16, 185, 129, 0.03) 30%, rgba(139, 92, 246, 0.02) 100%);
}

.hero-content[b-ft66f6fs4m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-badges[b-ft66f6fs4m] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.badge[b-ft66f6fs4m] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-nvidia[b-ft66f6fs4m] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.badge-rubin[b-ft66f6fs4m] {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-nextgen[b-ft66f6fs4m] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.hero-text h1[b-ft66f6fs4m] {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero-description[b-ft66f6fs4m] {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.hero-cta[b-ft66f6fs4m] {
    display: flex;
    gap: 16px;
}

.btn-primary[b-ft66f6fs4m] {
    padding: 14px 28px;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-ft66f6fs4m] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);
}

.btn-secondary[b-ft66f6fs4m] {
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-ft66f6fs4m] {
    border-color: #06b6d4;
    color: #22d3ee;
}

/* GPU Showcase - Rubin Style */
.gpu-showcase[b-ft66f6fs4m] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gpu-card[b-ft66f6fs4m] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    min-width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}

.gpu-card.rubin[b-ft66f6fs4m] {
    border-image: linear-gradient(135deg, rgba(6, 182, 212, 0.6), rgba(16, 185, 129, 0.5)) 1;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
}

.gpu-model[b-ft66f6fs4m] {
    font-size: 72px;
    font-weight: 800;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.gpu-arch[b-ft66f6fs4m] {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.gpu-highlight[b-ft66f6fs4m] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 12px 24px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 16px;
}

.gpu-badge-new[b-ft66f6fs4m] {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

/* =============================================================================
   STATS STRIP - Rubin Brand Overrides (uses shared stats-strip.css)
   ============================================================================= */
.rubin-stats-section[b-ft66f6fs4m] {
    background: rgba(30, 41, 59, 0.3);
}

.rubin-stats-section .stats-strip-value[b-ft66f6fs4m] {
    background: linear-gradient(135deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Generation Leap Section */
.generation-leap[b-ft66f6fs4m] {
    padding: 80px 0;
}

.generation-leap h2[b-ft66f6fs4m] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-intro[b-ft66f6fs4m] {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 48px;
}

.leap-grid[b-ft66f6fs4m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.leap-card[b-ft66f6fs4m] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.leap-card:hover[b-ft66f6fs4m] {
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-4px);
}

.leap-metric[b-ft66f6fs4m] {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
}

.leap-label[b-ft66f6fs4m] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.leap-detail[b-ft66f6fs4m] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Platform Section */
.platform-section[b-ft66f6fs4m] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.platform-section h2[b-ft66f6fs4m] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.platform-grid[b-ft66f6fs4m] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.platform-card[b-ft66f6fs4m] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    transition: all 0.2s ease;
}

.platform-card:hover[b-ft66f6fs4m] {
    border-color: rgba(6, 182, 212, 0.3);
}

.platform-icon[b-ft66f6fs4m] {
    width: 48px;
    height: 48px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #22d3ee;
}

.platform-icon.vera[b-ft66f6fs4m] {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.platform-card h3[b-ft66f6fs4m] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.platform-card p[b-ft66f6fs4m] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* =============================================================================
   VARIANT CARDS - Brand-specific overrides (uses shared variant-cards.css)
   ============================================================================= */

/* Rubin badge colors */
.variant-badge.rubin[b-ft66f6fs4m] {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

.variant-badge.superchip[b-ft66f6fs4m] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* Rubin card gradient border */
.variant-card[b-ft66f6fs4m] {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #06b6d4, #10b981) 1;
}

/* Rubin featured card accent */
.variant-card.featured[b-ft66f6fs4m] {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.1);
}

/* Rubin price colors */
.variant-price[b-ft66f6fs4m] {
    background: rgba(6, 182, 212, 0.08);
}

.price-value[b-ft66f6fs4m] {
    color: #22d3ee;
}

/* NVL Section - Hero Card */
.nvl-section[b-ft66f6fs4m] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.nvl-section h2[b-ft66f6fs4m] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.nvl-hero-card[b-ft66f6fs4m] {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(6, 182, 212, 0.05));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    padding: 48px;
}

.nvl-stats[b-ft66f6fs4m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 36px;
    text-align: center;
}

.nvl-stat-value[b-ft66f6fs4m] {
    display: block;
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.nvl-stat-label[b-ft66f6fs4m] {
    font-size: 14px;
    color: var(--text-secondary);
}

.nvl-features[b-ft66f6fs4m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.nvl-feature[b-ft66f6fs4m] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.nvl-feature :deep(.icon)[b-ft66f6fs4m] {
    width: 18px;
    height: 18px;
    color: #10b981;
    flex-shrink: 0;
}

.nvl-claim[b-ft66f6fs4m] {
    text-align: center;
    padding: 20px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    font-size: 16px;
    color: var(--text-primary);
}

.nvl-claim strong[b-ft66f6fs4m] {
    color: #22d3ee;
}

/* =============================================================================
   SPECS TABLE - NVIDIA Rubin Brand Overrides (uses shared specs-table.css)
   ============================================================================= */
.specs-section[b-ft66f6fs4m] {
    padding: 80px 0;
}

.specs-section h2[b-ft66f6fs4m] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* Brand-specific colors */
.spec-group-header td[b-ft66f6fs4m] {
    background: rgba(6, 182, 212, 0.08);
    color: #22d3ee;
}

/* =============================================================================
   USE CASES SECTION - Rubin Brand Overrides (uses shared use-case-cards.css)
   ============================================================================= */
.use-cases-section[b-ft66f6fs4m] {
    background: rgba(30, 41, 59, 0.2);
}

.use-case-card:hover[b-ft66f6fs4m] {
    border-color: rgba(6, 182, 212, 0.3);
}

.use-case-icon[b-ft66f6fs4m] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(16, 185, 129, 0.1));
    color: #22d3ee;
}

/* Comparison Section */
.comparison-section[b-ft66f6fs4m] {
    padding: 80px 0;
}

.comparison-section h2[b-ft66f6fs4m] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-cards[b-ft66f6fs4m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.comparison-card[b-ft66f6fs4m] {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.comparison-card h3[b-ft66f6fs4m] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.comparison-list[b-ft66f6fs4m] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.comparison-list li[b-ft66f6fs4m] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    font-size: 14px;
}

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

.comparison-list .label[b-ft66f6fs4m] {
    color: var(--text-secondary);
}

.comparison-list .value[b-ft66f6fs4m] {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-verdict[b-ft66f6fs4m] {
    padding: 16px;
    background: rgba(6, 182, 212, 0.08);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.comparison-verdict strong[b-ft66f6fs4m] {
    color: #22d3ee;
}

/* =============================================================================
   CTA SECTION - Rubin Brand Overrides (uses shared cta-section.css)
   ============================================================================= */
.rubin-cta-section[b-ft66f6fs4m]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
}

.rubin-cta-section .cta-title .accent[b-ft66f6fs4m] {
    background: linear-gradient(135deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Rubin brand button */
.btn-rubin-primary[b-ft66f6fs4m] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.btn-rubin-primary:hover[b-ft66f6fs4m] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

/* Partner logos in CTA */
.partner-logos[b-ft66f6fs4m] {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.partner-label[b-ft66f6fs4m] {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.logos[b-ft66f6fs4m] {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.partner-name[b-ft66f6fs4m] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-text h1[b-ft66f6fs4m] {
        font-size: 40px;
    }

    .gpu-card[b-ft66f6fs4m] {
        min-width: 280px;
    }

    .leap-grid[b-ft66f6fs4m] {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .variants-grid[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
    }

    .nvl-stats[b-ft66f6fs4m] {
        grid-template-columns: repeat(2, 1fr);
    }

    .use-cases-grid[b-ft66f6fs4m] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-cards[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-hero[b-ft66f6fs4m] {
        padding: 60px 0 40px;
    }

    .hero-text h1[b-ft66f6fs4m] {
        font-size: 32px;
    }

    .hero-description[b-ft66f6fs4m] {
        font-size: 16px;
    }

    .hero-cta[b-ft66f6fs4m] {
        flex-direction: column;
    }

    .leap-grid[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
    }

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

    .nvl-stats[b-ft66f6fs4m] {
        grid-template-columns: 1fr 1fr;
    }

    .nvl-features[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
    }

    .use-cases-grid[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
    }

    .variant-specs[b-ft66f6fs4m] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-ft66f6fs4m] {
        flex-direction: column;
        align-items: center;
    }

    .logos[b-ft66f6fs4m] {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container[b-ft66f6fs4m] {
        padding: 0 16px;
    }

    .hero-text h1[b-ft66f6fs4m] {
        font-size: 28px;
    }

    .gpu-card[b-ft66f6fs4m] {
        padding: 32px 24px;
        min-width: unset;
    }

    .gpu-model[b-ft66f6fs4m] {
        font-size: 56px;
    }

    .nvl-hero-card[b-ft66f6fs4m] {
        padding: 24px;
    }

    .nvl-stat-value[b-ft66f6fs4m] {
        font-size: 28px;
    }
}
/* /Components/Pages/Hardware/Hardware.razor.rz.scp.css */
/* ============================================================
   Hardware (/hardware) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD Hardware v1.html (L33-209),
   namespaced v3hw-, scoped under .v3hw wrapper.
   ============================================================ */

.v3hw[b-1usyvyx2sx] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --primary-dark: var(--slyd-primary-dark);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3hw *[b-1usyvyx2sx],
.v3hw *[b-1usyvyx2sx]::before,
.v3hw *[b-1usyvyx2sx]::after { box-sizing: border-box; }

.v3hw a[b-1usyvyx2sx] { color: inherit; text-decoration: none; }

.v3hw .v3hw-wrap[b-1usyvyx2sx] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3hw .v3hw-wrap[b-1usyvyx2sx] { padding: 0 20px; } }

.v3hw .v3hw-a[b-1usyvyx2sx] { color: var(--primary); }

/* Buttons */
.v3hw .v3hw-btn[b-1usyvyx2sx] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3hw .v3hw-btn-ghost[b-1usyvyx2sx] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3hw .v3hw-btn-ghost:hover[b-1usyvyx2sx] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3hw .v3hw-btn-primary[b-1usyvyx2sx] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3hw .v3hw-btn-primary:hover[b-1usyvyx2sx] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3hw .v3hw-btn-indigo[b-1usyvyx2sx] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.v3hw .v3hw-btn-indigo:hover[b-1usyvyx2sx] { filter: brightness(1.1); transform: translateY(-1px); }

.v3hw .v3hw-arr[b-1usyvyx2sx] { font-family: var(--font-mono); color: currentColor; opacity: .7; }

/* ───── HERO ───── */

.v3hw .v3hw-hero[b-1usyvyx2sx] {
    position: relative;
    overflow: hidden;
    padding: 72px 0 44px;
}

.v3hw .v3hw-hero[b-1usyvyx2sx]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 500px at 75% 0%, var(--primary-glow), transparent 65%);
}

.v3hw .v3hw-hero[b-1usyvyx2sx]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 500px at 60% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 500px at 60% 20%, #000 30%, transparent 75%);
}

.v3hw .v3hw-eyebrow[b-1usyvyx2sx] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 18px;
}

.v3hw .v3hw-eyebrow[b-1usyvyx2sx]::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

.v3hw .v3hw-hero-h1[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
    max-width: 1000px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3hw .v3hw-sub[b-1usyvyx2sx] {
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--text-secondary);
    max-width: 680px;
    line-height: 1.5;
    margin: 0 0 32px;
}

.v3hw .v3hw-ctas[b-1usyvyx2sx] { display: flex; gap: 14px; flex-wrap: wrap; }

/* ───── TWO CHANNELS ───── */

.v3hw .v3hw-chan-sec[b-1usyvyx2sx] { padding: 32px 0 16px; }

.v3hw .v3hw-chan-grid[b-1usyvyx2sx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.v3hw .v3hw-chan[b-1usyvyx2sx] {
    padding: 28px 28px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
    color: var(--text-primary);
}

.v3hw .v3hw-chan:hover[b-1usyvyx2sx] { transform: translateY(-2px); }

.v3hw .v3hw-chan[b-1usyvyx2sx]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: .5;
    pointer-events: none;
}

.v3hw .v3hw-chan-oem[b-1usyvyx2sx] { border-color: color-mix(in oklab, var(--gold) 32%, transparent); }
.v3hw .v3hw-chan-oem[b-1usyvyx2sx]::before { background: radial-gradient(circle, color-mix(in oklab, var(--gold) 28%, transparent), transparent 60%); }
.v3hw .v3hw-chan-oem:hover[b-1usyvyx2sx] { border-color: var(--gold); }

.v3hw .v3hw-chan-rec[b-1usyvyx2sx] { border-color: color-mix(in oklab, var(--primary) 32%, transparent); }
.v3hw .v3hw-chan-rec[b-1usyvyx2sx]::before { background: radial-gradient(circle, var(--primary-glow), transparent 60%); }
.v3hw .v3hw-chan-rec:hover[b-1usyvyx2sx] { border-color: var(--primary); }

.v3hw .v3hw-chan-cl[b-1usyvyx2sx] {
    position: relative;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.v3hw .v3hw-chan-oem .v3hw-chan-cl[b-1usyvyx2sx] { color: var(--gold); }
.v3hw .v3hw-chan-rec .v3hw-chan-cl[b-1usyvyx2sx] { color: var(--primary); }

.v3hw .v3hw-chan-h2[b-1usyvyx2sx] {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3hw .v3hw-chan-p[b-1usyvyx2sx] {
    position: relative;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 18px;
}

.v3hw .v3hw-clist[b-1usyvyx2sx] { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }

.v3hw .v3hw-chip[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.v3hw .v3hw-cta-row[b-1usyvyx2sx] { position: relative; }

/* ───── SECTION ───── */

.v3hw .v3hw-section[b-1usyvyx2sx] { padding: 72px 0; border-top: 1px solid var(--border-subtle); }
.v3hw .v3hw-section-alt[b-1usyvyx2sx] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3hw .v3hw-section-head[b-1usyvyx2sx] {
    margin-bottom: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.v3hw .v3hw-kicker[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

.v3hw .v3hw-section-h2[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 38px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3hw .v3hw-section-lede[b-1usyvyx2sx] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 420px;
    margin: 0;
}

/* ───── ACCELERATOR GRID ───── */

.v3hw .v3hw-acc-grid[b-1usyvyx2sx] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.v3hw .v3hw-acc-card[b-1usyvyx2sx] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    transition: border-color .15s, transform .15s;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
}

.v3hw .v3hw-acc-card:hover[b-1usyvyx2sx] { border-color: var(--primary); transform: translateY(-2px); }

.v3hw .v3hw-vendor[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v3hw .v3hw-vendor-new[b-1usyvyx2sx] {
    color: var(--gold);
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--gold-soft);
    border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}

.v3hw .v3hw-acc-h3[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.v3hw .v3hw-acc-h3-primary[b-1usyvyx2sx] { color: var(--primary); margin-bottom: 8px; }

.v3hw .v3hw-mem[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.v3hw .v3hw-specs[b-1usyvyx2sx] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.v3hw .v3hw-spec[b-1usyvyx2sx] { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; }
.v3hw .v3hw-spec-k[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.v3hw .v3hw-spec-v[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.v3hw .v3hw-avail[b-1usyvyx2sx] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v3hw .v3hw-a-lbl[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3hw .v3hw-a-val[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--success);
    font-weight: 600;
}

.v3hw .v3hw-a-val-oem[b-1usyvyx2sx] { color: var(--gold); }

.v3hw .v3hw-acc-compare[b-1usyvyx2sx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-style: dashed;
}

/* ───── OEM ROW ───── */

.v3hw .v3hw-oem-grid[b-1usyvyx2sx] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.v3hw .v3hw-oem-card[b-1usyvyx2sx] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    text-align: center;
    transition: border-color .15s, transform .15s;
    color: var(--text-primary);
}

.v3hw .v3hw-oem-card:hover[b-1usyvyx2sx] { border-color: var(--gold); transform: translateY(-2px); }

.v3hw .v3hw-oem-logo[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.v3hw .v3hw-oem-line[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* ───── CATEGORY GRID ───── */

.v3hw .v3hw-cat-grid[b-1usyvyx2sx] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.v3hw .v3hw-cat-card[b-1usyvyx2sx] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: border-color .15s, transform .15s;
    position: relative;
    color: var(--text-primary);
}

.v3hw .v3hw-cat-card:hover[b-1usyvyx2sx] { border-color: var(--primary); transform: translateY(-2px); }

.v3hw .v3hw-cat-ic[b-1usyvyx2sx] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 20px;
}

.v3hw .v3hw-cat-h4[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.v3hw .v3hw-cat-p[b-1usyvyx2sx] {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin: 0;
}

.v3hw .v3hw-cat-arr[b-1usyvyx2sx] {
    position: absolute;
    top: 22px;
    right: 20px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    transition: transform .15s, color .15s;
}

.v3hw .v3hw-cat-card:hover .v3hw-cat-arr[b-1usyvyx2sx] { color: var(--primary); transform: translateX(3px); }

/* ───── SOURCE FEED TEASER ───── */

.v3hw .v3hw-feed-card[b-1usyvyx2sx] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3hw .v3hw-feed-top[b-1usyvyx2sx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.v3hw .v3hw-ft-l[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.v3hw .v3hw-ft-l[b-1usyvyx2sx]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3hw-pulse-b-1usyvyx2sx 1.8s ease-in-out infinite;
}

@keyframes v3hw-pulse-b-1usyvyx2sx {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; transform: scale(1.3); }
}

.v3hw .v3hw-ft-r[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--primary);
    font-weight: 600;
}

.v3hw .v3hw-feed-stats[b-1usyvyx2sx] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

.v3hw .v3hw-feed-stat[b-1usyvyx2sx] {
    padding: 22px 26px;
    border-right: 1px solid var(--border-subtle);
}

.v3hw .v3hw-feed-stat:last-child[b-1usyvyx2sx] { border-right: none; }

.v3hw .v3hw-fk[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.v3hw .v3hw-fv[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
}

.v3hw .v3hw-feed-note[b-1usyvyx2sx] {
    padding: 14px 26px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}

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

.v3hw .v3hw-cta-strip[b-1usyvyx2sx] { padding: 72px 0 96px; }

.v3hw .v3hw-cta-card[b-1usyvyx2sx] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.v3hw .v3hw-cta-card[b-1usyvyx2sx]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3hw .v3hw-ctt[b-1usyvyx2sx] { position: relative; }

.v3hw .v3hw-ctt-h3[b-1usyvyx2sx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3hw .v3hw-ctt-p[b-1usyvyx2sx] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 520px;
}

.v3hw .v3hw-cact[b-1usyvyx2sx] { display: flex; gap: 10px; position: relative; flex-shrink: 0; flex-wrap: wrap; }

/* ───── FAQ ───── */

.v3hw .v3hw-faq-list[b-1usyvyx2sx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3hw .v3hw-faq-item[b-1usyvyx2sx] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .15s;
}

.v3hw .v3hw-faq-item:hover[b-1usyvyx2sx] { border-color: var(--border-hover); }
.v3hw .v3hw-faq-item[open][b-1usyvyx2sx] { border-color: var(--primary); }

.v3hw .v3hw-faq-q[b-1usyvyx2sx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3hw .v3hw-faq-q[b-1usyvyx2sx]::-webkit-details-marker { display: none; }

.v3hw .v3hw-faq-mark[b-1usyvyx2sx] {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform .15s;
}

.v3hw .v3hw-faq-item[open] .v3hw-faq-mark[b-1usyvyx2sx] { transform: rotate(45deg); }

.v3hw .v3hw-faq-a[b-1usyvyx2sx] {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 760px;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3hw .v3hw-chan-grid[b-1usyvyx2sx] { grid-template-columns: 1fr; }
    .v3hw .v3hw-acc-grid[b-1usyvyx2sx] { grid-template-columns: repeat(2, 1fr); }
    .v3hw .v3hw-oem-grid[b-1usyvyx2sx] { grid-template-columns: repeat(3, 1fr); }
    .v3hw .v3hw-cat-grid[b-1usyvyx2sx] { grid-template-columns: repeat(2, 1fr); }
    .v3hw .v3hw-feed-stats[b-1usyvyx2sx] { grid-template-columns: repeat(2, 1fr); }
    .v3hw .v3hw-feed-stat:nth-child(2)[b-1usyvyx2sx] { border-right: none; }
    .v3hw .v3hw-feed-stat[b-1usyvyx2sx] { border-bottom: 1px solid var(--border-subtle); }
    .v3hw .v3hw-section-head[b-1usyvyx2sx] { flex-direction: column; align-items: flex-start; gap: 14px; }
    .v3hw .v3hw-cta-card[b-1usyvyx2sx] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
    .v3hw .v3hw-acc-grid[b-1usyvyx2sx] { grid-template-columns: 1fr; }
    .v3hw .v3hw-oem-grid[b-1usyvyx2sx] { grid-template-columns: repeat(2, 1fr); }
    .v3hw .v3hw-cat-grid[b-1usyvyx2sx] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Hardware/Networking.razor.rz.scp.css */
/* =====================================================
   NETWORKING PAGE STYLES
   Color Theme: Teal/Emerald (#14b8a6, #10b981)
   ===================================================== */

/* =====================================================
   BRAND COLOR VARIABLES (for generic-hero.css)
   ===================================================== */
.brand-networking[b-chu1xq2rgt] {
    --brand-color: #14b8a6;
    --brand-color-rgb: 20, 184, 166;
    --brand-color-dark: #10b981;
}

/* =====================================================
   HERO BADGES (page-specific variants)
   ===================================================== */
.page-hero-badges[b-chu1xq2rgt] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-hero-badge[b-chu1xq2rgt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #14b8a6;
    padding: 8px 14px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 4px;
}

.page-hero-badge.nvidia[b-chu1xq2rgt] {
    color: #76b900;
    background: rgba(118, 185, 0, 0.15);
    border-color: rgba(118, 185, 0, 0.4);
}

/* =====================================================
   HERO STATS (page-specific)
   ===================================================== */
.net-stats-row[b-chu1xq2rgt] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    width: 100%;
}

.net-stat[b-chu1xq2rgt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.net-stat-value[b-chu1xq2rgt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #14b8a6;
}

.net-stat-label[b-chu1xq2rgt] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =====================================================
   SECTION TAG OVERRIDES (for teal accents)
   ===================================================== */
.page-section-tag[b-chu1xq2rgt] {
    color: #5eead4;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(20, 184, 166, 0.3);
    padding: 8px 20px;
    border-radius: 24px;
}

.page-section-tag[b-chu1xq2rgt]::before {
    background: #14b8a6;
}

.nvidia-tag[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.2), rgba(118, 185, 0, 0.1));
    border-color: rgba(118, 185, 0, 0.4);
    color: #76b900;
}

/* =====================================================
   STATS STRIP
   ===================================================== */
.stats-strip[b-chu1xq2rgt] {
    background: linear-gradient(180deg, #042f2e 0%, #020617 100%);
    padding: 48px 0;
    border-top: 1px solid rgba(20, 184, 166, 0.2);
    border-bottom: 1px solid rgba(20, 184, 166, 0.2);
}

.stats-strip-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.stat-strip-item[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(20, 184, 166, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.stat-strip-item :deep(svg)[b-chu1xq2rgt] {
    width: 28px;
    height: 28px;
    color: #14b8a6;
    flex-shrink: 0;
}

.stat-strip-content[b-chu1xq2rgt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-strip-value[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.stat-strip-label[b-chu1xq2rgt] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   NETWORK GRID (InfiniBand Cards)
   ===================================================== */
.network-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.network-card[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.network-card:hover[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.network-card.featured[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
}


.network-card-header[b-chu1xq2rgt] {
    padding: 24px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    position: relative;
}

.network-icon[b-chu1xq2rgt] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(16, 185, 129, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.network-icon :deep(svg)[b-chu1xq2rgt] {
    width: 28px;
    height: 28px;
    color: #14b8a6;
}

.network-badge[b-chu1xq2rgt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.network-badge.ndr[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(16, 185, 129, 0.2));
    color: #5eead4;
    border: 1px solid rgba(20, 184, 166, 0.4);
}

.network-badge.hdr[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.2));
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.network-badge.adapter[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.2));
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.network-card-body[b-chu1xq2rgt] {
    padding: 24px;
}

.network-card-body h3[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.network-card-body p[b-chu1xq2rgt] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.network-specs[b-chu1xq2rgt] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.network-specs li[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.network-specs li:last-child[b-chu1xq2rgt] {
    border-bottom: none;
}

.network-specs li[b-chu1xq2rgt]::before {
    content: '•';
    color: #14b8a6;
    font-weight: bold;
}

.network-highlight[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(20, 184, 166, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.network-highlight :deep(svg)[b-chu1xq2rgt] {
    width: 18px;
    height: 18px;
    color: #14b8a6;
}

.network-highlight span[b-chu1xq2rgt] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #5eead4;
}

/* =====================================================
   ETHERNET GRID
   ===================================================== */
.ethernet-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.ethernet-card[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    padding: 32px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.ethernet-card:hover[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.ethernet-header[b-chu1xq2rgt] {
    margin-bottom: 20px;
}

.ethernet-badge[b-chu1xq2rgt] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ethernet-badge.nvidia[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.3), rgba(118, 185, 0, 0.1));
    color: #76b900;
    border: 1px solid rgba(118, 185, 0, 0.4);
}

.ethernet-badge.arista[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.ethernet-badge.cisco[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(20, 184, 166, 0.1));
    color: #5eead4;
    border: 1px solid rgba(20, 184, 166, 0.4);
}

.ethernet-badge.juniper[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(132, 189, 0, 0.3), rgba(132, 189, 0, 0.1));
    color: #a3e635;
    border: 1px solid rgba(132, 189, 0, 0.4);
}

.ethernet-badge.fortinet[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(238, 49, 36, 0.3), rgba(238, 49, 36, 0.1));
    color: #fca5a5;
    border: 1px solid rgba(238, 49, 36, 0.4);
}

.ethernet-grid--quad[b-chu1xq2rgt] {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

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

/* =====================================================
   SECURITY FABRIC SECTION (Fortinet)
   ===================================================== */
.security-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.security-card[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s ease;
    position: relative;
}

.security-card.featured[b-chu1xq2rgt] {
    border-color: rgba(238, 49, 36, 0.35);
    box-shadow: 0 10px 30px rgba(238, 49, 36, 0.08);
}

.security-card:hover[b-chu1xq2rgt] {
    border-color: rgba(238, 49, 36, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.security-card-header[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.security-badge[b-chu1xq2rgt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 4px;
}

.security-card h3[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.security-card p[b-chu1xq2rgt] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 24px;
}

.security-specs[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.security-spec[b-chu1xq2rgt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.security-spec .spec-label[b-chu1xq2rgt] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.security-spec .spec-value[b-chu1xq2rgt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
}

.security-features[b-chu1xq2rgt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.security-features li[b-chu1xq2rgt] {
    font-size: 0.9rem;
    color: #cbd5e1;
    padding-left: 22px;
    position: relative;
}

.security-features li[b-chu1xq2rgt]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #ef4444;
    font-weight: 700;
}

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

.ethernet-card h3[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.ethernet-card p[b-chu1xq2rgt] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 24px;
}

.ethernet-specs[b-chu1xq2rgt] {
    display: flex;
    gap: 24px;
}

.ethernet-specs .spec-item[b-chu1xq2rgt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ethernet-specs .spec-value[b-chu1xq2rgt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #14b8a6;
}

.ethernet-specs .spec-label[b-chu1xq2rgt] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =====================================================
   DPU GRID (Smart NICs)
   ===================================================== */
.dpu-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.dpu-card[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s ease;
    position: relative;
}

.dpu-card:hover[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.dpu-card.featured[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.dpu-badge[b-chu1xq2rgt] {
    display: inline-block;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(16, 185, 129, 0.2));
    color: #5eead4;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.dpu-card h3[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.dpu-card > p[b-chu1xq2rgt] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 24px;
}

.dpu-specs[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.dpu-spec[b-chu1xq2rgt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(20, 184, 166, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.dpu-spec .spec-label[b-chu1xq2rgt] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dpu-spec .spec-value[b-chu1xq2rgt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #14b8a6;
}

.dpu-features[b-chu1xq2rgt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.dpu-features li[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.8);
}

.dpu-features li[b-chu1xq2rgt]::before {
    content: '✓';
    color: #14b8a6;
    font-weight: bold;
    font-size: 0.9rem;
}

/* =====================================================
   SERVICES STRIP
   ===================================================== */
.services-strip[b-chu1xq2rgt] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-top: 1px solid rgba(20, 184, 166, 0.2);
    border-bottom: 1px solid rgba(20, 184, 166, 0.2);
    padding: 64px 0;
}

.services-strip-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-strip-item[b-chu1xq2rgt] {
    text-align: center;
    padding: 24px;
}

.service-strip-item :deep(svg)[b-chu1xq2rgt] {
    width: 40px;
    height: 40px;
    color: #14b8a6;
    margin-bottom: 16px;
}

.service-strip-item h4[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.service-strip-item p[b-chu1xq2rgt] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.network-cta[b-chu1xq2rgt] {
    padding: 100px 0;
    background: linear-gradient(135deg, #042f2e 0%, #020617 100%);
    position: relative;
    overflow: hidden;
}

.network-cta[b-chu1xq2rgt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(20, 184, 166, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.cta-content[b-chu1xq2rgt] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2[b-chu1xq2rgt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.cta-content > p[b-chu1xq2rgt] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
    margin-bottom: 40px;
}

.cta-actions[b-chu1xq2rgt] {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

/* =====================================================
   SECONDARY CTA
   ===================================================== */
.secondary-cta[b-chu1xq2rgt] {
    padding: 64px 0;
    background: #020617;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.secondary-cta-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.secondary-cta-card[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.secondary-cta-card:hover[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.1);
    transform: translateY(-2px);
}

.secondary-cta-card :deep(svg)[b-chu1xq2rgt] {
    width: 18px;
    height: 18px;
    color: #14b8a6;
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 1200px) {
    .net-stats-row[b-chu1xq2rgt] {
        justify-content: center;
    }

    .stats-strip-grid[b-chu1xq2rgt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .network-grid[b-chu1xq2rgt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ethernet-grid[b-chu1xq2rgt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .services-strip-grid[b-chu1xq2rgt] {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 900px) {
    .dpu-grid[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
    }

    .secondary-cta-grid[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .net-stats-row[b-chu1xq2rgt] {
        gap: 20px;
    }

    .net-stat-value[b-chu1xq2rgt] {
        font-size: 1.25rem;
    }

    .stats-strip-grid[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .network-grid[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
    }

    .ethernet-grid[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
    }

    .services-strip-grid[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cta-content h2[b-chu1xq2rgt] {
        font-size: 2rem;
    }

}

@media (max-width: 480px) {
    .page-hero-badges[b-chu1xq2rgt] {
        flex-direction: column;
        align-items: center;
    }

    .ethernet-specs[b-chu1xq2rgt] {
        flex-direction: column;
        gap: 16px;
    }

    .dpu-specs[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
    }

    .dpu-features[b-chu1xq2rgt] {
        grid-template-columns: 1fr;
    }

}
/* /Components/Pages/Hardware/OEM/Dell/Dell.razor.rz.scp.css */
/* ============================================
   Dell OEM Page Styles
   Brand Color: Dell Blue (#007db8, #0078d4)

   NOTE: Hero section now uses generic CSS from:
   - brand-colors.css (.brand-dell)
   - generic-hero.css (.page-hero, .showcase-card)
   - generic-buttons.css (.btn-brand-primary, .btn-outline)
   ============================================ */

/* Dell-specific showcase card overrides */
/* The base .showcase-card styles come from generic-hero.css */
/* These are Dell-specific spec grid and footer styles */

.showcase-specs[b-7r4ty3e5m8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.showcase-spec[b-7r4ty3e5m8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(0, 125, 184, 0.1);
    border-radius: 8px;
}

.showcase-spec .spec-label[b-7r4ty3e5m8] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showcase-spec .spec-value[b-7r4ty3e5m8] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0078d4;
}

.showcase-footer[b-7r4ty3e5m8] {
    padding: 16px 24px;
    background: rgba(0, 125, 184, 0.05);
    border-top: 1px solid rgba(0, 125, 184, 0.2);
    text-align: center;
}

.showcase-price[b-7r4ty3e5m8] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0078d4;
}

/* Stats Strip - Uses shared stats-strip.css */
.dell-stats-section[b-7r4ty3e5m8] {
    background: rgba(0, 125, 184, 0.05);
}

.dell-stats-section .stats-strip-value[b-7r4ty3e5m8] {
    color: #0078d4;
}

/* AI Factory Section */
.ai-factory-section[b-7r4ty3e5m8] {
    padding: 80px 0;
}

.ai-factory-card[b-7r4ty3e5m8] {
    background: linear-gradient(135deg, rgba(0, 125, 184, 0.1) 0%, rgba(0, 120, 212, 0.1) 100%);
    border: 2px solid rgba(0, 125, 184, 0.3);
    border-radius: 20px;
    padding: 60px;
    text-align: center;
}

.ai-factory-header[b-7r4ty3e5m8] {
    margin-bottom: 40px;
}

.ai-factory-badge[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 125, 184, 0.2);
    border: 1px solid rgba(0, 125, 184, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0078d4;
    margin-bottom: 24px;
}

.ai-factory-badge :deep(svg)[b-7r4ty3e5m8] {
    width: 16px;
    height: 16px;
}

.ai-factory-card h2[b-7r4ty3e5m8] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: #0078d4;
    margin-bottom: 16px;
}

.ai-factory-header p[b-7r4ty3e5m8] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.ai-factory-stats[b-7r4ty3e5m8] {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.ai-factory-stat[b-7r4ty3e5m8] {
    text-align: center;
}

.stat-number[b-7r4ty3e5m8] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-text[b-7r4ty3e5m8] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.6);
}

/* Section Styles */
.section[b-7r4ty3e5m8] {
    padding: 100px 0;
    position: relative;
}

.section-alt[b-7r4ty3e5m8] {
    background: rgba(15, 23, 42, 0.3);
}

.section-header[b-7r4ty3e5m8] {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 125, 184, 0.1);
    border: 1px solid rgba(0, 125, 184, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0078d4;
    margin-bottom: 20px;
}

.section-badge :deep(svg)[b-7r4ty3e5m8] {
    width: 16px;
    height: 16px;
}

.section-title[b-7r4ty3e5m8] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.section-description[b-7r4ty3e5m8] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Products Grid */
.products-grid[b-7r4ty3e5m8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.product-card[b-7r4ty3e5m8] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover[b-7r4ty3e5m8] {
    transform: translateY(-8px);
    border-color: rgba(0, 125, 184, 0.3);
    box-shadow: 0 20px 60px rgba(0, 125, 184, 0.15);
}

.product-card.featured[b-7r4ty3e5m8] {
    border-color: rgba(0, 125, 184, 0.3);
    box-shadow: 0 10px 40px rgba(0, 125, 184, 0.1);
}

.product-card-header[b-7r4ty3e5m8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.product-icon[b-7r4ty3e5m8] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(0, 125, 184, 0.2), rgba(0, 120, 212, 0.2));
    border: 1px solid rgba(0, 125, 184, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-icon :deep(svg)[b-7r4ty3e5m8] {
    width: 28px;
    height: 28px;
    color: #0078d4;
}

.product-badge[b-7r4ty3e5m8] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge.flagship[b-7r4ty3e5m8] {
    background: rgba(0, 125, 184, 0.1);
    color: #0078d4;
    border: 1px solid rgba(0, 125, 184, 0.3);
}

.product-badge.liquid[b-7r4ty3e5m8] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.product-badge.versatile[b-7r4ty3e5m8] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.product-badge.inference[b-7r4ty3e5m8] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.product-card-body[b-7r4ty3e5m8] {
    padding: 24px;
}

.product-card-body h3[b-7r4ty3e5m8] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.product-subtitle[b-7r4ty3e5m8] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 16px;
}

.product-description[b-7r4ty3e5m8] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.product-specs-grid[b-7r4ty3e5m8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-spec[b-7r4ty3e5m8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-spec .spec-label[b-7r4ty3e5m8] {
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-spec .spec-value[b-7r4ty3e5m8] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0078d4;
}

.product-features[b-7r4ty3e5m8] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.product-features li[b-7r4ty3e5m8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    padding: 6px 0;
}

.product-features li[b-7r4ty3e5m8]::before {
    content: '→';
    color: #0078d4;
    font-weight: 700;
    flex-shrink: 0;
}

.product-pricing[b-7r4ty3e5m8] {
    margin-bottom: 20px;
}

.product-pricing .price[b-7r4ty3e5m8] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0078d4;
    margin-bottom: 4px;
}

.product-pricing .price-note[b-7r4ty3e5m8] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
}

.product-actions[b-7r4ty3e5m8] {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.product-btn[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #007db8, #0078d4);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-btn:hover[b-7r4ty3e5m8] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 125, 184, 0.3);
}

.product-btn :deep(svg)[b-7r4ty3e5m8] {
    width: 16px;
    height: 16px;
}

/* Comparison Table Overrides - Dell Blue Theme */
.comparison-table th[b-7r4ty3e5m8] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #0078d4;
    background: rgba(0, 125, 184, 0.1);
    padding: 18px 20px;
}

/* Dimension column - lighter background */
.comparison-table th:first-child[b-7r4ty3e5m8],
.comparison-table td:first-child[b-7r4ty3e5m8] {
    background: rgba(0, 125, 184, 0.08);
}

/* No hover effect - static table */
.comparison-table tbody tr:hover[b-7r4ty3e5m8] {
    background: none;
}

/* Partnership cards now use shared CSS from partnership-cards.css */

/* GPU Navigation Section */
.gpu-nav-section[b-7r4ty3e5m8] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
}

.gpu-nav-grid[b-7r4ty3e5m8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.gpu-nav-card[b-7r4ty3e5m8] {
    display: block;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gpu-nav-card:hover[b-7r4ty3e5m8] {
    transform: translateY(-4px);
    border-color: rgba(0, 125, 184, 0.3);
    box-shadow: 0 12px 40px rgba(0, 125, 184, 0.1);
}

.gpu-nav-icon[b-7r4ty3e5m8] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.gpu-nav-icon.h100[b-7r4ty3e5m8] {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.gpu-nav-icon.h100 :deep(svg)[b-7r4ty3e5m8] {
    color: #10b981;
}

.gpu-nav-icon.h200[b-7r4ty3e5m8] {
    background: rgba(0, 125, 184, 0.2);
    border: 1px solid rgba(0, 125, 184, 0.3);
}

.gpu-nav-icon.h200 :deep(svg)[b-7r4ty3e5m8] {
    color: #0078d4;
}

.gpu-nav-icon.b200[b-7r4ty3e5m8] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.gpu-nav-icon.b200 :deep(svg)[b-7r4ty3e5m8] {
    color: #8b5cf6;
}

.gpu-nav-icon.gb200[b-7r4ty3e5m8] {
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.gpu-nav-icon.gb200 :deep(svg)[b-7r4ty3e5m8] {
    color: #06b6d4;
}

.gpu-nav-icon.amd[b-7r4ty3e5m8] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.gpu-nav-icon.amd :deep(svg)[b-7r4ty3e5m8] {
    color: #ef4444;
}

.gpu-nav-icon :deep(svg)[b-7r4ty3e5m8] {
    width: 32px;
    height: 32px;
}

.gpu-nav-card h3[b-7r4ty3e5m8] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.gpu-nav-card p[b-7r4ty3e5m8] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.gpu-nav-link[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0078d4;
    font-weight: 600;
    font-size: 0.9rem;
}

.gpu-nav-link :deep(svg)[b-7r4ty3e5m8] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.gpu-nav-card:hover .gpu-nav-link :deep(svg)[b-7r4ty3e5m8] {
    transform: translateX(4px);
}

/* Services Strip - Uses shared services-strip.css */
.dell-services-section[b-7r4ty3e5m8] {
    padding: 48px 0;
    background: linear-gradient(135deg, rgba(0, 125, 184, 0.1), rgba(0, 120, 212, 0.1));
    border-top: 1px solid rgba(0, 125, 184, 0.2);
    border-bottom: 1px solid rgba(0, 125, 184, 0.2);
}

/* FAQ Section - Uses shared faq-accordion.css */

/* CTA Section - Uses shared cta-section.css */
/* Dell-specific: Blue gradient glow instead of cyan */
.cta-section[b-7r4ty3e5m8]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 125, 184, 0.15) 0%, transparent 70%);
}

/* Dell brand buttons */
.btn-gold[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #007db8, #0078d4);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-gold:hover[b-7r4ty3e5m8] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 125, 184, 0.4);
}

.btn-outline[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: transparent;
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover[b-7r4ty3e5m8] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Secondary CTA */
.secondary-cta[b-7r4ty3e5m8] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-cta-content[b-7r4ty3e5m8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.secondary-cta-item[b-7r4ty3e5m8] {
    text-align: center;
    padding: 40px 30px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.secondary-cta-item:hover[b-7r4ty3e5m8] {
    transform: translateY(-4px);
    border-color: rgba(0, 125, 184, 0.3);
}

.secondary-cta-item :deep(svg)[b-7r4ty3e5m8] {
    width: 40px;
    height: 40px;
    color: #0078d4;
    margin-bottom: 20px;
}

.secondary-cta-item h3[b-7r4ty3e5m8] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.secondary-cta-item p[b-7r4ty3e5m8] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 20px;
}

.secondary-cta-item a[b-7r4ty3e5m8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0078d4;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.secondary-cta-item a:hover[b-7r4ty3e5m8] {
    gap: 10px;
}

/* ============================================
   Responsive Design
   ============================================ */

/* NOTE: Hero responsive styles now handled by generic-hero.css */

@media (max-width: 1200px) {
    .products-grid[b-7r4ty3e5m8] {
        grid-template-columns: 1fr 1fr;
    }

    /* .partnerships-grid responsive is in partnership-cards.css */

    .gpu-nav-grid[b-7r4ty3e5m8] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Services strip responsive handled by services-strip.css */

@media (max-width: 900px) {
    .section-title[b-7r4ty3e5m8] {
        font-size: 2.25rem;
    }

    .products-grid[b-7r4ty3e5m8] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-7r4ty3e5m8] {
        grid-template-columns: 1fr;
    }

    .ai-factory-card[b-7r4ty3e5m8] {
        padding: 40px 24px;
    }

    .ai-factory-card h2[b-7r4ty3e5m8] {
        font-size: 2rem;
    }

    .ai-factory-stats[b-7r4ty3e5m8] {
        gap: 30px;
    }

    .stat-number[b-7r4ty3e5m8] {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .section[b-7r4ty3e5m8] {
        padding: 60px 0;
    }

    .section-title[b-7r4ty3e5m8] {
        font-size: 1.75rem;
    }

    .section-description[b-7r4ty3e5m8] {
        font-size: 1rem;
    }

    .secondary-cta-content[b-7r4ty3e5m8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .showcase-specs[b-7r4ty3e5m8] {
        grid-template-columns: 1fr 1fr;
    }

    .product-specs-grid[b-7r4ty3e5m8] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-spec[b-7r4ty3e5m8] {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px;
        background: rgba(0, 125, 184, 0.05);
        border-radius: 6px;
    }

    .ai-factory-stats[b-7r4ty3e5m8] {
        flex-direction: column;
        gap: 20px;
    }
}
/* /Components/Pages/Hardware/OEM/Gigabyte/Gigabyte.razor.rz.scp.css */
/* ============================================
   GIGABYTE OEM Page Styles
   Brand Color: GIGABYTE Orange (#f47920)

   NOTE: Hero section now uses generic CSS from:
   - brand-colors.css (.brand-gigabyte)
   - generic-hero.css (.page-hero, .showcase-card)
   - generic-buttons.css (.btn-brand-primary, .btn-outline)
   ============================================ */

/* ========================================
   SHOWCASE CARD (Hero Right Side) - Gigabyte Overrides
   ======================================== */

.showcase-specs[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.showcase-spec[b-g53ijmzlh0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(244, 121, 32, 0.1);
    border-radius: 8px;
}

.showcase-spec .spec-label[b-g53ijmzlh0] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showcase-spec .spec-value[b-g53ijmzlh0] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f47920;
}

/* ========================================
   STATS STRIP - Gigabyte Brand Overrides
   ======================================== */

.giga-stats-section[b-g53ijmzlh0] {
    background: linear-gradient(90deg, rgba(244, 121, 32, 0.08) 0%, rgba(244, 121, 32, 0.03) 50%, rgba(244, 121, 32, 0.08) 100%);
}

.giga-stats-section .stats-strip--bordered[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.2);
}

.giga-stats-section .stats-strip-value[b-g53ijmzlh0] {
    color: #f47920;
}

/* ========================================
   SECTION STYLES
   ======================================== */

.section[b-g53ijmzlh0] {
    padding: 100px 0;
    position: relative;
}

.section-alt[b-g53ijmzlh0] {
    background: rgba(15, 23, 42, 0.3);
}

.section-header[b-g53ijmzlh0] {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(244, 121, 32, 0.1);
    border: 1px solid rgba(244, 121, 32, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f47920;
    margin-bottom: 20px;
}

.section-badge :deep(svg)[b-g53ijmzlh0] {
    width: 16px;
    height: 16px;
}

.section-title[b-g53ijmzlh0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.section-description[b-g53ijmzlh0] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ==========================================================================
   GIGAPOD Section (Unique branded feature section)
   ========================================================================== */

.gigapod-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.gigapod-header[b-g53ijmzlh0] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.gigapod-badge[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(244, 121, 32, 0.1);
    border: 1px solid rgba(244, 121, 32, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    color: #f47920;
    margin-bottom: 1rem;
}

.gigapod-badge :deep(svg)[b-g53ijmzlh0] {
    width: 16px;
    height: 16px;
}

.gigapod-header h2[b-g53ijmzlh0] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.gigapod-header p[b-g53ijmzlh0] {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.7;
}

.gigapod-features-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.gigapod-feature-card[b-g53ijmzlh0] {
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid rgba(244, 121, 32, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.gigapod-feature-card:hover[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(244, 121, 32, 0.1);
}

.gigapod-feature-card .feature-icon[b-g53ijmzlh0] {
    width: 48px;
    height: 48px;
    background: rgba(244, 121, 32, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.gigapod-feature-card .feature-icon :deep(svg)[b-g53ijmzlh0] {
    width: 24px;
    height: 24px;
    color: #f47920;
}

.gigapod-feature-card h3[b-g53ijmzlh0] {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.gigapod-feature-card p[b-g53ijmzlh0] {
    font-size: 0.9375rem;
    color: #9ca3af;
    line-height: 1.6;
}

/* ========================================
   PRODUCTS GRID
   ======================================== */

.products-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.product-card[b-g53ijmzlh0] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover[b-g53ijmzlh0] {
    transform: translateY(-8px);
    border-color: rgba(244, 121, 32, 0.3);
    box-shadow: 0 20px 60px rgba(244, 121, 32, 0.15);
}

.product-card.featured[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.3);
    box-shadow: 0 10px 40px rgba(244, 121, 32, 0.1);
}

.product-card-header[b-g53ijmzlh0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.product-icon[b-g53ijmzlh0] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(244, 121, 32, 0.2), rgba(255, 140, 58, 0.2));
    border: 1px solid rgba(244, 121, 32, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-icon :deep(svg)[b-g53ijmzlh0] {
    width: 28px;
    height: 28px;
    color: #f47920;
}

.product-badge[b-g53ijmzlh0] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge.flagship[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.1);
    color: #f47920;
    border: 1px solid rgba(244, 121, 32, 0.3);
}

.product-badge.liquid[b-g53ijmzlh0] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.product-badge.versatile[b-g53ijmzlh0] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.product-badge.inference[b-g53ijmzlh0] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.product-card-body[b-g53ijmzlh0] {
    padding: 24px;
}

.product-card-body h3[b-g53ijmzlh0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.product-subtitle[b-g53ijmzlh0] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 16px;
}

.product-description[b-g53ijmzlh0] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.product-specs-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-spec[b-g53ijmzlh0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(244, 121, 32, 0.08);
    border-radius: 8px;
}

.product-spec .spec-label[b-g53ijmzlh0] {
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-spec .spec-value[b-g53ijmzlh0] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f47920;
}

.product-features[b-g53ijmzlh0] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.product-features li[b-g53ijmzlh0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    padding: 6px 0;
}

.product-features li[b-g53ijmzlh0]::before {
    content: '→';
    color: #f47920;
    font-weight: 700;
    flex-shrink: 0;
}

.product-pricing[b-g53ijmzlh0] {
    margin-bottom: 20px;
}

.product-pricing .price[b-g53ijmzlh0] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f47920;
    margin-bottom: 4px;
}

.product-pricing .price-note[b-g53ijmzlh0] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
}

.product-actions[b-g53ijmzlh0] {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.product-btn[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f47920, #ff8c3a);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-btn:hover[b-g53ijmzlh0] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(244, 121, 32, 0.3);
}

.product-btn :deep(svg)[b-g53ijmzlh0] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Cooling Section
   ========================================================================== */

.cooling-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cooling-card[b-g53ijmzlh0] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.cooling-card:hover[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.3);
    transform: translateY(-4px);
}

.cooling-icon[b-g53ijmzlh0] {
    width: 56px;
    height: 56px;
    background: rgba(244, 121, 32, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.cooling-icon :deep(svg)[b-g53ijmzlh0] {
    width: 28px;
    height: 28px;
    color: #f47920;
}

.cooling-card h3[b-g53ijmzlh0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.75rem;
}

.cooling-card > p[b-g53ijmzlh0] {
    font-size: 0.9375rem;
    color: #9ca3af;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.cooling-benefits[b-g53ijmzlh0] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cooling-benefits li[b-g53ijmzlh0] {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #e5e7eb;
    font-size: 0.9375rem;
}

.cooling-benefits li[b-g53ijmzlh0]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #f47920;
    font-weight: 600;
}

/* ==========================================================================
   Comparison Table - Gigabyte Brand Overrides
   ========================================================================== */

.comparison-table th[b-g53ijmzlh0] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f47920;
    background: rgba(244, 121, 32, 0.1);
    padding: 18px 20px;
}

.comparison-table th:first-child[b-g53ijmzlh0],
.comparison-table td:first-child[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.08);
}

.comparison-table tbody tr:hover td[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.05);
}

.comparison-table .highlight-row td[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.1);
}

.comparison-table .highlight-row:hover td[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.15);
}

/* Partnership cards now use shared CSS from partnership-cards.css */

/* ========================================
   GPU NAVIGATION SECTION
   ======================================== */

.gpu-nav-section[b-g53ijmzlh0] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
}

.gpu-nav-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.gpu-nav-card[b-g53ijmzlh0] {
    display: block;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gpu-nav-card:hover[b-g53ijmzlh0] {
    transform: translateY(-4px);
    border-color: rgba(244, 121, 32, 0.3);
    box-shadow: 0 12px 40px rgba(244, 121, 32, 0.1);
}

.gpu-nav-card h3[b-g53ijmzlh0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.gpu-nav-card p[b-g53ijmzlh0] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.gpu-nav-link[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f47920;
    font-weight: 600;
    font-size: 0.9rem;
}

.gpu-nav-link :deep(svg)[b-g53ijmzlh0] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.gpu-nav-card:hover .gpu-nav-link :deep(svg)[b-g53ijmzlh0] {
    transform: translateX(4px);
}

/* ==========================================================================
   Services Strip - Gigabyte Brand Overrides
   ========================================================================== */

.giga-services-section[b-g53ijmzlh0] {
    padding: 48px 0;
    background: linear-gradient(90deg, rgba(244, 121, 32, 0.08) 0%, rgba(244, 121, 32, 0.03) 50%, rgba(244, 121, 32, 0.08) 100%);
    border-top: 1px solid rgba(244, 121, 32, 0.15);
    border-bottom: 1px solid rgba(244, 121, 32, 0.15);
}

/* FAQ Section - Uses shared faq-accordion.css */

/* ==========================================================================
   CTA Section - Gigabyte Brand Overrides
   ========================================================================== */

.giga-cta-section[b-g53ijmzlh0]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(244, 121, 32, 0.1) 0%, transparent 70%);
}

.giga-cta-section .cta-title .accent[b-g53ijmzlh0] {
    background: linear-gradient(135deg, #f47920 0%, #ff8c3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gigabyte brand buttons */
.btn-gold[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #f47920, #ff8c3a);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-gold:hover[b-g53ijmzlh0] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244, 121, 32, 0.4);
}

.btn-outline[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: transparent;
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover[b-g53ijmzlh0] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

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

.secondary-cta[b-g53ijmzlh0] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-cta-content[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.secondary-cta-item[b-g53ijmzlh0] {
    text-align: center;
    padding: 40px 30px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.secondary-cta-item:hover[b-g53ijmzlh0] {
    transform: translateY(-4px);
    border-color: rgba(244, 121, 32, 0.3);
}

.secondary-cta-item :deep(svg)[b-g53ijmzlh0] {
    width: 40px;
    height: 40px;
    color: #f47920;
    margin-bottom: 20px;
}

.secondary-cta-item h3[b-g53ijmzlh0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.secondary-cta-item p[b-g53ijmzlh0] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 20px;
}

.secondary-cta-item a[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f47920;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.secondary-cta-item a:hover[b-g53ijmzlh0] {
    gap: 10px;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@@media (max-width: 1200px) {
    .gigapod-features-grid[b-g53ijmzlh0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr 1fr;
    }

    .gpu-nav-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr 1fr;
    }
}

@@media (max-width: 1024px) {
    .cooling-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }
}

@@media (max-width: 900px) {
    .section-title[b-g53ijmzlh0] {
        font-size: 2.25rem;
    }

    .products-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }
}

@@media (max-width: 768px) {
    .section[b-g53ijmzlh0] {
        padding: 60px 0;
    }

    .section-title[b-g53ijmzlh0] {
        font-size: 1.75rem;
    }

    .section-description[b-g53ijmzlh0] {
        font-size: 1rem;
    }

    .gigapod-features-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .gigapod-header h2[b-g53ijmzlh0] {
        font-size: 1.75rem;
    }

    .secondary-cta-content[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .showcase-specs[b-g53ijmzlh0] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

@@media (max-width: 480px) {
    .showcase-specs[b-g53ijmzlh0] {
        grid-template-columns: 1fr 1fr;
    }

    .product-specs-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-spec[b-g53ijmzlh0] {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px;
        background: rgba(244, 121, 32, 0.05);
        border-radius: 6px;
    }
}
/* /Components/Pages/Hardware/OEM/HPE/HPE.razor.rz.scp.css */
/* HPE AI Servers - Scoped CSS */
/* Brand Color: #01a982 (HPE Green) */

/* ========================================
   HERO SECTION
   ======================================== */
.hpe-hero[b-bpl2bjkhm3] {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.hpe-hero-bg[b-bpl2bjkhm3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(1, 169, 130, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(1, 169, 130, 0.08), transparent),
        linear-gradient(180deg, #0a1628 0%, #0f172a 100%);
    z-index: -1;
}

.hpe-hero-content[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hpe-hero-text[b-bpl2bjkhm3] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hpe-hero-badge[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(1, 169, 130, 0.15);
    border: 1px solid rgba(1, 169, 130, 0.3);
    color: #01a982;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    width: fit-content;
}

.hpe-hero-badge :deep(svg)[b-bpl2bjkhm3] {
    width: 14px;
    height: 14px;
}

.hpe-hero-text h1[b-bpl2bjkhm3] {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #f8fafc;
    margin: 0;
}

.hpe-hero-subtitle[b-bpl2bjkhm3] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(248, 250, 252, 0.8);
    max-width: 540px;
}

.hpe-hero-actions[b-bpl2bjkhm3] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.hpe-btn-primary[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #01a982, #007d64);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.hpe-btn-primary:hover[b-bpl2bjkhm3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 169, 130, 0.35);
}

.hpe-btn-primary :deep(svg)[b-bpl2bjkhm3] {
    width: 16px;
    height: 16px;
}

.hpe-btn-secondary[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #01a982;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(1, 169, 130, 0.4);
    cursor: pointer;
}

.hpe-btn-secondary:hover[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.1);
    border-color: #01a982;
}

.hpe-btn-secondary :deep(svg)[b-bpl2bjkhm3] {
    width: 16px;
    height: 16px;
}

/* ========================================
   SHOWCASE CARD (Hero Right Side)
   ======================================== */
.hpe-hero-showcase[b-bpl2bjkhm3] {
    display: flex;
    justify-content: center;
}

.showcase-card[b-bpl2bjkhm3] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(1, 169, 130, 0.3);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(10px);
}

.showcase-header[b-bpl2bjkhm3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(1, 169, 130, 0.1);
    border-bottom: 1px solid rgba(1, 169, 130, 0.2);
}

.showcase-badge[b-bpl2bjkhm3] {
    background: #01a982;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-type[b-bpl2bjkhm3] {
    color: rgba(248, 250, 252, 0.6);
    font-size: 0.875rem;
}

.showcase-content[b-bpl2bjkhm3] {
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.showcase-icon[b-bpl2bjkhm3] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #01a982, #007d64);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.showcase-icon :deep(svg)[b-bpl2bjkhm3] {
    width: 40px;
    height: 40px;
    color: white;
}

.showcase-title[b-bpl2bjkhm3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.25rem;
}

.showcase-subtitle[b-bpl2bjkhm3] {
    color: rgba(248, 250, 252, 0.6);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

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

.showcase-spec[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.08);
    border: 1px solid rgba(1, 169, 130, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.showcase-spec .spec-label[b-bpl2bjkhm3] {
    display: block;
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.showcase-spec .spec-value[b-bpl2bjkhm3] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #01a982;
}

.showcase-footer[b-bpl2bjkhm3] {
    padding: 1rem 1.25rem;
    background: rgba(1, 169, 130, 0.05);
    border-top: 1px solid rgba(1, 169, 130, 0.15);
    text-align: center;
}

.showcase-price[b-bpl2bjkhm3] {
    font-size: 1rem;
    font-weight: 600;
    color: #01a982;
}

/* ========================================
   STATS STRIP - HPE Brand Overrides
   ======================================== */
.hpe-stats-section[b-bpl2bjkhm3] {
    background: linear-gradient(90deg, rgba(1, 169, 130, 0.08), rgba(1, 169, 130, 0.03));
}

.hpe-stats-section .stats-strip--bordered[b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.2);
}

.hpe-stats-section .stats-strip-value[b-bpl2bjkhm3] {
    color: #01a982;
}

/* ========================================
   GREENLAKE SECTION (HPE-Specific)
   ======================================== */
.greenlake-section[b-bpl2bjkhm3] {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a1628 0%, #0f172a 100%);
}

.greenlake-card[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.05);
    border: 1px solid rgba(1, 169, 130, 0.2);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.greenlake-header[b-bpl2bjkhm3] {
    margin-bottom: 2.5rem;
}

.greenlake-badge[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(1, 169, 130, 0.15);
    border: 1px solid rgba(1, 169, 130, 0.3);
    color: #01a982;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.greenlake-badge :deep(svg)[b-bpl2bjkhm3] {
    width: 14px;
    height: 14px;
}

.greenlake-header h2[b-bpl2bjkhm3] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 1rem 0;
}

.greenlake-header p[b-bpl2bjkhm3] {
    font-size: 1.125rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.greenlake-stats[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.greenlake-stat[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.08);
    border: 1px solid rgba(1, 169, 130, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
}

.greenlake-stat .stat-number[b-bpl2bjkhm3] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #01a982;
    margin-bottom: 0.5rem;
}

.greenlake-stat .stat-text[b-bpl2bjkhm3] {
    display: block;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
}

/* ========================================
   SECTION STYLES
   ======================================== */
.section[b-bpl2bjkhm3] {
    padding: 80px 0;
    background: #0a1628;
}

.section-alt[b-bpl2bjkhm3] {
    background: linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
}

.section-header[b-bpl2bjkhm3] {
    text-align: center;
    margin-bottom: 3rem;
}

.section-badge[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(1, 169, 130, 0.15);
    border: 1px solid rgba(1, 169, 130, 0.3);
    color: #01a982;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.section-badge :deep(svg)[b-bpl2bjkhm3] {
    width: 14px;
    height: 14px;
}

.section-title[b-bpl2bjkhm3] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 1rem 0;
}

.section-description[b-bpl2bjkhm3] {
    font-size: 1.125rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================
   PRODUCTS GRID
   ======================================== */
.products-grid[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.product-card[b-bpl2bjkhm3] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover[b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(1, 169, 130, 0.15);
}

.product-card.featured[b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.3);
    background: rgba(1, 169, 130, 0.05);
}

.product-card-header[b-bpl2bjkhm3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: rgba(1, 169, 130, 0.08);
    border-bottom: 1px solid rgba(1, 169, 130, 0.15);
}

.product-icon[b-bpl2bjkhm3] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #01a982, #007d64);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-icon :deep(svg)[b-bpl2bjkhm3] {
    width: 24px;
    height: 24px;
    color: white;
}

.product-badge[b-bpl2bjkhm3] {
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-badge.liquid[b-bpl2bjkhm3] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.product-badge.inference[b-bpl2bjkhm3] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.product-badge.flagship[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.15);
    color: #01a982;
    border: 1px solid rgba(1, 169, 130, 0.3);
}

.product-badge.amd[b-bpl2bjkhm3] {
    background: rgba(237, 28, 36, 0.15);
    color: #ed1c24;
    border: 1px solid rgba(237, 28, 36, 0.3);
}

.product-card-body[b-bpl2bjkhm3] {
    padding: 1.5rem;
}

.product-card-body h3[b-bpl2bjkhm3] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.product-subtitle[b-bpl2bjkhm3] {
    font-size: 0.9rem;
    color: #01a982;
    margin-bottom: 0.75rem;
}

.product-description[b-bpl2bjkhm3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.product-specs-grid[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.product-spec[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.08);
    border: 1px solid rgba(1, 169, 130, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.product-spec .spec-label[b-bpl2bjkhm3] {
    display: block;
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.product-spec .spec-value[b-bpl2bjkhm3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #01a982;
}

.product-features[b-bpl2bjkhm3] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.product-features li[b-bpl2bjkhm3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: rgba(248, 250, 252, 0.8);
}

.product-features li[b-bpl2bjkhm3]::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #01a982;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.product-pricing[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.08);
    border: 1px solid rgba(1, 169, 130, 0.15);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.product-pricing .price[b-bpl2bjkhm3] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #01a982;
    margin-bottom: 0.25rem;
}

.product-pricing .price-note[b-bpl2bjkhm3] {
    display: block;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
}

.product-actions[b-bpl2bjkhm3] {
    display: flex;
    gap: 0.75rem;
}

.product-btn[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    background: linear-gradient(135deg, #01a982, #007d64);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-btn:hover[b-bpl2bjkhm3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 169, 130, 0.3);
}

.product-btn :deep(svg)[b-bpl2bjkhm3] {
    width: 14px;
    height: 14px;
}

/* ========================================
   PRIVATE CLOUD AI FEATURES
   ======================================== */
.private-cloud-features[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pc-feature-card[b-bpl2bjkhm3] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.pc-feature-card:hover[b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.4);
    transform: translateY(-4px);
}

.pc-feature-icon[b-bpl2bjkhm3] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(1, 169, 130, 0.2), rgba(1, 169, 130, 0.1));
    border: 1px solid rgba(1, 169, 130, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.pc-feature-icon :deep(svg)[b-bpl2bjkhm3] {
    width: 28px;
    height: 28px;
    color: #01a982;
}

.pc-feature-card h3[b-bpl2bjkhm3] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.75rem 0;
}

.pc-feature-card p[b-bpl2bjkhm3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   COMPARISON TABLE - HPE Brand Overrides
   (base styles from specs-table.css)
   ======================================== */
.comparison-table-wrapper[b-bpl2bjkhm3] {
    border: none;
}

.comparison-table th[b-bpl2bjkhm3] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #01a982;
    background: rgba(1, 169, 130, 0.1);
    padding: 18px 20px;
}

/* Dimension column - lighter background */
.comparison-table th:first-child[b-bpl2bjkhm3],
.comparison-table td:first-child[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.08);
}

/* No hover effect - static table */
.comparison-table tr:hover td[b-bpl2bjkhm3] {
    background: none;
}

/* Partnership cards now use shared CSS from partnership-cards.css */

/* ========================================
   GPU NAVIGATION SECTION
   ======================================== */
.gpu-nav-section[b-bpl2bjkhm3] {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a1628 0%, #0f172a 100%);
}

.gpu-nav-grid[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.gpu-nav-card[b-bpl2bjkhm3] {
    display: block;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gpu-nav-card:hover[b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(1, 169, 130, 0.15);
}

.gpu-nav-icon[b-bpl2bjkhm3] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.gpu-nav-icon.h100[b-bpl2bjkhm3] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.2), rgba(118, 185, 0, 0.1));
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.gpu-nav-icon.h100 :deep(svg)[b-bpl2bjkhm3] {
    color: #76b900;
}

.gpu-nav-icon.h200[b-bpl2bjkhm3] {
    background: linear-gradient(135deg, rgba(1, 169, 130, 0.2), rgba(1, 169, 130, 0.1));
    border: 1px solid rgba(1, 169, 130, 0.3);
}

.gpu-nav-icon.h200 :deep(svg)[b-bpl2bjkhm3] {
    color: #01a982;
}

.gpu-nav-icon.b200[b-bpl2bjkhm3] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.gpu-nav-icon.b200 :deep(svg)[b-bpl2bjkhm3] {
    color: #06b6d4;
}

.gpu-nav-icon :deep(svg)[b-bpl2bjkhm3] {
    width: 28px;
    height: 28px;
}

.gpu-nav-card h3[b-bpl2bjkhm3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.gpu-nav-card p[b-bpl2bjkhm3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.gpu-nav-link[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #01a982;
    font-weight: 600;
    font-size: 0.875rem;
}

.gpu-nav-link :deep(svg)[b-bpl2bjkhm3] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.gpu-nav-card:hover .gpu-nav-link :deep(svg)[b-bpl2bjkhm3] {
    transform: translateX(4px);
}

/* ========================================
   SERVICES STRIP - HPE Brand Overrides
   ======================================== */
.hpe-services-section[b-bpl2bjkhm3] {
    padding: 48px 0;
    background: linear-gradient(90deg, rgba(1, 169, 130, 0.08), rgba(1, 169, 130, 0.03));
    border-top: 1px solid rgba(1, 169, 130, 0.15);
    border-bottom: 1px solid rgba(1, 169, 130, 0.15);
}

/* FAQ Section - Uses shared faq-accordion.css */

/* ========================================
   CTA SECTION - HPE Brand Overrides
   ======================================== */
.hpe-cta-section[b-bpl2bjkhm3]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(1, 169, 130, 0.1) 0%, transparent 70%);
}

.hpe-cta-section .cta-title .accent[b-bpl2bjkhm3] {
    background: linear-gradient(135deg, #01a982 0%, #00c69c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* HPE Primary Button */
.btn-hpe-primary[b-bpl2bjkhm3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #01a982, #007d64);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-hpe-primary:hover[b-bpl2bjkhm3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 169, 130, 0.35);
}

.btn-hpe-primary :deep(svg)[b-bpl2bjkhm3] {
    width: 16px;
    height: 16px;
}

/* ========================================
   SECONDARY CTA
   ======================================== */
.secondary-cta[b-bpl2bjkhm3] {
    padding: 60px 0;
    background: #0a1628;
    border-top: 1px solid rgba(248, 250, 252, 0.1);
}

.secondary-cta-content[b-bpl2bjkhm3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.secondary-cta-item[b-bpl2bjkhm3] {
    text-align: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.secondary-cta-item:hover[b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.3);
    transform: translateY(-4px);
}

.secondary-cta-item :deep(svg)[b-bpl2bjkhm3] {
    width: 32px;
    height: 32px;
    color: #01a982;
    margin-bottom: 1rem;
}

.secondary-cta-item h3[b-bpl2bjkhm3] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.secondary-cta-item p[b-bpl2bjkhm3] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.secondary-cta-item a[b-bpl2bjkhm3] {
    color: #01a982;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.secondary-cta-item a:hover[b-bpl2bjkhm3] {
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .hpe-hero-content[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hpe-hero-text[b-bpl2bjkhm3] {
        text-align: center;
        align-items: center;
    }

    .hpe-hero-subtitle[b-bpl2bjkhm3] {
        max-width: 100%;
    }

    .hpe-hero-actions[b-bpl2bjkhm3] {
        justify-content: center;
    }

    .products-grid[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
    }

    .private-cloud-features[b-bpl2bjkhm3] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .partnerships-grid responsive is in partnership-cards.css */

    .gpu-nav-grid[b-bpl2bjkhm3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .secondary-cta-content[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hpe-hero[b-bpl2bjkhm3] {
        padding: 80px 0 60px;
        min-height: auto;
    }

    .hpe-hero-text h1[b-bpl2bjkhm3] {
        font-size: 2.5rem;
    }

    .hpe-hero-actions[b-bpl2bjkhm3] {
        flex-direction: column;
        width: 100%;
    }

    .hpe-btn-primary[b-bpl2bjkhm3],
    .hpe-btn-secondary[b-bpl2bjkhm3] {
        width: 100%;
        justify-content: center;
    }

    .greenlake-card[b-bpl2bjkhm3] {
        padding: 2rem;
    }

    .greenlake-stats[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section[b-bpl2bjkhm3] {
        padding: 60px 0;
    }

    .section-title[b-bpl2bjkhm3] {
        font-size: 1.75rem;
    }

    .product-specs-grid[b-bpl2bjkhm3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .private-cloud-features[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
    }

    .btn-hpe-primary[b-bpl2bjkhm3] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hpe-hero-text h1[b-bpl2bjkhm3] {
        font-size: 2rem;
    }

    .showcase-specs[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
    }

    .product-specs-grid[b-bpl2bjkhm3] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Hardware/OEM/Lenovo/Lenovo.razor.rz.scp.css */
/* Lenovo AI Servers - Scoped CSS */
/* Brand Color: #e2001a (Lenovo Red) */

/* ========================================
   HERO SECTION
   ======================================== */
.lenovo-hero[b-4177fwi8vk] {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.lenovo-hero-bg[b-4177fwi8vk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(226, 0, 26, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(226, 0, 26, 0.08), transparent),
        linear-gradient(180deg, #0a1628 0%, #0f172a 100%);
    z-index: -1;
}

.lenovo-hero-content[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.lenovo-hero-text[b-4177fwi8vk] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lenovo-hero-badge[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(226, 0, 26, 0.15);
    border: 1px solid rgba(226, 0, 26, 0.3);
    color: #e2001a;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    width: fit-content;
}

.lenovo-hero-badge :deep(svg)[b-4177fwi8vk] {
    width: 14px;
    height: 14px;
}

.lenovo-hero-text h1[b-4177fwi8vk] {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #f8fafc;
    margin: 0;
}

.lenovo-hero-subtitle[b-4177fwi8vk] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(248, 250, 252, 0.8);
    max-width: 540px;
}

.lenovo-hero-actions[b-4177fwi8vk] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.lenovo-btn-primary[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #e2001a, #a30015);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.lenovo-btn-primary:hover[b-4177fwi8vk] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 0, 26, 0.35);
}

.lenovo-btn-primary :deep(svg)[b-4177fwi8vk] {
    width: 16px;
    height: 16px;
}

.lenovo-btn-secondary[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #e2001a;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(226, 0, 26, 0.4);
    cursor: pointer;
}

.lenovo-btn-secondary:hover[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.1);
    border-color: #e2001a;
}

.lenovo-btn-secondary :deep(svg)[b-4177fwi8vk] {
    width: 16px;
    height: 16px;
}

/* ========================================
   SHOWCASE CARD (Hero Right Side)
   ======================================== */
.lenovo-hero-showcase[b-4177fwi8vk] {
    display: flex;
    justify-content: center;
}

.showcase-card[b-4177fwi8vk] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(226, 0, 26, 0.3);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(10px);
}

.showcase-header[b-4177fwi8vk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(226, 0, 26, 0.1);
    border-bottom: 1px solid rgba(226, 0, 26, 0.2);
}

.showcase-badge[b-4177fwi8vk] {
    background: #e2001a;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-type[b-4177fwi8vk] {
    color: rgba(248, 250, 252, 0.6);
    font-size: 0.875rem;
}

.showcase-content[b-4177fwi8vk] {
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.showcase-icon[b-4177fwi8vk] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e2001a, #a30015);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.showcase-icon :deep(svg)[b-4177fwi8vk] {
    width: 40px;
    height: 40px;
    color: white;
}

.showcase-title[b-4177fwi8vk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.25rem;
}

.showcase-subtitle[b-4177fwi8vk] {
    color: rgba(248, 250, 252, 0.6);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.showcase-specs[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.showcase-spec[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.08);
    border: 1px solid rgba(226, 0, 26, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.showcase-spec .spec-label[b-4177fwi8vk] {
    display: block;
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.showcase-spec .spec-value[b-4177fwi8vk] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2001a;
}

.showcase-footer[b-4177fwi8vk] {
    padding: 1rem 1.25rem;
    background: rgba(226, 0, 26, 0.05);
    border-top: 1px solid rgba(226, 0, 26, 0.15);
    text-align: center;
}

.showcase-price[b-4177fwi8vk] {
    font-size: 1rem;
    font-weight: 600;
    color: #e2001a;
}

/* ========================================
   STATS STRIP - Lenovo Brand Overrides
   ======================================== */
.lenovo-stats-section[b-4177fwi8vk] {
    background: linear-gradient(90deg, rgba(226, 0, 26, 0.08), rgba(226, 0, 26, 0.03));
}

.lenovo-stats-section .stats-strip--bordered[b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.2);
}

.lenovo-stats-section .stats-strip-value[b-4177fwi8vk] {
    color: #e2001a;
}

/* ========================================
   NEPTUNE SECTION (Lenovo-Specific)
   ======================================== */
.neptune-section[b-4177fwi8vk] {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a1628 0%, #0f172a 100%);
}

.neptune-card[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.05);
    border: 1px solid rgba(226, 0, 26, 0.2);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.neptune-header[b-4177fwi8vk] {
    margin-bottom: 2.5rem;
}

.neptune-badge[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(226, 0, 26, 0.15);
    border: 1px solid rgba(226, 0, 26, 0.3);
    color: #e2001a;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.neptune-badge :deep(svg)[b-4177fwi8vk] {
    width: 14px;
    height: 14px;
}

.neptune-header h2[b-4177fwi8vk] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 1rem 0;
}

.neptune-header p[b-4177fwi8vk] {
    font-size: 1.125rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.neptune-stats[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.neptune-stat[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.08);
    border: 1px solid rgba(226, 0, 26, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
}

.neptune-stat .stat-number[b-4177fwi8vk] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #e2001a;
    margin-bottom: 0.5rem;
}

.neptune-stat .stat-text[b-4177fwi8vk] {
    display: block;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
}

/* ========================================
   SECTION STYLES
   ======================================== */
.section[b-4177fwi8vk] {
    padding: 80px 0;
    background: #0a1628;
}

.section-alt[b-4177fwi8vk] {
    background: linear-gradient(180deg, #0f172a 0%, #0a1628 100%);
}

.section-header[b-4177fwi8vk] {
    text-align: center;
    margin-bottom: 3rem;
}

.section-badge[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(226, 0, 26, 0.15);
    border: 1px solid rgba(226, 0, 26, 0.3);
    color: #e2001a;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.section-badge :deep(svg)[b-4177fwi8vk] {
    width: 14px;
    height: 14px;
}

.section-title[b-4177fwi8vk] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 1rem 0;
}

.section-description[b-4177fwi8vk] {
    font-size: 1.125rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================
   PRODUCTS GRID
   ======================================== */
.products-grid[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.product-card[b-4177fwi8vk] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover[b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(226, 0, 26, 0.15);
}

.product-card.featured[b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.3);
    background: rgba(226, 0, 26, 0.05);
}

.product-card-header[b-4177fwi8vk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: rgba(226, 0, 26, 0.08);
    border-bottom: 1px solid rgba(226, 0, 26, 0.15);
}

.product-icon[b-4177fwi8vk] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e2001a, #a30015);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-icon :deep(svg)[b-4177fwi8vk] {
    width: 24px;
    height: 24px;
    color: white;
}

.product-badge[b-4177fwi8vk] {
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-badge.liquid[b-4177fwi8vk] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.product-badge.inference[b-4177fwi8vk] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.product-badge.flagship[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.15);
    color: #e2001a;
    border: 1px solid rgba(226, 0, 26, 0.3);
}

.product-badge.amd[b-4177fwi8vk] {
    background: rgba(237, 28, 36, 0.15);
    color: #ed1c24;
    border: 1px solid rgba(237, 28, 36, 0.3);
}

.product-card-body[b-4177fwi8vk] {
    padding: 1.5rem;
}

.product-card-body h3[b-4177fwi8vk] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.product-subtitle[b-4177fwi8vk] {
    font-size: 0.9rem;
    color: #e2001a;
    margin-bottom: 0.75rem;
}

.product-description[b-4177fwi8vk] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.product-specs-grid[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.product-spec[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.08);
    border: 1px solid rgba(226, 0, 26, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.product-spec .spec-label[b-4177fwi8vk] {
    display: block;
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.product-spec .spec-value[b-4177fwi8vk] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2001a;
}

.product-features[b-4177fwi8vk] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.product-features li[b-4177fwi8vk] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: rgba(248, 250, 252, 0.8);
}

.product-features li[b-4177fwi8vk]::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #e2001a;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.product-pricing[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.08);
    border: 1px solid rgba(226, 0, 26, 0.15);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.product-pricing .price[b-4177fwi8vk] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #e2001a;
    margin-bottom: 0.25rem;
}

.product-pricing .price-note[b-4177fwi8vk] {
    display: block;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
}

.product-actions[b-4177fwi8vk] {
    display: flex;
    gap: 0.75rem;
}

.product-btn[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    background: linear-gradient(135deg, #e2001a, #a30015);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-btn:hover[b-4177fwi8vk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(226, 0, 26, 0.3);
}

.product-btn :deep(svg)[b-4177fwi8vk] {
    width: 14px;
    height: 14px;
}

/* ========================================
   TRUSCALE FEATURES
   ======================================== */
.truscale-features[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.truscale-card[b-4177fwi8vk] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.truscale-card:hover[b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.4);
    transform: translateY(-4px);
}

.truscale-icon[b-4177fwi8vk] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(226, 0, 26, 0.2), rgba(226, 0, 26, 0.1));
    border: 1px solid rgba(226, 0, 26, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.truscale-icon :deep(svg)[b-4177fwi8vk] {
    width: 28px;
    height: 28px;
    color: #e2001a;
}

.truscale-card h3[b-4177fwi8vk] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.75rem 0;
}

.truscale-card p[b-4177fwi8vk] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   COMPARISON TABLE - Lenovo Brand Overrides
   (base styles from specs-table.css)
   ======================================== */
.comparison-table-wrapper[b-4177fwi8vk] {
    border: none;
}

.comparison-table th[b-4177fwi8vk] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #e2001a;
    background: rgba(226, 0, 26, 0.1);
    padding: 18px 20px;
}

/* Dimension column - lighter background */
.comparison-table th:first-child[b-4177fwi8vk],
.comparison-table td:first-child[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.08);
}

/* No hover effect - static table */
.comparison-table tr:hover td[b-4177fwi8vk] {
    background: none;
}

/* Partnership cards now use shared CSS from partnership-cards.css */

/* ========================================
   GPU NAVIGATION SECTION
   ======================================== */
.gpu-nav-section[b-4177fwi8vk] {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a1628 0%, #0f172a 100%);
}

.gpu-nav-grid[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.gpu-nav-card[b-4177fwi8vk] {
    display: block;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gpu-nav-card:hover[b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(226, 0, 26, 0.15);
}

.gpu-nav-icon[b-4177fwi8vk] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.gpu-nav-icon.h100[b-4177fwi8vk] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.2), rgba(118, 185, 0, 0.1));
    border: 1px solid rgba(118, 185, 0, 0.3);
}

.gpu-nav-icon.h100 :deep(svg)[b-4177fwi8vk] {
    color: #76b900;
}

.gpu-nav-icon.h200[b-4177fwi8vk] {
    background: linear-gradient(135deg, rgba(226, 0, 26, 0.2), rgba(226, 0, 26, 0.1));
    border: 1px solid rgba(226, 0, 26, 0.3);
}

.gpu-nav-icon.h200 :deep(svg)[b-4177fwi8vk] {
    color: #e2001a;
}

.gpu-nav-icon.b200[b-4177fwi8vk] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.gpu-nav-icon.b200 :deep(svg)[b-4177fwi8vk] {
    color: #06b6d4;
}

.gpu-nav-icon :deep(svg)[b-4177fwi8vk] {
    width: 28px;
    height: 28px;
}

.gpu-nav-card h3[b-4177fwi8vk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.gpu-nav-card p[b-4177fwi8vk] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.gpu-nav-link[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #e2001a;
    font-weight: 600;
    font-size: 0.875rem;
}

.gpu-nav-link :deep(svg)[b-4177fwi8vk] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.gpu-nav-card:hover .gpu-nav-link :deep(svg)[b-4177fwi8vk] {
    transform: translateX(4px);
}

/* ========================================
   SERVICES STRIP - Lenovo Brand Overrides
   ======================================== */
.lenovo-services-section[b-4177fwi8vk] {
    padding: 48px 0;
    background: linear-gradient(90deg, rgba(226, 0, 26, 0.08), rgba(226, 0, 26, 0.03));
    border-top: 1px solid rgba(226, 0, 26, 0.15);
    border-bottom: 1px solid rgba(226, 0, 26, 0.15);
}

/* FAQ Section - Uses shared faq-accordion.css */

/* ========================================
   CTA SECTION - Lenovo Brand Overrides
   ======================================== */
.lenovo-cta-section[b-4177fwi8vk]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(226, 0, 26, 0.1) 0%, transparent 70%);
}

.lenovo-cta-section .cta-title .accent[b-4177fwi8vk] {
    background: linear-gradient(135deg, #e2001a 0%, #ff3a4f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Lenovo Primary Button */
.btn-lenovo-primary[b-4177fwi8vk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #e2001a, #a30015);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-lenovo-primary:hover[b-4177fwi8vk] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 0, 26, 0.35);
}

.btn-lenovo-primary :deep(svg)[b-4177fwi8vk] {
    width: 16px;
    height: 16px;
}

/* ========================================
   SECONDARY CTA
   ======================================== */
.secondary-cta[b-4177fwi8vk] {
    padding: 60px 0;
    background: #0a1628;
    border-top: 1px solid rgba(248, 250, 252, 0.1);
}

.secondary-cta-content[b-4177fwi8vk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.secondary-cta-item[b-4177fwi8vk] {
    text-align: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.secondary-cta-item:hover[b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.3);
    transform: translateY(-4px);
}

.secondary-cta-item :deep(svg)[b-4177fwi8vk] {
    width: 32px;
    height: 32px;
    color: #e2001a;
    margin-bottom: 1rem;
}

.secondary-cta-item h3[b-4177fwi8vk] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 0.5rem 0;
}

.secondary-cta-item p[b-4177fwi8vk] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.secondary-cta-item a[b-4177fwi8vk] {
    color: #e2001a;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.secondary-cta-item a:hover[b-4177fwi8vk] {
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .lenovo-hero-content[b-4177fwi8vk] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .lenovo-hero-text[b-4177fwi8vk] {
        text-align: center;
        align-items: center;
    }

    .lenovo-hero-subtitle[b-4177fwi8vk] {
        max-width: 100%;
    }

    .lenovo-hero-actions[b-4177fwi8vk] {
        justify-content: center;
    }

    .products-grid[b-4177fwi8vk] {
        grid-template-columns: 1fr;
    }

    .truscale-features[b-4177fwi8vk] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .partnerships-grid responsive is in partnership-cards.css */

    .gpu-nav-grid[b-4177fwi8vk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .secondary-cta-content[b-4177fwi8vk] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .lenovo-hero[b-4177fwi8vk] {
        padding: 80px 0 60px;
        min-height: auto;
    }

    .lenovo-hero-text h1[b-4177fwi8vk] {
        font-size: 2.5rem;
    }

    .lenovo-hero-actions[b-4177fwi8vk] {
        flex-direction: column;
        width: 100%;
    }

    .lenovo-btn-primary[b-4177fwi8vk],
    .lenovo-btn-secondary[b-4177fwi8vk] {
        width: 100%;
        justify-content: center;
    }

    .neptune-card[b-4177fwi8vk] {
        padding: 2rem;
    }

    .neptune-stats[b-4177fwi8vk] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section[b-4177fwi8vk] {
        padding: 60px 0;
    }

    .section-title[b-4177fwi8vk] {
        font-size: 1.75rem;
    }

    .product-specs-grid[b-4177fwi8vk] {
        grid-template-columns: repeat(2, 1fr);
    }

    .truscale-features[b-4177fwi8vk] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-4177fwi8vk] {
        grid-template-columns: 1fr;
    }

    .btn-lenovo-primary[b-4177fwi8vk] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .lenovo-hero-text h1[b-4177fwi8vk] {
        font-size: 2rem;
    }

    .showcase-specs[b-4177fwi8vk] {
        grid-template-columns: 1fr;
    }

    .product-specs-grid[b-4177fwi8vk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Hardware/OEM/Supermicro/Supermicro.razor.rz.scp.css */
/* ============================================
   Supermicro OEM Page Styles
   Brand Color: Supermicro Green (#00ae42)
   ============================================ */

/* Hero Section */
.supermicro-hero[b-nzycq2rxl5] {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.supermicro-hero-bg[b-nzycq2rxl5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(0, 174, 66, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 174, 66, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 174, 66, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.supermicro-hero-content[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.supermicro-hero-text[b-nzycq2rxl5] {
    max-width: 600px;
}

.supermicro-hero-badge[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 174, 66, 0.1);
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #00ae42;
    margin-bottom: 24px;
}

.supermicro-hero-badge :deep(svg)[b-nzycq2rxl5] {
    width: 16px;
    height: 16px;
}

.supermicro-hero h1[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: white;
    letter-spacing: -0.02em;
}

.supermicro-hero-subtitle[b-nzycq2rxl5] {
    font-size: 1.25rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
    margin-bottom: 32px;
}

.supermicro-hero-actions[b-nzycq2rxl5] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.supermicro-btn-primary[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #00ae42, #00c853);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.supermicro-btn-primary:hover[b-nzycq2rxl5] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 174, 66, 0.4);
}

.supermicro-btn-primary :deep(svg)[b-nzycq2rxl5] {
    width: 18px;
    height: 18px;
}

.supermicro-btn-secondary[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.supermicro-btn-secondary:hover[b-nzycq2rxl5] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.supermicro-btn-secondary :deep(svg)[b-nzycq2rxl5] {
    width: 18px;
    height: 18px;
}

/* Hero Showcase Card */
.supermicro-hero-showcase[b-nzycq2rxl5] {
    display: flex;
    justify-content: center;
}

.showcase-card[b-nzycq2rxl5] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 16px;
    padding: 0;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 174, 66, 0.2);
}

.showcase-header[b-nzycq2rxl5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(0, 174, 66, 0.1);
    border-bottom: 1px solid rgba(0, 174, 66, 0.2);
}

.showcase-badge[b-nzycq2rxl5] {
    padding: 4px 12px;
    background: linear-gradient(135deg, #00ae42, #00c853);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.showcase-type[b-nzycq2rxl5] {
    font-size: 0.875rem;
    color: rgba(248, 250, 252, 0.6);
}

.showcase-content[b-nzycq2rxl5] {
    padding: 32px 24px;
    text-align: center;
}

.showcase-icon[b-nzycq2rxl5] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(0, 174, 66, 0.2), rgba(0, 200, 83, 0.2));
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-icon :deep(svg)[b-nzycq2rxl5] {
    width: 40px;
    height: 40px;
    color: #00ae42;
}

.showcase-title[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.showcase-subtitle[b-nzycq2rxl5] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.6);
    margin-bottom: 24px;
}

.showcase-specs[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.showcase-spec[b-nzycq2rxl5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(0, 174, 66, 0.1);
    border-radius: 8px;
}

.showcase-spec .spec-label[b-nzycq2rxl5] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showcase-spec .spec-value[b-nzycq2rxl5] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #00ae42;
}

.showcase-footer[b-nzycq2rxl5] {
    padding: 16px 24px;
    background: rgba(0, 174, 66, 0.05);
    border-top: 1px solid rgba(0, 174, 66, 0.2);
    text-align: center;
}

.showcase-price[b-nzycq2rxl5] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #00ae42;
}

/* Stats Strip - Supermicro Brand Overrides */
.smc-stats-section[b-nzycq2rxl5] {
    background: rgba(0, 174, 66, 0.05);
}

.smc-stats-section .stats-strip--bordered[b-nzycq2rxl5] {
    border-color: rgba(0, 174, 66, 0.15);
}

.smc-stats-section .stats-strip-value[b-nzycq2rxl5] {
    color: #00ae42;
}

/* Building Block Solutions Section */
.building-blocks-section[b-nzycq2rxl5] {
    padding: 80px 0;
}

.building-blocks-card[b-nzycq2rxl5] {
    background: linear-gradient(135deg, rgba(0, 174, 66, 0.1) 0%, rgba(0, 200, 83, 0.1) 100%);
    border: 2px solid rgba(0, 174, 66, 0.3);
    border-radius: 20px;
    padding: 60px;
    text-align: center;
}

.building-blocks-header[b-nzycq2rxl5] {
    margin-bottom: 40px;
}

.building-blocks-badge[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 174, 66, 0.2);
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #00ae42;
    margin-bottom: 24px;
}

.building-blocks-badge :deep(svg)[b-nzycq2rxl5] {
    width: 16px;
    height: 16px;
}

.building-blocks-card h2[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: #00ae42;
    margin-bottom: 16px;
}

.building-blocks-header p[b-nzycq2rxl5] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.building-blocks-stats[b-nzycq2rxl5] {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.building-blocks-stat[b-nzycq2rxl5] {
    text-align: center;
}

.stat-number[b-nzycq2rxl5] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-text[b-nzycq2rxl5] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.6);
}

/* Section Styles */
.section[b-nzycq2rxl5] {
    padding: 100px 0;
    position: relative;
}

.section-alt[b-nzycq2rxl5] {
    background: rgba(15, 23, 42, 0.3);
}

.section-header[b-nzycq2rxl5] {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 174, 66, 0.1);
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #00ae42;
    margin-bottom: 20px;
}

.section-badge :deep(svg)[b-nzycq2rxl5] {
    width: 16px;
    height: 16px;
}

.section-title[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.section-description[b-nzycq2rxl5] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Products Grid */
.products-grid[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.product-card[b-nzycq2rxl5] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card:hover[b-nzycq2rxl5] {
    transform: translateY(-8px);
    border-color: rgba(0, 174, 66, 0.3);
    box-shadow: 0 20px 60px rgba(0, 174, 66, 0.15);
}

.product-card.featured[b-nzycq2rxl5] {
    border-color: rgba(0, 174, 66, 0.3);
    box-shadow: 0 10px 40px rgba(0, 174, 66, 0.1);
}

.product-card-header[b-nzycq2rxl5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.product-icon[b-nzycq2rxl5] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(0, 174, 66, 0.2), rgba(0, 200, 83, 0.2));
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-icon :deep(svg)[b-nzycq2rxl5] {
    width: 28px;
    height: 28px;
    color: #00ae42;
}

.product-badge[b-nzycq2rxl5] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge.flagship[b-nzycq2rxl5] {
    background: rgba(0, 174, 66, 0.1);
    color: #00ae42;
    border: 1px solid rgba(0, 174, 66, 0.3);
}

.product-badge.liquid[b-nzycq2rxl5] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.product-badge.versatile[b-nzycq2rxl5] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.product-badge.amd[b-nzycq2rxl5] {
    background: rgba(237, 28, 36, 0.1);
    color: #ed1c24;
    border: 1px solid rgba(237, 28, 36, 0.3);
}

.product-badge.next-gen[b-nzycq2rxl5] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.product-badge.inference[b-nzycq2rxl5] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.product-card-body[b-nzycq2rxl5] {
    padding: 24px;
}

.product-card-body h3[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.product-subtitle[b-nzycq2rxl5] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 16px;
}

.product-description[b-nzycq2rxl5] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.product-specs-grid[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-spec[b-nzycq2rxl5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-spec .spec-label[b-nzycq2rxl5] {
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-spec .spec-value[b-nzycq2rxl5] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #00ae42;
}

.product-features[b-nzycq2rxl5] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.product-features li[b-nzycq2rxl5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    padding: 6px 0;
}

.product-features li[b-nzycq2rxl5]::before {
    content: '→';
    color: #00ae42;
    font-weight: 700;
    flex-shrink: 0;
}

.product-pricing[b-nzycq2rxl5] {
    margin-bottom: 20px;
}

.product-pricing .price[b-nzycq2rxl5] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #00ae42;
    margin-bottom: 4px;
}

.product-pricing .price-note[b-nzycq2rxl5] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.5);
}

.product-actions[b-nzycq2rxl5] {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.product-btn[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #00ae42, #00c853);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-btn:hover[b-nzycq2rxl5] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 174, 66, 0.3);
}

.product-btn :deep(svg)[b-nzycq2rxl5] {
    width: 16px;
    height: 16px;
}

/* DLC Stats */
.dlc-stats[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.dlc-stat[b-nzycq2rxl5] {
    text-align: center;
    padding: 32px 24px;
    background: rgba(0, 174, 66, 0.1);
    border: 1px solid rgba(0, 174, 66, 0.2);
    border-radius: 12px;
}

.dlc-stat-value[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ae42;
    display: block;
    margin-bottom: 8px;
}

.dlc-stat-label[b-nzycq2rxl5] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
}

/* DLC Features Grid */
.dlc-features-grid[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dlc-feature-card[b-nzycq2rxl5] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.dlc-feature-card:hover[b-nzycq2rxl5] {
    transform: translateY(-4px);
    border-color: rgba(0, 174, 66, 0.3);
}

.dlc-feature-icon[b-nzycq2rxl5] {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(0, 174, 66, 0.1);
    border: 1px solid rgba(0, 174, 66, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlc-feature-icon :deep(svg)[b-nzycq2rxl5] {
    width: 32px;
    height: 32px;
    color: #00ae42;
}

.dlc-feature-card h3[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.dlc-feature-card p[b-nzycq2rxl5] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
}

/* Comparison Table - Supermicro Brand Overrides */
.comparison-table th[b-nzycq2rxl5] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #00ae42;
    background: rgba(0, 174, 66, 0.1);
    padding: 18px 20px;
}

/* Dimension column - lighter background */
.comparison-table th:first-child[b-nzycq2rxl5],
.comparison-table td:first-child[b-nzycq2rxl5] {
    background: rgba(0, 174, 66, 0.08);
}

/* No hover effect - static table */
.comparison-table tbody tr:hover[b-nzycq2rxl5] {
    background: none;
}

/* Partnership cards now use shared CSS from partnership-cards.css */

/* GPU Navigation Section */
.gpu-nav-section[b-nzycq2rxl5] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
}

.gpu-nav-grid[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.gpu-nav-card[b-nzycq2rxl5] {
    display: block;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gpu-nav-card:hover[b-nzycq2rxl5] {
    transform: translateY(-4px);
    border-color: rgba(0, 174, 66, 0.3);
    box-shadow: 0 12px 40px rgba(0, 174, 66, 0.1);
}

.gpu-nav-icon[b-nzycq2rxl5] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.gpu-nav-icon.h100[b-nzycq2rxl5] {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.gpu-nav-icon.h100 :deep(svg)[b-nzycq2rxl5] {
    color: #10b981;
}

.gpu-nav-icon.h200[b-nzycq2rxl5] {
    background: rgba(0, 174, 66, 0.2);
    border: 1px solid rgba(0, 174, 66, 0.3);
}

.gpu-nav-icon.h200 :deep(svg)[b-nzycq2rxl5] {
    color: #00ae42;
}

.gpu-nav-icon.b200[b-nzycq2rxl5] {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.gpu-nav-icon.b200 :deep(svg)[b-nzycq2rxl5] {
    color: #8b5cf6;
}

.gpu-nav-icon :deep(svg)[b-nzycq2rxl5] {
    width: 32px;
    height: 32px;
}

.gpu-nav-card h3[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.gpu-nav-card p[b-nzycq2rxl5] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.gpu-nav-link[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00ae42;
    font-weight: 600;
    font-size: 0.9rem;
}

.gpu-nav-link :deep(svg)[b-nzycq2rxl5] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.gpu-nav-card:hover .gpu-nav-link :deep(svg)[b-nzycq2rxl5] {
    transform: translateX(4px);
}

/* Services Strip - Supermicro Brand Overrides */
.smc-services-section[b-nzycq2rxl5] {
    padding: 48px 0;
    background: linear-gradient(135deg, rgba(0, 174, 66, 0.08), rgba(0, 200, 83, 0.05));
    border-top: 1px solid rgba(0, 174, 66, 0.15);
    border-bottom: 1px solid rgba(0, 174, 66, 0.15);
}

/* FAQ Section - Uses shared faq-accordion.css */

/* CTA Section - Supermicro Brand Overrides */
.smc-cta-section[b-nzycq2rxl5]::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 174, 66, 0.1) 0%, transparent 70%);
}

.smc-cta-section .cta-title .accent[b-nzycq2rxl5] {
    background: linear-gradient(135deg, #00ae42 0%, #00c853 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Supermicro Primary Button */
.btn-smc-primary[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #00ae42, #00c853);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-smc-primary:hover[b-nzycq2rxl5] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 174, 66, 0.35);
}

.btn-smc-primary :deep(svg)[b-nzycq2rxl5] {
    width: 16px;
    height: 16px;
}

/* Secondary CTA */
.secondary-cta[b-nzycq2rxl5] {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-cta-content[b-nzycq2rxl5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.secondary-cta-item[b-nzycq2rxl5] {
    text-align: center;
    padding: 40px 30px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.secondary-cta-item:hover[b-nzycq2rxl5] {
    transform: translateY(-4px);
    border-color: rgba(0, 174, 66, 0.3);
}

.secondary-cta-item :deep(svg)[b-nzycq2rxl5] {
    width: 40px;
    height: 40px;
    color: #00ae42;
    margin-bottom: 20px;
}

.secondary-cta-item h3[b-nzycq2rxl5] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.secondary-cta-item p[b-nzycq2rxl5] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 20px;
}

.secondary-cta-item a[b-nzycq2rxl5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00ae42;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.secondary-cta-item a:hover[b-nzycq2rxl5] {
    gap: 10px;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1200px) {
    .supermicro-hero h1[b-nzycq2rxl5] {
        font-size: 3rem;
    }

    .products-grid[b-nzycq2rxl5] {
        grid-template-columns: 1fr 1fr;
    }

    /* .partnerships-grid responsive is in partnership-cards.css */

    .gpu-nav-grid[b-nzycq2rxl5] {
        grid-template-columns: 1fr 1fr;
    }

    .dlc-stats[b-nzycq2rxl5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dlc-features-grid[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .supermicro-hero-content[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .supermicro-hero-text[b-nzycq2rxl5] {
        max-width: 100%;
    }

    .supermicro-hero-actions[b-nzycq2rxl5] {
        justify-content: center;
    }

    .showcase-card[b-nzycq2rxl5] {
        max-width: 380px;
        margin: 0 auto;
    }

    .services-content[b-nzycq2rxl5] {
        flex-direction: column;
        text-align: center;
    }

    .services-list[b-nzycq2rxl5] {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .supermicro-hero h1[b-nzycq2rxl5] {
        font-size: 2.5rem;
    }

    .section-title[b-nzycq2rxl5] {
        font-size: 2.25rem;
    }

    .products-grid[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
    }

    .building-blocks-card[b-nzycq2rxl5] {
        padding: 40px 24px;
    }

    .building-blocks-card h2[b-nzycq2rxl5] {
        font-size: 2rem;
    }

    .building-blocks-stats[b-nzycq2rxl5] {
        gap: 30px;
    }

    .stat-number[b-nzycq2rxl5] {
        font-size: 2.5rem;
    }

    .dlc-stats[b-nzycq2rxl5] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .supermicro-hero[b-nzycq2rxl5] {
        padding: 60px 0 40px;
        min-height: auto;
    }

    .supermicro-hero h1[b-nzycq2rxl5] {
        font-size: 2rem;
    }

    .supermicro-hero-subtitle[b-nzycq2rxl5] {
        font-size: 1.1rem;
    }

    .supermicro-hero-actions[b-nzycq2rxl5] {
        flex-direction: column;
        width: 100%;
    }

    .supermicro-btn-primary[b-nzycq2rxl5],
    .supermicro-btn-secondary[b-nzycq2rxl5] {
        width: 100%;
        justify-content: center;
    }

    .section[b-nzycq2rxl5] {
        padding: 60px 0;
    }

    .section-title[b-nzycq2rxl5] {
        font-size: 1.75rem;
    }

    .section-description[b-nzycq2rxl5] {
        font-size: 1rem;
    }

    .secondary-cta-content[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
    }

    .btn-smc-primary[b-nzycq2rxl5] {
        width: 100%;
        justify-content: center;
    }

    .dlc-stats[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
    }

    .dlc-stat-value[b-nzycq2rxl5] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .supermicro-hero h1[b-nzycq2rxl5] {
        font-size: 1.75rem;
    }

    .showcase-specs[b-nzycq2rxl5] {
        grid-template-columns: 1fr 1fr;
    }

    .product-specs-grid[b-nzycq2rxl5] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-spec[b-nzycq2rxl5] {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px;
        background: rgba(0, 174, 66, 0.05);
        border-radius: 6px;
    }

    .building-blocks-stats[b-nzycq2rxl5] {
        flex-direction: column;
        gap: 20px;
    }
}
/* /Components/Pages/Hardware/Power.razor.rz.scp.css */
/* =====================================================
   POWER PAGE STYLES
   Color Theme: Amber/Orange (#f59e0b, #f97316)
   ===================================================== */

/* Container */
.container[b-iuiue1tm8e] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.power-hero[b-iuiue1tm8e] {
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #020617 0%, #0a1628 50%, #451a03 100%);
}

.power-hero[b-iuiue1tm8e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(249, 115, 22, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero-container[b-iuiue1tm8e] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content[b-iuiue1tm8e] {
    max-width: 640px;
}

/* .hero-badges - inherited from components-base.css */

.badge-primary[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-uptime[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-title[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: white;
}

.hero-title .accent[b-iuiue1tm8e] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline[b-iuiue1tm8e] {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(248, 250, 252, 0.8);
    margin-bottom: 32px;
}

.hero-stats-row[b-iuiue1tm8e] {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-stat[b-iuiue1tm8e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-stat-value[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f59e0b;
}

.hero-stat-label[b-iuiue1tm8e] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* .hero-actions - inherited from components-base.css */

.btn-primary[b-iuiue1tm8e] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.btn-primary:hover[b-iuiue1tm8e] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
}

/* Hero Visual / Showcase */
.hero-visual[b-iuiue1tm8e] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.power-showcase[b-iuiue1tm8e] {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.showcase-card[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.showcase-card[b-iuiue1tm8e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #f97316, #fb923c);
}

.showcase-label[b-iuiue1tm8e] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.showcase-model[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.showcase-spec[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    color: white;
    margin-bottom: 24px;
}

.showcase-features[b-iuiue1tm8e] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.showcase-features span[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    background: rgba(245, 158, 11, 0.15);
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.showcase-glow[b-iuiue1tm8e] {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* =====================================================
   STATS STRIP
   ===================================================== */
.stats-strip[b-iuiue1tm8e] {
    background: linear-gradient(180deg, #451a03 0%, #020617 100%);
    padding: 48px 0;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.stats-strip-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.stat-strip-item[b-iuiue1tm8e] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.stat-strip-item :deep(svg)[b-iuiue1tm8e] {
    width: 28px;
    height: 28px;
    color: #f59e0b;
    flex-shrink: 0;
}

.stat-strip-content[b-iuiue1tm8e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-strip-value[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.stat-strip-label[b-iuiue1tm8e] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   SECTION STYLES
   ===================================================== */
.section[b-iuiue1tm8e] {
    padding: 100px 0;
    position: relative;
    background: #020617;
}

.section-alt[b-iuiue1tm8e] {
    background: linear-gradient(180deg, #0a1628 0%, #020617 100%);
}

/* .section-header - inherited from components-base.css */

.section-tag[b-iuiue1tm8e] {
    display: inline-block;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.section-title[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.section-subtitle[b-iuiue1tm8e] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =====================================================
   POWER GRID
   ===================================================== */
.power-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.power-card[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.power-card:hover[b-iuiue1tm8e] {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.power-card.featured[b-iuiue1tm8e] {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.power-card-header[b-iuiue1tm8e] {
    padding: 24px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.power-icon[b-iuiue1tm8e] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.power-icon :deep(svg)[b-iuiue1tm8e] {
    width: 28px;
    height: 28px;
    color: #f59e0b;
}

.power-badge[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.power-badge.ups[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(249, 115, 22, 0.2));
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.power-badge.pdu[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.2));
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.power-badge.generator[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.2));
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.power-card-body[b-iuiue1tm8e] {
    padding: 24px;
    flex: 1;
}

.power-card-body h3[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.power-card-body p[b-iuiue1tm8e] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.power-specs-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.power-spec[b-iuiue1tm8e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.power-spec .spec-label[b-iuiue1tm8e] {
    font-size: 0.7rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.power-spec .spec-value[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f59e0b;
}

.power-features[b-iuiue1tm8e] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.power-features li[b-iuiue1tm8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.8);
}

.power-features li[b-iuiue1tm8e]::before {
    content: '✓';
    color: #10b981;
    font-weight: bold;
    font-size: 0.9rem;
}

.power-card-footer[b-iuiue1tm8e] {
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.card-btn[b-iuiue1tm8e] {
    display: block;
    text-align: center;
    padding: 12px 24px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    color: #fcd34d;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.card-btn:hover[b-iuiue1tm8e] {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.5);
}

/* =====================================================
   CHALLENGES GRID
   ===================================================== */
.challenges-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.challenge-card[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
}

.challenge-card:hover[b-iuiue1tm8e] {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.challenge-header[b-iuiue1tm8e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.challenge-icon[b-iuiue1tm8e] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.challenge-icon :deep(svg)[b-iuiue1tm8e] {
    width: 24px;
    height: 24px;
    color: white;
}

.challenge-icon.critical[b-iuiue1tm8e] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.challenge-icon.warning[b-iuiue1tm8e] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.challenge-icon.info[b-iuiue1tm8e] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.challenge-icon.success[b-iuiue1tm8e] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.challenge-stat[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f59e0b;
}

.challenge-card h3[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.challenge-card > p[b-iuiue1tm8e] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.challenge-specs[b-iuiue1tm8e] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.challenge-specs li[b-iuiue1tm8e] {
    padding: 6px 0;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.challenge-specs li:last-child[b-iuiue1tm8e] {
    border-bottom: none;
}

/* =====================================================
   SERVICES STRIP
   ===================================================== */
.services-strip[b-iuiue1tm8e] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding: 64px 0;
}

.services-strip-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.service-strip-item[b-iuiue1tm8e] {
    text-align: center;
    padding: 24px;
}

.service-strip-item :deep(svg)[b-iuiue1tm8e] {
    width: 40px;
    height: 40px;
    color: #f59e0b;
    margin-bottom: 16px;
}

.service-strip-item h4[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.service-strip-item p[b-iuiue1tm8e] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.power-cta[b-iuiue1tm8e] {
    padding: 100px 0;
    background: linear-gradient(135deg, #451a03 0%, #020617 100%);
    position: relative;
    overflow: hidden;
}

.power-cta[b-iuiue1tm8e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.cta-content[b-iuiue1tm8e] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2[b-iuiue1tm8e] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.cta-content > p[b-iuiue1tm8e] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
    margin-bottom: 40px;
}

.cta-actions[b-iuiue1tm8e] {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.cta-stats[b-iuiue1tm8e] {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.cta-stat[b-iuiue1tm8e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.cta-stat-value[b-iuiue1tm8e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: #f59e0b;
}

.cta-stat-label[b-iuiue1tm8e] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.6);
}

/* =====================================================
   SECONDARY CTA
   ===================================================== */
.secondary-cta[b-iuiue1tm8e] {
    padding: 64px 0;
    background: #020617;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.secondary-cta-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.secondary-cta-card[b-iuiue1tm8e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.secondary-cta-card:hover[b-iuiue1tm8e] {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.1);
    transform: translateY(-2px);
}

.secondary-cta-card :deep(svg)[b-iuiue1tm8e] {
    width: 18px;
    height: 18px;
    color: #f59e0b;
}

/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */
@media (max-width: 1200px) {
    .hero-container[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .hero-content[b-iuiue1tm8e] {
        max-width: 100%;
    }

    .hero-badges[b-iuiue1tm8e] {
        justify-content: center;
    }

    .hero-stats-row[b-iuiue1tm8e] {
        justify-content: center;
    }

    .hero-actions[b-iuiue1tm8e] {
        justify-content: center;
    }

    .hero-visual[b-iuiue1tm8e] {
        order: -1;
    }

    .power-showcase[b-iuiue1tm8e] {
        max-width: 400px;
    }

    .stats-strip-grid[b-iuiue1tm8e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .power-grid[b-iuiue1tm8e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .challenges-grid[b-iuiue1tm8e] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero-title[b-iuiue1tm8e] {
        font-size: 3rem;
    }

    .services-strip-grid[b-iuiue1tm8e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-stats[b-iuiue1tm8e] {
        gap: 32px;
    }
}

@media (max-width: 900px) {
    .power-grid[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
    }

    .challenges-grid[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
    }

    .secondary-cta-grid[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .power-hero[b-iuiue1tm8e] {
        min-height: auto;
        padding: 100px 0 60px;
    }

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

    .hero-tagline[b-iuiue1tm8e] {
        font-size: 1.05rem;
    }

    .hero-stats-row[b-iuiue1tm8e] {
        gap: 20px;
    }

    .hero-stat-value[b-iuiue1tm8e] {
        font-size: 1.25rem;
    }

    .showcase-model[b-iuiue1tm8e] {
        font-size: 3.5rem;
    }

    .stats-strip-grid[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section[b-iuiue1tm8e] {
        padding: 70px 0;
    }

    .section-title[b-iuiue1tm8e] {
        font-size: 2rem;
    }

    .services-strip-grid[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cta-content h2[b-iuiue1tm8e] {
        font-size: 2rem;
    }

    .cta-stats[b-iuiue1tm8e] {
        flex-direction: column;
        gap: 24px;
    }

    .cta-stat-value[b-iuiue1tm8e] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .container[b-iuiue1tm8e] {
        padding: 0 16px;
    }

    .hero-title[b-iuiue1tm8e] {
        font-size: 2rem;
    }

    .hero-badges[b-iuiue1tm8e] {
        flex-direction: column;
        align-items: center;
    }

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

    .btn-primary[b-iuiue1tm8e],
    .btn-outline[b-iuiue1tm8e] {
        width: 100%;
        justify-content: center;
    }

    .showcase-card[b-iuiue1tm8e] {
        padding: 32px 24px;
    }

    .showcase-model[b-iuiue1tm8e] {
        font-size: 3rem;
    }

    .showcase-features[b-iuiue1tm8e] {
        gap: 12px;
    }

    .power-card-header[b-iuiue1tm8e] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .power-specs-grid[b-iuiue1tm8e] {
        grid-template-columns: 1fr;
    }

}
/* /Components/Pages/HardwareBuyback.razor.rz.scp.css */
/* ===========================================
   HARDWARE BUYBACK PAGE
   Sell Enterprise Hardware
   =========================================== */

/* ===========================================
   HERO SECTION
   =========================================== */
.buyback-hero[b-g0z41l54d0] {
    position: relative;
    z-index: 1;
    min-height: 60vh;
    padding: 140px 0 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.buyback-hero[b-g0z41l54d0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.hero-container[b-g0z41l54d0] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
}

.hero-content[b-g0z41l54d0] {
    position: relative;
}

.hero-badges[b-g0z41l54d0] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.badge-primary[b-g0z41l54d0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a855f7;
    padding: 8px 14px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 4px;
}

.badge-partner[b-g0z41l54d0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f59e0b;
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
}

.hero-title[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0 0 20px 0;
}

.hero-title .accent[b-g0z41l54d0] {
    display: block;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline[b-g0z41l54d0] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 520px;
}

.hero-stats-row[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat[b-g0z41l54d0] {
    text-align: center;
}

.hero-stat-value[b-g0z41l54d0] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
    margin-bottom: 6px;
}

.hero-stat-label[b-g0z41l54d0] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.hero-actions[b-g0z41l54d0] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Visual */
.hero-visual[b-g0z41l54d0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buyback-showcase[b-g0z41l54d0] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.showcase-card[b-g0z41l54d0] {
    position: relative;
    padding: 56px 48px;
    background: linear-gradient(145deg, #0f1620 0%, #0a1018 100%);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

.showcase-card[b-g0z41l54d0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #a855f7, #ec4899);
}

.showcase-card[b-g0z41l54d0]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.showcase-label[b-g0z41l54d0] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a855f7;
    margin-bottom: 16px;
}

.showcase-highlight[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.showcase-subtext[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #64748b;
    margin-bottom: 24px;
}

.showcase-detail[b-g0z41l54d0] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    padding: 10px 20px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
}

.showcase-glow[b-g0z41l54d0] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, rgba(236, 72, 153, 0.08) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn-primary[b-g0z41l54d0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 40px rgba(168, 85, 247, 0.2);
}

.btn-primary:hover[b-g0z41l54d0] {
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(168, 85, 247, 0.3);
}

.btn-primary .icon[b-g0z41l54d0] {
    width: 16px;
    height: 16px;
}

.btn-secondary[b-g0z41l54d0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-secondary:hover[b-g0z41l54d0] {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
}

.btn-secondary .icon[b-g0z41l54d0] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   STATS STRIP
   =========================================== */
.stats-strip[b-g0z41l54d0] {
    position: relative;
    z-index: 1;
    padding: 32px 0;
    background: #0a1018;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-strip .container[b-g0z41l54d0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.stats-strip-grid[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-strip-item[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.stat-strip-item .icon[b-g0z41l54d0] {
    width: 28px;
    height: 28px;
    color: #a855f7;
    flex-shrink: 0;
}

.stat-strip-content[b-g0z41l54d0] {
    display: flex;
    flex-direction: column;
}

.stat-strip-value[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}

.stat-strip-label[b-g0z41l54d0] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* ===========================================
   SECTION STYLES
   =========================================== */
.section[b-g0z41l54d0] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
}

.section .container[b-g0z41l54d0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.section-alt[b-g0z41l54d0] {
    background: #0a1018;
}

.section-header[b-g0z41l54d0] {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.section-tag[b-g0z41l54d0] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a855f7;
    margin-bottom: 16px;
}

.section-title[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #f1f5f9;
    margin: 0 0 16px 0;
    text-align: center;
}

.section-subtitle[b-g0z41l54d0] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
}

.section-cta[b-g0z41l54d0] {
    text-align: center;
    margin-top: 48px;
}

/* ===========================================
   EQUIPMENT GRID
   =========================================== */
.equipment-grid[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.equipment-card[b-g0z41l54d0] {
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.equipment-card:hover[b-g0z41l54d0] {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.05);
}

.equipment-card.hot[b-g0z41l54d0] {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.equipment-card.hot:hover[b-g0z41l54d0] {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
}

.equipment-card-header[b-g0z41l54d0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.equipment-card-icon[b-g0z41l54d0] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 12px;
}

.equipment-card-icon .icon[b-g0z41l54d0] {
    width: 26px;
    height: 26px;
    color: #a855f7;
}

.equipment-card.hot .equipment-card-icon[b-g0z41l54d0] {
    background: rgba(245, 158, 11, 0.1);
}

.equipment-card.hot .equipment-card-icon .icon[b-g0z41l54d0] {
    color: #f59e0b;
}

.demand-badge[b-g0z41l54d0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.demand-badge .icon[b-g0z41l54d0] {
    width: 12px;
    height: 12px;
}

.demand-badge.high[b-g0z41l54d0] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.equipment-card h3[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.equipment-card > p[b-g0z41l54d0] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.equipment-features[b-g0z41l54d0] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.equipment-features li[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.875rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.equipment-features li:last-child[b-g0z41l54d0] {
    border-bottom: none;
}

.equipment-features li .icon[b-g0z41l54d0] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
}

/* Demand Indicator */
.demand-indicator[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.demand-label[b-g0z41l54d0] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
}

.demand-bar[b-g0z41l54d0] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.demand-fill[b-g0z41l54d0] {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.demand-fill.high[b-g0z41l54d0] {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.demand-percent[b-g0z41l54d0] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    min-width: 32px;
    text-align: right;
}

/* Info Notice */
.info-notice[b-g0z41l54d0] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
    padding: 20px 24px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
}

.info-notice .icon[b-g0z41l54d0] {
    width: 24px;
    height: 24px;
    color: #6366f1;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-notice-content[b-g0z41l54d0] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.info-notice-content strong[b-g0z41l54d0] {
    color: #f1f5f9;
}

/* ===========================================
   BENEFITS GRID
   =========================================== */
.benefits-grid[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.benefit-card[b-g0z41l54d0] {
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-card:hover[b-g0z41l54d0] {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.05);
}

.benefit-icon[b-g0z41l54d0] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 14px;
    margin-bottom: 20px;
}

.benefit-icon .icon[b-g0z41l54d0] {
    width: 28px;
    height: 28px;
    color: #a855f7;
}

.benefit-icon.purple[b-g0z41l54d0] {
    background: rgba(99, 102, 241, 0.1);
}

.benefit-icon.purple .icon[b-g0z41l54d0] {
    color: #6366f1;
}

.benefit-icon.cyan[b-g0z41l54d0] {
    background: rgba(6, 182, 212, 0.1);
}

.benefit-icon.cyan .icon[b-g0z41l54d0] {
    color: #06b6d4;
}

.benefit-icon.amber[b-g0z41l54d0] {
    background: rgba(245, 158, 11, 0.1);
}

.benefit-icon.amber .icon[b-g0z41l54d0] {
    color: #f59e0b;
}

.benefit-card h3[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.benefit-card > p[b-g0z41l54d0] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.benefit-highlight[b-g0z41l54d0] {
    padding: 16px;
    background: rgba(168, 85, 247, 0.08);
    border-radius: 8px;
    text-align: center;
}

.benefit-highlight.purple[b-g0z41l54d0] {
    background: rgba(99, 102, 241, 0.08);
}

.benefit-highlight.cyan[b-g0z41l54d0] {
    background: rgba(6, 182, 212, 0.08);
}

.benefit-highlight.amber[b-g0z41l54d0] {
    background: rgba(245, 158, 11, 0.08);
}

.benefit-number[b-g0z41l54d0] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #c084fc;
    line-height: 1;
    margin-bottom: 4px;
}

.benefit-highlight.purple .benefit-number[b-g0z41l54d0] {
    color: #818cf8;
}

.benefit-highlight.cyan .benefit-number[b-g0z41l54d0] {
    color: #22d3ee;
}

.benefit-highlight.amber .benefit-number[b-g0z41l54d0] {
    color: #fbbf24;
}

.benefit-label[b-g0z41l54d0] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===========================================
   PROCESS GRID
   =========================================== */
.process-grid[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.process-card[b-g0z41l54d0] {
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.process-card:hover[b-g0z41l54d0] {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.05);
    transform: translateY(-4px);
}

.process-number[b-g0z41l54d0] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.25);
}

.process-card h3[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.process-card > p[b-g0z41l54d0] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.process-detail[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(168, 85, 247, 0.08);
    border-radius: 6px;
    margin-top: auto;
}

.process-detail .icon[b-g0z41l54d0] {
    width: 14px;
    height: 14px;
    color: #a855f7;
}

.process-detail span[b-g0z41l54d0] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ===========================================
   ENTERPRISE STRIP
   =========================================== */
.enterprise-strip[b-g0z41l54d0] {
    position: relative;
    z-index: 1;
    padding: 64px 0;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-top: 1px solid rgba(168, 85, 247, 0.15);
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.enterprise-strip .container[b-g0z41l54d0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.enterprise-content[b-g0z41l54d0] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.enterprise-text[b-g0z41l54d0] {
    text-align: center;
}

.enterprise-tag[b-g0z41l54d0] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a855f7;
    padding: 6px 12px;
    background: rgba(168, 85, 247, 0.15);
    border-radius: 4px;
    margin-bottom: 16px;
}

.enterprise-text h3[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.enterprise-text p[b-g0z41l54d0] {
    font-size: 1.0625rem;
    color: #94a3b8;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.enterprise-features[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.enterprise-feature[b-g0z41l54d0] {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.enterprise-feature-icon[b-g0z41l54d0] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

.enterprise-feature-icon .icon[b-g0z41l54d0] {
    width: 24px;
    height: 24px;
    color: #a855f7;
}

.enterprise-feature-content h4[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 6px 0;
}

.enterprise-feature-content p[b-g0z41l54d0] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.enterprise-cta[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.enterprise-cta span[b-g0z41l54d0] {
    font-size: 1.0625rem;
    color: #94a3b8;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.buyback-cta[b-g0z41l54d0] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    background: linear-gradient(180deg, transparent 0%, #050a12 100%);
}

.buyback-cta .container[b-g0z41l54d0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.buyback-cta .cta-content[b-g0z41l54d0] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.buyback-cta .cta-content h2[b-g0z41l54d0] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.buyback-cta .cta-content > p[b-g0z41l54d0] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.cta-actions[b-g0z41l54d0] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   SECONDARY CTA
   =========================================== */
.secondary-cta[b-g0z41l54d0] {
    position: relative;
    z-index: 1;
    padding: 32px 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.05) 100%);
    border-top: 1px solid rgba(16, 185, 129, 0.15);
}

.secondary-cta .container[b-g0z41l54d0] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.secondary-cta-content[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.secondary-cta-text[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.secondary-cta-text .icon[b-g0z41l54d0] {
    width: 24px;
    height: 24px;
    color: #10b981;
}

.secondary-cta-text span[b-g0z41l54d0] {
    font-size: 1.125rem;
    color: #f1f5f9;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */
@media (max-width: 1200px) {
    .hero-container[b-g0z41l54d0] {
        gap: 48px;
    }

    .equipment-grid[b-g0z41l54d0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid[b-g0z41l54d0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid[b-g0z41l54d0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .enterprise-features[b-g0z41l54d0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .hero-container[b-g0z41l54d0] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content[b-g0z41l54d0] {
        max-width: 600px;
        margin: 0 auto;
    }

    .hero-badges[b-g0z41l54d0] {
        justify-content: center;
    }

    .hero-tagline[b-g0z41l54d0] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-g0z41l54d0] {
        justify-content: center;
    }

    .hero-visual[b-g0z41l54d0] {
        max-width: 360px;
        margin: 0 auto;
    }

    .showcase-highlight[b-g0z41l54d0] {
        font-size: 4rem;
    }

    .equipment-grid[b-g0z41l54d0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .benefits-grid[b-g0z41l54d0] {
        grid-template-columns: 1fr;
    }

    .process-grid[b-g0z41l54d0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section[b-g0z41l54d0] {
        padding: 80px 0;
    }

    .buyback-hero[b-g0z41l54d0] {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .hero-container[b-g0z41l54d0],
    .section .container[b-g0z41l54d0],
    .stats-strip .container[b-g0z41l54d0],
    .enterprise-strip .container[b-g0z41l54d0],
    .buyback-cta .container[b-g0z41l54d0],
    .secondary-cta .container[b-g0z41l54d0] {
        padding: 0 24px;
    }

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

    .hero-stats-row[b-g0z41l54d0] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hero-stat-value[b-g0z41l54d0] {
        font-size: 1.25rem;
    }

    .hero-actions[b-g0z41l54d0] {
        flex-direction: column;
    }

    .btn-primary[b-g0z41l54d0],
    .btn-outline[b-g0z41l54d0] {
        width: 100%;
        justify-content: center;
    }

    .stats-strip-grid[b-g0z41l54d0] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-strip-item[b-g0z41l54d0] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .cta-actions[b-g0z41l54d0] {
        flex-direction: column;
    }

    .enterprise-cta[b-g0z41l54d0] {
        flex-direction: column;
        text-align: center;
    }

    .secondary-cta-content[b-g0z41l54d0] {
        flex-direction: column;
        text-align: center;
    }

    .info-notice[b-g0z41l54d0] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title[b-g0z41l54d0] {
        font-size: 1.875rem;
    }

    .showcase-highlight[b-g0z41l54d0] {
        font-size: 3.5rem;
    }

    .showcase-subtext[b-g0z41l54d0] {
        font-size: 1.125rem;
    }

    .hero-stats-row[b-g0z41l54d0] {
        grid-template-columns: 1fr 1fr;
    }

    .stats-strip-grid[b-g0z41l54d0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/HardwareSales.razor.rz.scp.css */
/* ============================================================
   Hardware Sales (/hardware-sales) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD Sell v1.html (L40-266),
   namespaced v3sell-, scoped under .v3sell wrapper.
   ============================================================ */

.v3sell[b-o276uxejrj] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3sell *[b-o276uxejrj],
.v3sell *[b-o276uxejrj]::before,
.v3sell *[b-o276uxejrj]::after { box-sizing: border-box; }

.v3sell a[b-o276uxejrj] { color: inherit; text-decoration: none; }
.v3sell button[b-o276uxejrj] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3sell .v3sell-wrap[b-o276uxejrj] {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3sell .v3sell-wrap[b-o276uxejrj] { padding: 0 20px; } }

/* Buttons */
.v3sell .v3sell-btn[b-o276uxejrj] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3sell .v3sell-btn-ghost[b-o276uxejrj] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3sell .v3sell-btn-ghost:hover[b-o276uxejrj] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3sell .v3sell-btn-primary[b-o276uxejrj] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3sell .v3sell-btn-primary:hover[b-o276uxejrj] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3sell .v3sell-arr[b-o276uxejrj] { font-family: var(--font-mono); opacity: .7; }

/* ───── PAGE HEAD ───── */

.v3sell .v3sell-head[b-o276uxejrj] {
    padding: 44px 0 28px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.v3sell .v3sell-head[b-o276uxejrj]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(800px 400px at 80% 0%, color-mix(in oklab, var(--secondary) 30%, transparent), transparent 70%);
    opacity: .4;
}

.v3sell .v3sell-head-row[b-o276uxejrj] {
    display: flex;
    align-items: flex-end;
    gap: 48px;
    justify-content: space-between;
}

.v3sell .v3sell-eyebrow[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.v3sell .v3sell-eyebrow[b-o276uxejrj]::before { content: ""; width: 24px; height: 1px; background: var(--secondary); }

.v3sell .v3sell-h1[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3sell .v3sell-h1 .v3sell-a[b-o276uxejrj] { color: var(--secondary); font-style: italic; }

.v3sell .v3sell-lede[b-o276uxejrj] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 640px;
    margin: 0;
}

.v3sell .v3sell-badges[b-o276uxejrj] { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.v3sell .v3sell-badge[b-o276uxejrj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-hover);
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.v3sell .v3sell-badge[b-o276uxejrj]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
}

.v3sell .v3sell-badge-no-login[b-o276uxejrj]::before {
    background: var(--secondary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--secondary) 25%, transparent);
}

/* ───── BUYING NOW RAIL ───── */

.v3sell .v3sell-buying[b-o276uxejrj] { padding: 32px 0 8px; }

.v3sell .v3sell-buy-head[b-o276uxejrj] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.v3sell .v3sell-bh[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
    color: var(--text-primary);
}

.v3sell .v3sell-bh-a[b-o276uxejrj] { color: var(--success); }

.v3sell .v3sell-meta[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.v3sell .v3sell-meta[b-o276uxejrj]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3sell-pulse-b-o276uxejrj 1.8s ease-in-out infinite;
}

@keyframes v3sell-pulse-b-o276uxejrj {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; transform: scale(1.3); }
}

.v3sell .v3sell-buy-grid[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.v3sell .v3sell-buy-card[b-o276uxejrj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    position: relative;
    overflow: hidden;
}

.v3sell .v3sell-buy-card:hover[b-o276uxejrj] { border-color: var(--success); transform: translateY(-2px); }
.v3sell .v3sell-buy-card[data-empty][b-o276uxejrj] { display: none; }

.v3sell .v3sell-tag[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--success);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v3sell .v3sell-tag[b-o276uxejrj]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
}

.v3sell .v3sell-buy-card[data-priority="high"] .v3sell-tag[b-o276uxejrj] { color: var(--gold); }
.v3sell .v3sell-buy-card[data-priority="high"] .v3sell-tag[b-o276uxejrj]::before {
    background: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 25%, transparent);
}

.v3sell .v3sell-spec[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.015em;
    margin: 0 0 4px;
    color: var(--text-primary);
}

.v3sell .v3sell-qty[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.v3sell .v3sell-pxrow[b-o276uxejrj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.v3sell .v3sell-lbl[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
}

.v3sell .v3sell-v[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3sell .v3sell-v.v3sell-tick[b-o276uxejrj] { animation: v3sell-demandTick-b-o276uxejrj 0.9s ease-out; }

.v3sell .v3sell-unit[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 3px;
}

@keyframes v3sell-demandTick-b-o276uxejrj {
    0%   { color: var(--success); }
    100% { color: inherit; }
}

/* ───── MAIN SELL GRID ───── */

.v3sell .v3sell-sell[b-o276uxejrj] {
    padding: 32px 0 80px;
    display: grid;
    grid-template-columns: minmax(0, 520px) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1080px) {
    .v3sell .v3sell-sell[b-o276uxejrj] { grid-template-columns: 1fr; gap: 18px; }
}

/* ───── FORM ───── */

.v3sell .v3sell-form[b-o276uxejrj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.v3sell .v3sell-form-section[b-o276uxejrj] {
    padding: 24px 26px;
    border-bottom: 1px solid var(--border);
}

.v3sell .v3sell-form-section:last-child[b-o276uxejrj] { border-bottom: none; }

.v3sell .v3sell-fsh[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v3sell .v3sell-n[b-o276uxejrj] {
    font-family: var(--font-mono);
    display: inline-flex;
    width: 18px;
    height: 18px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
}

.v3sell .v3sell-field[b-o276uxejrj] { margin-bottom: 16px; }
.v3sell .v3sell-field:last-child[b-o276uxejrj] { margin-bottom: 0; }

.v3sell .v3sell-label[b-o276uxejrj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.v3sell .v3sell-hint[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    font-weight: 400;
}

.v3sell .v3sell-hv[b-o276uxejrj] { color: var(--primary); font-weight: 600; }

.v3sell .v3sell-inp[b-o276uxejrj] {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .1s, box-shadow .1s;
    outline: none;
}

.v3sell .v3sell-inp:focus[b-o276uxejrj] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.v3sell .v3sell-inp[b-o276uxejrj]::placeholder { color: var(--text-muted); }

.v3sell .v3sell-rng[b-o276uxejrj] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--pct, 50%), var(--bg-input) var(--pct, 50%), var(--bg-input) 100%);
    border-radius: 3px;
    outline: none;
    margin: 0;
}

.v3sell .v3sell-rng[b-o276uxejrj]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--primary);
    cursor: pointer;
}

.v3sell .v3sell-rng-scale[b-o276uxejrj] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 6px;
}

.v3sell .v3sell-qty-row[b-o276uxejrj] { display: flex; align-items: center; gap: 12px; }
.v3sell .v3sell-qty-row .v3sell-rng[b-o276uxejrj] { flex: 1; min-width: 0; }

.v3sell .v3sell-num-inp[b-o276uxejrj] {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .1s, box-shadow .1s;
    flex-shrink: 0;
}

.v3sell .v3sell-num-inp:focus-within[b-o276uxejrj] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.v3sell .v3sell-num-inp input[b-o276uxejrj] {
    width: 64px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    -moz-appearance: textfield;
}

.v3sell .v3sell-num-inp input[b-o276uxejrj]::-webkit-outer-spin-button,
.v3sell .v3sell-num-inp input[b-o276uxejrj]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v3sell .v3sell-num-unit[b-o276uxejrj] {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
}

.v3sell .v3sell-pills[b-o276uxejrj] { display: flex; gap: 6px; flex-wrap: wrap; }

.v3sell .v3sell-pill[b-o276uxejrj] {
    padding: 8px 13px;
    font-size: 13px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .1s;
}

.v3sell .v3sell-pill:hover[b-o276uxejrj] { border-color: var(--border-hover); color: var(--text-primary); }

.v3sell .v3sell-pill.v3sell-on[b-o276uxejrj] {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.v3sell .v3sell-sel[b-o276uxejrj] {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                      linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.v3sell .v3sell-form-foot[b-o276uxejrj] {
    padding: 18px 26px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.v3sell .v3sell-live[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v3sell .v3sell-live[b-o276uxejrj]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3sell-pulse-b-o276uxejrj 1.8s ease-in-out infinite;
}

/* ───── VALUATION COLUMN ───── */

.v3sell .v3sell-val[b-o276uxejrj] { display: flex; flex-direction: column; gap: 18px; }

.v3sell .v3sell-val-card[b-o276uxejrj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Hero valuation */
.v3sell .v3sell-val-hero[b-o276uxejrj] {
    padding: 0;
    background: linear-gradient(135deg, color-mix(in oklab, var(--success) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border-top: 2px solid var(--success);
    position: relative;
    overflow: hidden;
}

.v3sell .v3sell-val-hero[b-o276uxejrj]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, color-mix(in oklab, var(--success) 30%, transparent), transparent 60%);
    pointer-events: none;
}

.v3sell .v3sell-val-hero-inner[b-o276uxejrj] { padding: 32px 32px 24px; position: relative; }

.v3sell .v3sell-vh-lbl[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.v3sell .v3sell-px-row[b-o276uxejrj] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.v3sell .v3sell-px[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 56px);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text-primary);
}

.v3sell .v3sell-px .v3sell-px-a[b-o276uxejrj] { color: var(--success); }
.v3sell .v3sell-px.v3sell-tick[b-o276uxejrj] { animation: v3sell-tickFlash-b-o276uxejrj 0.9s ease-out; }

@keyframes v3sell-tickFlash-b-o276uxejrj {
    0%   { color: var(--success); }
    100% { color: var(--text-primary); }
}

.v3sell .v3sell-band[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}

.v3sell .v3sell-pernode[b-o276uxejrj] { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.v3sell .v3sell-pernode strong[b-o276uxejrj] { color: var(--text-primary); }

.v3sell .v3sell-val-hero-foot[b-o276uxejrj] {
    padding: 14px 32px 18px;
    border-top: 1px dashed var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.v3sell .v3sell-vhf-it[b-o276uxejrj] { display: flex; flex-direction: column; gap: 4px; }

.v3sell .v3sell-vhf-l[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3sell .v3sell-vhf-v[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

/* Breakdown */
.v3sell .v3sell-brk-card[b-o276uxejrj] { padding: 0; }

.v3sell .v3sell-brk-head[b-o276uxejrj] {
    padding: 18px 26px 14px;
    border-bottom: 1px solid var(--border);
}

.v3sell .v3sell-brk-lbl[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.v3sell .v3sell-brk-h[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.v3sell .v3sell-brk-rows[b-o276uxejrj] { padding: 6px 0; }

.v3sell .v3sell-brk-row[b-o276uxejrj] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 26px;
}

.v3sell .v3sell-brk-row-total[b-o276uxejrj] {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 18px;
}

.v3sell .v3sell-swatch[b-o276uxejrj] { width: 4px; height: 34px; border-radius: 2px; }
.v3sell .v3sell-sw-primary[b-o276uxejrj] { background: var(--primary); }
.v3sell .v3sell-sw-tert[b-o276uxejrj]    { background: var(--text-tertiary); }
.v3sell .v3sell-sw-success[b-o276uxejrj] { background: var(--success); }

.v3sell .v3sell-brk-label[b-o276uxejrj] { flex: 1; min-width: 0; }

.v3sell .v3sell-brk-nm[b-o276uxejrj] {
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

.v3sell .v3sell-brk-sub[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
}

.v3sell .v3sell-mod[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    min-width: 64px;
    text-align: right;
}

.v3sell .v3sell-mod-good[b-o276uxejrj] { color: var(--success); }
.v3sell .v3sell-mod-warn[b-o276uxejrj] { color: var(--warning); }

/* Process */
.v3sell .v3sell-proc-card[b-o276uxejrj] { padding: 24px 28px 24px; }

.v3sell .v3sell-proc-lbl[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.v3sell .v3sell-proc-h[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3sell .v3sell-proc-steps[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.v3sell .v3sell-proc-step[b-o276uxejrj] {
    padding: 16px 18px 0 0;
    border-right: 1px solid var(--border-subtle);
    position: relative;
}

.v3sell .v3sell-proc-step:last-child[b-o276uxejrj] { border-right: none; }

.v3sell .v3sell-ps-n[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 600;
}

.v3sell .v3sell-ps-nm[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    margin: 0 0 5px;
    color: var(--text-primary);
}

.v3sell .v3sell-ps-ds[b-o276uxejrj] {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin: 0;
}

/* Submit */
.v3sell .v3sell-submit-card[b-o276uxejrj] {
    padding: 24px 28px 28px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border-top: 2px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.v3sell .v3sell-submit-card[b-o276uxejrj]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, color-mix(in oklab, var(--gold) 30%, transparent), transparent 60%);
}

.v3sell .v3sell-submit-head[b-o276uxejrj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    position: relative;
}

.v3sell .v3sell-submit-h[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
    color: var(--text-primary);
}

.v3sell .v3sell-submit-a[b-o276uxejrj] { color: var(--gold); }

.v3sell .v3sell-submit-p[b-o276uxejrj] {
    font-size: 13.5px;
    color: var(--text-secondary);
    max-width: 440px;
    margin: 8px 0 0;
    line-height: 1.5;
}

.v3sell .v3sell-ref[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    white-space: nowrap;
}

.v3sell .v3sell-submit-actions[b-o276uxejrj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.v3sell .v3sell-submit-actions .v3sell-btn[b-o276uxejrj] { padding: 12px 20px; }

.v3sell .v3sell-note[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.v3sell .v3sell-note svg[b-o276uxejrj] { width: 14px; height: 14px; }

/* Disclaimer notice */
.v3sell .v3sell-notice[b-o276uxejrj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3sell .v3sell-nic[b-o276uxejrj] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.v3sell .v3sell-nic svg[b-o276uxejrj] { width: 14px; height: 14px; }
.v3sell .v3sell-notice strong[b-o276uxejrj] { color: var(--text-primary); }

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3sell .v3sell-form[b-o276uxejrj] { position: relative; top: 0; max-height: none; }
    .v3sell .v3sell-buy-grid[b-o276uxejrj] { grid-template-columns: repeat(2, 1fr); }
    .v3sell .v3sell-proc-steps[b-o276uxejrj] { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .v3sell .v3sell-proc-step[b-o276uxejrj] { border-right: none; padding-right: 0; }
}

@media (max-width: 780px) {
    .v3sell .v3sell-head-row[b-o276uxejrj] { flex-direction: column; align-items: flex-start; gap: 18px; }
    .v3sell .v3sell-buy-grid[b-o276uxejrj] { grid-template-columns: 1fr; }
    .v3sell .v3sell-submit-head[b-o276uxejrj] { flex-direction: column; gap: 14px; }
    .v3sell .v3sell-proc-steps[b-o276uxejrj] { grid-template-columns: 1fr; }
    .v3sell .v3sell-px[b-o276uxejrj] { font-size: 36px; }
}

/* ── Manifest (multi-category intake, ADR 0006) ─────────────────────── */

.v3sell-mf-actions[b-o276uxejrj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.v3sell-mf-upload[b-o276uxejrj] {
    cursor: pointer;
}

.v3sell-mf-note[b-o276uxejrj] {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--slyd-text-muted);
}

.v3sell-mf-addrow[b-o276uxejrj] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.4fr 0.55fr 0.6fr 0.55fr auto;
    gap: 8px;
    align-items: center;
}

.v3sell-mf-narrow[b-o276uxejrj] {
    min-width: 0;
}

.v3sell-mf-table[b-o276uxejrj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.v3sell-mf-table th[b-o276uxejrj] {
    text-align: left;
    font-family: var(--slyd-font-family-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--slyd-text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--slyd-border);
}

.v3sell-mf-table td[b-o276uxejrj] {
    padding: 8px;
    border-bottom: 1px solid var(--slyd-border-subtle);
    color: var(--slyd-text-secondary);
}

.v3sell-mf-chip[b-o276uxejrj] {
    font-family: var(--slyd-font-family-mono);
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--slyd-primary-soft);
    color: var(--slyd-text-primary);
    white-space: nowrap;
}

.v3sell-mf-chip-manual[b-o276uxejrj] {
    background: transparent;
    border: 1px solid var(--slyd-border-hover);
    color: var(--slyd-warning);
}

.v3sell-mf-del[b-o276uxejrj] {
    background: none;
    border: none;
    color: var(--slyd-text-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 2px 6px;
}

.v3sell-mf-del:hover[b-o276uxejrj] {
    color: var(--slyd-danger);
}

.v3sell-mf-summary[b-o276uxejrj] {
    margin-top: 10px;
    font-family: var(--slyd-font-family-mono);
    font-size: 0.75rem;
    color: var(--slyd-text-tertiary);
}

.v3sell-mf-error[b-o276uxejrj] {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--slyd-danger);
}

@media (max-width: 768px) {
    .v3sell-mf-addrow[b-o276uxejrj] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ───── FAQ ───── */

.v3sell .v3sell-faq-sec[b-o276uxejrj] {
    padding: 56px 0 72px;
    border-top: 1px solid var(--border);
    margin-top: 48px;
}

.v3sell .v3sell-faq-head[b-o276uxejrj] { margin-bottom: 24px; max-width: 880px; }

.v3sell .v3sell-faq-kicker[b-o276uxejrj] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.v3sell .v3sell-faq-h[b-o276uxejrj] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.v3sell .v3sell-faq-list[b-o276uxejrj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3sell .v3sell-faq[b-o276uxejrj] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.v3sell .v3sell-faq-q[b-o276uxejrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    list-style: none;
}

.v3sell .v3sell-faq-q[b-o276uxejrj]::-webkit-details-marker { display: none; }

.v3sell .v3sell-faq-q[b-o276uxejrj]::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform .15s;
}

.v3sell .v3sell-faq[open] .v3sell-faq-q[b-o276uxejrj]::after {
    transform: rotate(45deg);
    color: var(--primary);
}

.v3sell .v3sell-faq-q:hover[b-o276uxejrj] { background: var(--bg-elevated); }

.v3sell .v3sell-faq-a[b-o276uxejrj] {
    padding: 0 22px 18px;
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home (/) — Track 2 V3 reskin.

   Reproduces website/v3/SLYD Homepage v1.html section-for-section.
   Every class is prefixed v3home- and scoped under .v3home so
   nothing in the ~27 global stylesheets can collide.

   Token strategy: uses the legacy website aliases (--primary,
   --bg-card, --text-primary, --accent, etc.) since slyd-design.css
   already maps those onto --slyd-* tokens. The mockup's CSS
   transferred almost verbatim; only the class names change.

   This file deliberately repeats the mockup's :root token block
   inside .v3home so the mockup-side --primary-glow / --accent /
   etc. names also resolve (they're available via the alias hub
   anyway, but inlining keeps the file self-contained for review).
   ============================================================ */

.v3home[b-fm6wgpyh6q] {
    /* The mockup's :root tokens, expressed as --slyd-* alias values
     * inside the v3home subtree. These are belt-and-suspenders —
     * the alias hub in slyd-design.css already provides the legacy
     * names — but keeping them inline makes the mockup CSS run
     * verbatim against this file with zero modifications. */
    --primary:      var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --primary-dark: var(--slyd-primary-dark);
    --secondary:    var(--slyd-accent-purple);
    --accent:       var(--slyd-accent-gold);
    --accent-soft:  var(--slyd-accent-gold-soft);
    --gold:         var(--slyd-accent-gold);
    --gold-dim:     var(--slyd-accent-gold-dark);

    --success:      var(--slyd-success);
    --warning:      var(--slyd-warning);
    --danger:       var(--slyd-danger);

    --bg-body:      var(--slyd-bg-body);
    --bg-card:      var(--slyd-bg-card);
    --bg-elevated:  var(--slyd-bg-elevated);
    --bg-input:     var(--slyd-bg-input);
    --text-primary:   var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary:  var(--slyd-text-tertiary);
    --text-muted:     var(--slyd-text-muted);
    --border:         var(--slyd-border);
    --border-subtle:  var(--slyd-border-subtle);
    --border-hover:   var(--slyd-border-hover);
    --shadow-card:    var(--slyd-shadow-card);
    --shadow-hover:   var(--slyd-shadow-hover);
    --grid-line:      var(--slyd-grid-line);

    --font-display: var(--slyd-font-family-heading);
    --font-body:    var(--slyd-font-family);
    --font-mono:    var(--slyd-font-family-mono);

    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius:      8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* Page-level reset so the global body styles can't leak in. */
    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3home *[b-fm6wgpyh6q],
.v3home *[b-fm6wgpyh6q]::before,
.v3home *[b-fm6wgpyh6q]::after {
    box-sizing: border-box;
}

.v3home a[b-fm6wgpyh6q] {
    color: inherit;
    text-decoration: none;
}

/* Page wrap */
.v3home .v3home-wrap[b-fm6wgpyh6q] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) {
    .v3home .v3home-wrap[b-fm6wgpyh6q] { padding: 0 20px; }
}

/* ─────────────────────────────────────────────────────────────
   TOP NAV
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-top[b-fm6wgpyh6q] {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--bg-body) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.v3home .v3home-top-row[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 14px 32px;
    max-width: 1440px;
    margin: 0 auto;
}

.v3home .v3home-brand[b-fm6wgpyh6q] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.v3home .v3home-wm[b-fm6wgpyh6q] {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    position: relative;
    transform: translateY(4px);
}

.v3home .v3home-wm[b-fm6wgpyh6q]::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 2px;
    background: var(--bg-body);
}

.v3home .v3home-nav-items[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.v3home .v3home-nav-item[b-fm6wgpyh6q] {
    position: relative;
    padding: 9px 14px;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .12s, color .12s;
}

.v3home .v3home-nav-item:hover[b-fm6wgpyh6q] {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.v3home .v3home-car[b-fm6wgpyh6q] {
    font-size: 9px;
    color: var(--text-tertiary);
}

.v3home .v3home-top-right[b-fm6wgpyh6q] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.v3home .v3home-ticker[b-fm6wgpyh6q] {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    background: var(--primary-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
    white-space: nowrap;
}

.v3home .v3home-ticker[b-fm6wgpyh6q]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3home-pulse-b-fm6wgpyh6q 2s ease-in-out infinite;
}

@keyframes v3home-pulse-b-fm6wgpyh6q {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; transform: scale(1.3); }
}

@media (min-width: 1140px) {
    .v3home .v3home-ticker[b-fm6wgpyh6q] { display: flex; }
}

/* Buttons (shared across hero / nav / final / rail-foot) */
.v3home .v3home-btn[b-fm6wgpyh6q] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3home .v3home-btn-ghost[b-fm6wgpyh6q] {
    color: var(--text-secondary);
    border-color: var(--border-hover);
}

.v3home .v3home-btn-ghost:hover[b-fm6wgpyh6q] {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

.v3home .v3home-btn-primary[b-fm6wgpyh6q] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3home .v3home-btn-primary:hover[b-fm6wgpyh6q] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3home .v3home-btn-link[b-fm6wgpyh6q] {
    color: var(--text-secondary);
    padding: 8px 4px;
    font-weight: 500;
}

.v3home .v3home-btn-link:hover[b-fm6wgpyh6q] { color: var(--primary); }

.v3home .v3home-btn-lg[b-fm6wgpyh6q] {
    padding: 16px 28px;
    font-size: 15px;
}

.v3home .v3home-arr[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    color: currentColor;
    opacity: .7;
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-hero[b-fm6wgpyh6q] {
    position: relative;
    padding: 88px 0 64px;
    overflow: hidden;
}

.v3home .v3home-hero[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 600px at 80% 0%, var(--primary-glow), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, color-mix(in oklab, var(--secondary) 18%, transparent), transparent 60%);
    z-index: -1;
    opacity: .6;
}

.v3home .v3home-hero[b-fm6wgpyh6q]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 600px at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 600px at 50% 30%, #000 30%, transparent 75%);
}

.v3home .v3home-eyebrow[b-fm6wgpyh6q] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 24px;
}

.v3home .v3home-eyebrow[b-fm6wgpyh6q]::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--primary);
}

.v3home .v3home-hero-h1[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    max-width: 1100px;
    text-wrap: balance;
}

.v3home .v3home-hero-h1 .v3home-one[b-fm6wgpyh6q] {
    display: block;
    color: var(--text-primary);
}

.v3home .v3home-hero-h1 .v3home-two[b-fm6wgpyh6q] {
    display: block;
    color: var(--primary);
    position: relative;
}

.v3home .v3home-hero-h1 .v3home-dot-accent[b-fm6wgpyh6q] {
    color: var(--accent);
    text-shadow: 0 0 30px var(--accent);
}

.v3home .v3home-sub[b-fm6wgpyh6q] {
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--text-secondary);
    max-width: 680px;
    line-height: 1.5;
    margin: 0 0 36px;
}

.v3home .v3home-sub strong[b-fm6wgpyh6q] { color: var(--text-primary); font-weight: 600; }

.v3home .v3home-ctas[b-fm6wgpyh6q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 56px;
}

.v3home .v3home-ctas-center[b-fm6wgpyh6q] {
    justify-content: center;
    margin-bottom: 0;
}

.v3home .v3home-hero .v3home-btn-primary[b-fm6wgpyh6q] {
    padding: 14px 22px;
    font-size: 14.5px;
}

.v3home .v3home-hero .v3home-btn-ghost[b-fm6wgpyh6q] {
    padding: 14px 18px;
}

/* Live stats */
.v3home .v3home-live-stats[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--bg-card) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    max-width: 980px;
}

.v3home .v3home-live-tag[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 20px;
    background: color-mix(in oklab, var(--success) 8%, transparent);
    border-right: 1px solid var(--border);
    gap: 6px;
}

.v3home .v3home-live-dot[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--success);
    font-weight: 600;
}

.v3home .v3home-live-dot[b-fm6wgpyh6q]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3home-pulse-b-fm6wgpyh6q 1.8s ease-in-out infinite;
}

.v3home .v3home-live-sub[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.v3home .v3home-stat[b-fm6wgpyh6q] {
    padding: 18px 20px;
    border-right: 1px solid var(--border);
}

.v3home .v3home-stat:last-child[b-fm6wgpyh6q] { border-right: none; }

.v3home .v3home-stat-label[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.v3home .v3home-stat-v[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────
   THREE DOORS
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-doors[b-fm6wgpyh6q] {
    padding: 72px 0 80px;
    background: var(--bg-body);
    border-top: 1px solid var(--border-subtle);
}

.v3home .v3home-section-head[b-fm6wgpyh6q] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 36px;
}

.v3home .v3home-section-h2[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
    max-width: 680px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3home .v3home-kicker[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

.v3home .v3home-lede[b-fm6wgpyh6q] {
    max-width: 380px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3home .v3home-accent[b-fm6wgpyh6q] { color: var(--primary); }

.v3home .v3home-doors-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.v3home .v3home-door[b-fm6wgpyh6q] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    transition: transform .2s, border-color .15s, box-shadow .2s;
    cursor: pointer;
    color: var(--text-primary);
}

.v3home .v3home-door:hover[b-fm6wgpyh6q] {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.v3home .v3home-door[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--primary-glow), transparent 65%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.v3home .v3home-door:hover[b-fm6wgpyh6q]::before { opacity: 1; }

.v3home .v3home-door-num[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
    margin-bottom: 18px;
    position: relative;
}

.v3home .v3home-door-name[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 12px;
    position: relative;
}

.v3home .v3home-door-accent[b-fm6wgpyh6q] { color: var(--primary); }

.v3home .v3home-door-desc[b-fm6wgpyh6q] {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 auto;
    position: relative;
}

.v3home .v3home-door-cta[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
}

.v3home .v3home-door-arr[b-fm6wgpyh6q] {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: hsl(229, 50%, 6%);
    font-weight: 700;
    font-family: var(--font-display);
    transition: transform .2s;
}

.v3home .v3home-door:hover .v3home-door-arr[b-fm6wgpyh6q] { transform: translateX(4px); }

/* Door B (secondary tint) */
.v3home .v3home-door-b .v3home-door-accent[b-fm6wgpyh6q] { color: var(--secondary); }
.v3home .v3home-door-b .v3home-door-arr[b-fm6wgpyh6q] { background: var(--secondary); color: #fff; }
.v3home .v3home-door-b[b-fm6wgpyh6q]::before {
    background: radial-gradient(circle, color-mix(in oklab, var(--secondary) 30%, transparent), transparent 65%);
}

/* Door C (accent tint) */
.v3home .v3home-door-c .v3home-door-accent[b-fm6wgpyh6q] { color: var(--accent); }
.v3home .v3home-door-c .v3home-door-arr[b-fm6wgpyh6q] { background: var(--accent); color: hsl(229, 50%, 6%); }
.v3home .v3home-door-c[b-fm6wgpyh6q]::before {
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 65%);
}

/* "Don't see what you need?" inline line */
.v3home .v3home-need-line[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 15px 22px;
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--text-primary);
}

.v3home .v3home-need-line:hover[b-fm6wgpyh6q] {
    border-color: var(--primary);
    background: var(--bg-elevated);
}

.v3home .v3home-nl-tag[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3home .v3home-nl-main[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.v3home .v3home-nl-em[b-fm6wgpyh6q] {
    font-style: italic;
    color: var(--primary);
}

.v3home .v3home-nl-arr[b-fm6wgpyh6q] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────
   FORWARD RAIL
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-rail-sec[b-fm6wgpyh6q] {
    padding: 80px 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3home .v3home-rail-head[b-fm6wgpyh6q] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}

.v3home .v3home-rail-meta[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.v3home .v3home-rail-live[b-fm6wgpyh6q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--success);
    font-weight: 600;
}

.v3home .v3home-rail-live[b-fm6wgpyh6q]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3home-pulse-b-fm6wgpyh6q 1.8s ease-in-out infinite;
}

.v3home .v3home-rail-sub[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
}

.v3home .v3home-rail-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v3home .v3home-lot[b-fm6wgpyh6q] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 18px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}

.v3home .v3home-lot:hover[b-fm6wgpyh6q] {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.v3home .v3home-lot-id[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v3home .v3home-lot-open[b-fm6wgpyh6q] { color: var(--success); }
.v3home .v3home-lot-full[b-fm6wgpyh6q] { color: var(--warning); }

.v3home .v3home-lot-spec[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
}

.v3home .v3home-lot-detail[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.v3home .v3home-lot-price[b-fm6wgpyh6q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.v3home .v3home-lot-px[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.v3home .v3home-lot-unit[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
    margin-left: 3px;
    font-weight: 400;
}

.v3home .v3home-lot-when[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--primary);
    letter-spacing: 0.12em;
    font-weight: 600;
}

.v3home .v3home-lot-bar[b-fm6wgpyh6q] {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-input);
    overflow: hidden;
    margin-bottom: 7px;
}

.v3home .v3home-lot-fill[b-fm6wgpyh6q] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width .6s ease;
}

.v3home .v3home-lot-filled[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    display: flex;
    justify-content: space-between;
}

.v3home .v3home-lot-pct[b-fm6wgpyh6q] {
    color: var(--text-primary);
    font-weight: 600;
}

.v3home .v3home-rail-foot[b-fm6wgpyh6q] {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* ─────────────────────────────────────────────────────────────
   PIPELINE
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-pipe-sec[b-fm6wgpyh6q] {
    padding: 96px 0;
}

.v3home .v3home-pipe-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    position: relative;
}

.v3home .v3home-step[b-fm6wgpyh6q] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    position: relative;
    transition: border-color .15s, transform .15s;
}

.v3home .v3home-step:hover[b-fm6wgpyh6q] {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.v3home .v3home-step-num[b-fm6wgpyh6q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.v3home .v3home-pip[b-fm6wgpyh6q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-block;
}

.v3home .v3home-step-name[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3home .v3home-step-desc[b-fm6wgpyh6q] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.v3home .v3home-step[b-fm6wgpyh6q]::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 50%;
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-hover), transparent);
    transform: translateY(-50%);
    z-index: 1;
}

.v3home .v3home-step:last-child[b-fm6wgpyh6q]::after { display: none; }

/* ─────────────────────────────────────────────────────────────
   MARKETPLACE TEASER
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-mkt-sec[b-fm6wgpyh6q] {
    padding: 80px 0 96px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3home .v3home-mkt-tabs[b-fm6wgpyh6q] {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.v3home .v3home-mkt-tab[b-fm6wgpyh6q] {
    padding: 9px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all .12s;
}

.v3home .v3home-mkt-tab:hover[b-fm6wgpyh6q] { color: var(--text-secondary); }

.v3home .v3home-mkt-tab-on[b-fm6wgpyh6q] {
    color: var(--text-primary);
    background: var(--bg-input);
}

.v3home .v3home-mkt-badge[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--success);
    padding: 1px 5px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--success) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
}

.v3home .v3home-mkt-board[b-fm6wgpyh6q] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.v3home .v3home-mkt-header[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr 0.8fr 0.7fr;
    gap: 14px;
    padding: 14px 24px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
}

.v3home .v3home-mkt-col-action[b-fm6wgpyh6q] { text-align: right; }

.v3home .v3home-mkt-row[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr 0.8fr 0.7fr;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
    transition: background .12s;
    cursor: pointer;
}

.v3home .v3home-mkt-row:last-child[b-fm6wgpyh6q] { border-bottom: none; }
.v3home .v3home-mkt-row:hover[b-fm6wgpyh6q] { background: var(--bg-elevated); }

.v3home .v3home-mkt-site[b-fm6wgpyh6q] {
    font-weight: 500;
    font-size: 14.5px;
    color: var(--text-primary);
}

.v3home .v3home-mkt-gpu[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.v3home .v3home-mkt-px[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.v3home .v3home-mkt-unit[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 3px;
}

.v3home .v3home-mkt-avail[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--success);
    letter-spacing: 0.08em;
    font-weight: 600;
}

.v3home .v3home-mkt-action[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--primary);
    letter-spacing: 0.1em;
    font-weight: 600;
    text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   LOGO STRIP
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-logo-sec[b-fm6wgpyh6q] {
    padding: 48px 0 88px;
    border-top: 1px solid var(--border-subtle);
}

.v3home .v3home-logo-head[b-fm6wgpyh6q] {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 28px;
}

.v3home .v3home-logo-strip[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 36px;
    align-items: center;
}

.v3home .v3home-logo[b-fm6wgpyh6q] {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .5;
    transition: opacity .15s;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--text-secondary);
}

.v3home .v3home-logo:hover[b-fm6wgpyh6q] { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-final[b-fm6wgpyh6q] {
    position: relative;
    padding: 88px 0 112px;
    text-align: center;
    overflow: hidden;
}

.v3home .v3home-final[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(800px 500px at 50% 100%, var(--primary-glow), transparent 65%),
        radial-gradient(600px 400px at 50% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 65%);
    opacity: .7;
}

.v3home .v3home-final-h2[b-fm6wgpyh6q] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    letter-spacing: -0.035em;
    line-height: 1.0;
    margin: 0 auto 24px;
    max-width: 920px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3home .v3home-final-a[b-fm6wgpyh6q] { color: var(--primary); }

.v3home .v3home-final-p[b-fm6wgpyh6q] {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-foot[b-fm6wgpyh6q] {
    padding: 64px 0 36px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-tertiary);
}

.v3home .v3home-foot-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 36px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border-subtle);
}

.v3home .v3home-foot-brand .v3home-brand[b-fm6wgpyh6q] { margin-bottom: 12px; }

.v3home .v3home-foot-brand-p[b-fm6wgpyh6q] {
    font-size: 13.5px;
    color: var(--text-tertiary);
    max-width: 280px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.v3home .v3home-foot-tag[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.v3home .v3home-foot-col h5[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px;
    font-weight: 500;
}

.v3home .v3home-foot-col a[b-fm6wgpyh6q] {
    display: block;
    padding: 4px 0;
    color: var(--text-tertiary);
    transition: color .1s;
}

.v3home .v3home-foot-col a:hover[b-fm6wgpyh6q] { color: var(--text-primary); }

.v3home .v3home-foot-bottom[b-fm6wgpyh6q] {
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.v3home .v3home-foot-copy[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────── */

.v3home .v3home-faq-sec[b-fm6wgpyh6q] {
    padding: 80px 0 96px;
    border-top: 1px solid var(--border-subtle);
}

.v3home .v3home-faq-list[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3home .v3home-faq-item[b-fm6wgpyh6q] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .15s;
}

.v3home .v3home-faq-item:hover[b-fm6wgpyh6q] { border-color: var(--border-hover); }
.v3home .v3home-faq-item[open][b-fm6wgpyh6q] { border-color: var(--primary); }

.v3home .v3home-faq-q[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3home .v3home-faq-q[b-fm6wgpyh6q]::-webkit-details-marker { display: none; }

.v3home .v3home-faq-mark[b-fm6wgpyh6q] {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform .15s;
}

.v3home .v3home-faq-item[open] .v3home-faq-mark[b-fm6wgpyh6q] { transform: rotate(45deg); }

.v3home .v3home-faq-a[b-fm6wgpyh6q] {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 760px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1140px) {
    .v3home .v3home-live-stats[b-fm6wgpyh6q] { grid-template-columns: 1fr 1fr; }
    .v3home .v3home-live-tag[b-fm6wgpyh6q] {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .v3home .v3home-stat[b-fm6wgpyh6q] { border-bottom: 1px solid var(--border); }
    .v3home .v3home-doors-grid[b-fm6wgpyh6q],
    .v3home .v3home-rail-grid[b-fm6wgpyh6q],
    .v3home .v3home-pipe-grid[b-fm6wgpyh6q] { grid-template-columns: 1fr 1fr; }
    .v3home .v3home-foot-grid[b-fm6wgpyh6q] { grid-template-columns: 1fr 1fr 1fr; }
    .v3home .v3home-logo-strip[b-fm6wgpyh6q] { grid-template-columns: repeat(3, 1fr); }
    .v3home .v3home-mkt-header[b-fm6wgpyh6q],
    .v3home .v3home-mkt-row[b-fm6wgpyh6q] {
        grid-template-columns: 1.2fr 1fr 0.9fr 0.7fr;
        gap: 10px;
    }
    .v3home .v3home-mkt-col-action[b-fm6wgpyh6q],
    .v3home .v3home-mkt-action[b-fm6wgpyh6q] { display: none; }
}

@media (max-width: 780px) {
    .v3home .v3home-nav-items[b-fm6wgpyh6q] { display: none; }
    .v3home .v3home-ticker[b-fm6wgpyh6q] { display: none !important; }
    .v3home .v3home-doors-grid[b-fm6wgpyh6q],
    .v3home .v3home-rail-grid[b-fm6wgpyh6q],
    .v3home .v3home-pipe-grid[b-fm6wgpyh6q] { grid-template-columns: 1fr; }
    .v3home .v3home-step[b-fm6wgpyh6q]::after { display: none; }
    .v3home .v3home-foot-grid[b-fm6wgpyh6q] { grid-template-columns: 1fr 1fr; }
    .v3home .v3home-section-head[b-fm6wgpyh6q] { flex-direction: column; align-items: flex-start; gap: 16px; }
    .v3home .v3home-rail-head[b-fm6wgpyh6q] { flex-direction: column; align-items: flex-start; gap: 14px; }
    .v3home .v3home-hero[b-fm6wgpyh6q] { padding: 64px 0 40px; }
}
/* /Components/Pages/LeasingVsBuying.razor.rz.scp.css */
/* ===========================================
   LEASING VS BUYING PAGE
   CSS Prefix: leasebuy-
   Uses: generic-hero.css, generic-sections.css
   =========================================== */

/* ===========================================
   BRAND COLORS
   =========================================== */
:root[b-btch77fnaa] {
    --brand-color: #06b6d4;
    --brand-color-rgb: 6, 182, 212;
    --brand-color-dark: #0891b2;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
.skip-link[b-btch77fnaa] {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 12px 24px;
    background: #f59e0b;
    color: #030508;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus[b-btch77fnaa] {
    top: 16px;
}

/* Feature Pills */
.leasebuy-pills[b-btch77fnaa] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.leasebuy-pill[b-btch77fnaa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 10px 16px;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.leasebuy-pill :deep(.icon)[b-btch77fnaa] {
    width: 14px;
    height: 14px;
}

.leasebuy-pill.gold[b-btch77fnaa] {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
}

.leasebuy-pill.cyan[b-btch77fnaa] {
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.3);
}

.leasebuy-pill.purple[b-btch77fnaa] {
    color: #8b5cf6;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.3);
}

.btn-tertiary[b-btch77fnaa] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-tertiary:hover[b-btch77fnaa] {
    color: #f1f5f9;
}

.btn-tertiary :deep(.icon)[b-btch77fnaa] {
    width: 16px;
    height: 16px;
}

.leasebuy-decision-preview[b-btch77fnaa] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px;
    position: relative;
}

.leasebuy-preview-header[b-btch77fnaa] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.leasebuy-preview-header :deep(.icon)[b-btch77fnaa] {
    width: 24px;
    height: 24px;
    color: #06b6d4;
}

.leasebuy-preview-header span[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.leasebuy-preview-list[b-btch77fnaa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leasebuy-preview-item[b-btch77fnaa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(6,182,212,0.04);
    border-radius: 8px;
    font-size: 0.875rem;
}

.leasebuy-preview-item .item-label[b-btch77fnaa] {
    color: #06b6d4;
    font-weight: 500;
}

.leasebuy-preview-item .item-vs[b-btch77fnaa] {
    color: #475569;
    font-style: italic;
}

.leasebuy-preview-item .item-value[b-btch77fnaa] {
    color: #f59e0b;
    font-weight: 500;
}

/* ===========================================
   BREADCRUMB
   =========================================== */
.leasebuy-breadcrumb-wrapper[b-btch77fnaa] {
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 16px 0;
}

.leasebuy-breadcrumb-wrapper .container[b-btch77fnaa] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ===========================================
   SECTION TAG COLOR VARIANTS
   =========================================== */
.leasebuy-section-tag.gold[b-btch77fnaa] {
    color: #f59e0b;
}

.leasebuy-section-tag.cyan[b-btch77fnaa] {
    color: #06b6d4;
}

.leasebuy-section-tag.purple[b-btch77fnaa] {
    color: #8b5cf6;
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.leasebuy-opening[b-btch77fnaa] {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.leasebuy-opening-lead[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.leasebuy-opening-text[b-btch77fnaa] {
    font-size: 1.125rem;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.leasebuy-tradeoffs[b-btch77fnaa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.leasebuy-tradeoff[b-btch77fnaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 1rem;
    color: #cbd5e1;
}

.leasebuy-tradeoff strong[b-btch77fnaa] {
    color: #f1f5f9;
}

.leasebuy-tradeoff .tradeoff-vs[b-btch77fnaa] {
    color: #475569;
    font-style: italic;
}

.leasebuy-opening-conclusion[b-btch77fnaa] {
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   COMPARISON TABLE
   =========================================== */
.leasebuy-table-wrapper[b-btch77fnaa] {
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px;
}

.leasebuy-comparison-table[b-btch77fnaa] {
    width: 100%;
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    background: #0f1620;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.leasebuy-comparison-table thead tr[b-btch77fnaa] {
    background: rgba(6,182,212,0.04);
}

.leasebuy-comparison-table th[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    padding: 20px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.leasebuy-comparison-table th.factor-col[b-btch77fnaa] {
    width: 20%;
    background: rgba(15,22,32,0.5);
}

.leasebuy-comparison-table th.option-col[b-btch77fnaa] {
    width: 26.66%;
    text-align: center;
}

.leasebuy-comparison-table th.option-col :deep(.icon)[b-btch77fnaa] {
    width: 18px;
    height: 18px;
    margin-bottom: 6px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.leasebuy-comparison-table th.option-col span[b-btch77fnaa] {
    display: block;
}

.leasebuy-comparison-table th.cash :deep(.icon)[b-btch77fnaa] {
    color: #f59e0b;
}

.leasebuy-comparison-table th.finance :deep(.icon)[b-btch77fnaa] {
    color: #06b6d4;
}

.leasebuy-comparison-table th.lease :deep(.icon)[b-btch77fnaa] {
    color: #8b5cf6;
}

.leasebuy-comparison-table tbody tr[b-btch77fnaa] {
    transition: background 0.2s ease;
}

.leasebuy-comparison-table tbody tr:hover[b-btch77fnaa] {
    background: rgba(255,255,255,0.02);
}

.leasebuy-comparison-table td[b-btch77fnaa] {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.9375rem;
}

.leasebuy-comparison-table tbody tr:last-child td[b-btch77fnaa] {
    border-bottom: none;
}

.leasebuy-comparison-table .factor-cell[b-btch77fnaa] {
    font-weight: 600;
    color: #f1f5f9;
    background: rgba(15,22,32,0.3);
}

.leasebuy-comparison-table .value-cell[b-btch77fnaa] {
    text-align: center;
    color: #cbd5e1;
}

.leasebuy-comparison-table .value-cell.cash[b-btch77fnaa] {
    background: rgba(245,158,11,0.02);
}

.leasebuy-comparison-table .value-cell.finance[b-btch77fnaa] {
    background: rgba(6,182,212,0.02);
}

.leasebuy-comparison-table .value-cell.lease[b-btch77fnaa] {
    background: rgba(139,92,246,0.02);
}

.table-value[b-btch77fnaa] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
}

.table-value.high[b-btch77fnaa] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.table-value.medium[b-btch77fnaa] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.table-value.low[b-btch77fnaa] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.table-value.best[b-btch77fnaa] {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    font-weight: 600;
}

.leasebuy-table-footnote[b-btch77fnaa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(6,182,212,0.05);
    border: 1px solid rgba(6,182,212,0.15);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #94a3b8;
}

.leasebuy-table-footnote :deep(.icon)[b-btch77fnaa] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===========================================
   WHEN TO BUY/FINANCE/LEASE SECTIONS
   =========================================== */
.leasebuy-when-grid[b-btch77fnaa] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.leasebuy-when-card[b-btch77fnaa] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.leasebuy-when-card:hover[b-btch77fnaa] {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

.leasebuy-when-icon[b-btch77fnaa] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}

.leasebuy-when-icon :deep(.icon)[b-btch77fnaa] {
    width: 24px;
    height: 24px;
}

.leasebuy-when-icon.gold[b-btch77fnaa] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.leasebuy-when-icon.cyan[b-btch77fnaa] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.leasebuy-when-icon.purple[b-btch77fnaa] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.leasebuy-when-card h3[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.leasebuy-when-card p[b-btch77fnaa] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

.leasebuy-best-for[b-btch77fnaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #f1f5f9;
}

.leasebuy-best-for :deep(.icon)[b-btch77fnaa] {
    width: 18px;
    height: 18px;
    color: #f59e0b;
}

.leasebuy-best-for.cyan[b-btch77fnaa] {
    background: rgba(6,182,212,0.05);
    border-color: rgba(6,182,212,0.2);
}

.leasebuy-best-for.cyan :deep(.icon)[b-btch77fnaa] {
    color: #06b6d4;
}

.leasebuy-best-for.purple[b-btch77fnaa] {
    background: rgba(139,92,246,0.05);
    border-color: rgba(139,92,246,0.2);
}

.leasebuy-best-for.purple :deep(.icon)[b-btch77fnaa] {
    color: #8b5cf6;
}

/* ===========================================
   DECISION FLOWCHART
   =========================================== */
.leasebuy-flowchart[b-btch77fnaa] {
    max-width: 1000px;
    margin: 0 auto;
}

.flowchart-node[b-btch77fnaa] {
    padding: 20px 28px;
    border-radius: 12px;
    margin-bottom: 0;
}

.flowchart-node.question[b-btch77fnaa] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.12);
}

.flowchart-node.question.root[b-btch77fnaa] {
    max-width: 400px;
    margin: 0 auto 24px;
    text-align: center;
}

.flowchart-node.answer[b-btch77fnaa] {
    background: #0f1620;
    border: 2px solid;
}

.flowchart-node.answer.gold[b-btch77fnaa] {
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.05);
}

.flowchart-node.answer.cyan[b-btch77fnaa] {
    border-color: rgba(6,182,212,0.5);
    background: rgba(6,182,212,0.05);
}

.flowchart-node.answer.purple[b-btch77fnaa] {
    border-color: rgba(139,92,246,0.5);
    background: rgba(139,92,246,0.05);
}

.node-content[b-btch77fnaa] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.node-content :deep(.icon)[b-btch77fnaa] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.flowchart-node.question .node-content :deep(.icon)[b-btch77fnaa] {
    color: #64748b;
}

.flowchart-node.answer.gold .node-content :deep(.icon)[b-btch77fnaa] {
    color: #f59e0b;
}

.flowchart-node.answer.cyan .node-content :deep(.icon)[b-btch77fnaa] {
    color: #06b6d4;
}

.flowchart-node.answer.purple .node-content :deep(.icon)[b-btch77fnaa] {
    color: #8b5cf6;
}

.node-content span[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f1f5f9;
}

.flowchart-branches.level-1[b-btch77fnaa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.flowchart-branch[b-btch77fnaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branch-label[b-btch77fnaa] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.branch-label.yes[b-btch77fnaa] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.branch-label.no[b-btch77fnaa] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.flowchart-sub-branches[b-btch77fnaa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.flowchart-sub-branches .flowchart-branch[b-btch77fnaa] {
    align-items: center;
}

.flowchart-sub-branches .flowchart-node[b-btch77fnaa] {
    width: 100%;
    text-align: center;
}

.flowchart-sub-branches .node-content[b-btch77fnaa] {
    justify-content: center;
}

.flowchart-final-branches[b-btch77fnaa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    width: 100%;
}

.flowchart-final-branches .flowchart-branch[b-btch77fnaa] {
    align-items: center;
}

.flowchart-final-branches .flowchart-node[b-btch77fnaa] {
    padding: 14px 20px;
}

.flowchart-final-branches .node-content span[b-btch77fnaa] {
    font-size: 0.8125rem;
}

.flowchart-node.nested[b-btch77fnaa] {
    padding: 16px 20px;
}

.flowchart-node.nested .node-content span[b-btch77fnaa] {
    font-size: 0.875rem;
}

/* ===========================================
   TAX & ACCOUNTING
   =========================================== */
.leasebuy-disclaimer-banner[b-btch77fnaa] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 10px;
    margin-bottom: 48px;
}

.leasebuy-disclaimer-banner :deep(.icon)[b-btch77fnaa] {
    width: 24px;
    height: 24px;
    color: #f59e0b;
    flex-shrink: 0;
}

.leasebuy-disclaimer-banner p[b-btch77fnaa] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #f1f5f9;
    margin: 0;
}

.leasebuy-tax-grid[b-btch77fnaa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.leasebuy-tax-card[b-btch77fnaa] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.leasebuy-tax-card:hover[b-btch77fnaa] {
    transform: translateY(-4px);
}

.leasebuy-tax-card.gold[b-btch77fnaa] {
    border-top: 3px solid #f59e0b;
}

.leasebuy-tax-card.cyan[b-btch77fnaa] {
    border-top: 3px solid #06b6d4;
}

.leasebuy-tax-card.purple[b-btch77fnaa] {
    border-top: 3px solid #8b5cf6;
}

.tax-card-header[b-btch77fnaa] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tax-card-header :deep(.icon)[b-btch77fnaa] {
    width: 22px;
    height: 22px;
}

.leasebuy-tax-card.gold .tax-card-header :deep(.icon)[b-btch77fnaa] {
    color: #f59e0b;
}

.leasebuy-tax-card.cyan .tax-card-header :deep(.icon)[b-btch77fnaa] {
    color: #06b6d4;
}

.leasebuy-tax-card.purple .tax-card-header :deep(.icon)[b-btch77fnaa] {
    color: #8b5cf6;
}

.tax-card-header h3[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.tax-list[b-btch77fnaa] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tax-list li[b-btch77fnaa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

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

.tax-list li :deep(.icon)[b-btch77fnaa] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
    margin-top: 3px;
}

/* ===========================================
   SCENARIOS
   =========================================== */
.leasebuy-scenarios-grid[b-btch77fnaa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.leasebuy-scenario-card[b-btch77fnaa] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.leasebuy-scenario-card:hover[b-btch77fnaa] {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

.scenario-badge[b-btch77fnaa] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}

.scenario-badge :deep(.icon)[b-btch77fnaa] {
    width: 22px;
    height: 22px;
}

.scenario-badge.gold[b-btch77fnaa] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.scenario-badge.cyan[b-btch77fnaa] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.scenario-badge.purple[b-btch77fnaa] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.leasebuy-scenario-card h3[b-btch77fnaa] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.scenario-situation[b-btch77fnaa],
.scenario-consideration[b-btch77fnaa] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 12px;
}

.scenario-situation strong[b-btch77fnaa],
.scenario-consideration strong[b-btch77fnaa] {
    color: #cbd5e1;
}

.scenario-fit[b-btch77fnaa] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.9375rem;
    color: #f1f5f9;
}

.scenario-fit :deep(.icon)[b-btch77fnaa] {
    width: 16px;
    height: 16px;
    color: #10b981;
}

/* ===========================================
   PARTNER LOGOS SECTION
   =========================================== */
.leasebuy-partners-section[b-btch77fnaa] {
    position: relative;
    z-index: 1;
    padding: 60px 0 80px;
    background: #050a12;
}

.leasebuy-partners-section .container[b-btch77fnaa] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
}

.leasebuy-partners-title[b-btch77fnaa] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #475569;
    margin: 0 0 32px 0;
}

.leasebuy-partners-grid[b-btch77fnaa] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 32px 48px;
    margin-bottom: 40px;
}

.leasebuy-partner-link[b-btch77fnaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.leasebuy-partner-link img[b-btch77fnaa] {
    opacity: 1;
    filter: none;
    transition: transform 0.2s ease;
    max-width: 100%;
    height: auto;
}

.leasebuy-partner-link:hover img[b-btch77fnaa] {
    transform: scale(1.05);
}

.leasebuy-partner-text[b-btch77fnaa] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leasebuy-partner-text.light[b-btch77fnaa] {
    color: #cbd5e1;
}

.leasebuy-nvidia-badge[b-btch77fnaa] {
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.leasebuy-nvidia-badge img[b-btch77fnaa] {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.leasebuy-nvidia-badge img:hover[b-btch77fnaa] {
    opacity: 1;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .leasebuy-when-grid[b-btch77fnaa] {
        grid-template-columns: repeat(2, 1fr);
    }
    .leasebuy-tax-grid[b-btch77fnaa] {
        grid-template-columns: repeat(2, 1fr);
    }
    .leasebuy-tax-grid .leasebuy-tax-card:last-child[b-btch77fnaa] {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
    .leasebuy-scenarios-grid[b-btch77fnaa] {
        grid-template-columns: repeat(2, 1fr);
    }
    .leasebuy-scenarios-grid .leasebuy-scenario-card:last-child[b-btch77fnaa] {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 1024px) {
    .leasebuy-preview[b-btch77fnaa] {
        max-width: 500px;
        margin: 0 auto;
    }
    .flowchart-branches.level-1[b-btch77fnaa] {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .leasebuy-tax-grid .leasebuy-tax-card:last-child[b-btch77fnaa] {
        max-width: 100%;
    }
    .leasebuy-scenarios-grid .leasebuy-scenario-card:last-child[b-btch77fnaa] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .leasebuy-partners-section .container[b-btch77fnaa],
    .leasebuy-breadcrumb-wrapper .container[b-btch77fnaa] {
        padding: 0 24px;
    }
    .leasebuy-when-grid[b-btch77fnaa] {
        grid-template-columns: 1fr;
    }
    .leasebuy-tax-grid[b-btch77fnaa] {
        grid-template-columns: 1fr;
    }
    .leasebuy-tax-grid .leasebuy-tax-card:last-child[b-btch77fnaa] {
        grid-column: span 1;
        max-width: none;
    }
    .leasebuy-scenarios-grid[b-btch77fnaa] {
        grid-template-columns: 1fr;
    }
    .leasebuy-scenarios-grid .leasebuy-scenario-card:last-child[b-btch77fnaa] {
        grid-column: span 1;
        max-width: none;
    }
    .leasebuy-tradeoff[b-btch77fnaa] {
        flex-direction: column;
        gap: 8px;
    }
    .flowchart-sub-branches[b-btch77fnaa] {
        grid-template-columns: 1fr;
    }
    .flowchart-final-branches[b-btch77fnaa] {
        grid-template-columns: 1fr;
    }
    .leasebuy-disclaimer-banner[b-btch77fnaa] {
        flex-direction: column;
        text-align: center;
    }
    .leasebuy-disclaimer-banner :deep(.icon)[b-btch77fnaa] {
        margin: 0 auto;
    }
    .leasebuy-best-for[b-btch77fnaa] {
        flex-direction: column;
        text-align: center;
    }
    .leasebuy-table-footnote[b-btch77fnaa] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .leasebuy-pills[b-btch77fnaa] {
        flex-direction: column;
        align-items: center;
    }
    .leasebuy-partners-grid[b-btch77fnaa] {
        gap: 24px 32px;
    }
    .leasebuy-preview-item[b-btch77fnaa] {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}
/* /Components/Pages/Legal/Legal.razor.rz.scp.css */
/* ===========================================
   LEGAL PAGE - SLYD DESIGN SYSTEM
   Page-specific styles only.
   Hero and section base styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
   =========================================== */

/* ===========================================
   BREADCRUMB
   =========================================== */
.legal-breadcrumb-wrapper[b-s6nvnkp0bt] {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.legal-breadcrumb-wrapper .container[b-s6nvnkp0bt] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ===========================================
   LEGAL CARDS GRID
   =========================================== */
.legal-cards-grid[b-s6nvnkp0bt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.legal-card[b-s6nvnkp0bt] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.legal-card:hover[b-s6nvnkp0bt] {
    border-color: rgba(6,182,212,0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.legal-card-icon[b-s6nvnkp0bt] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.legal-card-icon :deep(svg)[b-s6nvnkp0bt] {
    width: 24px;
    height: 24px;
}

.legal-card-icon.cyan[b-s6nvnkp0bt] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.legal-card-icon.purple[b-s6nvnkp0bt] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.legal-card-icon.green[b-s6nvnkp0bt] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.legal-card-icon.gold[b-s6nvnkp0bt] {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}

.legal-card-content[b-s6nvnkp0bt] {
    flex: 1;
    min-width: 0;
}

.legal-card-content h3[b-s6nvnkp0bt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.legal-card-content p[b-s6nvnkp0bt] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.legal-card-arrow[b-s6nvnkp0bt] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.08);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.legal-card-arrow :deep(svg)[b-s6nvnkp0bt] {
    width: 14px;
    height: 14px;
    color: #06b6d4;
}

.legal-card:hover .legal-card-arrow[b-s6nvnkp0bt] {
    background: #06b6d4;
    transform: translateX(4px);
}

.legal-card:hover .legal-card-arrow :deep(svg)[b-s6nvnkp0bt] {
    color: #030508;
}

/* ===========================================
   CONTACT BOX
   =========================================== */
.legal-contact-box[b-s6nvnkp0bt] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(6,182,212,0.2);
    border-radius: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.legal-contact-icon[b-s6nvnkp0bt] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 14px;
    flex-shrink: 0;
}

.legal-contact-icon :deep(svg)[b-s6nvnkp0bt] {
    width: 28px;
    height: 28px;
    color: #06b6d4;
}

.legal-contact-content[b-s6nvnkp0bt] {
    flex: 1;
}

.legal-contact-content h3[b-s6nvnkp0bt] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.legal-contact-content p[b-s6nvnkp0bt] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    .legal-cards-grid[b-s6nvnkp0bt] {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    .legal-breadcrumb-wrapper .container[b-s6nvnkp0bt] {
        padding: 0 24px;
    }

    .legal-contact-box[b-s6nvnkp0bt] {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }

    .legal-contact-content[b-s6nvnkp0bt] {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .legal-card[b-s6nvnkp0bt] {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .legal-card-content[b-s6nvnkp0bt] {
        text-align: center;
    }

    .legal-card-arrow[b-s6nvnkp0bt] {
        align-self: center;
    }
}
/* /Components/Pages/Marketplace/Marketplace.razor.rz.scp.css */
/* ============================================================
   Marketplace (/marketplace) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD Marketplace v1.html (L37-224),
   namespaced v3mkt-, scoped under .v3mkt wrapper.
   ============================================================ */

.v3mkt[b-3vgefmb0vr] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --primary-dark: var(--slyd-primary-dark);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3mkt *[b-3vgefmb0vr],
.v3mkt *[b-3vgefmb0vr]::before,
.v3mkt *[b-3vgefmb0vr]::after { box-sizing: border-box; }

.v3mkt a[b-3vgefmb0vr] { color: inherit; text-decoration: none; }
.v3mkt button[b-3vgefmb0vr] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3mkt .v3mkt-wrap[b-3vgefmb0vr] {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3mkt .v3mkt-wrap[b-3vgefmb0vr] { padding: 0 20px; } }

.v3mkt .v3mkt-a[b-3vgefmb0vr] { color: var(--primary); }

/* Buttons */
.v3mkt .v3mkt-btn[b-3vgefmb0vr] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3mkt .v3mkt-btn-ghost[b-3vgefmb0vr] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3mkt .v3mkt-btn-ghost:hover[b-3vgefmb0vr] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3mkt .v3mkt-btn-primary[b-3vgefmb0vr] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3mkt .v3mkt-btn-primary:hover[b-3vgefmb0vr] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3mkt .v3mkt-arr[b-3vgefmb0vr] { font-family: var(--font-mono); color: currentColor; opacity: .7; }

/* ───── HEAD ───── */

.v3mkt .v3mkt-head[b-3vgefmb0vr] {
    padding: 40px 0 24px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.v3mkt .v3mkt-head[b-3vgefmb0vr]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 400px at 70% 0%, var(--primary-glow), transparent 70%);
    opacity: .45;
}

.v3mkt .v3mkt-head-row[b-3vgefmb0vr] {
    display: flex;
    align-items: flex-end;
    gap: 48px;
    justify-content: space-between;
}

.v3mkt .v3mkt-eyebrow[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.v3mkt .v3mkt-eyebrow[b-3vgefmb0vr]::before { content: ""; width: 24px; height: 1px; background: var(--primary); }

.v3mkt .v3mkt-head-h1[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3mkt .v3mkt-head-lede[b-3vgefmb0vr] {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 620px;
    margin: 0;
}

.v3mkt .v3mkt-head-stats[b-3vgefmb0vr] { display: flex; gap: 24px; flex-wrap: wrap; }

.v3mkt .v3mkt-s[b-3vgefmb0vr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 24px;
    border-right: 1px solid var(--border);
}

.v3mkt .v3mkt-s:last-child[b-3vgefmb0vr] { border-right: none; padding-right: 0; }

.v3mkt .v3mkt-s-l[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3mkt .v3mkt-s-v[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
}

.v3mkt .v3mkt-s-u[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* ───── TABS BAR ───── */

.v3mkt .v3mkt-tabs-bar[b-3vgefmb0vr] {
    position: sticky;
    top: 69px;
    z-index: 50;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
}

.v3mkt .v3mkt-tabs-row[b-3vgefmb0vr] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
}

.v3mkt .v3mkt-tabs[b-3vgefmb0vr] {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: fit-content;
}

.v3mkt .v3mkt-tab[b-3vgefmb0vr] {
    padding: 9px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .12s;
}

.v3mkt .v3mkt-tab:hover[b-3vgefmb0vr] { color: var(--text-secondary); }
.v3mkt .v3mkt-tab-on[b-3vgefmb0vr] { color: var(--text-primary); background: var(--bg-input); }

.v3mkt .v3mkt-badge[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.1em;
}

.v3mkt .v3mkt-badge-live[b-3vgefmb0vr] {
    color: var(--success);
    background: color-mix(in oklab, var(--success) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
}

.v3mkt .v3mkt-badge-new[b-3vgefmb0vr] {
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3mkt .v3mkt-tabs-meta[b-3vgefmb0vr] {
    display: flex;
    gap: 18px;
    margin-left: auto;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
}

.v3mkt .v3mkt-live-dot[b-3vgefmb0vr] { display: inline-flex; align-items: center; gap: 7px; }

.v3mkt .v3mkt-live-dot[b-3vgefmb0vr]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3mkt-pulse-b-3vgefmb0vr 1.8s ease-in-out infinite;
}

@keyframes v3mkt-pulse-b-3vgefmb0vr {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; transform: scale(1.3); }
}

/* ───── FILTERS ───── */

.v3mkt .v3mkt-filters[b-3vgefmb0vr] {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.v3mkt .v3mkt-f-row[b-3vgefmb0vr] {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
    gap: 14px;
}

.v3mkt .v3mkt-f[b-3vgefmb0vr] { display: flex; flex-direction: column; gap: 6px; }

.v3mkt .v3mkt-f-l[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
}

.v3mkt .v3mkt-sel[b-3vgefmb0vr],
.v3mkt .v3mkt-inp[b-3vgefmb0vr] {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
}

.v3mkt .v3mkt-sel[b-3vgefmb0vr] { cursor: pointer; }

.v3mkt .v3mkt-inp:focus[b-3vgefmb0vr],
.v3mkt .v3mkt-sel:focus[b-3vgefmb0vr] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.v3mkt .v3mkt-f-reset[b-3vgefmb0vr] {
    align-self: flex-end;
    padding: 9px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
}

.v3mkt .v3mkt-f-reset:hover[b-3vgefmb0vr] {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

/* ───── COUNT + SORT ───── */

.v3mkt .v3mkt-count-row[b-3vgefmb0vr] {
    padding: 18px 0 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.v3mkt .v3mkt-cnt[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3mkt .v3mkt-cnt strong[b-3vgefmb0vr] { color: var(--text-primary); font-weight: 600; }

.v3mkt .v3mkt-sortby[b-3vgefmb0vr] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3mkt .v3mkt-sortby select[b-3vgefmb0vr] {
    padding: 7px 28px 7px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

/* ───── SPOT TABLE ───── */

.v3mkt .v3mkt-spot-board[b-3vgefmb0vr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 60px;
}

.v3mkt .v3mkt-spot-head[b-3vgefmb0vr] {
    display: grid;
    grid-template-columns: 1.5fr 1.4fr 0.9fr 0.7fr 0.9fr 0.7fr;
    gap: 14px;
    padding: 14px 24px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
}

.v3mkt .v3mkt-h-action[b-3vgefmb0vr] { text-align: right; }

.v3mkt .v3mkt-spot-row[b-3vgefmb0vr] {
    display: grid;
    grid-template-columns: 1.5fr 1.4fr 0.9fr 0.7fr 0.9fr 0.7fr;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
    transition: background .12s;
    cursor: pointer;
}

.v3mkt .v3mkt-spot-row:last-child[b-3vgefmb0vr] { border-bottom: none; }
.v3mkt .v3mkt-spot-row:hover[b-3vgefmb0vr] { background: var(--bg-elevated); }

.v3mkt .v3mkt-spot-site[b-3vgefmb0vr],
.v3mkt .v3mkt-spot-gpu[b-3vgefmb0vr],
.v3mkt .v3mkt-spot-avail[b-3vgefmb0vr] { display: flex; flex-direction: column; gap: 3px; }

.v3mkt .v3mkt-spot-nm[b-3vgefmb0vr] {
    font-weight: 500;
    font-size: 14.5px;
    color: var(--text-primary);
}

.v3mkt .v3mkt-spot-gpu-nm[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.v3mkt .v3mkt-spot-meta[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.v3mkt .v3mkt-spot-px[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3mkt .v3mkt-spot-u[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 3px;
}

.v3mkt .v3mkt-spot-avail-n[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.v3mkt .v3mkt-spot-avail-lbl[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--success);
    letter-spacing: 0.1em;
}

.v3mkt .v3mkt-spot-delivery[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.v3mkt .v3mkt-spot-delivery-now[b-3vgefmb0vr] { color: var(--success); }

.v3mkt .v3mkt-spot-action[b-3vgefmb0vr] { display: flex; justify-content: flex-end; }

.v3mkt .v3mkt-btn-row[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--primary);
    font-weight: 600;
    padding: 7px 13px;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
    border-radius: var(--radius);
    background: var(--primary-soft);
}

.v3mkt .v3mkt-btn-row:hover[b-3vgefmb0vr] { background: var(--primary); color: #fff; }

/* ───── FORWARD GRID ───── */

.v3mkt .v3mkt-fwd-grid[b-3vgefmb0vr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 60px;
}

.v3mkt .v3mkt-fwd-card[b-3vgefmb0vr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    position: relative;
    overflow: hidden;
}

.v3mkt .v3mkt-fwd-card:hover[b-3vgefmb0vr] {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.v3mkt .v3mkt-fwd-top-row[b-3vgefmb0vr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.v3mkt .v3mkt-fwd-lot-id[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3mkt .v3mkt-fwd-badge[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--success);
    padding: 3px 7px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--success) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
    text-transform: uppercase;
}

.v3mkt .v3mkt-fwd-badge-closing[b-3vgefmb0vr] {
    color: var(--warning);
    background: color-mix(in oklab, var(--warning) 16%, transparent);
    border-color: color-mix(in oklab, var(--warning) 30%, transparent);
}

.v3mkt .v3mkt-fwd-badge-justlisted[b-3vgefmb0vr] {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3mkt .v3mkt-fwd-spec[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.v3mkt .v3mkt-fwd-detail[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.v3mkt .v3mkt-fwd-price-row[b-3vgefmb0vr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.v3mkt .v3mkt-fwd-px[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.v3mkt .v3mkt-fwd-u[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 3px;
}

.v3mkt .v3mkt-fwd-when[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--primary);
    letter-spacing: 0.1em;
    font-weight: 600;
}

.v3mkt .v3mkt-fwd-bar[b-3vgefmb0vr] {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-input);
    overflow: hidden;
    margin-bottom: 8px;
}

.v3mkt .v3mkt-fwd-fill[b-3vgefmb0vr] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width .6s ease;
}

.v3mkt .v3mkt-fwd-filled[b-3vgefmb0vr] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}

.v3mkt .v3mkt-fwd-pct[b-3vgefmb0vr] { color: var(--text-primary); font-weight: 600; }

/* subscription bar + 7-day momentum spark side by side */
.v3mkt .v3mkt-fwd-bar-row[b-3vgefmb0vr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.v3mkt .v3mkt-fwd-bar-row .v3mkt-fwd-bar[b-3vgefmb0vr] {
    flex: 1;
    margin-bottom: 0;
}

/* 7 thin bars, height ∝ daily cumulative subscription fraction.
   Honest heights — a zero day renders empty; the baseline hairline
   keeps the axis legible. Fractions only on this public surface. */
.v3mkt .v3mkt-fwd-spark[b-3vgefmb0vr] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.v3mkt .v3mkt-fwd-spark-bar[b-3vgefmb0vr] {
    width: 3px;
    border-radius: 1px;
    background: linear-gradient(180deg, var(--secondary), var(--primary));
}

/* close-condition line — "CLOSES AT 95% OR JUL 1" */
.v3mkt .v3mkt-fwd-close[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: -10px 0 16px;
}

.v3mkt .v3mkt-fwd-close-urgent[b-3vgefmb0vr] { color: var(--warning); }

.v3mkt .v3mkt-fwd-close-closed[b-3vgefmb0vr] { color: var(--danger); }

.v3mkt .v3mkt-btn-deposit-closed[b-3vgefmb0vr],
.v3mkt .v3mkt-btn-deposit-closed:hover[b-3vgefmb0vr] {
    color: var(--text-muted);
    background: var(--bg-input);
    border-color: var(--border);
    cursor: not-allowed;
}

.v3mkt .v3mkt-fwd-action[b-3vgefmb0vr] {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.v3mkt .v3mkt-btn-deposit[b-3vgefmb0vr] {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--primary);
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
    border-radius: var(--radius);
    background: var(--primary-soft);
    text-align: center;
}

.v3mkt .v3mkt-btn-deposit:hover[b-3vgefmb0vr] { background: var(--primary); color: #fff; }

.v3mkt .v3mkt-btn-detail[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.v3mkt .v3mkt-btn-detail:hover[b-3vgefmb0vr] { color: var(--text-primary); border-color: var(--text-tertiary); }

/* ───── FAQ ───── */

.v3mkt .v3mkt-faq[b-3vgefmb0vr] {
    padding: 56px 0 16px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 48px;
}

.v3mkt .v3mkt-faq-head[b-3vgefmb0vr] { margin-bottom: 28px; }

.v3mkt .v3mkt-faq-kicker[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

.v3mkt .v3mkt-faq-h2[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3mkt .v3mkt-faq-list[b-3vgefmb0vr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3mkt .v3mkt-faq-item[b-3vgefmb0vr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color .15s;
}

.v3mkt .v3mkt-faq-item:hover[b-3vgefmb0vr] { border-color: var(--border-hover); }
.v3mkt .v3mkt-faq-item[open][b-3vgefmb0vr] { border-color: var(--primary); }

.v3mkt .v3mkt-faq-q[b-3vgefmb0vr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3mkt .v3mkt-faq-q[b-3vgefmb0vr]::-webkit-details-marker { display: none; }

.v3mkt .v3mkt-faq-mark[b-3vgefmb0vr] {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform .15s;
}

.v3mkt .v3mkt-faq-item[open] .v3mkt-faq-mark[b-3vgefmb0vr] { transform: rotate(45deg); }

.v3mkt .v3mkt-faq-a[b-3vgefmb0vr] {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 760px;
}

/* ───── CTA STRIP ───── */

.v3mkt .v3mkt-cta-strip[b-3vgefmb0vr] { padding: 32px 0 48px; }

.v3mkt .v3mkt-cta-card[b-3vgefmb0vr] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.v3mkt .v3mkt-cta-card[b-3vgefmb0vr]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3mkt .v3mkt-cta-text[b-3vgefmb0vr] { position: relative; }

.v3mkt .v3mkt-cta-text h3[b-3vgefmb0vr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.v3mkt .v3mkt-cta-text p[b-3vgefmb0vr] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 520px;
}

.v3mkt .v3mkt-cta-act[b-3vgefmb0vr] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3mkt .v3mkt-f-row[b-3vgefmb0vr] { grid-template-columns: repeat(2, 1fr); }
    .v3mkt .v3mkt-fwd-grid[b-3vgefmb0vr] { grid-template-columns: repeat(2, 1fr); }
    .v3mkt .v3mkt-spot-head[b-3vgefmb0vr],
    .v3mkt .v3mkt-spot-row[b-3vgefmb0vr] { grid-template-columns: 1.4fr 1fr 0.9fr 0.7fr 0.7fr; }
    .v3mkt .v3mkt-h-action[b-3vgefmb0vr],
    .v3mkt .v3mkt-spot-action[b-3vgefmb0vr] { display: none; }
    .v3mkt .v3mkt-head-row[b-3vgefmb0vr] { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 780px) {
    .v3mkt .v3mkt-f-row[b-3vgefmb0vr] { grid-template-columns: 1fr; gap: 10px; }
    .v3mkt .v3mkt-fwd-grid[b-3vgefmb0vr] { grid-template-columns: 1fr; }
    .v3mkt .v3mkt-spot-head[b-3vgefmb0vr] { display: none; }
    .v3mkt .v3mkt-spot-row[b-3vgefmb0vr] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 18px;
        border-bottom: 1px solid var(--border);
    }
    .v3mkt .v3mkt-cta-card[b-3vgefmb0vr] { flex-direction: column; align-items: flex-start; }
    .v3mkt .v3mkt-tabs-row[b-3vgefmb0vr] { flex-wrap: wrap; }
    .v3mkt .v3mkt-tabs-meta[b-3vgefmb0vr] { margin-left: 0; }
}
/* /Components/Pages/Marketplace/PowerOpportunities.razor.rz.scp.css */
/* ============================================================
   Power Opportunities (/marketplace/power-opportunities) —
   Track 2 V3 reskin. Mockup-verbatim CSS from
   SLYD Energy v1.html (L37-251), namespaced v3energy-,
   scoped under .v3energy wrapper.
   ============================================================ */

.v3energy[b-5lq2wyczv7] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3energy *[b-5lq2wyczv7],
.v3energy *[b-5lq2wyczv7]::before,
.v3energy *[b-5lq2wyczv7]::after { box-sizing: border-box; }

.v3energy a[b-5lq2wyczv7] { color: inherit; text-decoration: none; }
.v3energy button[b-5lq2wyczv7] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3energy .v3energy-wrap[b-5lq2wyczv7] { max-width: 1480px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 780px) { .v3energy .v3energy-wrap[b-5lq2wyczv7] { padding: 0 20px; } }

/* Buttons */
.v3energy .v3energy-btn[b-5lq2wyczv7] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3energy .v3energy-btn-ghost[b-5lq2wyczv7] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3energy .v3energy-btn-ghost:hover[b-5lq2wyczv7] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3energy .v3energy-btn-primary[b-5lq2wyczv7] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3energy .v3energy-btn-primary:hover[b-5lq2wyczv7] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3energy .v3energy-arr[b-5lq2wyczv7] { font-family: var(--font-mono); opacity: .7; }

/* ───── PAGE HEAD ───── */
.v3energy .v3energy-head[b-5lq2wyczv7] {
    padding: 44px 0 28px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.v3energy .v3energy-head[b-5lq2wyczv7]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(800px 400px at 80% 0%, color-mix(in oklab, hsl(38, 92%, 50%) 22%, transparent), transparent 70%);
    opacity: .5;
}

.v3energy .v3energy-head-row[b-5lq2wyczv7] {
    display: flex;
    align-items: flex-end;
    gap: 48px;
    justify-content: space-between;
}

.v3energy .v3energy-eyebrow[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.v3energy .v3energy-eyebrow[b-5lq2wyczv7]::before { content: ""; width: 24px; height: 1px; background: var(--gold); }

.v3energy .v3energy-h1[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3energy .v3energy-a[b-5lq2wyczv7] { color: var(--gold); }

.v3energy .v3energy-lede[b-5lq2wyczv7] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 680px;
    margin: 0;
}

.v3energy .v3energy-badges[b-5lq2wyczv7] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.v3energy .v3energy-badge[b-5lq2wyczv7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-hover);
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.v3energy .v3energy-badge[b-5lq2wyczv7]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
}

.v3energy .v3energy-badge-no-login[b-5lq2wyczv7]::before {
    background: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 25%, transparent);
}

/* ───── DEMAND RAIL ───── */
.v3energy .v3energy-demand[b-5lq2wyczv7] { padding: 32px 0 8px; }

.v3energy .v3energy-d-head[b-5lq2wyczv7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.v3energy .v3energy-dh[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
    color: var(--text-primary);
}

.v3energy .v3energy-dh-a[b-5lq2wyczv7] { color: var(--success); }

.v3energy .v3energy-meta[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.v3energy .v3energy-meta[b-5lq2wyczv7]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3energy-pulse-b-5lq2wyczv7 1.8s ease-in-out infinite;
}

@keyframes v3energy-pulse-b-5lq2wyczv7 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; transform: scale(1.3); }
}

.v3energy .v3energy-d-grid[b-5lq2wyczv7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.v3energy .v3energy-d-card[b-5lq2wyczv7] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    position: relative;
    overflow: hidden;
}

.v3energy .v3energy-d-card:hover[b-5lq2wyczv7] { border-color: var(--gold); transform: translateY(-2px); }
.v3energy .v3energy-d-card[data-empty][b-5lq2wyczv7] { display: none; }

.v3energy .v3energy-tag[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v3energy .v3energy-tag[b-5lq2wyczv7]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 25%, transparent);
}

.v3energy .v3energy-d-card[data-priority="urgent"] .v3energy-tag[b-5lq2wyczv7] { color: var(--danger); }
.v3energy .v3energy-d-card[data-priority="urgent"] .v3energy-tag[b-5lq2wyczv7]::before {
    background: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 25%, transparent);
}

.v3energy .v3energy-mw[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    margin: 0 0 2px;
    color: var(--text-primary);
}

.v3energy .v3energy-unit[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}

.v3energy .v3energy-where[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.v3energy .v3energy-row2[b-5lq2wyczv7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.v3energy .v3energy-lbl[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
}

.v3energy .v3energy-v[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.v3energy .v3energy-v.v3energy-tick[b-5lq2wyczv7] { animation: v3energy-demTick-b-5lq2wyczv7 0.9s ease-out; }

@keyframes v3energy-demTick-b-5lq2wyczv7 {
    0%   { color: var(--gold); }
    100% { color: inherit; }
}

/* ───── MAIN GRID ───── */
.v3energy .v3energy-grid[b-5lq2wyczv7] {
    padding: 32px 0 80px;
    display: grid;
    grid-template-columns: minmax(0, 520px) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1080px) {
    .v3energy .v3energy-grid[b-5lq2wyczv7] { grid-template-columns: 1fr; gap: 18px; }
}

/* ───── FORM ───── */
.v3energy .v3energy-form[b-5lq2wyczv7] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.v3energy .v3energy-form-section[b-5lq2wyczv7] {
    padding: 24px 26px;
    border-bottom: 1px solid var(--border);
}

.v3energy .v3energy-form-section:last-child[b-5lq2wyczv7] { border-bottom: none; }

.v3energy .v3energy-fsh[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v3energy .v3energy-n[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    display: inline-flex;
    width: 18px;
    height: 18px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
}

.v3energy .v3energy-field[b-5lq2wyczv7] { margin-bottom: 16px; }
.v3energy .v3energy-field:last-child[b-5lq2wyczv7] { margin-bottom: 0; }

.v3energy .v3energy-label[b-5lq2wyczv7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.v3energy .v3energy-hint[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    font-weight: 400;
}

.v3energy .v3energy-inp[b-5lq2wyczv7] {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .1s, box-shadow .1s;
    outline: none;
}

.v3energy .v3energy-inp:focus[b-5lq2wyczv7] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.v3energy textarea.v3energy-inp[b-5lq2wyczv7] { resize: vertical; }

.v3energy .v3energy-rng[b-5lq2wyczv7] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--pct, 50%), var(--bg-input) var(--pct, 50%), var(--bg-input) 100%);
    border-radius: 3px;
    outline: none;
    margin: 0;
}

.v3energy .v3energy-rng[b-5lq2wyczv7]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--primary);
    cursor: pointer;
}

.v3energy .v3energy-rng-scale[b-5lq2wyczv7] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 6px;
}

.v3energy .v3energy-mw-row[b-5lq2wyczv7] { display: flex; align-items: center; gap: 12px; }
.v3energy .v3energy-mw-row .v3energy-rng[b-5lq2wyczv7] { flex: 1; min-width: 0; }

.v3energy .v3energy-num-inp[b-5lq2wyczv7] {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.v3energy .v3energy-num-inp:focus-within[b-5lq2wyczv7] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.v3energy .v3energy-num-inp input[b-5lq2wyczv7] {
    width: 72px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    -moz-appearance: textfield;
}

.v3energy .v3energy-num-inp input[b-5lq2wyczv7]::-webkit-outer-spin-button,
.v3energy .v3energy-num-inp input[b-5lq2wyczv7]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v3energy .v3energy-num-unit[b-5lq2wyczv7] {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
}

.v3energy .v3energy-cost-line[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
    letter-spacing: 0.06em;
}

.v3energy .v3energy-cost-line span[b-5lq2wyczv7] { color: var(--primary); font-weight: 600; }

.v3energy .v3energy-pills[b-5lq2wyczv7] { display: flex; gap: 6px; flex-wrap: wrap; }

.v3energy .v3energy-pill[b-5lq2wyczv7] {
    padding: 8px 13px;
    font-size: 13px;
    border-radius: var(--radius);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .1s;
}

.v3energy .v3energy-pill:hover[b-5lq2wyczv7] { border-color: var(--border-hover); color: var(--text-primary); }

.v3energy .v3energy-pill.v3energy-on[b-5lq2wyczv7] {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.v3energy .v3energy-sel[b-5lq2wyczv7] {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                      linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.v3energy .v3energy-form-foot[b-5lq2wyczv7] {
    padding: 18px 26px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.v3energy .v3energy-live[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v3energy .v3energy-live[b-5lq2wyczv7]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3energy-pulse-b-5lq2wyczv7 1.8s ease-in-out infinite;
}

/* ───── MATCH COLUMN ───── */
.v3energy .v3energy-match[b-5lq2wyczv7] { display: flex; flex-direction: column; gap: 18px; }

.v3energy .v3energy-m-card[b-5lq2wyczv7] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Hero match */
.v3energy .v3energy-m-hero[b-5lq2wyczv7] {
    padding: 0;
    background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border-top: 2px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.v3energy .v3energy-m-hero[b-5lq2wyczv7]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, color-mix(in oklab, var(--gold) 30%, transparent), transparent 60%);
    pointer-events: none;
}

.v3energy .v3energy-m-hero-inner[b-5lq2wyczv7] { padding: 32px 32px 24px; position: relative; }

.v3energy .v3energy-vh-lbl[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.v3energy .v3energy-px-row[b-5lq2wyczv7] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.v3energy .v3energy-px[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 56px);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text-primary);
}

.v3energy .v3energy-px .v3energy-px-a[b-5lq2wyczv7] { color: var(--gold); }
.v3energy .v3energy-px.v3energy-tick[b-5lq2wyczv7] { animation: v3energy-tickFlash-b-5lq2wyczv7 0.9s ease-out; }

@keyframes v3energy-tickFlash-b-5lq2wyczv7 {
    0%   { color: var(--gold); }
    100% { color: var(--text-primary); }
}

.v3energy .v3energy-band[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}

.v3energy .v3energy-msub[b-5lq2wyczv7] { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.v3energy .v3energy-msub strong[b-5lq2wyczv7] { color: var(--text-primary); }

.v3energy .v3energy-m-hero-foot[b-5lq2wyczv7] {
    padding: 14px 32px 18px;
    border-top: 1px dashed var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.v3energy .v3energy-vhf-it[b-5lq2wyczv7] { display: flex; flex-direction: column; gap: 4px; }

.v3energy .v3energy-vhf-l[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.v3energy .v3energy-vhf-v[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

/* Operator match list */
.v3energy .v3energy-opmatch-card[b-5lq2wyczv7] { padding: 0; }

.v3energy .v3energy-opmatch-head[b-5lq2wyczv7] {
    padding: 18px 26px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.v3energy .v3energy-opm-lbl[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.v3energy .v3energy-opm-h[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.v3energy .v3energy-opm-a[b-5lq2wyczv7] { color: var(--success); font-weight: 700; }

.v3energy .v3energy-opmatch-row[b-5lq2wyczv7] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    padding: 14px 26px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    transition: background .12s;
    cursor: pointer;
}

.v3energy .v3energy-opmatch-row:last-child[b-5lq2wyczv7] { border-bottom: none; }
.v3energy .v3energy-opmatch-row:hover[b-5lq2wyczv7] { background: var(--bg-elevated); }

.v3energy .v3energy-opm-it[b-5lq2wyczv7] { display: flex; flex-direction: column; gap: 3px; }

.v3energy .v3energy-opm-nm[b-5lq2wyczv7] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
}

.v3energy .v3energy-opm-sub[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}

.v3energy .v3energy-opm-badge[b-5lq2wyczv7] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--gold);
    background: var(--gold-soft);
    border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
    white-space: nowrap;
}

.v3energy .v3energy-opm-fit-high[b-5lq2wyczv7] {
    color: var(--success);
    background: color-mix(in oklab, var(--success) 12%, transparent);
    border-color: color-mix(in oklab, var(--success) 30%, transparent);
}

.v3energy .v3energy-opm-arr[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--primary);
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Process */
.v3energy .v3energy-proc-card[b-5lq2wyczv7] { padding: 24px 28px 24px; }

.v3energy .v3energy-proc-lbl[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.v3energy .v3energy-proc-h[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.v3energy .v3energy-proc-steps[b-5lq2wyczv7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.v3energy .v3energy-proc-step[b-5lq2wyczv7] {
    padding: 16px 18px 0 0;
    border-right: 1px solid var(--border-subtle);
    position: relative;
}

.v3energy .v3energy-proc-step:last-child[b-5lq2wyczv7] { border-right: none; }

.v3energy .v3energy-ps-n[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--gold);
    margin-bottom: 8px;
    font-weight: 600;
}

.v3energy .v3energy-ps-nm[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    margin: 0 0 5px;
    color: var(--text-primary);
}

.v3energy .v3energy-ps-ds[b-5lq2wyczv7] {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin: 0;
}

/* Submit */
.v3energy .v3energy-submit-card[b-5lq2wyczv7] {
    padding: 24px 28px 28px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--gold) 12%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border-top: 2px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.v3energy .v3energy-submit-card[b-5lq2wyczv7]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, color-mix(in oklab, var(--gold) 30%, transparent), transparent 60%);
}

.v3energy .v3energy-submit-head[b-5lq2wyczv7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    position: relative;
}

.v3energy .v3energy-submit-h[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
    color: var(--text-primary);
}

.v3energy .v3energy-submit-a[b-5lq2wyczv7] { color: var(--gold); }

.v3energy .v3energy-submit-p[b-5lq2wyczv7] {
    font-size: 13.5px;
    color: var(--text-secondary);
    max-width: 440px;
    margin: 8px 0 0;
    line-height: 1.5;
}

.v3energy .v3energy-ref[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    white-space: nowrap;
}

.v3energy .v3energy-submit-actions[b-5lq2wyczv7] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.v3energy .v3energy-submit-actions .v3energy-btn[b-5lq2wyczv7] { padding: 12px 20px; }

.v3energy .v3energy-snote[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.v3energy .v3energy-snote svg[b-5lq2wyczv7] { width: 14px; height: 14px; }

/* Notice */
.v3energy .v3energy-notice[b-5lq2wyczv7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3energy .v3energy-nic[b-5lq2wyczv7] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.v3energy .v3energy-nic svg[b-5lq2wyczv7] { width: 14px; height: 14px; }
.v3energy .v3energy-notice strong[b-5lq2wyczv7] { color: var(--text-primary); }

/* ───── FAQ ───── */
.v3energy .v3energy-faq[b-5lq2wyczv7] {
    padding: 56px 0 72px;
    border-top: 1px solid var(--border);
    margin-top: 48px;
}

.v3energy .v3energy-faq-head[b-5lq2wyczv7] { margin-bottom: 24px; }

.v3energy .v3energy-faq-lbl[b-5lq2wyczv7] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.v3energy .v3energy-faq-h[b-5lq2wyczv7] {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.v3energy .v3energy-faq-list[b-5lq2wyczv7] { max-width: 860px; }

.v3energy .v3energy-faq-item[b-5lq2wyczv7] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    margin-bottom: 10px;
    overflow: hidden;
}

.v3energy .v3energy-faq-item[open][b-5lq2wyczv7] { border-color: var(--border-hover); }

.v3energy .v3energy-faq-q[b-5lq2wyczv7] {
    cursor: pointer;
    list-style: none;
    padding: 16px 44px 16px 18px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
}

.v3energy .v3energy-faq-q[b-5lq2wyczv7]::-webkit-details-marker { display: none; }

.v3energy .v3energy-faq-q[b-5lq2wyczv7]::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    color: var(--gold);
}

.v3energy .v3energy-faq-item[open] .v3energy-faq-q[b-5lq2wyczv7]::after { content: "−"; }

.v3energy .v3energy-faq-a[b-5lq2wyczv7] {
    padding: 0 18px 16px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* ───── RESPONSIVE ───── */
@media (max-width: 1080px) {
    .v3energy .v3energy-form[b-5lq2wyczv7] { position: relative; top: 0; max-height: none; }
    .v3energy .v3energy-d-grid[b-5lq2wyczv7] { grid-template-columns: repeat(2, 1fr); }
    .v3energy .v3energy-proc-steps[b-5lq2wyczv7] { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .v3energy .v3energy-proc-step[b-5lq2wyczv7] { border-right: none; padding-right: 0; }
}

@media (max-width: 780px) {
    .v3energy .v3energy-head-row[b-5lq2wyczv7] { flex-direction: column; align-items: flex-start; gap: 18px; }
    .v3energy .v3energy-d-grid[b-5lq2wyczv7] { grid-template-columns: 1fr; }
    .v3energy .v3energy-submit-head[b-5lq2wyczv7] { flex-direction: column; gap: 14px; }
    .v3energy .v3energy-proc-steps[b-5lq2wyczv7] { grid-template-columns: 1fr; }
    .v3energy .v3energy-px[b-5lq2wyczv7] { font-size: 36px; }
}
/* /Components/Pages/Need.razor.rz.scp.css */
/* /need — Track 2 marketing-family dark, structure parity with
 * website/v3/SLYD Need v1.html.
 *
 * Dark surfaces from --slyd-bg-card / -bg-elevated / -bg-input.
 * Glass tokens (--slyd-card-bg / --slyd-bg-glass) are deliberately
 * NOT used here — they wash out on top of bg-body + particles. All
 * decoration is solid surfaces + radial-gradient overlays + accent
 * top borders + primary-glow shadows.
 *
 * Token-only — no hardcoded colors / spacings (except font-sizes
 * intentionally calibrated to mockup density).
 */

/* =========================
   PAGE SHELL
   ========================= */

.need-page[b-k7hpzvbtm6] {
    background: var(--slyd-bg-body);
    color: var(--slyd-text-primary);
    min-height: calc(100vh - var(--slyd-header-height));
    padding: 0 0 80px;
}

.need-container[b-k7hpzvbtm6] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) {
    .need-container[b-k7hpzvbtm6] { padding: 0 20px; }
}

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

.need-hero[b-k7hpzvbtm6] {
    position: relative;
    padding: 44px 0 28px;
    border-bottom: 1px solid var(--slyd-border);
    overflow: hidden;
}

.need-hero[b-k7hpzvbtm6]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(800px 400px at 80% 0%, var(--slyd-primary-glow), transparent 70%);
    opacity: 0.45;
}

.need-hero > *[b-k7hpzvbtm6] { position: relative; z-index: 1; }

.need-hero-row[b-k7hpzvbtm6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}

@media (max-width: 780px) {
    .need-hero-row[b-k7hpzvbtm6] { flex-direction: column; align-items: flex-start; gap: 18px; }
}

.need-hero-text[b-k7hpzvbtm6] { flex: 1; min-width: 0; }

.need-eyebrow[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--slyd-primary);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.need-eyebrow[b-k7hpzvbtm6]::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--slyd-primary);
}

.need-headline[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--slyd-text-primary);
    margin: 0 0 12px;
    text-wrap: balance;
}

.need-accent[b-k7hpzvbtm6] { color: var(--slyd-primary); }

.need-lede[b-k7hpzvbtm6] {
    font-size: 17px;
    line-height: 1.5;
    color: var(--slyd-text-secondary);
    max-width: 620px;
    margin: 0;
}

.need-badges[b-k7hpzvbtm6] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.need-badge[b-k7hpzvbtm6] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--slyd-border-hover);
    background: var(--slyd-bg-card);
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slyd-text-secondary);
}

.need-badge[b-k7hpzvbtm6]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slyd-primary);
    box-shadow: 0 0 0 3px var(--slyd-primary-soft);
}

/* =========================
   DOORS-MINI STRIP
   ========================= */

.need-doors[b-k7hpzvbtm6] {
    padding: 18px 0 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 780px) {
    .need-doors[b-k7hpzvbtm6] { flex-direction: column; }
}

.need-door[b-k7hpzvbtm6] {
    flex: 1;
    min-width: 200px;
    padding: 14px 16px;
    border: 1px solid var(--slyd-border);
    border-radius: var(--slyd-radius-lg);
    background: var(--slyd-bg-card);
    cursor: pointer;
    transition: border-color var(--slyd-transition-fast);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.need-door:hover[b-k7hpzvbtm6] { border-color: var(--slyd-border-hover); }

.need-door-on[b-k7hpzvbtm6] {
    border-color: var(--slyd-primary);
    background: linear-gradient(135deg, var(--slyd-primary-soft) 0%, var(--slyd-bg-card) 100%);
    cursor: default;
}

.need-door-eyebrow[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--slyd-text-tertiary);
    text-transform: uppercase;
}

.need-door-title[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: 600;
    font-size: 14.5px;
}

.need-door-on .need-door-title[b-k7hpzvbtm6] { color: var(--slyd-primary); }

/* =========================
   BODY GRID — form + match preview
   ========================= */

.need-grid[b-k7hpzvbtm6] {
    padding: 28px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 520px) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1080px) {
    .need-grid[b-k7hpzvbtm6] { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================
   FORM CARD
   ========================= */

.need-form-card[b-k7hpzvbtm6] {
    background: var(--slyd-bg-card);
    border: 1px solid var(--slyd-border);
    border-radius: var(--slyd-radius-xl);
    overflow: hidden;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

@media (max-width: 1080px) {
    .need-form-card[b-k7hpzvbtm6] { position: relative; top: 0; max-height: none; }
}

.need-fs[b-k7hpzvbtm6] {
    padding: 24px 26px;
    border-bottom: 1px solid var(--slyd-border);
}

.need-fs:last-of-type[b-k7hpzvbtm6] { border-bottom: none; }

.need-fs-head[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    font-weight: var(--slyd-font-weight-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.need-fs-n[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    display: inline-flex;
    width: 18px;
    height: 18px;
    background: var(--slyd-primary-soft);
    color: var(--slyd-primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: var(--slyd-font-weight-semibold);
}

.need-field[b-k7hpzvbtm6] {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.need-field:last-child[b-k7hpzvbtm6] { margin-bottom: 0; }

.need-field-label[b-k7hpzvbtm6] {
    font-size: 13.5px;
    color: var(--slyd-text-primary);
    font-weight: var(--slyd-font-weight-medium);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.need-hint[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    color: var(--slyd-text-tertiary);
    letter-spacing: 0.05em;
    font-weight: var(--slyd-font-weight-normal);
}

.need-hint-v[b-k7hpzvbtm6] {
    color: var(--slyd-primary);
    font-weight: var(--slyd-font-weight-semibold);
}

/* =========================
   PILLS (radio-like toggles)
   ========================= */

.need-pills[b-k7hpzvbtm6] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.need-pills-wide[b-k7hpzvbtm6] {
    /* used for region — more options, want them to wrap densely */
    gap: 5px;
}

.need-pill[b-k7hpzvbtm6] {
    padding: 8px 13px;
    font-family: var(--slyd-font-family);
    font-size: 13px;
    border-radius: var(--slyd-radius-md);
    background: var(--slyd-bg-input);
    border: 1px solid var(--slyd-border);
    color: var(--slyd-text-secondary);
    cursor: pointer;
    transition: all var(--slyd-transition-fast);
    white-space: nowrap;
    line-height: 1.2;
}

.need-pill:hover:not(:disabled):not(.need-pill-on)[b-k7hpzvbtm6] {
    border-color: var(--slyd-border-hover);
    color: var(--slyd-text-primary);
}

.need-pill:focus-visible[b-k7hpzvbtm6] {
    outline: none;
    border-color: var(--slyd-primary);
    box-shadow: 0 0 0 3px var(--slyd-primary-soft);
}

.need-pill-on[b-k7hpzvbtm6] {
    background: var(--slyd-primary-soft);
    border-color: var(--slyd-primary);
    color: var(--slyd-primary);
    font-weight: var(--slyd-font-weight-semibold);
}

.need-pill:disabled[b-k7hpzvbtm6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================
   SLIDER + NUMBER INPUT
   ========================= */

.need-qty-row[b-k7hpzvbtm6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.need-qty-row .need-rng[b-k7hpzvbtm6] { flex: 1; min-width: 0; }

/* Slider — cross-browser implementation.
 *
 * The Chrome/Safari/Edge fill comes from a LITERAL linear-gradient that
 * Need.razor computes in C# and writes to the input's inline `style`
 * attribute (QuantityTrackStyle / BudgetTrackStyle). The runnable-track
 * pseudo-element is set transparent so the input's background-gradient
 * shows through. This bypasses the WebKit/Blink bug where a
 * `var(--pct)` declared on the input doesn't inherit into the
 * runnable-track's gradient color-stop positions — that was the cause
 * of the flat track in the prior pass.
 *
 * Firefox uses an entirely separate native model — gradients on the
 * track don't paint the filled portion. ::-moz-range-progress is the
 * only thing that does. We paint progress with --slyd-primary and the
 * unfilled track with --slyd-bg-input.
 *
 * Mockup values (SLYD Need v1.html L106-107) verbatim: track 5px /
 * radius 3px / thumb 16px with 3px bg-card inset border + 1px primary
 * outer ring. No transform:scale on hover (mockup doesn't have it). */
.need-rng[b-k7hpzvbtm6] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    /* Default unfilled background — overridden inline per-slider with the
     * literal-stop gradient from C# (QuantityTrackStyle / BudgetTrackStyle).
     * Kept here so a slider without an inline style attribute still reads as
     * the form-surface dark instead of the page bg. */
    background: var(--slyd-bg-input);
    border-radius: 3px;
    outline: none;
    margin: 0;
    cursor: pointer;
}

/* Chrome / Safari / Edge — transparent runnable-track lets the input's
 * inline-styled background gradient show through. */
.need-rng[b-k7hpzvbtm6]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: transparent;
    border: none;
}

.need-rng[b-k7hpzvbtm6]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slyd-primary);
    border: 3px solid var(--slyd-bg-card);
    box-shadow: 0 0 0 1px var(--slyd-primary);
    cursor: pointer;
    /* Center the 16px thumb on the 5px track: -(16-5)/2 = -5.5px */
    margin-top: -5.5px;
}

/* Firefox — track (unfilled) + progress (filled, native).
 * NOTE: Firefox ignores the input's background gradient for the slider
 * track entirely — these two pseudo-elements are the only way to paint
 * the fill in FF. */
.need-rng[b-k7hpzvbtm6]::-moz-range-track {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--slyd-bg-input);
    border: none;
}

.need-rng[b-k7hpzvbtm6]::-moz-range-progress {
    height: 5px;
    border-radius: 3px;
    background: var(--slyd-primary);
}

.need-rng[b-k7hpzvbtm6]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slyd-primary);
    border: 3px solid var(--slyd-bg-card);
    box-shadow: 0 0 0 1px var(--slyd-primary);
    cursor: pointer;
}

.need-rng:disabled[b-k7hpzvbtm6] { opacity: 0.5; cursor: not-allowed; }

.need-rng-scale[b-k7hpzvbtm6] {
    display: flex;
    justify-content: space-between;
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    color: var(--slyd-text-muted);
    letter-spacing: 0.06em;
    margin-top: 6px;   /* mockup L108: rng-scale margin-top 6px */
}

.need-num-inp[b-k7hpzvbtm6] {
    display: inline-flex;
    align-items: stretch;
    background: var(--slyd-bg-input);
    border: 1px solid var(--slyd-border);
    border-radius: var(--slyd-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color var(--slyd-transition-fast),
                box-shadow var(--slyd-transition-fast);
}

.need-num-inp:focus-within[b-k7hpzvbtm6] {
    border-color: var(--slyd-primary);
    box-shadow: 0 0 0 3px var(--slyd-primary-soft);
}

.need-num-inp input[b-k7hpzvbtm6] {
    width: 70px;
    padding: 8px 10px;
    font-family: var(--slyd-font-family-mono);
    font-size: 13.5px;
    font-weight: var(--slyd-font-weight-semibold);
    color: var(--slyd-text-primary);
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    -moz-appearance: textfield;
}

.need-num-inp input[b-k7hpzvbtm6]::-webkit-outer-spin-button,
.need-num-inp input[b-k7hpzvbtm6]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.need-num-unit[b-k7hpzvbtm6] {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 0;
    font-family: var(--slyd-font-family-mono);
    font-size: 11px;
    color: var(--slyd-text-tertiary);
    letter-spacing: 0.08em;
}

/* =========================
   FORM SUBMIT + LIVE FOOT
   ========================= */

.need-form-actions[b-k7hpzvbtm6] {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--slyd-border);
}

.need-submit[b-k7hpzvbtm6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--slyd-accent-gold) 0%, var(--slyd-accent-gold-dark) 100%);
    border: 1px solid var(--slyd-accent-gold);
    border-radius: var(--slyd-radius-md);
    font-family: var(--slyd-font-family);
    font-size: 14px;
    font-weight: var(--slyd-font-weight-semibold);
    cursor: pointer;
    transition: transform var(--slyd-transition-fast);
}

.need-submit:hover:not(:disabled)[b-k7hpzvbtm6] { transform: translateY(-1px); }

.need-submit:disabled[b-k7hpzvbtm6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.need-spinner[b-k7hpzvbtm6] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--slyd-radius-full);
    animation: need-spin-b-k7hpzvbtm6 0.7s linear infinite;
    opacity: 0.7;
}

@keyframes need-spin-b-k7hpzvbtm6 {
    to { transform: rotate(360deg); }
}

.need-validation[b-k7hpzvbtm6] {
    color: var(--slyd-danger-light);
    font-size: 11.5px;
    margin-top: 2px;
}

.need-error[b-k7hpzvbtm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--slyd-danger-bg);
    border: 1px solid color-mix(in oklab, var(--slyd-danger) 50%, transparent);
    border-radius: var(--slyd-radius-md);
    color: var(--slyd-danger-light);
    font-size: 13px;
}

.need-form-foot[b-k7hpzvbtm6] {
    padding: 18px 26px;   /* mockup L120: .form-foot padding 18px 26px */
    background: var(--slyd-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.need-live[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--slyd-text-tertiary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.need-live[b-k7hpzvbtm6]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slyd-success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--slyd-success) 25%, transparent);
    animation: need-pulse-b-k7hpzvbtm6 1.8s ease-in-out infinite;
}

@keyframes need-pulse-b-k7hpzvbtm6 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; transform: scale(1.25); }
}

.need-form-ref[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--slyd-text-tertiary);
    padding: 4px 9px;
    background: var(--slyd-bg-card);
    border: 1px solid var(--slyd-border-subtle);
    border-radius: var(--slyd-radius-sm);
    text-transform: uppercase;
}

/* =========================
   MATCH PREVIEW COLUMN
   ========================= */

.need-match[b-k7hpzvbtm6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.need-result-dim[b-k7hpzvbtm6] { opacity: 0.45; transition: opacity var(--slyd-transition); }

.need-notice[b-k7hpzvbtm6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--slyd-border);
    background: var(--slyd-bg-card);
    border-radius: var(--slyd-radius-md);
    color: var(--slyd-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.need-notice strong[b-k7hpzvbtm6] { color: var(--slyd-text-primary); font-weight: var(--slyd-font-weight-semibold); }

.need-notice-ic[b-k7hpzvbtm6] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--slyd-primary-soft);
    color: var(--slyd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.need-notice-ic i[b-k7hpzvbtm6] { font-size: 12px; }

.need-mc[b-k7hpzvbtm6] {
    background: var(--slyd-bg-card);
    border: 1px solid var(--slyd-border);
    border-radius: var(--slyd-radius-xl);
    overflow: hidden;
}

.need-mc-eyebrow[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
    margin-bottom: 6px;
}

.need-mc-title[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-semibold);
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--slyd-text-primary);
    margin: 0;
}

.need-mc-accent[b-k7hpzvbtm6] {
    color: var(--slyd-primary);
    font-weight: var(--slyd-font-weight-bold);
}

.need-mc-head[b-k7hpzvbtm6] {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--slyd-border);
}

/* =========================
   HERO KPI CARD
   ========================= */

.need-hero-card[b-k7hpzvbtm6] {
    background: linear-gradient(135deg, var(--slyd-primary-soft) 0%, var(--slyd-bg-card) 100%);
    border-top: 2px solid var(--slyd-primary);
    position: relative;
}

.need-hero-card[b-k7hpzvbtm6]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--slyd-primary-glow), transparent 60%);
    pointer-events: none;
}

.need-hero-card-in[b-k7hpzvbtm6] {
    padding: 28px 30px 22px;
    position: relative;
}

.need-hero-coverage[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: 700;
    font-size: clamp(34px, 4.5vw, 46px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--slyd-primary);
}

.need-hero-coverage-pending[b-k7hpzvbtm6] {
    color: var(--slyd-text-muted);
    font-weight: var(--slyd-font-weight-semibold);
}

.need-hero-sub[b-k7hpzvbtm6] {
    font-size: 14px;
    color: var(--slyd-text-secondary);
    margin-top: 8px;
}

.need-hero-sub-empty[b-k7hpzvbtm6] {
    color: var(--slyd-text-tertiary);
    font-style: italic;
}

.need-hero-sub strong[b-k7hpzvbtm6] {
    color: var(--slyd-text-primary);
    font-weight: var(--slyd-font-weight-semibold);
}

.need-hero-foot[b-k7hpzvbtm6] {
    padding: 14px 30px 18px;
    border-top: 1px dashed var(--slyd-border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
}

.need-hero-foot-it[b-k7hpzvbtm6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.need-hero-foot-it .k[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
}

.need-hero-foot-it .v[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-semibold);
    font-size: 15px;
    color: var(--slyd-text-primary);
}

.need-stat-pending[b-k7hpzvbtm6] { color: var(--slyd-text-tertiary); font-weight: var(--slyd-font-weight-normal); }

/* =========================
   SOURCES ROWS
   ========================= */

.need-src-row[b-k7hpzvbtm6] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    padding: 13px 24px;
    border-bottom: 1px solid var(--slyd-border-subtle);
    align-items: center;
}

.need-src-row:last-child[b-k7hpzvbtm6] { border-bottom: none; }

.need-src-ic[b-k7hpzvbtm6] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.need-src-ic i[b-k7hpzvbtm6] { font-size: 13px; }

.need-src-ic-inv[b-k7hpzvbtm6] {
    background: color-mix(in oklab, var(--slyd-success) 14%, transparent);
    color: var(--slyd-success);
}

.need-src-ic-fwd[b-k7hpzvbtm6] {
    background: var(--slyd-primary-soft);
    color: var(--slyd-primary);
}

.need-src-ic-oem[b-k7hpzvbtm6] {
    background: var(--slyd-accent-gold-soft);
    color: var(--slyd-accent-gold);
}

.need-src-t[b-k7hpzvbtm6] {
    font-size: 13px;
    font-weight: var(--slyd-font-weight-medium);
    color: var(--slyd-text-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.need-src-s[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--slyd-text-tertiary);
}

.need-src-cov[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-bold);
    font-size: 14px;
    color: var(--slyd-text-primary);
    text-align: right;
    min-width: 70px;
}

.need-src-cov .u[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 9.5px;
    color: var(--slyd-text-tertiary);
    font-weight: var(--slyd-font-weight-normal);
}

.need-src-px[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 11px;
    color: var(--slyd-text-secondary);
    text-align: right;
    min-width: 70px;
}

/* =========================
   PROCESS STRIP
   ========================= */

.need-proc[b-k7hpzvbtm6] {
    padding: 24px 28px;
}

.need-psteps[b-k7hpzvbtm6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 14px;
}

@media (max-width: 720px) {
    .need-psteps[b-k7hpzvbtm6] { grid-template-columns: 1fr; gap: 18px; }
}

.need-pst[b-k7hpzvbtm6] {
    padding: 0 16px 0 0;
    border-right: 1px solid var(--slyd-border-subtle);
}

.need-pst:last-child[b-k7hpzvbtm6] { border-right: none; }

@media (max-width: 720px) {
    .need-pst[b-k7hpzvbtm6] { border-right: none; padding-right: 0; }
}

.need-pn[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--slyd-primary);
    margin-bottom: 8px;
    font-weight: var(--slyd-font-weight-semibold);
}

.need-pnm[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-semibold);
    font-size: 14px;
    color: var(--slyd-text-primary);
    margin: 0 0 5px;
}

.need-pd[b-k7hpzvbtm6] {
    font-size: 12px;
    color: var(--slyd-text-tertiary);
    line-height: 1.45;
    margin: 0;
}

/* =========================
   CTA CARD — gold gradient marketing flourish
   ========================= */

.need-cta-card[b-k7hpzvbtm6] {
    padding: 24px 28px 28px;
    background: linear-gradient(135deg, var(--slyd-accent-gold-soft) 0%, var(--slyd-bg-card) 100%);
    border-top: 2px solid var(--slyd-accent-gold);
    position: relative;
}

.need-cta-card[b-k7hpzvbtm6]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, color-mix(in oklab, var(--slyd-accent-gold) 30%, transparent), transparent 60%);
    pointer-events: none;
}

.need-cta-h[b-k7hpzvbtm6] { position: relative; margin-bottom: 18px; }

/* Post-requirement contact form — inline grid of 4 small inputs sitting
   between the CTA copy and the action buttons. Renders only on the
   /need page (scoped CSS). Optional fields — anonymous demands are valid. */

.need-post-contact[b-k7hpzvbtm6] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.need-post-row[b-k7hpzvbtm6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.need-post-inp[b-k7hpzvbtm6] {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--slyd-font-family);
    font-size: 13.5px;
    color: var(--slyd-text-primary);
    background: var(--slyd-bg-input);
    border: 1px solid var(--slyd-border);
    border-radius: 8px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

.need-post-inp:focus[b-k7hpzvbtm6] {
    border-color: var(--slyd-primary);
    box-shadow: 0 0 0 3px var(--slyd-primary-soft);
}

.need-post-inp[b-k7hpzvbtm6]::placeholder { color: var(--slyd-text-muted); }

@media (max-width: 640px) {
    .need-post-row[b-k7hpzvbtm6] { grid-template-columns: 1fr; }
}

.need-cta-headline[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-bold);
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--slyd-text-primary);
    margin: 0;
    line-height: 1.15;
}

.need-cta-accent[b-k7hpzvbtm6] { color: var(--slyd-accent-gold); }

.need-cta-body[b-k7hpzvbtm6] {
    font-size: 13.5px;
    color: var(--slyd-text-secondary);
    max-width: 460px;
    margin: 8px 0 0;
    line-height: 1.5;
}

.need-cta-actions[b-k7hpzvbtm6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: relative;
}

.need-cta-btn[b-k7hpzvbtm6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--slyd-primary);
    color: var(--slyd-text-inverse);
    border: 1px solid transparent;
    border-radius: var(--slyd-radius-md);
    font-family: var(--slyd-font-family);
    font-size: 13.5px;
    font-weight: var(--slyd-font-weight-semibold);
    text-decoration: none;
    transition: background var(--slyd-transition-fast), transform var(--slyd-transition-fast);
}

.need-cta-btn:hover[b-k7hpzvbtm6] {
    background: var(--slyd-primary-dark);
    transform: translateY(-1px);
}

.need-cta-btn-ghost[b-k7hpzvbtm6] {
    background: transparent;
    color: var(--slyd-text-secondary);
    border-color: var(--slyd-border-hover);
}

.need-cta-btn-ghost:hover[b-k7hpzvbtm6] {
    background: transparent;
    color: var(--slyd-text-primary);
    border-color: var(--slyd-text-tertiary);
}

.need-cta-note[b-k7hpzvbtm6] {
    margin-left: auto;
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--slyd-text-tertiary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.need-cta-note i[b-k7hpzvbtm6] { font-size: 11px; }

@media (max-width: 720px) {
    .need-cta-note[b-k7hpzvbtm6] { margin-left: 0; }
}

/* =========================
   FAQ
   ========================= */

.need-faq[b-k7hpzvbtm6] {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--slyd-border);
}

.need-faq-head[b-k7hpzvbtm6] {
    margin-bottom: 20px;
    max-width: 880px;
}

.need-faq-eyebrow[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
    margin-bottom: 6px;
}

.need-faq-title[b-k7hpzvbtm6] {
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-semibold);
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--slyd-text-primary);
    margin: 0;
}

.need-faq-list[b-k7hpzvbtm6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.need-faq-item[b-k7hpzvbtm6] {
    background: var(--slyd-bg-card);
    border: 1px solid var(--slyd-border);
    border-radius: var(--slyd-radius-xl);
    overflow: hidden;
}

.need-faq-q[b-k7hpzvbtm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--slyd-font-family-heading);
    font-weight: var(--slyd-font-weight-medium);
    font-size: 15.5px;
    letter-spacing: -0.01em;
    color: var(--slyd-text-primary);
    list-style: none;
}

.need-faq-q[b-k7hpzvbtm6]::-webkit-details-marker { display: none; }

.need-faq-q[b-k7hpzvbtm6]::after {
    content: "+";
    font-family: var(--slyd-font-family-mono);
    font-size: 18px;
    line-height: 1;
    color: var(--slyd-text-tertiary);
    flex-shrink: 0;
    transition: transform .15s;
}

.need-faq-item[open] .need-faq-q[b-k7hpzvbtm6]::after {
    transform: rotate(45deg);
    color: var(--slyd-primary);
}

.need-faq-q:hover[b-k7hpzvbtm6] { background: var(--slyd-bg-elevated); }

.need-faq-a[b-k7hpzvbtm6] {
    padding: 0 22px 18px;
    margin: 0;
    font-size: 14px;
    color: var(--slyd-text-secondary);
    line-height: 1.6;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound-section[b-in1vj6bv7n] {
    padding: 120px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.notfound-content[b-in1vj6bv7n] {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.notfound-code[b-in1vj6bv7n] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: #06b6d4;
}

.notfound-content h1[b-in1vj6bv7n] {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: #f1f5f9;
    margin: 12px 0 8px;
}

.notfound-content p[b-in1vj6bv7n] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 32px;
}

.notfound-actions[b-in1vj6bv7n] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
}

.notfound-links[b-in1vj6bv7n] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 32px;
}

.notfound-links a[b-in1vj6bv7n] {
    font-size: 0.9375rem;
    color: #cbd5e1;
    text-decoration: none;
}

.notfound-links a:hover[b-in1vj6bv7n] {
    color: #06b6d4;
}

@media (max-width: 480px) {
    .notfound-section[b-in1vj6bv7n] {
        padding: 80px 0;
    }

    .notfound-actions[b-in1vj6bv7n] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Components/Pages/NvidiaInception.razor.rz.scp.css */
/* ===========================================
   NVIDIA INCEPTION PAGE - SLYD DESIGN SYSTEM
   =========================================== */

/* ===========================================
   3D GPU CHIP HERO PREVIEW
   =========================================== */
.inception-scene[b-8mxleftpqz] {
    position: relative;
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

/* Ambient glow */
.inception-glow[b-8mxleftpqz] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118, 185, 0, 0.2) 0%, rgba(118, 185, 0, 0.05) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: inception-pulse-b-8mxleftpqz 4s ease-in-out infinite;
    pointer-events: none;
}

.inception-glow-ring[b-8mxleftpqz] {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(118, 185, 0, 0.08);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: inception-ring-pulse-b-8mxleftpqz 4s ease-in-out infinite 0.5s;
    pointer-events: none;
}

@keyframes inception-pulse-b-8mxleftpqz {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes inception-ring-pulse-b-8mxleftpqz {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}

/* 3D chip wrapper - handles the float + tilt */
.inception-chip-wrapper[b-8mxleftpqz] {
    position: relative;
    transform-style: preserve-3d;
    animation: inception-float-b-8mxleftpqz 6s ease-in-out infinite;
}

@keyframes inception-float-b-8mxleftpqz {
    0%, 100% { transform: rotateX(25deg) rotateY(-15deg) rotateZ(0deg) translateY(0px); }
    50% { transform: rotateX(25deg) rotateY(-15deg) rotateZ(0deg) translateY(-12px); }
}

/* The chip container */
.inception-chip[b-8mxleftpqz] {
    position: relative;
    width: 280px;
    height: 240px;
    transform-style: preserve-3d;
}

/* Chip faces */
.inception-chip-face[b-8mxleftpqz] {
    position: absolute;
    backface-visibility: hidden;
}

/* Top face - the main GPU surface */
.inception-chip-top[b-8mxleftpqz] {
    width: 280px;
    height: 240px;
    background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 50%, #151b28 100%);
    border: 1px solid rgba(118, 185, 0, 0.25);
    border-radius: 12px;
    transform: translateZ(12px);
    box-shadow:
        0 0 30px rgba(118, 185, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Side face for 3D depth */
.inception-chip-side[b-8mxleftpqz] {
    width: 280px;
    height: 24px;
    background: linear-gradient(180deg, #0d1117 0%, #080b10 100%);
    border-left: 1px solid rgba(118, 185, 0, 0.15);
    border-right: 1px solid rgba(118, 185, 0, 0.15);
    border-bottom: 1px solid rgba(118, 185, 0, 0.1);
    border-radius: 0 0 12px 12px;
    transform: rotateX(-90deg) translateZ(228px) translateY(-12px);
    transform-origin: top center;
}

/* Front face for 3D depth */
.inception-chip-front[b-8mxleftpqz] {
    width: 24px;
    height: 240px;
    background: linear-gradient(90deg, #080b10 0%, #0d1117 100%);
    border-top: 1px solid rgba(118, 185, 0, 0.15);
    border-bottom: 1px solid rgba(118, 185, 0, 0.1);
    border-right: 1px solid rgba(118, 185, 0, 0.1);
    border-radius: 0 12px 12px 0;
    transform: rotateY(90deg) translateZ(256px) translateX(-12px);
    transform-origin: left center;
}

/* Die (center processor) */
.inception-chip-die[b-8mxleftpqz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, #1e2a1e 0%, #0f1a0f 50%, #162016 100%);
    border: 1px solid rgba(118, 185, 0, 0.4);
    border-radius: 4px;
    box-shadow:
        0 0 20px rgba(118, 185, 0, 0.12),
        inset 0 0 15px rgba(118, 185, 0, 0.05);
    overflow: hidden;
}

.inception-die-grid[b-8mxleftpqz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    padding: 8px;
    height: calc(100% - 24px);
}

.inception-die-cell[b-8mxleftpqz] {
    background: rgba(118, 185, 0, 0.06);
    border: 1px solid rgba(118, 185, 0, 0.1);
    border-radius: 1px;
    animation: inception-cell-flicker-b-8mxleftpqz 3s ease-in-out infinite;
}

.inception-die-cell:nth-child(odd)[b-8mxleftpqz] {
    animation-delay: 0.5s;
}

.inception-die-cell:nth-child(3n)[b-8mxleftpqz] {
    animation-delay: 1s;
}

.inception-die-cell:nth-child(4n+1)[b-8mxleftpqz] {
    animation-delay: 1.5s;
}

@keyframes inception-cell-flicker-b-8mxleftpqz {
    0%, 100% { background: rgba(118, 185, 0, 0.06); }
    50% { background: rgba(118, 185, 0, 0.15); }
}

.inception-die-label[b-8mxleftpqz] {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.5625rem;
    font-weight: 700;
    color: rgba(118, 185, 0, 0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Circuit traces */
.inception-chip-traces[b-8mxleftpqz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.inception-trace[b-8mxleftpqz] {
    position: absolute;
    background: rgba(118, 185, 0, 0.08);
}

.inception-trace-1[b-8mxleftpqz] {
    top: 30px;
    left: 20px;
    width: 45px;
    height: 1px;
}

.inception-trace-2[b-8mxleftpqz] {
    top: 60px;
    right: 20px;
    width: 45px;
    height: 1px;
}

.inception-trace-3[b-8mxleftpqz] {
    bottom: 50px;
    left: 25px;
    width: 40px;
    height: 1px;
}

.inception-trace-4[b-8mxleftpqz] {
    bottom: 35px;
    right: 25px;
    width: 40px;
    height: 1px;
}

/* HBM memory stacks */
.inception-hbm[b-8mxleftpqz] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 80px;
    background: linear-gradient(180deg, #1a2030 0%, #0f1520 100%);
    border: 1px solid rgba(118, 185, 0, 0.15);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inception-hbm span[b-8mxleftpqz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.375rem;
    color: rgba(118, 185, 0, 0.4);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.inception-hbm-left[b-8mxleftpqz] {
    left: 18px;
}

.inception-hbm-right[b-8mxleftpqz] {
    right: 18px;
}

/* Orbiting particles */
.inception-particle[b-8mxleftpqz] {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #76b900;
    pointer-events: none;
}

.inception-p1[b-8mxleftpqz] {
    top: 20%;
    left: 15%;
    opacity: 0.6;
    animation: inception-orbit-1-b-8mxleftpqz 8s linear infinite;
}

.inception-p2[b-8mxleftpqz] {
    top: 70%;
    right: 20%;
    width: 3px;
    height: 3px;
    opacity: 0.4;
    animation: inception-orbit-2-b-8mxleftpqz 10s linear infinite;
}

.inception-p3[b-8mxleftpqz] {
    top: 40%;
    left: 8%;
    width: 2px;
    height: 2px;
    opacity: 0.5;
    animation: inception-orbit-3-b-8mxleftpqz 7s linear infinite;
}

.inception-p4[b-8mxleftpqz] {
    bottom: 25%;
    right: 10%;
    width: 3px;
    height: 3px;
    opacity: 0.3;
    animation: inception-orbit-1-b-8mxleftpqz 12s linear infinite reverse;
}

.inception-p5[b-8mxleftpqz] {
    top: 10%;
    left: 50%;
    width: 2px;
    height: 2px;
    opacity: 0.4;
    animation: inception-orbit-2-b-8mxleftpqz 9s linear infinite reverse;
}

@keyframes inception-orbit-1-b-8mxleftpqz {
    0% { transform: translate(0, 0); opacity: 0.6; }
    25% { transform: translate(20px, -15px); opacity: 0.3; }
    50% { transform: translate(0, -25px); opacity: 0.6; }
    75% { transform: translate(-20px, -15px); opacity: 0.3; }
    100% { transform: translate(0, 0); opacity: 0.6; }
}

@keyframes inception-orbit-2-b-8mxleftpqz {
    0% { transform: translate(0, 0); opacity: 0.4; }
    25% { transform: translate(-15px, 10px); opacity: 0.2; }
    50% { transform: translate(-25px, 0); opacity: 0.5; }
    75% { transform: translate(-15px, -10px); opacity: 0.2; }
    100% { transform: translate(0, 0); opacity: 0.4; }
}

@keyframes inception-orbit-3-b-8mxleftpqz {
    0% { transform: translate(0, 0); opacity: 0.5; }
    33% { transform: translate(12px, -20px); opacity: 0.2; }
    66% { transform: translate(-12px, -10px); opacity: 0.5; }
    100% { transform: translate(0, 0); opacity: 0.5; }
}

/* ===========================================
   NVIDIA TAG OVERRIDE
   =========================================== */
.nvidia-tag[b-8mxleftpqz] {
    background: rgba(118, 185, 0, 0.12) !important;
    color: #76b900 !important;
    border-color: rgba(118, 185, 0, 0.25) !important;
}

/* ===========================================
   BENEFITS GRID
   =========================================== */
.inception-benefits-grid[b-8mxleftpqz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.inception-benefit-card[b-8mxleftpqz] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 32px;
    transition: all 0.3s ease;
}

.inception-benefit-card:hover[b-8mxleftpqz] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(118, 185, 0, 0.2);
    transform: translateY(-4px);
}

.inception-benefit-icon[b-8mxleftpqz] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.inception-benefit-icon.nvidia-green[b-8mxleftpqz] {
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
}

.inception-benefit-icon :deep(svg)[b-8mxleftpqz] {
    width: 22px;
    height: 22px;
}

.inception-benefit-card h3[b-8mxleftpqz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 10px;
}

.inception-benefit-card p[b-8mxleftpqz] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 16px;
}

.inception-benefit-tags[b-8mxleftpqz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inception-benefit-tags span[b-8mxleftpqz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #cbd5e1;
    background: rgba(118, 185, 0, 0.08);
    border: 1px solid rgba(118, 185, 0, 0.15);
    padding: 4px 10px;
    border-radius: 4px;
}

/* ===========================================
   GPU CATALOG
   =========================================== */
.inception-gpu-catalog[b-8mxleftpqz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.inception-gpu-family[b-8mxleftpqz] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.inception-gpu-family-header[b-8mxleftpqz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(118, 185, 0, 0.04);
}

.inception-gpu-family-header h3[b-8mxleftpqz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.inception-gpu-gen[b-8mxleftpqz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #76b900;
    background: rgba(118, 185, 0, 0.1);
    border: 1px solid rgba(118, 185, 0, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inception-gpu-list[b-8mxleftpqz] {
    padding: 8px;
}

.inception-gpu-item[b-8mxleftpqz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.inception-gpu-item:hover[b-8mxleftpqz] {
    background: rgba(118, 185, 0, 0.04);
}

.inception-gpu-name[b-8mxleftpqz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f1f5f9;
}

.inception-gpu-spec[b-8mxleftpqz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #64748b;
}

.inception-gpu-note[b-8mxleftpqz] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #64748b;
    text-align: center;
}

.inception-gpu-note a[b-8mxleftpqz] {
    color: #76b900;
    text-decoration: none;
    transition: color 0.2s ease;
}

.inception-gpu-note a:hover[b-8mxleftpqz] {
    color: #8dd619;
    text-decoration: underline;
}

/* ===========================================
   STEPS
   =========================================== */
.inception-steps[b-8mxleftpqz] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
}

.inception-step[b-8mxleftpqz] {
    display: flex;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.inception-step:last-child[b-8mxleftpqz] {
    border-bottom: none;
}

.inception-step-number[b-8mxleftpqz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #76b900;
    opacity: 0.6;
    flex-shrink: 0;
    width: 48px;
    line-height: 1;
    padding-top: 4px;
}

.inception-step-content h3[b-8mxleftpqz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.inception-step-content p[b-8mxleftpqz] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   CTA
   =========================================== */
.inception-cta[b-8mxleftpqz] {
    padding: 100px 0;
    background: linear-gradient(135deg, #0F172A 0%, #020617 100%);
    border-top: 1px solid rgba(118, 185, 0, 0.1);
}

.inception-cta-content[b-8mxleftpqz] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.inception-cta-badge[b-8mxleftpqz] {
    max-width: 200px;
    height: auto;
    margin-bottom: 32px;
    opacity: 0.8;
}

.inception-cta-content h2[b-8mxleftpqz] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
}

.inception-cta-content p[b-8mxleftpqz] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 32px;
}

.inception-cta-actions[b-8mxleftpqz] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .inception-gpu-catalog[b-8mxleftpqz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .inception-benefits-grid[b-8mxleftpqz] {
        grid-template-columns: 1fr;
    }

    .inception-scene[b-8mxleftpqz] {
        height: 360px;
        max-width: 480px;
        margin: 0 auto;
    }

    .inception-chip-top[b-8mxleftpqz] {
        width: 240px;
        height: 200px;
    }

    .inception-chip[b-8mxleftpqz] {
        width: 240px;
        height: 200px;
    }

    .inception-chip-die[b-8mxleftpqz] {
        width: 90px;
        height: 90px;
    }

}

@media (max-width: 768px) {
    .inception-gpu-catalog[b-8mxleftpqz] {
        grid-template-columns: 1fr;
    }

    .inception-cta-content h2[b-8mxleftpqz] {
        font-size: 1.75rem;
    }

    .inception-step[b-8mxleftpqz] {
        gap: 16px;
    }

    .inception-gpu-family-header[b-8mxleftpqz] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .inception-scene[b-8mxleftpqz] {
        height: 320px;
    }

}

@media (max-width: 480px) {
    .inception-cta-actions[b-8mxleftpqz] {
        flex-direction: column;
    }

    .inception-cta-actions :deep(.btn-gold)[b-8mxleftpqz],
    .inception-cta-actions :deep(.btn-outline)[b-8mxleftpqz] {
        width: 100%;
        justify-content: center;
    }

    .inception-benefit-card[b-8mxleftpqz] {
        padding: 24px;
    }

    .inception-step-number[b-8mxleftpqz] {
        font-size: 1.25rem;
        width: 36px;
    }
}
/* /Components/Pages/Platform/Architecture.razor.rz.scp.css */
/* ============================================================
   Platform Architecture (/platform/architecture) — Track 2 V3.
   Mockup-verbatim CSS from SLYD Cloud v1.html (L33-229),
   namespaced v3arch-, scoped under .v3arch wrapper.
   ============================================================ */

.v3arch[b-2o8w505bgf] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04));
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3arch *[b-2o8w505bgf],
.v3arch *[b-2o8w505bgf]::before,
.v3arch *[b-2o8w505bgf]::after { box-sizing: border-box; }

.v3arch a[b-2o8w505bgf] { color: inherit; text-decoration: none; }
.v3arch button[b-2o8w505bgf] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3arch .v3arch-wrap[b-2o8w505bgf] { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 780px) { .v3arch .v3arch-wrap[b-2o8w505bgf] { padding: 0 20px; } }

.v3arch .v3arch-a[b-2o8w505bgf] { color: var(--primary); }

/* Buttons */
.v3arch .v3arch-btn[b-2o8w505bgf] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3arch .v3arch-btn-primary[b-2o8w505bgf] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3arch .v3arch-btn-primary:hover[b-2o8w505bgf] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3arch .v3arch-btn-indigo[b-2o8w505bgf] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.v3arch .v3arch-btn-indigo:hover[b-2o8w505bgf] { filter: brightness(1.1); transform: translateY(-1px); }

.v3arch .v3arch-arr[b-2o8w505bgf] { font-family: var(--font-mono); opacity: .7; }

/* ───── HERO ───── */
.v3arch .v3arch-hero[b-2o8w505bgf] { position: relative; overflow: hidden; padding: 80px 0 48px; }

.v3arch .v3arch-hero[b-2o8w505bgf]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 600px at 75% 0%, var(--primary-glow), transparent 65%),
                radial-gradient(700px 500px at 0% 100%, color-mix(in oklab, var(--secondary) 18%, transparent), transparent 60%);
    opacity: .6;
}

.v3arch .v3arch-hero[b-2o8w505bgf]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 600px at 60% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 600px at 60% 30%, #000 30%, transparent 75%);
}

.v3arch .v3arch-eyebrow[b-2o8w505bgf] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 20px;
}

.v3arch .v3arch-eyebrow[b-2o8w505bgf]::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

.v3arch .v3arch-h1[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 84px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    max-width: 1100px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3arch .v3arch-sub[b-2o8w505bgf] {
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--text-secondary);
    max-width: 720px;
    line-height: 1.5;
    margin: 0 0 48px;
}

/* ───── PATH CARDS ───── */
.v3arch .v3arch-paths[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 1100px;
}

.v3arch .v3arch-path[b-2o8w505bgf] {
    position: relative;
    padding: 36px 32px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}

.v3arch .v3arch-path:hover[b-2o8w505bgf] { transform: translateY(-3px); }

.v3arch .v3arch-path[b-2o8w505bgf]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .5;
}

.v3arch .v3arch-path-license[b-2o8w505bgf] { border-color: color-mix(in oklab, var(--primary) 35%, transparent); }
.v3arch .v3arch-path-license:hover[b-2o8w505bgf] { border-color: var(--primary); box-shadow: 0 20px 60px -20px var(--primary-glow); }
.v3arch .v3arch-path-license[b-2o8w505bgf]::before { background: radial-gradient(circle, var(--primary-glow), transparent 60%); }

.v3arch .v3arch-path-connect[b-2o8w505bgf] { border-color: color-mix(in oklab, var(--gold) 35%, transparent); }
.v3arch .v3arch-path-connect:hover[b-2o8w505bgf] { border-color: var(--gold); box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--gold) 30%, transparent); }
.v3arch .v3arch-path-connect[b-2o8w505bgf]::before { background: radial-gradient(circle, color-mix(in oklab, var(--gold) 30%, transparent), transparent 60%); }

.v3arch .v3arch-pl[b-2o8w505bgf] {
    position: relative;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.v3arch .v3arch-path-license .v3arch-pl[b-2o8w505bgf] { color: var(--primary); }
.v3arch .v3arch-path-connect .v3arch-pl[b-2o8w505bgf] { color: var(--gold); }

.v3arch .v3arch-ph[b-2o8w505bgf] {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: var(--text-primary);
}

.v3arch .v3arch-path-license .v3arch-ph-a[b-2o8w505bgf] { color: var(--primary); }
.v3arch .v3arch-path-connect .v3arch-ph-a[b-2o8w505bgf] { color: var(--gold); }

.v3arch .v3arch-pp[b-2o8w505bgf] {
    position: relative;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 22px;
}

.v3arch .v3arch-px-row[b-2o8w505bgf] {
    position: relative;
    padding: 18px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.v3arch .v3arch-px[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.v3arch .v3arch-u[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}

.v3arch .v3arch-px-note[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    text-align: right;
}

.v3arch .v3arch-feats[b-2o8w505bgf] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.v3arch .v3arch-feat[b-2o8w505bgf] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    padding-left: 24px;
}

.v3arch .v3arch-feat[b-2o8w505bgf]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.v3arch .v3arch-feat[b-2o8w505bgf]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.v3arch .v3arch-path-connect .v3arch-feat[b-2o8w505bgf]::after { background: var(--gold); }

.v3arch .v3arch-cta-row[b-2o8w505bgf] {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ───── SECTION CHROME ───── */
.v3arch .v3arch-section[b-2o8w505bgf] { padding: 80px 0; border-top: 1px solid var(--border-subtle); }
.v3arch .v3arch-section-alt[b-2o8w505bgf] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3arch .v3arch-section-head[b-2o8w505bgf] { margin-bottom: 40px; max-width: 780px; }

.v3arch .v3arch-kicker[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3arch .v3arch-sh[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3arch .v3arch-lede[b-2o8w505bgf] {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3arch .v3arch-lede strong[b-2o8w505bgf] { color: var(--text-primary); }

/* ───── FEATURES GRID ───── */
.v3arch .v3arch-feat-grid[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.v3arch .v3arch-feat-card[b-2o8w505bgf] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    transition: border-color .15s;
    position: relative;
}

.v3arch .v3arch-feat-card:hover[b-2o8w505bgf] { border-color: var(--border-hover); }

.v3arch .v3arch-ic[b-2o8w505bgf] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.v3arch .v3arch-ic svg[b-2o8w505bgf] { width: 18px; height: 18px; }

.v3arch .v3arch-fh[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--text-primary);
}

.v3arch .v3arch-fp[b-2o8w505bgf] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* ───── PERSONAS ───── */
.v3arch .v3arch-persona-grid[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.v3arch .v3arch-persona[b-2o8w505bgf] {
    padding: 30px 28px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
}

.v3arch .v3arch-pers-pl[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3arch .v3arch-pers-h[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3arch .v3arch-pers-p[b-2o8w505bgf] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 20px;
}

.v3arch .v3arch-pick[b-2o8w505bgf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.v3arch .v3arch-pick-license[b-2o8w505bgf] {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3arch .v3arch-pick-connect[b-2o8w505bgf] {
    color: var(--gold);
    background: var(--gold-soft);
    border-color: color-mix(in oklab, var(--gold) 30%, transparent);
}

/* ───── DIAGRAM ───── */
.v3arch .v3arch-diag[b-2o8w505bgf] {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.v3arch .v3arch-diag-rows[b-2o8w505bgf] { display: grid; grid-template-columns: 1fr; gap: 0; }

.v3arch .v3arch-diag-layer[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px dashed var(--border);
    align-items: center;
}

.v3arch .v3arch-diag-layer:last-child[b-2o8w505bgf] { border-bottom: none; }

.v3arch .v3arch-dl-l[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3arch .v3arch-l-num[b-2o8w505bgf] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
}

.v3arch .v3arch-dl-body[b-2o8w505bgf] { display: flex; gap: 8px; flex-wrap: wrap; }

.v3arch .v3arch-chip[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    padding: 6px 11px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.v3arch .v3arch-dl-slyd .v3arch-chip[b-2o8w505bgf] {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    font-weight: 500;
}

/* ───── LXD compare ───── */
.v3arch .v3arch-lxd-compare[b-2o8w505bgf] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-width: 760px;
}

.v3arch .v3arch-lc-row[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    padding: 14px 28px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
}

.v3arch .v3arch-lc-row:last-child[b-2o8w505bgf] { border-bottom: none; }

.v3arch .v3arch-lc-head[b-2o8w505bgf] {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.v3arch .v3arch-lc-metric[b-2o8w505bgf] { font-size: 14px; color: var(--text-secondary); }

.v3arch .v3arch-lc-head .v3arch-lc-metric[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3arch .v3arch-lc-a[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
    text-align: right;
    min-width: 120px;
}

.v3arch .v3arch-lc-b[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: right;
    min-width: 120px;
}

.v3arch .v3arch-lc-head .v3arch-lc-a[b-2o8w505bgf],
.v3arch .v3arch-lc-head .v3arch-lc-b[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 400;
}

@media (max-width: 780px) {
    .v3arch .v3arch-lc-row[b-2o8w505bgf] { grid-template-columns: 1fr auto; gap: 12px; }
    .v3arch .v3arch-lc-row .v3arch-lc-b[b-2o8w505bgf] { display: none; }
}

/* ───── PRICING ───── */
.v3arch .v3arch-price-grid[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3arch .v3arch-price-col[b-2o8w505bgf] {
    padding: 32px 32px;
    border-right: 1px solid var(--border);
    position: relative;
}

.v3arch .v3arch-price-col:last-child[b-2o8w505bgf] { border-right: none; }

.v3arch .v3arch-pc-pl[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.v3arch .v3arch-pc-license .v3arch-pc-pl[b-2o8w505bgf] { color: var(--primary); }
.v3arch .v3arch-pc-connect .v3arch-pc-pl[b-2o8w505bgf] { color: var(--gold); }

.v3arch .v3arch-pc-h[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3arch .v3arch-pc-tag[b-2o8w505bgf] {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0 0 22px;
}

.v3arch .v3arch-px-big[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.v3arch .v3arch-pc-license .v3arch-px-big[b-2o8w505bgf] { color: var(--primary); }
.v3arch .v3arch-pc-connect .v3arch-px-big[b-2o8w505bgf] { color: var(--gold); }

.v3arch .v3arch-pcb-u[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
    letter-spacing: 0.04em;
}

.v3arch .v3arch-px-sub[b-2o8w505bgf] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

.v3arch .v3arch-price-list[b-2o8w505bgf] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 24px;
}

.v3arch .v3arch-pi[b-2o8w505bgf] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3arch .v3arch-ck[b-2o8w505bgf] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--success) 18%, transparent);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.v3arch .v3arch-ck svg[b-2o8w505bgf] { width: 11px; height: 11px; }
.v3arch .v3arch-pi strong[b-2o8w505bgf] { color: var(--text-primary); font-weight: 600; }

/* ───── FAQ ───── */
.v3arch .v3arch-faq-list[b-2o8w505bgf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3arch .v3arch-faq[b-2o8w505bgf] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
}

.v3arch .v3arch-faq-q[b-2o8w505bgf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    transition: background .1s;
    color: var(--text-primary);
}

.v3arch .v3arch-faq-q:hover[b-2o8w505bgf] { background: var(--bg-elevated); }

.v3arch .v3arch-faq-ic[b-2o8w505bgf] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform .15s;
}

.v3arch .v3arch-faq-ic svg[b-2o8w505bgf] { width: 100%; height: 100%; }

.v3arch .v3arch-faq.v3arch-open .v3arch-faq-q .v3arch-faq-ic[b-2o8w505bgf] {
    transform: rotate(45deg);
    color: var(--primary);
}

.v3arch .v3arch-faq-a[b-2o8w505bgf] {
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.v3arch .v3arch-faq-a strong[b-2o8w505bgf] { color: var(--text-primary); }

.v3arch .v3arch-faq.v3arch-open .v3arch-faq-a[b-2o8w505bgf] {
    padding: 0 22px 18px;
    max-height: 400px;
}

/* ───── CTA ───── */
.v3arch .v3arch-cta-strip[b-2o8w505bgf] { padding: 64px 0 96px; }

.v3arch .v3arch-cta-card[b-2o8w505bgf] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.v3arch .v3arch-cta-card[b-2o8w505bgf]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3arch .v3arch-ctt[b-2o8w505bgf] { position: relative; }

.v3arch .v3arch-cth[b-2o8w505bgf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3arch .v3arch-ctp[b-2o8w505bgf] {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 540px;
}

.v3arch .v3arch-cact[b-2o8w505bgf] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 1080px) {
    .v3arch .v3arch-paths[b-2o8w505bgf] { grid-template-columns: 1fr; }
    .v3arch .v3arch-feat-grid[b-2o8w505bgf] { grid-template-columns: repeat(2, 1fr); }
    .v3arch .v3arch-price-grid[b-2o8w505bgf] { grid-template-columns: 1fr; }
    .v3arch .v3arch-price-col[b-2o8w505bgf] { border-right: none; border-bottom: 1px solid var(--border); }
    .v3arch .v3arch-price-col:last-child[b-2o8w505bgf] { border-bottom: none; }
    .v3arch .v3arch-persona-grid[b-2o8w505bgf] { grid-template-columns: 1fr; }
    .v3arch .v3arch-diag-layer[b-2o8w505bgf] { grid-template-columns: 1fr; gap: 10px; }
    .v3arch .v3arch-cta-card[b-2o8w505bgf] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Pages/Platform/Benson.razor.rz.scp.css */
/* ============================================================
   Platform Benson Handoff (/platform/benson) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD Benson Handoff v1.html (L34-199),
   namespaced v3benson-, scoped under .v3benson wrapper.

   This page carries its own brass accent (Benson brand color) +
   Fraunces serif display, layered on top of the SLYD token alias.
   ============================================================ */

.v3benson[b-wkpc28lf5y] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04));
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --font-benson: 'Fraunces', Georgia, serif;
    /* Benson brand brass — scoped to this page only */
    --brass: hsl(36, 42%, 58%);
    --brass-soft: hsl(36, 42%, 58% / 0.16);
    --brass-deep: hsl(33, 40%, 46%);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3benson *[b-wkpc28lf5y],
.v3benson *[b-wkpc28lf5y]::before,
.v3benson *[b-wkpc28lf5y]::after { box-sizing: border-box; }

.v3benson a[b-wkpc28lf5y] { color: inherit; text-decoration: none; }
.v3benson button[b-wkpc28lf5y] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3benson .v3benson-wrap[b-wkpc28lf5y] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) { .v3benson .v3benson-wrap[b-wkpc28lf5y] { padding: 0 20px; } }

/* Buttons */
.v3benson .v3benson-btn[b-wkpc28lf5y] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3benson .v3benson-btn-lg[b-wkpc28lf5y] { padding: 15px 26px; font-size: 15px; }

.v3benson .v3benson-btn-ghost[b-wkpc28lf5y] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3benson .v3benson-btn-ghost:hover[b-wkpc28lf5y] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3benson .v3benson-btn-brass[b-wkpc28lf5y] {
    color: hsl(33, 40%, 12%);
    background: linear-gradient(135deg, var(--brass) 0%, var(--brass-deep) 100%);
    font-weight: 600;
    border-color: var(--brass);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--brass) 50%, transparent);
}

.v3benson .v3benson-btn-brass:hover[b-wkpc28lf5y] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--brass) 60%, transparent);
}

.v3benson .v3benson-arr[b-wkpc28lf5y] { font-family: var(--font-mono); opacity: .8; }

/* ───── HANDOFF BANNER ───── */

.v3benson .v3benson-handoff-banner[b-wkpc28lf5y] {
    background: linear-gradient(90deg, color-mix(in oklab, var(--brass) 18%, var(--bg-elevated)) 0%, var(--bg-elevated) 60%);
    border-bottom: 1px solid var(--border);
}

.v3benson .v3benson-hb-row[b-wkpc28lf5y] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 11px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.v3benson .v3benson-hb-tag[b-wkpc28lf5y] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsl(33, 40%, 12%);
    background: var(--brass);
    padding: 4px 9px;
    border-radius: 3px;
    font-weight: 600;
}

.v3benson .v3benson-hb-text[b-wkpc28lf5y] { font-size: 13px; color: var(--text-secondary); }
.v3benson .v3benson-hb-text strong[b-wkpc28lf5y] { color: var(--text-primary); }

.v3benson .v3benson-hb-link[b-wkpc28lf5y] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--brass);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

@media (max-width: 780px) { .v3benson .v3benson-hb-link[b-wkpc28lf5y] { margin-left: 0; } }

/* ───── HERO ───── */

.v3benson .v3benson-hero[b-wkpc28lf5y] {
    position: relative;
    overflow: hidden;
    padding: 72px 0 56px;
}

.v3benson .v3benson-hero[b-wkpc28lf5y]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 560px at 75% 0%, var(--brass-soft), transparent 62%);
}

.v3benson .v3benson-hero[b-wkpc28lf5y]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 540px at 60% 25%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 540px at 60% 25%, #000 30%, transparent 75%);
}

.v3benson .v3benson-b-ticker[b-wkpc28lf5y] {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.v3benson .v3benson-b-ticker > span[b-wkpc28lf5y] { display: inline-flex; align-items: center; gap: 18px; }
.v3benson .v3benson-b-ticker > span[b-wkpc28lf5y]::after { content: "·"; color: var(--brass); }
.v3benson .v3benson-b-ticker > span:last-child[b-wkpc28lf5y]::after { display: none; }

.v3benson .v3benson-b-wordmark[b-wkpc28lf5y] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 0.16em;
    color: var(--text-primary);
}

.v3benson .v3benson-h1[b-wkpc28lf5y] {
    font-family: var(--font-benson);
    font-weight: 400;
    font-size: clamp(48px, 8vw, 104px);
    line-height: 0.96;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    max-width: 1000px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3benson .v3benson-h1 .v3benson-stroke[b-wkpc28lf5y],
.v3benson .v3benson-sh .v3benson-stroke[b-wkpc28lf5y] {
    -webkit-text-stroke: 1.5px var(--brass);
    -webkit-text-fill-color: transparent;
    font-style: italic;
}

.v3benson .v3benson-it[b-wkpc28lf5y] { font-style: italic; color: var(--brass); }

.v3benson .v3benson-hero-cols[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: end;
    max-width: 980px;
}

.v3benson .v3benson-hero-p[b-wkpc28lf5y] {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3benson .v3benson-hero-p strong[b-wkpc28lf5y] { color: var(--text-primary); }

.v3benson .v3benson-hc-ctas[b-wkpc28lf5y] { display: flex; gap: 12px; flex-wrap: wrap; }

.v3benson .v3benson-hero-strip[b-wkpc28lf5y] {
    display: flex;
    gap: 0;
    margin: 40px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 780px;
    background: var(--bg-card);
}

.v3benson .v3benson-hs-cell[b-wkpc28lf5y] {
    flex: 1;
    padding: 18px 22px;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.v3benson .v3benson-hs-cell:last-child[b-wkpc28lf5y] { border-right: none; }

.v3benson .v3benson-hn[b-wkpc28lf5y] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brass);
    letter-spacing: 0.1em;
    font-weight: 600;
}

.v3benson .v3benson-ht[b-wkpc28lf5y] { font-size: 14px; color: var(--text-primary); font-weight: 500; }

/* ───── SECTION CHROME ───── */

.v3benson .v3benson-section[b-wkpc28lf5y] {
    padding: 76px 0;
    border-top: 1px solid var(--border-subtle);
}

.v3benson .v3benson-section-alt[b-wkpc28lf5y] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3benson .v3benson-section-head[b-wkpc28lf5y] { margin-bottom: 40px; max-width: 760px; }

.v3benson .v3benson-eyebrow[b-wkpc28lf5y] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 14px;
}

.v3benson .v3benson-sh[b-wkpc28lf5y] {
    font-family: var(--font-benson);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3benson .v3benson-lede[b-wkpc28lf5y] {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ───── TEAM ───── */

.v3benson .v3benson-team[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.v3benson .v3benson-agent[b-wkpc28lf5y] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: border-color .15s, transform .15s;
}

.v3benson .v3benson-agent:hover[b-wkpc28lf5y] { border-color: var(--brass); transform: translateY(-2px); }

.v3benson .v3benson-agent-lead[b-wkpc28lf5y] {
    grid-column: span 3;
    background: linear-gradient(135deg, color-mix(in oklab, var(--brass) 10%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border-color: color-mix(in oklab, var(--brass) 35%, transparent);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
}

.v3benson .v3benson-role[b-wkpc28lf5y] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 7px;
}

.v3benson .v3benson-nm[b-wkpc28lf5y] {
    font-family: var(--font-benson);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3benson .v3benson-agent-lead .v3benson-nm[b-wkpc28lf5y] { font-size: 38px; color: var(--brass); }

.v3benson .v3benson-scope[b-wkpc28lf5y] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.v3benson .v3benson-agent-lead .v3benson-scope[b-wkpc28lf5y] { font-size: 15px; }

.v3benson .v3benson-agent-lead .v3benson-chip[b-wkpc28lf5y] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
    background: var(--brass-soft);
    border: 1px solid color-mix(in oklab, var(--brass) 30%, transparent);
    padding: 4px 9px;
    border-radius: 3px;
    margin-bottom: 12px;
}

/* ───── PROCESS ───── */

.v3benson .v3benson-process[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v3benson .v3benson-pcell[b-wkpc28lf5y] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    position: relative;
}

.v3benson .v3benson-pn[b-wkpc28lf5y] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    letter-spacing: 0.04em;
    color: var(--brass);
    line-height: 1;
    margin-bottom: 12px;
}

.v3benson .v3benson-ph[b-wkpc28lf5y] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3benson .v3benson-pp[b-wkpc28lf5y] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

.v3benson .v3benson-pcell[b-wkpc28lf5y]::after {
    content: "→";
    position: absolute;
    right: -9px;
    top: 38px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-body);
    width: 14px;
    text-align: center;
    z-index: 1;
}

.v3benson .v3benson-pcell:last-child[b-wkpc28lf5y]::after { display: none; }
.v3benson .v3benson-section-alt .v3benson-pcell[b-wkpc28lf5y]::after { background: var(--bg-elevated); }

/* ───── SPIN-OUT ───── */

.v3benson .v3benson-spin[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.v3benson .v3benson-sp[b-wkpc28lf5y] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 16px;
}

.v3benson .v3benson-sp strong[b-wkpc28lf5y] { color: var(--text-primary); }

.v3benson .v3benson-spin-card[b-wkpc28lf5y] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3benson .v3benson-sc-top[b-wkpc28lf5y] {
    padding: 18px 24px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3benson .v3benson-spin-row[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.v3benson .v3benson-spin-row:last-child[b-wkpc28lf5y] { border-bottom: none; }

.v3benson .v3benson-sr-ic[b-wkpc28lf5y] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--brass-soft);
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v3benson .v3benson-sr-ic svg[b-wkpc28lf5y] { width: 16px; height: 16px; }

.v3benson .v3benson-sr-t[b-wkpc28lf5y] {
    flex: 1;
    font-size: 13.5px;
    color: var(--text-primary);
}

.v3benson .v3benson-sr-sub[b-wkpc28lf5y] {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ───── BIG CTA → benson.work ───── */

.v3benson .v3benson-bcta[b-wkpc28lf5y] { padding: 80px 0 96px; }

.v3benson .v3benson-bcta-card[b-wkpc28lf5y] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1714 0%, #221d18 100%);
    border: 1px solid color-mix(in oklab, var(--brass) 30%, transparent);
    border-radius: var(--radius-xl);
    padding: 56px 48px;
    text-align: center;
}

.v3benson .v3benson-bcta-card[b-wkpc28lf5y]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 400px at 50% 0%, color-mix(in oklab, var(--brass) 22%, transparent), transparent 60%);
    pointer-events: none;
}

.v3benson .v3benson-bc-mark[b-wkpc28lf5y] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.18em;
    color: var(--brass);
    margin-bottom: 24px;
    position: relative;
}

.v3benson .v3benson-bch[b-wkpc28lf5y] {
    font-family: var(--font-benson);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #faf8f5;
    margin: 0 0 14px;
    position: relative;
}

.v3benson .v3benson-bch .v3benson-it[b-wkpc28lf5y] { font-style: italic; color: var(--brass); }

.v3benson .v3benson-bcp[b-wkpc28lf5y] {
    font-size: 16px;
    color: rgba(250, 248, 245, 0.7);
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.55;
    position: relative;
}

.v3benson .v3benson-bc-actions[b-wkpc28lf5y] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.v3benson .v3benson-bcta-card .v3benson-btn-ghost[b-wkpc28lf5y] {
    color: rgba(250, 248, 245, 0.8);
    border-color: rgba(250, 248, 245, 0.25);
}

.v3benson .v3benson-bcta-card .v3benson-btn-ghost:hover[b-wkpc28lf5y] {
    color: #faf8f5;
    border-color: rgba(250, 248, 245, 0.5);
}

.v3benson .v3benson-bc-domain[b-wkpc28lf5y] {
    margin-top: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(250, 248, 245, 0.5);
    position: relative;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3benson .v3benson-hero-cols[b-wkpc28lf5y] { grid-template-columns: 1fr; gap: 28px; }
    .v3benson .v3benson-team[b-wkpc28lf5y] { grid-template-columns: 1fr 1fr; }
    .v3benson .v3benson-agent-lead[b-wkpc28lf5y] { grid-column: span 2; grid-template-columns: 1fr; }
    .v3benson .v3benson-process[b-wkpc28lf5y] { grid-template-columns: 1fr 1fr; }
    .v3benson .v3benson-pcell[b-wkpc28lf5y]::after { display: none; }
    .v3benson .v3benson-spin[b-wkpc28lf5y] { grid-template-columns: 1fr; gap: 32px; }
    .v3benson .v3benson-hero-strip[b-wkpc28lf5y] { flex-direction: column; }
    .v3benson .v3benson-hs-cell[b-wkpc28lf5y] { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 780px) {
    .v3benson .v3benson-team[b-wkpc28lf5y] { grid-template-columns: 1fr; }
    .v3benson .v3benson-agent-lead[b-wkpc28lf5y] { grid-column: span 1; }
    .v3benson .v3benson-process[b-wkpc28lf5y] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Platform/Cloud.razor.rz.scp.css */
/* ============================================================
   SLYD Cloud (/platform/cloud) — Track 2 V3.
   Mockup-verbatim CSS from SLYD Cloud v1.html (L33-229),
   namespaced v3cloud-, scoped under .v3cloud wrapper.
   ============================================================ */

.v3cloud[b-w5fl33gt2o] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04));
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3cloud *[b-w5fl33gt2o],
.v3cloud *[b-w5fl33gt2o]::before,
.v3cloud *[b-w5fl33gt2o]::after { box-sizing: border-box; }

.v3cloud a[b-w5fl33gt2o] { color: inherit; text-decoration: none; }
.v3cloud button[b-w5fl33gt2o] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3cloud .v3cloud-wrap[b-w5fl33gt2o] { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 780px) { .v3cloud .v3cloud-wrap[b-w5fl33gt2o] { padding: 0 20px; } }

.v3cloud .v3cloud-a[b-w5fl33gt2o] { color: var(--primary); }

/* Buttons */
.v3cloud .v3cloud-btn[b-w5fl33gt2o] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3cloud .v3cloud-btn-primary[b-w5fl33gt2o] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3cloud .v3cloud-btn-primary:hover[b-w5fl33gt2o] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3cloud .v3cloud-btn-indigo[b-w5fl33gt2o] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.v3cloud .v3cloud-btn-indigo:hover[b-w5fl33gt2o] { filter: brightness(1.1); transform: translateY(-1px); }

.v3cloud .v3cloud-arr[b-w5fl33gt2o] { font-family: var(--font-mono); opacity: .7; }

/* ───── HERO ───── */
.v3cloud .v3cloud-hero[b-w5fl33gt2o] { position: relative; overflow: hidden; padding: 80px 0 48px; }

.v3cloud .v3cloud-hero[b-w5fl33gt2o]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 600px at 75% 0%, var(--primary-glow), transparent 65%),
                radial-gradient(700px 500px at 0% 100%, color-mix(in oklab, var(--secondary) 18%, transparent), transparent 60%);
    opacity: .6;
}

.v3cloud .v3cloud-hero[b-w5fl33gt2o]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 600px at 60% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 600px at 60% 30%, #000 30%, transparent 75%);
}

.v3cloud .v3cloud-eyebrow[b-w5fl33gt2o] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 20px;
}

.v3cloud .v3cloud-eyebrow[b-w5fl33gt2o]::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

.v3cloud .v3cloud-h1[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 84px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    max-width: 1100px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3cloud .v3cloud-sub[b-w5fl33gt2o] {
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--text-secondary);
    max-width: 720px;
    line-height: 1.5;
    margin: 0 0 48px;
}

/* ───── PATH CARDS ───── */
.v3cloud .v3cloud-paths[b-w5fl33gt2o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 1100px;
}

.v3cloud .v3cloud-path[b-w5fl33gt2o] {
    position: relative;
    padding: 36px 32px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}

.v3cloud .v3cloud-path:hover[b-w5fl33gt2o] { transform: translateY(-3px); }

.v3cloud .v3cloud-path[b-w5fl33gt2o]::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .5;
}

.v3cloud .v3cloud-path-license[b-w5fl33gt2o] { border-color: color-mix(in oklab, var(--primary) 35%, transparent); }
.v3cloud .v3cloud-path-license:hover[b-w5fl33gt2o] { border-color: var(--primary); box-shadow: 0 20px 60px -20px var(--primary-glow); }
.v3cloud .v3cloud-path-license[b-w5fl33gt2o]::before { background: radial-gradient(circle, var(--primary-glow), transparent 60%); }

.v3cloud .v3cloud-path-connect[b-w5fl33gt2o] { border-color: color-mix(in oklab, var(--gold) 35%, transparent); }
.v3cloud .v3cloud-path-connect:hover[b-w5fl33gt2o] { border-color: var(--gold); box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--gold) 30%, transparent); }
.v3cloud .v3cloud-path-connect[b-w5fl33gt2o]::before { background: radial-gradient(circle, color-mix(in oklab, var(--gold) 30%, transparent), transparent 60%); }

.v3cloud .v3cloud-pl[b-w5fl33gt2o] {
    position: relative;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.v3cloud .v3cloud-path-license .v3cloud-pl[b-w5fl33gt2o] { color: var(--primary); }
.v3cloud .v3cloud-path-connect .v3cloud-pl[b-w5fl33gt2o] { color: var(--gold); }

.v3cloud .v3cloud-ph[b-w5fl33gt2o] {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: var(--text-primary);
}

.v3cloud .v3cloud-path-license .v3cloud-ph-a[b-w5fl33gt2o] { color: var(--primary); }
.v3cloud .v3cloud-path-connect .v3cloud-ph-a[b-w5fl33gt2o] { color: var(--gold); }

.v3cloud .v3cloud-pp[b-w5fl33gt2o] {
    position: relative;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 22px;
}

.v3cloud .v3cloud-px-row[b-w5fl33gt2o] {
    position: relative;
    padding: 18px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.v3cloud .v3cloud-px[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.v3cloud .v3cloud-u[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}

.v3cloud .v3cloud-px-note[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    text-align: right;
}

.v3cloud .v3cloud-feats[b-w5fl33gt2o] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.v3cloud .v3cloud-feat[b-w5fl33gt2o] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    padding-left: 24px;
}

.v3cloud .v3cloud-feat[b-w5fl33gt2o]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.v3cloud .v3cloud-feat[b-w5fl33gt2o]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.v3cloud .v3cloud-path-connect .v3cloud-feat[b-w5fl33gt2o]::after { background: var(--gold); }

.v3cloud .v3cloud-cta-row[b-w5fl33gt2o] {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ───── SECTION CHROME ───── */
.v3cloud .v3cloud-section[b-w5fl33gt2o] { padding: 80px 0; border-top: 1px solid var(--border-subtle); }
.v3cloud .v3cloud-section-alt[b-w5fl33gt2o] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3cloud .v3cloud-section-head[b-w5fl33gt2o] { margin-bottom: 40px; max-width: 780px; }

.v3cloud .v3cloud-kicker[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3cloud .v3cloud-sh[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3cloud .v3cloud-lede[b-w5fl33gt2o] {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3cloud .v3cloud-lede strong[b-w5fl33gt2o] { color: var(--text-primary); }

/* ───── FEATURES GRID ───── */
.v3cloud .v3cloud-feat-grid[b-w5fl33gt2o] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.v3cloud .v3cloud-feat-card[b-w5fl33gt2o] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    transition: border-color .15s;
    position: relative;
}

.v3cloud .v3cloud-feat-card:hover[b-w5fl33gt2o] { border-color: var(--border-hover); }

.v3cloud .v3cloud-ic[b-w5fl33gt2o] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.v3cloud .v3cloud-ic svg[b-w5fl33gt2o] { width: 18px; height: 18px; }

.v3cloud .v3cloud-fh[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--text-primary);
}

.v3cloud .v3cloud-fp[b-w5fl33gt2o] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* ───── PERSONAS ───── */
.v3cloud .v3cloud-persona-grid[b-w5fl33gt2o] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.v3cloud .v3cloud-persona[b-w5fl33gt2o] {
    padding: 30px 28px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
}

.v3cloud .v3cloud-pers-pl[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3cloud .v3cloud-pers-h[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3cloud .v3cloud-pers-p[b-w5fl33gt2o] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 20px;
}

.v3cloud .v3cloud-pick[b-w5fl33gt2o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.v3cloud .v3cloud-pick-license[b-w5fl33gt2o] {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3cloud .v3cloud-pick-connect[b-w5fl33gt2o] {
    color: var(--gold);
    background: var(--gold-soft);
    border-color: color-mix(in oklab, var(--gold) 30%, transparent);
}

/* ───── DIAGRAM ───── */
.v3cloud .v3cloud-diag[b-w5fl33gt2o] {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.v3cloud .v3cloud-diag-rows[b-w5fl33gt2o] { display: grid; grid-template-columns: 1fr; gap: 0; }

.v3cloud .v3cloud-diag-layer[b-w5fl33gt2o] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px dashed var(--border);
    align-items: center;
}

.v3cloud .v3cloud-diag-layer:last-child[b-w5fl33gt2o] { border-bottom: none; }

.v3cloud .v3cloud-dl-l[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3cloud .v3cloud-l-num[b-w5fl33gt2o] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
}

.v3cloud .v3cloud-dl-body[b-w5fl33gt2o] { display: flex; gap: 8px; flex-wrap: wrap; }

.v3cloud .v3cloud-chip[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    padding: 6px 11px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.v3cloud .v3cloud-dl-slyd .v3cloud-chip[b-w5fl33gt2o] {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    font-weight: 500;
}

/* ───── LXD compare ───── */
.v3cloud .v3cloud-lxd-compare[b-w5fl33gt2o] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-width: 760px;
}

.v3cloud .v3cloud-lc-row[b-w5fl33gt2o] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    padding: 14px 28px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
}

.v3cloud .v3cloud-lc-row:last-child[b-w5fl33gt2o] { border-bottom: none; }

.v3cloud .v3cloud-lc-head[b-w5fl33gt2o] {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.v3cloud .v3cloud-lc-metric[b-w5fl33gt2o] { font-size: 14px; color: var(--text-secondary); }

.v3cloud .v3cloud-lc-head .v3cloud-lc-metric[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.v3cloud .v3cloud-lc-a[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
    text-align: right;
    min-width: 120px;
}

.v3cloud .v3cloud-lc-b[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: right;
    min-width: 120px;
}

.v3cloud .v3cloud-lc-head .v3cloud-lc-a[b-w5fl33gt2o],
.v3cloud .v3cloud-lc-head .v3cloud-lc-b[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 400;
}

@media (max-width: 780px) {
    .v3cloud .v3cloud-lc-row[b-w5fl33gt2o] { grid-template-columns: 1fr auto; gap: 12px; }
    .v3cloud .v3cloud-lc-row .v3cloud-lc-b[b-w5fl33gt2o] { display: none; }
}

/* ───── PRICING ───── */
.v3cloud .v3cloud-price-grid[b-w5fl33gt2o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3cloud .v3cloud-price-col[b-w5fl33gt2o] {
    padding: 32px 32px;
    border-right: 1px solid var(--border);
    position: relative;
}

.v3cloud .v3cloud-price-col:last-child[b-w5fl33gt2o] { border-right: none; }

.v3cloud .v3cloud-pc-pl[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.v3cloud .v3cloud-pc-license .v3cloud-pc-pl[b-w5fl33gt2o] { color: var(--primary); }
.v3cloud .v3cloud-pc-connect .v3cloud-pc-pl[b-w5fl33gt2o] { color: var(--gold); }

.v3cloud .v3cloud-pc-h[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3cloud .v3cloud-pc-tag[b-w5fl33gt2o] {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin: 0 0 22px;
}

.v3cloud .v3cloud-px-big[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.v3cloud .v3cloud-pc-license .v3cloud-px-big[b-w5fl33gt2o] { color: var(--primary); }
.v3cloud .v3cloud-pc-connect .v3cloud-px-big[b-w5fl33gt2o] { color: var(--gold); }

.v3cloud .v3cloud-pcb-u[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
    letter-spacing: 0.04em;
}

.v3cloud .v3cloud-px-sub[b-w5fl33gt2o] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

.v3cloud .v3cloud-price-list[b-w5fl33gt2o] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 24px;
}

.v3cloud .v3cloud-pi[b-w5fl33gt2o] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3cloud .v3cloud-ck[b-w5fl33gt2o] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--success) 18%, transparent);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.v3cloud .v3cloud-ck svg[b-w5fl33gt2o] { width: 11px; height: 11px; }
.v3cloud .v3cloud-pi strong[b-w5fl33gt2o] { color: var(--text-primary); font-weight: 600; }

/* ───── FAQ ───── */
.v3cloud .v3cloud-faq-list[b-w5fl33gt2o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
}

.v3cloud .v3cloud-faq[b-w5fl33gt2o] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
}

.v3cloud .v3cloud-faq-q[b-w5fl33gt2o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    transition: background .1s;
    color: var(--text-primary);
}

.v3cloud .v3cloud-faq-q:hover[b-w5fl33gt2o] { background: var(--bg-elevated); }

.v3cloud .v3cloud-faq-ic[b-w5fl33gt2o] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform .15s;
}

.v3cloud .v3cloud-faq-ic svg[b-w5fl33gt2o] { width: 100%; height: 100%; }

.v3cloud .v3cloud-faq.v3cloud-open .v3cloud-faq-q .v3cloud-faq-ic[b-w5fl33gt2o] {
    transform: rotate(45deg);
    color: var(--primary);
}

.v3cloud .v3cloud-faq-a[b-w5fl33gt2o] {
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.v3cloud .v3cloud-faq-a strong[b-w5fl33gt2o] { color: var(--text-primary); }

.v3cloud .v3cloud-faq.v3cloud-open .v3cloud-faq-a[b-w5fl33gt2o] {
    padding: 0 22px 18px;
    max-height: 400px;
}

/* ───── CTA ───── */
.v3cloud .v3cloud-cta-strip[b-w5fl33gt2o] { padding: 64px 0 96px; }

.v3cloud .v3cloud-cta-card[b-w5fl33gt2o] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.v3cloud .v3cloud-cta-card[b-w5fl33gt2o]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3cloud .v3cloud-ctt[b-w5fl33gt2o] { position: relative; }

.v3cloud .v3cloud-cth[b-w5fl33gt2o] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3cloud .v3cloud-ctp[b-w5fl33gt2o] {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 540px;
}

.v3cloud .v3cloud-cact[b-w5fl33gt2o] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 1080px) {
    .v3cloud .v3cloud-paths[b-w5fl33gt2o] { grid-template-columns: 1fr; }
    .v3cloud .v3cloud-feat-grid[b-w5fl33gt2o] { grid-template-columns: repeat(2, 1fr); }
    .v3cloud .v3cloud-price-grid[b-w5fl33gt2o] { grid-template-columns: 1fr; }
    .v3cloud .v3cloud-price-col[b-w5fl33gt2o] { border-right: none; border-bottom: 1px solid var(--border); }
    .v3cloud .v3cloud-price-col:last-child[b-w5fl33gt2o] { border-bottom: none; }
    .v3cloud .v3cloud-persona-grid[b-w5fl33gt2o] { grid-template-columns: 1fr; }
    .v3cloud .v3cloud-diag-layer[b-w5fl33gt2o] { grid-template-columns: 1fr; gap: 10px; }
    .v3cloud .v3cloud-cta-card[b-w5fl33gt2o] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Pages/Platform/Ecosystem.razor.rz.scp.css */
/* ===========================================
   APP STORE PAGE - SLYD DESIGN SYSTEM
   Prefix: apps-
   Page-specific styles (hero/section provided by generic CSS)
   =========================================== */

/* ===========================================
   HERO PREVIEW CARD
   =========================================== */
.apps-preview-card[b-n9itutxp4x] {
    position: relative;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.apps-preview-header[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.apps-preview-title[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.apps-preview-title .icon[b-n9itutxp4x] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.apps-preview-badge[b-n9itutxp4x] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8b5cf6;
    background: rgba(139,92,246,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.apps-preview-grid[b-n9itutxp4x] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.apps-mini-card[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.apps-mini-card:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.2);
    background: rgba(6,182,212,0.02);
}

.apps-mini-icon[b-n9itutxp4x] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.apps-mini-icon .icon[b-n9itutxp4x] {
    width: 20px;
    height: 20px;
}

.apps-mini-icon.cyan[b-n9itutxp4x] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.apps-mini-icon.purple[b-n9itutxp4x] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.apps-mini-icon.green[b-n9itutxp4x] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.apps-mini-icon.gold[b-n9itutxp4x] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.apps-mini-info[b-n9itutxp4x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.apps-mini-name[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.apps-mini-cat[b-n9itutxp4x] {
    font-size: 0.75rem;
    color: #64748b;
}

.apps-mini-status[b-n9itutxp4x] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 6px 12px;
    border-radius: 6px;
}

/* Coming Soon Badge */
.apps-section-coming-soon[b-n9itutxp4x] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 8px;
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.apps-opening[b-n9itutxp4x] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.apps-opening p[b-n9itutxp4x] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.apps-opening-lead[b-n9itutxp4x] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    font-weight: 500;
}

.apps-opening-result[b-n9itutxp4x] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
}

.apps-opening strong[b-n9itutxp4x] {
    color: #06b6d4;
}

/* ===========================================
   DUAL PATH - HOW IT WORKS
   =========================================== */
.apps-dual-path[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.apps-path-card[b-n9itutxp4x] {
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.apps-path-card:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.2);
}

.apps-path-header[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.apps-path-icon[b-n9itutxp4x] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.apps-path-icon .icon[b-n9itutxp4x] {
    width: 26px;
    height: 26px;
}

.apps-path-icon.cyan[b-n9itutxp4x] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.apps-path-icon.purple[b-n9itutxp4x] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.apps-path-header h3[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.apps-path-steps[b-n9itutxp4x] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.apps-step[b-n9itutxp4x] {
    display: flex;
    gap: 16px;
}

.apps-step-num[b-n9itutxp4x] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border-radius: 8px;
}

.apps-step-content h4[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 6px 0;
}

.apps-step-content p[b-n9itutxp4x] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   CATEGORIES GRID
   =========================================== */
.apps-categories-grid[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.apps-category-card[b-n9itutxp4x] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.apps-category-card:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.apps-category-icon[b-n9itutxp4x] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.apps-category-icon .icon[b-n9itutxp4x] {
    width: 26px;
    height: 26px;
}

.apps-category-icon.cyan[b-n9itutxp4x] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.apps-category-icon.purple[b-n9itutxp4x] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.apps-category-icon.green[b-n9itutxp4x] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.apps-category-icon.gold[b-n9itutxp4x] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.apps-category-card h3[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.apps-category-list[b-n9itutxp4x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apps-category-list li[b-n9itutxp4x] {
    font-size: 0.8125rem;
    color: #94a3b8;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.apps-category-list li:last-child[b-n9itutxp4x] {
    border-bottom: none;
}

/* Industry Section */
.apps-industry-section[b-n9itutxp4x] {
    padding-top: 48px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.apps-industry-title[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    text-align: center;
    margin: 0 0 32px 0;
}

.apps-industry-grid[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.apps-industry-card[b-n9itutxp4x] {
    padding: 24px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.apps-industry-card:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.15);
}

.apps-industry-header[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.apps-industry-header .icon[b-n9itutxp4x] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

.apps-industry-header span[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.apps-industry-card p[b-n9itutxp4x] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* ===========================================
   REVENUE TABLE
   =========================================== */
.apps-revenue-content[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.apps-revenue-table-wrapper[b-n9itutxp4x] {
    overflow-x: auto;
}

.apps-revenue-table[b-n9itutxp4x] {
    width: 100%;
    border-collapse: collapse;
    background: #0f1620;
    border-radius: 12px;
    overflow: hidden;
}

.apps-revenue-table th[b-n9itutxp4x],
.apps-revenue-table td[b-n9itutxp4x] {
    padding: 18px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.apps-revenue-table th[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #0a1018;
}

.apps-revenue-table td[b-n9itutxp4x] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.apps-revenue-table td:first-child[b-n9itutxp4x] {
    font-weight: 500;
    color: #f1f5f9;
}

.apps-revenue-table td.highlight[b-n9itutxp4x] {
    color: #22c55e;
    font-weight: 700;
    font-size: 1.125rem;
}

.apps-revenue-table tbody tr:hover td[b-n9itutxp4x] {
    background: rgba(255,255,255,0.02);
}

.apps-revenue-why[b-n9itutxp4x] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.apps-revenue-why h3[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.apps-revenue-why > p[b-n9itutxp4x] {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

.apps-revenue-terms[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.apps-term[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: #64748b;
}

.apps-term .icon[b-n9itutxp4x] {
    width: 14px;
    height: 14px;
    color: #06b6d4;
}

/* ===========================================
   ENTERPRISE FEATURES
   =========================================== */
.apps-enterprise-grid[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.apps-enterprise-card[b-n9itutxp4x] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.apps-enterprise-card:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.apps-enterprise-icon[b-n9itutxp4x] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.apps-enterprise-icon .icon[b-n9itutxp4x] {
    width: 26px;
    height: 26px;
}

.apps-enterprise-icon.cyan[b-n9itutxp4x] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.apps-enterprise-icon.purple[b-n9itutxp4x] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.apps-enterprise-icon.red[b-n9itutxp4x] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.apps-enterprise-card h3[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.apps-enterprise-card > p[b-n9itutxp4x] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.apps-enterprise-list[b-n9itutxp4x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apps-enterprise-list li[b-n9itutxp4x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.875rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.apps-enterprise-list li:last-child[b-n9itutxp4x] {
    border-bottom: none;
}

.apps-enterprise-list li .icon[b-n9itutxp4x] {
    width: 14px;
    height: 14px;
    color: #10b981;
    margin-top: 3px;
    flex-shrink: 0;
}

.apps-enterprise-list li strong[b-n9itutxp4x] {
    color: #f1f5f9;
}

/* ===========================================
   DEVELOPER PLATFORM
   =========================================== */
.apps-dev-content[b-n9itutxp4x] {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.apps-dev-tools[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.apps-dev-card[b-n9itutxp4x] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.apps-dev-card:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.apps-dev-icon[b-n9itutxp4x] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}

.apps-dev-icon .icon[b-n9itutxp4x] {
    width: 22px;
    height: 22px;
}

.apps-dev-icon.cyan[b-n9itutxp4x] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.apps-dev-icon.purple[b-n9itutxp4x] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.apps-dev-icon.green[b-n9itutxp4x] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.apps-dev-card h4[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.apps-dev-card ul[b-n9itutxp4x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apps-dev-card ul li[b-n9itutxp4x] {
    font-size: 0.8125rem;
    color: #94a3b8;
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
}

.apps-dev-card ul li[b-n9itutxp4x]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: 4px;
    background: #06b6d4;
    border-radius: 50%;
}

/* Requirements Section */
.apps-requirements[b-n9itutxp4x] {
    padding: 48px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.apps-requirements > h3[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.apps-requirements > p[b-n9itutxp4x] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 32px 0;
}

.apps-req-grid[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.apps-req-section h4[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.apps-req-section h4 .icon[b-n9itutxp4x] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

.apps-req-section ul[b-n9itutxp4x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apps-req-section ul li[b-n9itutxp4x] {
    font-size: 0.8125rem;
    color: #94a3b8;
    padding: 8px 0;
    padding-left: 16px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.apps-req-section ul li:last-child[b-n9itutxp4x] {
    border-bottom: none;
}

.apps-req-section ul li[b-n9itutxp4x]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 4px;
    height: 4px;
    background: #10b981;
    border-radius: 50%;
}

/* ===========================================
   FLYWHEEL SECTION
   =========================================== */
.apps-flywheel-content[b-n9itutxp4x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.apps-flywheel-diagram[b-n9itutxp4x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.apps-flywheel-item[b-n9itutxp4x] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.apps-flywheel-item:hover[b-n9itutxp4x] {
    border-color: rgba(6,182,212,0.2);
}

.apps-flywheel-item.highlight[b-n9itutxp4x] {
    border-color: rgba(245,158,11,0.3);
    background: linear-gradient(135deg, rgba(245,158,11,0.04) 0%, rgba(15,22,32,1) 100%);
}

.apps-flywheel-num[b-n9itutxp4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border-radius: 6px;
    margin-bottom: 12px;
}

.apps-flywheel-item.highlight .apps-flywheel-num[b-n9itutxp4x] {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
}

.apps-flywheel-text[b-n9itutxp4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.apps-flywheel-text strong[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.apps-flywheel-text .icon[b-n9itutxp4x] {
    width: 14px;
    height: 14px;
    color: #64748b;
}

.apps-flywheel-item p[b-n9itutxp4x] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.apps-flywheel-benefits[b-n9itutxp4x] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.apps-flywheel-benefits h3[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.apps-flywheel-benefits > p[b-n9itutxp4x] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

.apps-flywheel-benefits ul[b-n9itutxp4x] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apps-flywheel-benefits ul li[b-n9itutxp4x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    font-size: 0.9375rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.apps-flywheel-benefits ul li:last-child[b-n9itutxp4x] {
    border-bottom: none;
}

.apps-flywheel-benefits ul li .icon[b-n9itutxp4x] {
    width: 16px;
    height: 16px;
    color: #10b981;
    margin-top: 3px;
    flex-shrink: 0;
}

.apps-flywheel-benefits ul li strong[b-n9itutxp4x] {
    color: #f1f5f9;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.apps-cta[b-n9itutxp4x] {
    position: relative;
    z-index: 1;
    padding: 120px 0;
    text-align: center;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

.apps-cta .container[b-n9itutxp4x] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.apps-cta-content[b-n9itutxp4x] {
    max-width: 700px;
    margin: 0 auto;
}

.apps-cta-content h2[b-n9itutxp4x] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.apps-cta-content > p[b-n9itutxp4x] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.apps-cta-actions[b-n9itutxp4x] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .apps-categories-grid[b-n9itutxp4x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .apps-industry-grid[b-n9itutxp4x] {
        grid-template-columns: repeat(2, 1fr);
    }

    .apps-revenue-content[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-enterprise-grid[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-dev-tools[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-req-grid[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-flywheel-content[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .apps-dual-path[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .apps-cta .container[b-n9itutxp4x] {
        padding: 0 24px;
    }

    .apps-cta-actions[b-n9itutxp4x] {
        flex-direction: column;
    }

    .btn-gold[b-n9itutxp4x],
    .btn-outline[b-n9itutxp4x] {
        width: 100%;
        justify-content: center;
    }

    .apps-categories-grid[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-industry-grid[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-revenue-terms[b-n9itutxp4x] {
        grid-template-columns: 1fr;
    }

    .apps-requirements[b-n9itutxp4x] {
        padding: 32px 24px;
    }
}

@media (max-width: 480px) {
    .apps-mini-card[b-n9itutxp4x] {
        grid-template-columns: 36px 1fr auto;
        gap: 10px;
        padding: 10px 12px;
    }

    .apps-mini-icon[b-n9itutxp4x] {
        width: 36px;
        height: 36px;
    }

    .apps-mini-icon .icon[b-n9itutxp4x] {
        width: 16px;
        height: 16px;
    }

    .apps-step[b-n9itutxp4x] {
        flex-direction: column;
        gap: 12px;
    }

    .apps-path-card[b-n9itutxp4x] {
        padding: 28px;
    }
}
/* /Components/Pages/Platform/Governance.razor.rz.scp.css */
/* ===========================================
   GOVERNANCE PAGE - SLYD DESIGN SYSTEM
   Prefix: gov-
   Page-specific styles (hero/section provided by generic CSS)
   =========================================== */

/* ===========================================
   HERO PREVIEW IMAGE
   =========================================== */

[b-gsatoie6tq](.hero-grid-deco) {
    top: -20px !important;
    right: -20px !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(15deg) scale(1.1) !important;
}

.gov-preview-img[b-gsatoie6tq] {
    position: relative;
    z-index: 1;
    width: 80%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 rgba(6, 182, 212, 0);
    display: block;
    margin: 0 auto;
    animation: gov-glow-b-gsatoie6tq 3s ease-in-out infinite;
}

@keyframes gov-glow-b-gsatoie6tq {
    0%, 100% {
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0px rgba(6, 182, 212, 0);
    }
    50% {
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(6, 182, 212, 0.3), 0 0 60px rgba(6, 182, 212, 0.1);
    }
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.gov-opening[b-gsatoie6tq] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.gov-opening p[b-gsatoie6tq] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.gov-opening-lead[b-gsatoie6tq] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    font-weight: 500;
}

.gov-opening-result[b-gsatoie6tq] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
}

.gov-opening strong[b-gsatoie6tq] {
    color: #06b6d4;
}

/* ===========================================
   SUBSECTION TITLES
   =========================================== */
.gov-subsection-title[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 48px 0 12px 0;
    text-align: center;
}

.gov-subsection-desc[b-gsatoie6tq] {
    font-size: 1rem;
    color: #94a3b8;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 32px;
}

/* ===========================================
   POLICIES TABLE
   =========================================== */
.gov-policies-table[b-gsatoie6tq] {
    max-width: 900px;
    margin: 0 auto 48px;
    overflow-x: auto;
}

.gov-policies-table table[b-gsatoie6tq] {
    width: 100%;
    border-collapse: collapse;
    background: #0f1620;
    border-radius: 12px;
    overflow: hidden;
}

.gov-policies-table th[b-gsatoie6tq],
.gov-policies-table td[b-gsatoie6tq] {
    padding: 18px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gov-policies-table th[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #0a1018;
}

.gov-policies-table td[b-gsatoie6tq] {
    font-size: 0.9375rem;
    color: #f1f5f9;
}

.gov-policies-table td:last-child[b-gsatoie6tq] {
    width: 40%;
}

.gov-policies-table tbody tr:hover td[b-gsatoie6tq] {
    background: rgba(6,182,212,0.03);
}

.gov-enforcement[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 6px 12px;
    border-radius: 4px;
}

/* ===========================================
   POLICY INHERITANCE DIAGRAM
   =========================================== */
.gov-inheritance[b-gsatoie6tq] {
    max-width: 600px;
    margin: 0 auto 48px;
}

.gov-inheritance-diagram[b-gsatoie6tq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.gov-inherit-level[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    padding: 16px 20px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.gov-inherit-level:hover[b-gsatoie6tq] {
    border-color: rgba(6,182,212,0.3);
    transform: translateX(4px);
}

.gov-inherit-level.l1[b-gsatoie6tq] { border-left: 4px solid #06b6d4; }
.gov-inherit-level.l2[b-gsatoie6tq] { border-left: 4px solid #8b5cf6; }
.gov-inherit-level.l3[b-gsatoie6tq] { border-left: 4px solid #22c55e; }
.gov-inherit-level.l4[b-gsatoie6tq] { border-left: 4px solid #f59e0b; }

.gov-inherit-icon[b-gsatoie6tq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 10px;
    flex-shrink: 0;
}

.gov-inherit-icon :deep(.icon)[b-gsatoie6tq] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

.gov-inherit-content[b-gsatoie6tq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gov-inherit-label[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.gov-inherit-example[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #64748b;
}

.gov-inherit-arrow[b-gsatoie6tq] {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    color: #475569;
}

.gov-inherit-arrow :deep(.icon)[b-gsatoie6tq] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   ENFORCEMENT FLOW
   =========================================== */
.gov-enforcement-flow[b-gsatoie6tq] {
    max-width: 800px;
    margin: 0 auto;
}

.gov-flow-steps[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.gov-flow-step[b-gsatoie6tq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    text-align: center;
}

.gov-flow-step span[b-gsatoie6tq] {
    font-size: 0.875rem;
    color: #94a3b8;
    max-width: 120px;
}

.gov-flow-number[b-gsatoie6tq] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border: 2px solid rgba(6,182,212,0.3);
    border-radius: 50%;
}

.gov-flow-step.decision .gov-flow-number[b-gsatoie6tq] {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
}

.gov-flow-connector[b-gsatoie6tq] {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(6,182,212,0.3), rgba(139,92,246,0.3));
}

/* ===========================================
   AUDIT LOGGING SECTION
   =========================================== */
.gov-audit-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.gov-audit-types[b-gsatoie6tq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gov-audit-category[b-gsatoie6tq] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.gov-audit-category-header[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.gov-audit-category-header :deep(.icon)[b-gsatoie6tq] {
    width: 20px;
    height: 20px;
    color: #06b6d4;
}

.gov-audit-category-header h4[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.gov-audit-category ul[b-gsatoie6tq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gov-audit-category ul li[b-gsatoie6tq] {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
}

.gov-audit-category ul li[b-gsatoie6tq]::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #475569;
}

/* Log Example */
.gov-log-example[b-gsatoie6tq] {
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
}

.gov-log-header[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #0f1620;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #64748b;
}

.gov-log-header :deep(.icon)[b-gsatoie6tq] {
    width: 14px;
    height: 14px;
    color: #06b6d4;
}

.gov-log-code[b-gsatoie6tq] {
    padding: 20px;
    margin: 0;
    overflow-x: auto;
}

.gov-log-code code[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #94a3b8;
    white-space: pre;
}

/* ===========================================
   LOG INTEGRITY CARDS
   =========================================== */
.gov-integrity-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gov-integrity-card[b-gsatoie6tq] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.gov-integrity-card:hover[b-gsatoie6tq] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.gov-integrity-icon[b-gsatoie6tq] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin: 0 auto 16px;
}

.gov-integrity-icon :deep(.icon)[b-gsatoie6tq] {
    width: 22px;
    height: 22px;
}

.gov-integrity-icon.cyan[b-gsatoie6tq] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.gov-integrity-icon.purple[b-gsatoie6tq] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.gov-integrity-icon.green[b-gsatoie6tq] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.gov-integrity-icon.gold[b-gsatoie6tq] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.gov-integrity-card h4[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.gov-integrity-card p[b-gsatoie6tq] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ===========================================
   REPORTS TABLE
   =========================================== */
.gov-reports-table[b-gsatoie6tq] {
    max-width: 900px;
    margin: 0 auto 48px;
    overflow-x: auto;
}

.gov-reports-table table[b-gsatoie6tq] {
    width: 100%;
    border-collapse: collapse;
    background: #0f1620;
    border-radius: 12px;
    overflow: hidden;
}

.gov-reports-table th[b-gsatoie6tq],
.gov-reports-table td[b-gsatoie6tq] {
    padding: 16px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gov-reports-table th[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #0a1018;
}

.gov-reports-table td[b-gsatoie6tq] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.gov-reports-table td:first-child[b-gsatoie6tq] {
    color: #f1f5f9;
    font-weight: 500;
}

.gov-reports-table td :deep(.icon)[b-gsatoie6tq] {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    color: #06b6d4;
    vertical-align: middle;
}

.gov-reports-table tbody tr:hover td[b-gsatoie6tq] {
    background: rgba(6,182,212,0.03);
}

/* ===========================================
   EXPORT FORMATS GRID
   =========================================== */
.gov-export-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.gov-export-card[b-gsatoie6tq] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.gov-export-card:hover[b-gsatoie6tq] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.gov-export-icon[b-gsatoie6tq] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 12px;
    margin: 0 auto 16px;
}

.gov-export-icon :deep(.icon)[b-gsatoie6tq] {
    width: 22px;
    height: 22px;
    color: #06b6d4;
}

.gov-export-card h4[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.gov-export-card p[b-gsatoie6tq] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

/* ===========================================
   EVIDENCE COLLECTION
   =========================================== */
.gov-evidence[b-gsatoie6tq] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.gov-evidence-items[b-gsatoie6tq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
}

.gov-evidence-items span[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.gov-evidence-items :deep(.icon)[b-gsatoie6tq] {
    width: 14px;
    height: 14px;
    color: #10b981;
}

/* ===========================================
   COMPLIANCE BLUEPRINTS GRID
   =========================================== */
.gov-blueprints-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.gov-blueprint-card[b-gsatoie6tq] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.gov-blueprint-card:hover[b-gsatoie6tq] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.gov-blueprint-header[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.gov-blueprint-icon[b-gsatoie6tq] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.gov-blueprint-icon :deep(.icon)[b-gsatoie6tq] {
    width: 26px;
    height: 26px;
}

.gov-blueprint-icon.cyan[b-gsatoie6tq] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.gov-blueprint-icon.purple[b-gsatoie6tq] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.gov-blueprint-icon.green[b-gsatoie6tq] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.gov-blueprint-icon.gold[b-gsatoie6tq] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.gov-blueprint-header h3[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.gov-blueprint-features[b-gsatoie6tq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gov-blueprint-features li[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gov-blueprint-features li:last-child[b-gsatoie6tq] {
    border-bottom: none;
}

.gov-blueprint-features :deep(.icon)[b-gsatoie6tq] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
}

/* ===========================================
   GOVERNANCE WORKFLOWS
   =========================================== */
.gov-workflows-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.gov-workflow-card[b-gsatoie6tq] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.gov-workflow-header[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.gov-workflow-header :deep(.icon)[b-gsatoie6tq] {
    width: 24px;
    height: 24px;
    color: #06b6d4;
}

.gov-workflow-header h3[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.gov-workflow-desc[b-gsatoie6tq] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin-bottom: 20px;
}

.gov-workflow-example[b-gsatoie6tq] {
    background: #0a1018;
    border-radius: 10px;
    padding: 20px;
}

.gov-workflow-trigger[b-gsatoie6tq],
.gov-workflow-requirements[b-gsatoie6tq],
.gov-workflow-escalation[b-gsatoie6tq] {
    margin-bottom: 16px;
}

.gov-workflow-trigger:last-child[b-gsatoie6tq],
.gov-workflow-requirements:last-child[b-gsatoie6tq],
.gov-workflow-escalation:last-child[b-gsatoie6tq] {
    margin-bottom: 0;
}

.gov-workflow-label[b-gsatoie6tq] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 6px;
}

.gov-workflow-trigger[b-gsatoie6tq],
.gov-workflow-escalation[b-gsatoie6tq] {
    font-size: 0.9375rem;
    color: #f1f5f9;
}

.gov-workflow-requirements ol[b-gsatoie6tq] {
    margin: 0;
    padding-left: 20px;
}

.gov-workflow-requirements ol li[b-gsatoie6tq] {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 4px 0;
}

/* Exception Steps */
.gov-exception-steps[b-gsatoie6tq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gov-exception-step[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #0a1018;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #94a3b8;
}

.gov-exception-num[b-gsatoie6tq] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===========================================
   PERIODIC REVIEWS
   =========================================== */
.gov-reviews[b-gsatoie6tq] {
    max-width: 800px;
    margin: 0 auto;
}

.gov-reviews-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gov-review-item[b-gsatoie6tq] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-align: center;
}

.gov-review-freq[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}

.gov-review-name[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.gov-review-desc[b-gsatoie6tq] {
    font-size: 0.8125rem;
    color: #64748b;
}

/* ===========================================
   ROLES TABLE
   =========================================== */
.gov-roles-table[b-gsatoie6tq] {
    max-width: 800px;
    margin: 0 auto 48px;
    overflow-x: auto;
}

.gov-roles-table table[b-gsatoie6tq] {
    width: 100%;
    border-collapse: collapse;
    background: #0f1620;
    border-radius: 12px;
    overflow: hidden;
}

.gov-roles-table th[b-gsatoie6tq],
.gov-roles-table td[b-gsatoie6tq] {
    padding: 18px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gov-roles-table th[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #0a1018;
}

.gov-roles-table td[b-gsatoie6tq] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.gov-roles-table td:first-child[b-gsatoie6tq] {
    color: #f1f5f9;
    width: 200px;
}

.gov-roles-table tbody tr:hover td[b-gsatoie6tq] {
    background: rgba(6,182,212,0.03);
}

/* ===========================================
   SEPARATION OF DUTIES
   =========================================== */
.gov-separation[b-gsatoie6tq] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.gov-separation-rules[b-gsatoie6tq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.gov-separation-rule[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #0f1620;
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.gov-separation-rule :deep(.icon)[b-gsatoie6tq] {
    width: 16px;
    height: 16px;
    color: #ef4444;
    flex-shrink: 0;
}

/* ===========================================
   INTEGRATIONS GRID
   =========================================== */
.gov-integrations-grid[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gov-integration-card[b-gsatoie6tq] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.gov-integration-card:hover[b-gsatoie6tq] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.gov-integration-header[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.gov-integration-icon[b-gsatoie6tq] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.gov-integration-icon :deep(.icon)[b-gsatoie6tq] {
    width: 22px;
    height: 22px;
}

.gov-integration-icon.cyan[b-gsatoie6tq] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.gov-integration-icon.purple[b-gsatoie6tq] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.gov-integration-icon.green[b-gsatoie6tq] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.gov-integration-header h3[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.gov-integration-card > p[b-gsatoie6tq] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.gov-integration-list[b-gsatoie6tq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gov-integration-list span[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #64748b;
    background: #0a1018;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
}

/* ===========================================
   FAQ
   =========================================== */
.gov-faq-list[b-gsatoie6tq] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gov-faq-item[b-gsatoie6tq] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.gov-faq-item:hover[b-gsatoie6tq] {
    border-color: rgba(255, 255, 255, 0.12);
}

.gov-faq-item summary[b-gsatoie6tq] {
    cursor: pointer;
    list-style: none;
    padding: 20px 52px 20px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    position: relative;
}

.gov-faq-item summary[b-gsatoie6tq]::-webkit-details-marker {
    display: none;
}

.gov-faq-item summary[b-gsatoie6tq]::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #06b6d4;
    font-size: 1.25rem;
    line-height: 1;
}

.gov-faq-item[open] summary[b-gsatoie6tq]::after {
    content: "\2212";
}

.gov-faq-item p[b-gsatoie6tq] {
    margin: 0;
    padding: 0 24px 20px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #94a3b8;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.gov-cta[b-gsatoie6tq] {
    position: relative;
    z-index: 1;
    padding: 120px 0;
    text-align: center;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

.gov-cta .container[b-gsatoie6tq] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.gov-cta-content[b-gsatoie6tq] {
    max-width: 700px;
    margin: 0 auto;
}

.gov-cta-content h2[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.gov-cta-content > p[b-gsatoie6tq] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 40px 0;
}

.gov-cta-actions[b-gsatoie6tq] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .gov-blueprints-grid[b-gsatoie6tq],
    .gov-workflows-grid[b-gsatoie6tq] {
        grid-template-columns: 1fr;
    }

    .gov-integrations-grid[b-gsatoie6tq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .gov-audit-grid[b-gsatoie6tq] {
        grid-template-columns: 1fr;
    }

    .gov-integrity-grid[b-gsatoie6tq],
    .gov-export-grid[b-gsatoie6tq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .gov-reviews-grid[b-gsatoie6tq] {
        grid-template-columns: 1fr;
    }

    .gov-integrations-grid[b-gsatoie6tq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .gov-cta .container[b-gsatoie6tq] {
        padding: 0 24px;
    }

    .gov-cta-actions[b-gsatoie6tq] {
        flex-direction: column;
    }

    .btn-gold[b-gsatoie6tq],
    .btn-outline[b-gsatoie6tq] {
        width: 100%;
        justify-content: center;
    }

    .gov-flow-steps[b-gsatoie6tq] {
        flex-direction: column;
        gap: 8px;
    }

    .gov-flow-connector[b-gsatoie6tq] {
        width: 2px;
        height: 20px;
    }

    .gov-integrity-grid[b-gsatoie6tq],
    .gov-export-grid[b-gsatoie6tq] {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {
    .gov-policies-table[b-gsatoie6tq],
    .gov-reports-table[b-gsatoie6tq],
    .gov-roles-table[b-gsatoie6tq] {
        margin-left: -24px;
        margin-right: -24px;
        border-radius: 0;
    }

    .gov-policies-table table[b-gsatoie6tq],
    .gov-reports-table table[b-gsatoie6tq],
    .gov-roles-table table[b-gsatoie6tq] {
        border-radius: 0;
    }
}
/* /Components/Pages/Platform/Platform.razor.rz.scp.css */
/* ============================================================
   Platform (/platform) — Track 2 V3 reskin.
   Mockup-verbatim CSS from SLYD Platform v1.html (L32-198),
   namespaced v3plat-, scoped under .v3plat wrapper.
   ============================================================ */

.v3plat[b-vyt28y3yxr] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --primary-dark: var(--slyd-primary-dark);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3plat *[b-vyt28y3yxr],
.v3plat *[b-vyt28y3yxr]::before,
.v3plat *[b-vyt28y3yxr]::after { box-sizing: border-box; }

.v3plat a[b-vyt28y3yxr] { color: inherit; text-decoration: none; }

.v3plat .v3plat-wrap[b-vyt28y3yxr] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) {
    .v3plat .v3plat-wrap[b-vyt28y3yxr] { padding: 0 20px; }
}

.v3plat .v3plat-a[b-vyt28y3yxr] { color: var(--primary); }
.v3plat .v3plat-b[b-vyt28y3yxr] { color: var(--gold); }

/* Buttons */
.v3plat .v3plat-btn[b-vyt28y3yxr] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3plat .v3plat-btn-ghost[b-vyt28y3yxr] {
    color: var(--text-secondary);
    border-color: var(--border-hover);
}

.v3plat .v3plat-btn-ghost:hover[b-vyt28y3yxr] {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

.v3plat .v3plat-btn-primary[b-vyt28y3yxr] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3plat .v3plat-btn-primary:hover[b-vyt28y3yxr] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3plat .v3plat-btn-indigo[b-vyt28y3yxr] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.v3plat .v3plat-btn-indigo:hover[b-vyt28y3yxr] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.v3plat .v3plat-arr[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    color: currentColor;
    opacity: .7;
}

/* ───── HERO ───── */

.v3plat .v3plat-hero[b-vyt28y3yxr] {
    position: relative;
    overflow: hidden;
    padding: 80px 0 56px;
}

.v3plat .v3plat-hero[b-vyt28y3yxr]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 600px at 75% 0%, var(--primary-glow), transparent 65%);
}

.v3plat .v3plat-hero[b-vyt28y3yxr]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 600px at 60% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 600px at 60% 30%, #000 30%, transparent 75%);
}

.v3plat .v3plat-eyebrow[b-vyt28y3yxr] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 20px;
}

.v3plat .v3plat-eyebrow[b-vyt28y3yxr]::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--primary);
}

.v3plat .v3plat-hero-h1[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 84px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    max-width: 1100px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3plat .v3plat-sub[b-vyt28y3yxr] {
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--text-secondary);
    max-width: 720px;
    line-height: 1.5;
    margin: 0 0 48px;
}

/* Pipeline overview chips */
.v3plat .v3plat-pipe-overview[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-width: 1100px;
    position: relative;
}

.v3plat .v3plat-pipe-chip[b-vyt28y3yxr] {
    padding: 18px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    transition: border-color .15s, transform .15s;
    cursor: pointer;
    color: var(--text-primary);
}

.v3plat .v3plat-pipe-chip:hover[b-vyt28y3yxr] {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.v3plat .v3plat-pipe-n[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.v3plat .v3plat-pipe-dot[b-vyt28y3yxr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.v3plat .v3plat-pipe-nm[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.v3plat .v3plat-pipe-v[b-vyt28y3yxr] { color: var(--primary); }

.v3plat .v3plat-pipe-tag[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.v3plat .v3plat-pipe-chip[b-vyt28y3yxr]::after {
    content: "→";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-body);
    width: 14px;
    text-align: center;
    z-index: 1;
}

.v3plat .v3plat-pipe-chip:last-child[b-vyt28y3yxr]::after { display: none; }

/* ───── STEP SECTIONS ───── */

.v3plat .v3plat-step-sec[b-vyt28y3yxr] {
    padding: 88px 0;
    border-top: 1px solid var(--border-subtle);
    position: relative;
}

.v3plat .v3plat-step-alt[b-vyt28y3yxr] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3plat .v3plat-step-grid[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.v3plat .v3plat-step-right .v3plat-step-grid[b-vyt28y3yxr] { direction: rtl; }
.v3plat .v3plat-step-right .v3plat-step-grid > *[b-vyt28y3yxr] { direction: ltr; }

.v3plat .v3plat-step-badge[b-vyt28y3yxr] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 20px;
}

.v3plat .v3plat-step-num[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
}

.v3plat .v3plat-step-h2[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 56px);
    letter-spacing: -0.035em;
    line-height: 1.0;
    margin: 0 0 16px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3plat .v3plat-step-lede[b-vyt28y3yxr] {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 520px;
}

.v3plat .v3plat-step-feats[b-vyt28y3yxr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}

.v3plat .v3plat-sf[b-vyt28y3yxr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3plat .v3plat-sf-dot[b-vyt28y3yxr] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--primary) 16%, transparent);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 700;
}

.v3plat .v3plat-sf strong[b-vyt28y3yxr] {
    color: var(--text-primary);
    font-weight: 600;
}

.v3plat .v3plat-step-cta[b-vyt28y3yxr] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Visual side card */
.v3plat .v3plat-step-visual[b-vyt28y3yxr] { position: relative; }

.v3plat .v3plat-step-card[b-vyt28y3yxr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 30px;
    position: relative;
    overflow: hidden;
}

.v3plat .v3plat-step-card[b-vyt28y3yxr]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    opacity: .5;
    pointer-events: none;
}

.v3plat .v3plat-v-lbl[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    position: relative;
}

.v3plat .v3plat-v-title[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    position: relative;
    color: var(--text-primary);
}

.v3plat .v3plat-v-rows[b-vyt28y3yxr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.v3plat .v3plat-v-row[b-vyt28y3yxr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.v3plat .v3plat-v-name[b-vyt28y3yxr] {
    flex: 1;
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
}

.v3plat .v3plat-v-meta[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}

.v3plat .v3plat-v-val[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.v3plat .v3plat-v-tag[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--success);
    padding: 3px 7px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--success) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
    text-transform: uppercase;
}

.v3plat .v3plat-v-tag-gold[b-vyt28y3yxr] {
    color: var(--gold);
    background: var(--gold-soft);
    border-color: color-mix(in oklab, var(--gold) 30%, transparent);
}

.v3plat .v3plat-v-tag-indigo[b-vyt28y3yxr] {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3plat .v3plat-v-foot[b-vyt28y3yxr] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    position: relative;
}

/* ───── WHY THIS MATTERS ───── */

.v3plat .v3plat-why-sec[b-vyt28y3yxr] {
    padding: 88px 0;
    border-top: 1px solid var(--border);
}

.v3plat .v3plat-why-head[b-vyt28y3yxr] {
    margin-bottom: 48px;
    max-width: 780px;
}

.v3plat .v3plat-why-kicker[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3plat .v3plat-why-h2[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3plat .v3plat-why-lede[b-vyt28y3yxr] {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3plat .v3plat-why-grid[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.v3plat .v3plat-why-card[b-vyt28y3yxr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 30px 28px 28px;
    position: relative;
    overflow: hidden;
}

.v3plat .v3plat-wn[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.v3plat .v3plat-why-card h3[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--text-primary);
}

.v3plat .v3plat-why-card p[b-vyt28y3yxr] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* Revenue lines table */
.v3plat .v3plat-rev-card[b-vyt28y3yxr] {
    margin-top: 42px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3plat .v3plat-rev-head[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 14px 28px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
}

.v3plat .v3plat-rev-row[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 18px 28px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
    gap: 14px;
}

.v3plat .v3plat-rev-row:last-child[b-vyt28y3yxr] { border-bottom: none; }

.v3plat .v3plat-rev-n[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.v3plat .v3plat-rev-src[b-vyt28y3yxr],
.v3plat .v3plat-rev-when[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.v3plat .v3plat-rev-src[b-vyt28y3yxr] { color: var(--text-tertiary); }

.v3plat .v3plat-rev-risk[b-vyt28y3yxr] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--success);
    letter-spacing: 0.05em;
}

/* ───── FINAL CTA ───── */

.v3plat .v3plat-cta-strip[b-vyt28y3yxr] {
    padding: 80px 0 96px;
}

.v3plat .v3plat-cta-card[b-vyt28y3yxr] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 42px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.v3plat .v3plat-cta-card[b-vyt28y3yxr]::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3plat .v3plat-ctt[b-vyt28y3yxr] { position: relative; }

.v3plat .v3plat-ctt h3[b-vyt28y3yxr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.1;
    color: var(--text-primary);
}

.v3plat .v3plat-ctt p[b-vyt28y3yxr] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 540px;
    line-height: 1.55;
}

.v3plat .v3plat-cact[b-vyt28y3yxr] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ───── FAQ ───── */

.v3plat .v3plat-faq-sec[b-vyt28y3yxr] {
    padding: 88px 0;
    border-top: 1px solid var(--border);
}

.v3plat .v3plat-faq-list[b-vyt28y3yxr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
}

.v3plat .v3plat-faq[b-vyt28y3yxr] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3plat .v3plat-faq-q[b-vyt28y3yxr] {
    cursor: pointer;
    list-style: none;
    padding: 20px 52px 20px 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    position: relative;
}

.v3plat .v3plat-faq-q[b-vyt28y3yxr]::-webkit-details-marker { display: none; }

.v3plat .v3plat-faq-q[b-vyt28y3yxr]::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 18px;
    line-height: 1;
}

.v3plat .v3plat-faq[open] .v3plat-faq-q[b-vyt28y3yxr]::after { content: "\2212"; }

.v3plat .v3plat-faq-a[b-vyt28y3yxr] {
    margin: 0;
    padding: 0 24px 20px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 780px;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1080px) {
    .v3plat .v3plat-pipe-overview[b-vyt28y3yxr] { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .v3plat .v3plat-pipe-chip[b-vyt28y3yxr]::after { display: none; }
    .v3plat .v3plat-step-grid[b-vyt28y3yxr] { grid-template-columns: 1fr; gap: 32px; }
    .v3plat .v3plat-step-right .v3plat-step-grid[b-vyt28y3yxr] { direction: ltr; }
    .v3plat .v3plat-why-grid[b-vyt28y3yxr] { grid-template-columns: 1fr; }
    .v3plat .v3plat-rev-head[b-vyt28y3yxr] { display: none; }
    .v3plat .v3plat-rev-row[b-vyt28y3yxr] { grid-template-columns: 1fr; gap: 6px; padding: 18px 24px; }
    .v3plat .v3plat-cta-card[b-vyt28y3yxr] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Pages/Platform/PlatformStack.razor.rz.scp.css */
/* ===========================================
   PLATFORM STACK - Layered Architecture Blocks
   Clean 2D stacked bars, no fake 3D
   =========================================== */

.plat-stack[b-nf15epq72c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

.plat-block[b-nf15epq72c] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.plat-block-label[b-nf15epq72c] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.85);
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

/* Accent edge along top */
.plat-block[b-nf15epq72c]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1.5px;
    border-radius: 0 0 4px 4px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.plat-block:hover[b-nf15epq72c] {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.plat-block:hover .plat-block-label[b-nf15epq72c] {
    color: #f1f5f9;
}

.plat-block:hover[b-nf15epq72c]::before {
    left: 10%;
    right: 10%;
}


/* ===========================================
   SLYD OS - Blue
   =========================================== */
.plat-block--os[b-nf15epq72c] {
    width: 100%;
    height: 68px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.plat-block--os .plat-block-label[b-nf15epq72c] {
    font-size: 1.0625rem;
}

.plat-block--os[b-nf15epq72c]::before {
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.plat-block--os:hover[b-nf15epq72c] {
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(59, 130, 246, 0.06);
}

.plat-block--os:hover[b-nf15epq72c]::before {
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.45);
}


/* ===========================================
   Benson AI - Purple
   =========================================== */
.plat-block--benson[b-nf15epq72c] {
    width: 100%;
    height: 72px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.plat-block--benson .plat-block-label[b-nf15epq72c] {
    font-size: 1.1875rem;
}

.plat-block--benson[b-nf15epq72c]::before {
    background: #7c3aed;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
}

.plat-block--benson:hover[b-nf15epq72c] {
    border-color: rgba(124, 58, 237, 0.15);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(124, 58, 237, 0.06);
}

.plat-block--benson:hover[b-nf15epq72c]::before {
    box-shadow: 0 0 14px rgba(124, 58, 237, 0.45);
}


/* ===========================================
   Security - Teal
   =========================================== */
.plat-block--security[b-nf15epq72c] {
    width: 100%;
    height: 76px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.plat-block--security .plat-block-label[b-nf15epq72c] {
    font-size: 1.3125rem;
}

.plat-block--security[b-nf15epq72c]::before {
    background: #06b6d4;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

.plat-block--security:hover[b-nf15epq72c] {
    border-color: rgba(6, 182, 212, 0.15);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(6, 182, 212, 0.06);
}

.plat-block--security:hover[b-nf15epq72c]::before {
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.45);
}


/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    .plat-stack[b-nf15epq72c] {
        max-width: 440px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .plat-stack[b-nf15epq72c] {
        max-width: 380px;
        gap: 8px;
    }

    .plat-block--os[b-nf15epq72c] { height: 58px; }
    .plat-block--benson[b-nf15epq72c] { height: 62px; }
    .plat-block--security[b-nf15epq72c] { height: 66px; }

    .plat-block--os .plat-block-label[b-nf15epq72c] { font-size: 1rem; }
    .plat-block--benson .plat-block-label[b-nf15epq72c] { font-size: 1.0625rem; }
    .plat-block--security .plat-block-label[b-nf15epq72c] { font-size: 1.1875rem; }
}

@media (max-width: 480px) {
    .plat-stack[b-nf15epq72c] {
        max-width: 300px;
        gap: 8px;
    }

    .plat-block--os[b-nf15epq72c] { height: 52px; }
    .plat-block--benson[b-nf15epq72c] { height: 56px; }
    .plat-block--security[b-nf15epq72c] { height: 60px; }

    .plat-block--os .plat-block-label[b-nf15epq72c] { font-size: 0.9375rem; }
    .plat-block--benson .plat-block-label[b-nf15epq72c] { font-size: 1rem; }
    .plat-block--security .plat-block-label[b-nf15epq72c] { font-size: 1.0625rem; }
}
/* /Components/Pages/Platform/Security.razor.rz.scp.css */
/* ============================================================
   Platform Security/Trust (/platform/security) — Track 2 V3.
   Mockup-verbatim CSS from SLYD Trust v1.html (L34-201),
   namespaced v3sec-, scoped under .v3sec wrapper.
   ============================================================ */

.v3sec[b-nviiqetz3k] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --gold-soft: var(--slyd-accent-gold-soft);
    --success: var(--slyd-success);
    --warning: var(--slyd-warning);
    --danger: var(--slyd-danger);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-input: var(--slyd-bg-input);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --grid-line: var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04));
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3sec *[b-nviiqetz3k],
.v3sec *[b-nviiqetz3k]::before,
.v3sec *[b-nviiqetz3k]::after { box-sizing: border-box; }

.v3sec a[b-nviiqetz3k] { color: inherit; text-decoration: none; }
.v3sec button[b-nviiqetz3k] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3sec .v3sec-wrap[b-nviiqetz3k] { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 780px) { .v3sec .v3sec-wrap[b-nviiqetz3k] { padding: 0 20px; } }

.v3sec .v3sec-a[b-nviiqetz3k] { color: var(--primary); }

/* Buttons */
.v3sec .v3sec-btn[b-nviiqetz3k] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.v3sec .v3sec-btn-ghost[b-nviiqetz3k] { color: var(--text-secondary); border-color: var(--border-hover); }
.v3sec .v3sec-btn-ghost:hover[b-nviiqetz3k] { color: var(--text-primary); border-color: var(--text-tertiary); }

.v3sec .v3sec-btn-primary[b-nviiqetz3k] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3sec .v3sec-btn-primary:hover[b-nviiqetz3k] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3sec .v3sec-arr[b-nviiqetz3k] { font-family: var(--font-mono); opacity: .7; }

/* ───── HERO ───── */
.v3sec .v3sec-hero[b-nviiqetz3k] { position: relative; overflow: hidden; padding: 80px 0 48px; }

.v3sec .v3sec-hero[b-nviiqetz3k]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(900px 520px at 75% 0%, var(--primary-glow), transparent 65%);
}

.v3sec .v3sec-hero[b-nviiqetz3k]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
}

.v3sec .v3sec-eyebrow[b-nviiqetz3k] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 20px;
}

.v3sec .v3sec-eyebrow[b-nviiqetz3k]::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

.v3sec .v3sec-h1[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 6.5vw, 78px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
    max-width: 1000px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3sec .v3sec-sub[b-nviiqetz3k] {
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--text-secondary);
    max-width: 720px;
    line-height: 1.5;
    margin: 0 0 40px;
}

/* ───── PILLARS ───── */
.v3sec .v3sec-pillars[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v3sec .v3sec-pillar[b-nviiqetz3k] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: border-color .15s, transform .15s;
}

.v3sec .v3sec-pillar:hover[b-nviiqetz3k] { border-color: var(--primary); transform: translateY(-2px); }

.v3sec .v3sec-ic[b-nviiqetz3k] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.v3sec .v3sec-ic svg[b-nviiqetz3k] { width: 20px; height: 20px; }

.v3sec .v3sec-pilh[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    margin: 0 0 7px;
    color: var(--text-primary);
}

.v3sec .v3sec-pilp[b-nviiqetz3k] {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* ───── SECTION CHROME ───── */
.v3sec .v3sec-section[b-nviiqetz3k] { padding: 76px 0; border-top: 1px solid var(--border-subtle); }

.v3sec .v3sec-section-alt[b-nviiqetz3k] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.v3sec .v3sec-section-head[b-nviiqetz3k] { margin-bottom: 40px; max-width: 780px; }

.v3sec .v3sec-kicker[b-nviiqetz3k] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}

.v3sec .v3sec-sh[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;
    color: var(--text-primary);
}

.v3sec .v3sec-lede[b-nviiqetz3k] {
    font-size: 16.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ───── CUSTODY MODEL ───── */
.v3sec .v3sec-custody[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.v3sec .v3sec-cust-card[b-nviiqetz3k] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 30px 28px;
    position: relative;
    overflow: hidden;
}

.v3sec .v3sec-cust-card[b-nviiqetz3k]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    opacity: .4;
    pointer-events: none;
}

.v3sec .v3sec-cust-role[b-nviiqetz3k] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.v3sec .v3sec-cust-h[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.v3sec .v3sec-cust-p[b-nviiqetz3k] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3sec .v3sec-holds[b-nviiqetz3k] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.v3sec .v3sec-holds strong[b-nviiqetz3k] { color: var(--text-primary); font-weight: 600; }

/* ───── AUDIT TRAIL ───── */
.v3sec .v3sec-audit[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.v3sec .v3sec-au-h[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--text-primary);
}

.v3sec .v3sec-au-p[b-nviiqetz3k] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}

.v3sec .v3sec-afeats[b-nviiqetz3k] { display: flex; flex-direction: column; gap: 11px; }

.v3sec .v3sec-af[b-nviiqetz3k] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v3sec .v3sec-ac[b-nviiqetz3k] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.v3sec .v3sec-ac svg[b-nviiqetz3k] { width: 11px; height: 11px; }
.v3sec .v3sec-af strong[b-nviiqetz3k] { color: var(--text-primary); font-weight: 600; }

.v3sec .v3sec-audit-visual[b-nviiqetz3k] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3sec .v3sec-av-top[b-nviiqetz3k] {
    padding: 16px 22px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v3sec .v3sec-av-live[b-nviiqetz3k] { color: var(--success); display: inline-flex; align-items: center; gap: 7px; }

.v3sec .v3sec-av-live[b-nviiqetz3k]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3sec-pulse-b-nviiqetz3k 1.8s ease-in-out infinite;
}

@keyframes v3sec-pulse-b-nviiqetz3k {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; transform: scale(1.3); }
}

.v3sec .v3sec-av-rows[b-nviiqetz3k] { padding: 8px 0; }

.v3sec .v3sec-av-row[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 11px 22px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
}

.v3sec .v3sec-av-row:last-child[b-nviiqetz3k] { border-bottom: none; }

.v3sec .v3sec-ts[b-nviiqetz3k] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.v3sec .v3sec-ev[b-nviiqetz3k] { font-size: 13px; color: var(--text-primary); }

.v3sec .v3sec-actor[b-nviiqetz3k] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    display: block;
    margin-top: 2px;
}

.v3sec .v3sec-hash[b-nviiqetz3k] {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--primary);
    letter-spacing: 0.04em;
}

/* ───── DATA CONTROL ───── */
.v3sec .v3sec-sov-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.v3sec .v3sec-sov-card[b-nviiqetz3k] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
}

.v3sec .v3sec-sovh[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.v3sec .v3sec-sovp[b-nviiqetz3k] {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ───── COMPLIANCE ROADMAP ───── */
.v3sec .v3sec-roadmap-note[b-nviiqetz3k] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 32px;
    max-width: 820px;
}

.v3sec .v3sec-rn-ic[b-nviiqetz3k] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.v3sec .v3sec-rn-ic svg[b-nviiqetz3k] { width: 15px; height: 15px; }

.v3sec .v3sec-roadmap-note p[b-nviiqetz3k] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.v3sec .v3sec-roadmap-note strong[b-nviiqetz3k] { color: var(--text-primary); }

.v3sec .v3sec-road-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v3sec .v3sec-road-card[b-nviiqetz3k] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px;
}

.v3sec .v3sec-rstatus[b-nviiqetz3k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.v3sec .v3sec-rs-progress[b-nviiqetz3k] {
    color: var(--warning);
    background: var(--gold-soft);
    border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}

.v3sec .v3sec-rs-planned[b-nviiqetz3k] {
    color: var(--text-tertiary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.v3sec .v3sec-rs-progress[b-nviiqetz3k]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
}

.v3sec .v3sec-rs-planned[b-nviiqetz3k]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

.v3sec .v3sec-rh[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.v3sec .v3sec-rp[b-nviiqetz3k] {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* ───── FAQ ───── */
.v3sec .v3sec-faq-list[b-nviiqetz3k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
}

.v3sec .v3sec-faq[b-nviiqetz3k] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.v3sec .v3sec-faq-q[b-nviiqetz3k] {
    cursor: pointer;
    list-style: none;
    padding: 20px 52px 20px 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    position: relative;
}

.v3sec .v3sec-faq-q[b-nviiqetz3k]::-webkit-details-marker { display: none; }

.v3sec .v3sec-faq-q[b-nviiqetz3k]::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 18px;
    line-height: 1;
}

.v3sec .v3sec-faq[open] .v3sec-faq-q[b-nviiqetz3k]::after { content: "\2212"; }

.v3sec .v3sec-faq-a[b-nviiqetz3k] {
    margin: 0;
    padding: 0 24px 20px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 780px;
}

/* ───── CTA ───── */
.v3sec .v3sec-cta-strip[b-nviiqetz3k] { padding: 72px 0 96px; }

.v3sec .v3sec-cta-card[b-nviiqetz3k] {
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.v3sec .v3sec-cta-card[b-nviiqetz3k]::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    pointer-events: none;
}

.v3sec .v3sec-ctt[b-nviiqetz3k] { position: relative; }

.v3sec .v3sec-cth[b-nviiqetz3k] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.1;
    color: var(--text-primary);
}

.v3sec .v3sec-ctp[b-nviiqetz3k] {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 520px;
    line-height: 1.55;
}

.v3sec .v3sec-cact[b-nviiqetz3k] {
    display: flex;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 1080px) {
    .v3sec .v3sec-pillars[b-nviiqetz3k] { grid-template-columns: repeat(2, 1fr); }
    .v3sec .v3sec-custody[b-nviiqetz3k] { grid-template-columns: 1fr; }
    .v3sec .v3sec-audit[b-nviiqetz3k] { grid-template-columns: 1fr; gap: 32px; }
    .v3sec .v3sec-sov-grid[b-nviiqetz3k] { grid-template-columns: 1fr; }
    .v3sec .v3sec-road-grid[b-nviiqetz3k] { grid-template-columns: repeat(2, 1fr); }
    .v3sec .v3sec-cta-card[b-nviiqetz3k] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
    .v3sec .v3sec-pillars[b-nviiqetz3k] { grid-template-columns: 1fr; }
    .v3sec .v3sec-road-grid[b-nviiqetz3k] { grid-template-columns: 1fr; }
    .v3sec .v3sec-av-row[b-nviiqetz3k] { grid-template-columns: 1fr; gap: 4px; }
    .v3sec .v3sec-ts[b-nviiqetz3k],
    .v3sec .v3sec-hash[b-nviiqetz3k] { font-size: 9.5px; }
}
/* /Components/Pages/Resources/GpuDatabase.razor.rz.scp.css */
/* ============================================
   GPU Database Page - SLYD Design System
   Prefix: gpudb-
   Colors: Cyan #06b6d4, Gold #f59e0b, NVIDIA #76B900, AMD silver/gray

   Note: Hero and section base styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
   ============================================ */

/* Hero Preview Cards */
.gpudb-hero-cards[b-lqyce72sop] {
    display: flex;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.gpudb-mini-card[b-lqyce72sop] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.gpudb-mini-card.nvidia[b-lqyce72sop] {
    border-color: rgba(118, 185, 0, 0.3);
}

.gpudb-mini-card.nvidia:hover[b-lqyce72sop] {
    border-color: #76B900;
    box-shadow: 0 10px 40px rgba(118, 185, 0, 0.2);
}

.gpudb-mini-card.amd[b-lqyce72sop] {
    border-color: rgba(255, 255, 255, 0.2);
}

.gpudb-mini-card.amd:hover[b-lqyce72sop] {
    border-color: #ffffff;
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1);
}

.gpudb-mini-brand[b-lqyce72sop] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.gpudb-mini-card.nvidia .gpudb-mini-brand[b-lqyce72sop] {
    color: #76B900;
}

.gpudb-mini-card.amd .gpudb-mini-brand[b-lqyce72sop] {
    color: #ffffff;
}

.gpudb-mini-count[b-lqyce72sop] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Controls Bar */
.gpudb-controls[b-lqyce72sop] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding: 16px 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.gpudb-view-toggle[b-lqyce72sop] {
    display: flex;
    gap: 8px;
}

.gpudb-view-btn[b-lqyce72sop] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gpudb-view-btn:hover[b-lqyce72sop] {
    border-color: rgba(6, 182, 212, 0.3);
    color: #cbd5e1;
}

.gpudb-view-btn.active[b-lqyce72sop] {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06b6d4;
    color: #06b6d4;
}

.gpudb-filter-pills[b-lqyce72sop] {
    display: flex;
    gap: 8px;
}

.gpudb-pill[b-lqyce72sop] {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: #94a3b8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gpudb-pill:hover[b-lqyce72sop] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
}

.gpudb-pill.active[b-lqyce72sop] {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06b6d4;
    color: #06b6d4;
}

.gpudb-pill.nvidia.active[b-lqyce72sop] {
    background: rgba(118, 185, 0, 0.15);
    border-color: #76B900;
    color: #76B900;
}

.gpudb-pill.amd.active[b-lqyce72sop] {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

.gpudb-count[b-lqyce72sop] {
    font-size: 0.875rem;
    color: #64748b;
}

.gpudb-count span[b-lqyce72sop] {
    color: #06b6d4;
    font-weight: 600;
}

/* Grid Layout */
.gpudb-grid[b-lqyce72sop] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

/* List Layout */
.gpudb-list[b-lqyce72sop] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gpudb-list .gpudb-card[b-lqyce72sop] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 24px;
    align-items: center;
}

.gpudb-list .gpudb-card-header[b-lqyce72sop] {
    min-width: 200px;
}

.gpudb-list .gpudb-card-specs[b-lqyce72sop] {
    display: flex;
    gap: 24px;
}

.gpudb-list .gpudb-spec[b-lqyce72sop] {
    flex-direction: row;
    gap: 8px;
}

.gpudb-list .gpudb-card-meta[b-lqyce72sop] {
    display: none;
}

.gpudb-list .gpudb-card-footer[b-lqyce72sop] {
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

/* GPU Card */
.gpudb-card[b-lqyce72sop] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gpudb-card:hover[b-lqyce72sop] {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.gpudb-card-accent[b-lqyce72sop] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.gpudb-card-accent.nvidia[b-lqyce72sop] {
    background: linear-gradient(90deg, #76B900, #5a9100);
}

.gpudb-card-accent.amd[b-lqyce72sop] {
    background: linear-gradient(90deg, #ffffff, #b0b0b0);
}

.gpudb-card:hover .gpudb-card-accent.nvidia[b-lqyce72sop] {
    box-shadow: 0 0 20px rgba(118, 185, 0, 0.5);
}

.gpudb-card:hover .gpudb-card-accent.amd[b-lqyce72sop] {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Card Header */
.gpudb-card-header[b-lqyce72sop] {
    margin-bottom: 20px;
}

.gpudb-card-badges[b-lqyce72sop] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.gpudb-badge[b-lqyce72sop] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gpudb-badge.nvidia[b-lqyce72sop] {
    background: rgba(118, 185, 0, 0.15);
    color: #76B900;
    border-color: rgba(118, 185, 0, 0.3);
}

.gpudb-badge.amd[b-lqyce72sop] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.gpudb-badge.arch[b-lqyce72sop] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.3);
}

.gpudb-card-title[b-lqyce72sop] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 6px;
}

.gpudb-card-arch[b-lqyce72sop] {
    font-size: 0.875rem;
    color: #64748b;
}

/* Card Specs */
.gpudb-card-specs[b-lqyce72sop] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.gpudb-spec[b-lqyce72sop] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gpudb-spec-label[b-lqyce72sop] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.gpudb-spec-value[b-lqyce72sop] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
}

.gpudb-spec-value.nvidia[b-lqyce72sop] {
    color: #76B900;
}

.gpudb-spec-value.amd[b-lqyce72sop] {
    color: #ffffff;
}

/* Card Meta */
.gpudb-card-meta[b-lqyce72sop] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.gpudb-meta-item[b-lqyce72sop] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: #64748b;
}

.gpudb-meta-item svg[b-lqyce72sop] {
    width: 14px;
    height: 14px;
    color: #475569;
}

/* Card Footer */
.gpudb-card-footer[b-lqyce72sop] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gpudb-price[b-lqyce72sop] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f59e0b;
}

.gpudb-best-for[b-lqyce72sop] {
    font-size: 0.8125rem;
    color: #64748b;
    font-style: italic;
}

.gpudb-link[b-lqyce72sop] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #06b6d4;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gpudb-link:hover[b-lqyce72sop] {
    color: #22d3ee;
    gap: 10px;
}

.gpudb-link svg[b-lqyce72sop] {
    width: 14px;
    height: 14px;
}

/* Comparison Table */
.gpudb-table-container[b-lqyce72sop] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.gpudb-table[b-lqyce72sop] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Space Grotesk', sans-serif;
}

.gpudb-table thead[b-lqyce72sop] {
    background: rgba(6, 182, 212, 0.1);
}

.gpudb-table th[b-lqyce72sop] {
    padding: 16px 20px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #06b6d4;
    border-bottom: 2px solid rgba(6, 182, 212, 0.3);
    white-space: nowrap;
}

.gpudb-table td[b-lqyce72sop] {
    padding: 16px 20px;
    font-size: 0.9375rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gpudb-table td.highlight[b-lqyce72sop] {
    color: #06b6d4;
    font-weight: 600;
}

.gpudb-row:hover[b-lqyce72sop] {
    background: rgba(255, 255, 255, 0.02);
}

.gpudb-row.nvidia td:first-child[b-lqyce72sop] {
    border-left: 3px solid #76B900;
}

.gpudb-row.amd td:first-child[b-lqyce72sop] {
    border-left: 3px solid #ffffff;
}

/* Use Case Cards */
.gpudb-usecase-grid[b-lqyce72sop] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.gpudb-usecase-card[b-lqyce72sop] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 28px;
    transition: all 0.3s ease;
}

.gpudb-usecase-card:hover[b-lqyce72sop] {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
}

.gpudb-usecase-icon[b-lqyce72sop] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.gpudb-usecase-icon svg[b-lqyce72sop] {
    width: 24px;
    height: 24px;
}

.gpudb-usecase-icon.cyan[b-lqyce72sop] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.gpudb-usecase-icon.purple[b-lqyce72sop] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.gpudb-usecase-icon.green[b-lqyce72sop] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.gpudb-usecase-icon.gold[b-lqyce72sop] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.gpudb-usecase-card h3[b-lqyce72sop] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px;
}

.gpudb-usecase-card p[b-lqyce72sop] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 20px;
}

.gpudb-recommend-list[b-lqyce72sop] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gpudb-recommend-list li[b-lqyce72sop] {
    font-size: 0.875rem;
    color: #94a3b8;
    padding-left: 16px;
    position: relative;
}

.gpudb-recommend-list li[b-lqyce72sop]::before {
    content: '\2192';
    position: absolute;
    left: 0;
    color: #475569;
}

.gpudb-recommend-list a[b-lqyce72sop] {
    color: #06b6d4;
    text-decoration: none;
    font-weight: 600;
}

.gpudb-recommend-list a:hover[b-lqyce72sop] {
    color: #22d3ee;
    text-decoration: underline;
}

/* CTA Section */
.gpudb-cta[b-lqyce72sop] {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a1018 0%, #020617 100%);
    position: relative;
}

.gpudb-cta[b-lqyce72sop]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.gpudb-cta-content[b-lqyce72sop] {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.gpudb-cta-content h2[b-lqyce72sop] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px;
}

.gpudb-cta-content p[b-lqyce72sop] {
    font-size: 1.125rem;
    color: #94a3b8;
    margin: 0 0 32px;
}

.gpudb-cta-buttons[b-lqyce72sop] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.gpudb-btn-gold[b-lqyce72sop] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.gpudb-btn-gold:hover[b-lqyce72sop] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.gpudb-btn-outline[b-lqyce72sop] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: transparent;
    color: #f1f5f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.gpudb-btn-outline:hover[b-lqyce72sop] {
    border-color: #06b6d4;
    color: #06b6d4;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .gpudb-controls[b-lqyce72sop] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .gpudb-list .gpudb-card[b-lqyce72sop] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gpudb-list .gpudb-card-specs[b-lqyce72sop] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .gpudb-list .gpudb-card-footer[b-lqyce72sop] {
        flex-direction: row;
        align-items: center;
    }
}

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

    .gpudb-hero-cards[b-lqyce72sop] {
        flex-direction: column;
    }

    .gpudb-table[b-lqyce72sop] {
        font-size: 0.8125rem;
    }

    .gpudb-table th[b-lqyce72sop],
    .gpudb-table td[b-lqyce72sop] {
        padding: 12px 14px;
    }
}

@media (max-width: 480px) {
    .gpudb-controls[b-lqyce72sop] {
        flex-direction: column;
        align-items: stretch;
    }

    .gpudb-view-toggle[b-lqyce72sop],
    .gpudb-filter-pills[b-lqyce72sop] {
        justify-content: center;
    }

    .gpudb-count[b-lqyce72sop] {
        text-align: center;
    }

    .gpudb-cta-buttons[b-lqyce72sop] {
        flex-direction: column;
    }

    .gpudb-btn-gold[b-lqyce72sop],
    .gpudb-btn-outline[b-lqyce72sop] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Resources/OEMComparison.razor.rz.scp.css */
/* ================================================================
   OEM Comparison Page Styles - 2026 Redesign

   Note: Hero and section base styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
   ================================================================ */

/* Root CSS Variables */
:root[b-7trekbwr2a] {
    --primary: #6366F1;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --bg-dark: #020617;
    --bg-darker: #0F172A;
    --light: #F8FAFC;

    /* OEM Brand Colors */
    --dell-blue: #007DB8;
    --dell-blue-dark: #005A8C;
    --supermicro-green: #10B981;
    --supermicro-green-dark: #059669;
    --hpe-purple: #9333EA;
    --hpe-purple-dark: #7E22CE;
    --lenovo-red: #E2231A;
    --lenovo-red-dark: #B91C1C;
    --gigabyte-orange: #f59e0b;
    --gigabyte-orange-dark: #D97706;
}

/* Screen reader only */
.sr-only[b-7trekbwr2a] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Visual - OEM Showcase */

.oem-showcase[b-7trekbwr2a] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    perspective: 1000px;
}

.showcase-card[b-7trekbwr2a] {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.showcase-card:hover[b-7trekbwr2a] {
    transform: translateY(-5px);
}

.showcase-card.dell[b-7trekbwr2a] {
    border-color: rgba(0, 125, 184, 0.3);
    grid-column: span 2;
}

.showcase-card.dell:hover[b-7trekbwr2a] {
    border-color: var(--dell-blue);
    box-shadow: 0 10px 40px rgba(0, 125, 184, 0.3);
}

.showcase-card.supermicro[b-7trekbwr2a] {
    border-color: rgba(16, 185, 129, 0.3);
}

.showcase-card.supermicro:hover[b-7trekbwr2a] {
    border-color: var(--supermicro-green);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.showcase-card.hpe[b-7trekbwr2a] {
    border-color: rgba(147, 51, 234, 0.3);
}

.showcase-card.hpe:hover[b-7trekbwr2a] {
    border-color: var(--hpe-purple);
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.3);
}

.showcase-card.lenovo[b-7trekbwr2a] {
    border-color: rgba(226, 35, 26, 0.3);
}

.showcase-card.lenovo:hover[b-7trekbwr2a] {
    border-color: var(--lenovo-red);
    box-shadow: 0 10px 40px rgba(226, 35, 26, 0.3);
}

.showcase-card.gigabyte[b-7trekbwr2a] {
    border-color: rgba(245, 158, 11, 0.3);
    grid-column: span 2;
}

.showcase-card.gigabyte:hover[b-7trekbwr2a] {
    border-color: var(--gigabyte-orange);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3);
}

.showcase-logo[b-7trekbwr2a] {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.showcase-card.dell .showcase-logo[b-7trekbwr2a] { color: var(--dell-blue); }
.showcase-card.supermicro .showcase-logo[b-7trekbwr2a] { color: var(--supermicro-green); }
.showcase-card.hpe .showcase-logo[b-7trekbwr2a] { color: var(--hpe-purple); }
.showcase-card.lenovo .showcase-logo[b-7trekbwr2a] { color: var(--lenovo-red); }
.showcase-card.gigabyte .showcase-logo[b-7trekbwr2a] { color: var(--gigabyte-orange); }

.showcase-metric[b-7trekbwr2a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.showcase-label[b-7trekbwr2a] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.showcase-glow[b-7trekbwr2a] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}

/* ================================================================
   Decision Factors Grid
   ================================================================ */
.decision-factors-grid[b-7trekbwr2a] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.factor-card[b-7trekbwr2a] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.factor-card:hover[b-7trekbwr2a] {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-3px);
}

.factor-icon[b-7trekbwr2a] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

[b-7trekbwr2a] .factor-icon svg {
    width: 28px;
    height: 28px;
    color: #a5b4fc;
}

.factor-card h3[b-7trekbwr2a] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.factor-card p[b-7trekbwr2a] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 16px;
}

.factor-highlight[b-7trekbwr2a] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary);
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    display: inline-block;
}

/* ================================================================
   OEM Section Styles
   ================================================================ */
.oem-section[b-7trekbwr2a] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oem-section-header[b-7trekbwr2a] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.oem-section-header.dell[b-7trekbwr2a] { border-bottom-color: var(--dell-blue); }
.oem-section-header.supermicro[b-7trekbwr2a] { border-bottom-color: var(--supermicro-green); }
.oem-section-header.hpe[b-7trekbwr2a] { border-bottom-color: var(--hpe-purple); }
.oem-section-header.lenovo[b-7trekbwr2a] { border-bottom-color: var(--lenovo-red); }
.oem-section-header.gigabyte[b-7trekbwr2a] { border-bottom-color: var(--gigabyte-orange); }

.oem-logo-large[b-7trekbwr2a] {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.oem-logo-large.dell[b-7trekbwr2a] { background: linear-gradient(135deg, var(--dell-blue), var(--dell-blue-dark)); }
.oem-logo-large.supermicro[b-7trekbwr2a] { background: linear-gradient(135deg, var(--supermicro-green), var(--supermicro-green-dark)); }
.oem-logo-large.hpe[b-7trekbwr2a] { background: linear-gradient(135deg, var(--hpe-purple), var(--hpe-purple-dark)); }
.oem-logo-large.lenovo[b-7trekbwr2a] { background: linear-gradient(135deg, var(--lenovo-red), var(--lenovo-red-dark)); }
.oem-logo-large.gigabyte[b-7trekbwr2a] { background: linear-gradient(135deg, var(--gigabyte-orange), var(--gigabyte-orange-dark)); }

.oem-header-content[b-7trekbwr2a] {
    flex: 1;
}

.oem-header-content h2[b-7trekbwr2a] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.oem-section-header .oem-tagline[b-7trekbwr2a] {
    font-size: 1.1rem;
    color: rgba(248, 250, 252, 0.7);
    margin: 0;
}

.oem-quick-stats[b-7trekbwr2a] {
    display: flex;
    gap: 24px;
}

.quick-stat[b-7trekbwr2a] {
    text-align: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.quick-stat .stat-value[b-7trekbwr2a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    display: block;
}

.quick-stat .stat-label[b-7trekbwr2a] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* OEM Content Grid */
.oem-content-grid[b-7trekbwr2a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.oem-overview[b-7trekbwr2a],
.oem-products[b-7trekbwr2a],
.oem-strengths[b-7trekbwr2a],
.oem-considerations[b-7trekbwr2a] {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
}

.oem-overview h3[b-7trekbwr2a],
.oem-products h3[b-7trekbwr2a],
.oem-strengths h3[b-7trekbwr2a],
.oem-considerations h3[b-7trekbwr2a] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.oem-overview p[b-7trekbwr2a] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Key Metrics Grid */
.key-metrics-grid[b-7trekbwr2a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.key-metrics-grid .metric[b-7trekbwr2a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.key-metrics-grid .metric .label[b-7trekbwr2a] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.key-metrics-grid .metric .value[b-7trekbwr2a] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

/* Product List */
.product-list[b-7trekbwr2a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-item[b-7trekbwr2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.product-item:hover[b-7trekbwr2a] {
    background: rgba(255, 255, 255, 0.08);
}

.product-name[b-7trekbwr2a] {
    font-weight: 600;
    color: white;
    font-size: 0.95rem;
}

.product-spec[b-7trekbwr2a] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
}

/* Strength and Consideration Lists */
.strength-list[b-7trekbwr2a],
.consideration-list[b-7trekbwr2a] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.strength-list li[b-7trekbwr2a],
.consideration-list li[b-7trekbwr2a] {
    position: relative;
    padding: 10px 0 10px 28px;
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.strength-list li:last-child[b-7trekbwr2a],
.consideration-list li:last-child[b-7trekbwr2a] {
    border-bottom: none;
}

.strength-list li[b-7trekbwr2a]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--secondary);
    font-weight: bold;
    font-size: 1.1rem;
}

.consideration-list li[b-7trekbwr2a]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: rgba(248, 250, 252, 0.4);
    font-weight: bold;
    font-size: 1.2rem;
}

/* OEM Recommendation */
.oem-recommendation[b-7trekbwr2a] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 24px;
}

.recommendation-icon[b-7trekbwr2a] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-7trekbwr2a] .recommendation-icon svg {
    width: 24px;
    height: 24px;
    color: var(--secondary);
}

.recommendation-content h4[b-7trekbwr2a] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 8px;
}

.recommendation-content p[b-7trekbwr2a] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* ================================================================
   Decision Tree
   ================================================================ */
.decision-tree[b-7trekbwr2a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.decision-path[b-7trekbwr2a] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
}

.decision-path h3[b-7trekbwr2a] {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.decision-flow[b-7trekbwr2a] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.decision-flow:last-child[b-7trekbwr2a] {
    margin-bottom: 0;
}

.decision-step[b-7trekbwr2a] {
    flex: 1;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
}

.decision-arrow[b-7trekbwr2a] {
    color: rgba(248, 250, 252, 0.4);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.decision-result[b-7trekbwr2a] {
    flex: 1.2;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: white;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid;
}

.decision-result.dell[b-7trekbwr2a] {
    border-left-color: var(--dell-blue);
    background: rgba(0, 125, 184, 0.1);
}

.decision-result.supermicro[b-7trekbwr2a] {
    border-left-color: var(--supermicro-green);
    background: rgba(16, 185, 129, 0.1);
}

.decision-result.hpe[b-7trekbwr2a] {
    border-left-color: var(--hpe-purple);
    background: rgba(147, 51, 234, 0.1);
}

.decision-result.lenovo[b-7trekbwr2a] {
    border-left-color: var(--lenovo-red);
    background: rgba(226, 35, 26, 0.1);
}

.decision-result.gigabyte[b-7trekbwr2a] {
    border-left-color: var(--gigabyte-orange);
    background: rgba(245, 158, 11, 0.1);
}

/* ================================================================
   Use Case Grid
   ================================================================ */
.use-case-grid[b-7trekbwr2a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.use-case-card[b-7trekbwr2a] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
}

.use-case-card:hover[b-7trekbwr2a] {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-3px);
}

.use-case-icon[b-7trekbwr2a] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

[b-7trekbwr2a] .use-case-icon svg {
    width: 28px;
    height: 28px;
    color: #a5b4fc;
}

.use-case-card h3[b-7trekbwr2a] {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.use-case-card p[b-7trekbwr2a] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.recommended-oems[b-7trekbwr2a] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.oem-tag[b-7trekbwr2a] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.oem-tag.dell[b-7trekbwr2a] {
    background: rgba(0, 125, 184, 0.15);
    color: var(--dell-blue);
    border: 1px solid rgba(0, 125, 184, 0.3);
}

.oem-tag.supermicro[b-7trekbwr2a] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--supermicro-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.oem-tag.hpe[b-7trekbwr2a] {
    background: rgba(147, 51, 234, 0.15);
    color: var(--hpe-purple);
    border: 1px solid rgba(147, 51, 234, 0.3);
}

.oem-tag.lenovo[b-7trekbwr2a] {
    background: rgba(226, 35, 26, 0.15);
    color: var(--lenovo-red);
    border: 1px solid rgba(226, 35, 26, 0.3);
}

.oem-tag.gigabyte[b-7trekbwr2a] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--gigabyte-orange);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ================================================================
   CTA Section
   ================================================================ */
.cta-section[b-7trekbwr2a] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border-radius: 24px;
    padding: 60px;
    margin: 0 24px 80px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    text-align: center;
}

.cta-header[b-7trekbwr2a] {
    margin-bottom: 40px;
}

.cta-title[b-7trekbwr2a] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.cta-description[b-7trekbwr2a] {
    font-size: 1.1rem;
    color: rgba(248, 250, 252, 0.8);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.cta-features[b-7trekbwr2a] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cta-feature[b-7trekbwr2a] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248, 250, 252, 0.9);
    font-size: 1rem;
    font-weight: 500;
}

.cta-feature-icon[b-7trekbwr2a] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-7trekbwr2a] .cta-feature-icon svg {
    width: 20px;
    height: 20px;
    color: var(--secondary);
}

.cta-buttons[b-7trekbwr2a] {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-btn[b-7trekbwr2a] {
    padding: 16px 36px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

[b-7trekbwr2a] .cta-btn svg {
    width: 20px;
    height: 20px;
}

.cta-btn-primary[b-7trekbwr2a] {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    border: none;
}

.cta-btn-primary:hover[b-7trekbwr2a] {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.cta-btn-secondary[b-7trekbwr2a] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.cta-btn-secondary:hover[b-7trekbwr2a] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ================================================================
   Responsive Design
   ================================================================ */

/* Large screens */
@@media (max-width: 1200px) {
    .decision-factors-grid[b-7trekbwr2a] {
        grid-template-columns: repeat(2, 1fr);
    }

    .use-case-grid[b-7trekbwr2a] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets */
@@media (max-width: 992px) {
    .oem-showcase[b-7trekbwr2a] {
        max-width: 500px;
        margin: 0 auto;
    }

    .oem-section-header[b-7trekbwr2a] {
        flex-direction: column;
        text-align: center;
    }

    .oem-header-content[b-7trekbwr2a] {
        text-align: center;
    }

    .oem-quick-stats[b-7trekbwr2a] {
        justify-content: center;
    }

    .oem-content-grid[b-7trekbwr2a] {
        grid-template-columns: 1fr;
    }

    .decision-tree[b-7trekbwr2a] {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@@media (max-width: 768px) {
    .oem-showcase[b-7trekbwr2a] {
        grid-template-columns: 1fr 1fr;
    }

    .showcase-card.dell[b-7trekbwr2a],
    .showcase-card.gigabyte[b-7trekbwr2a] {
        grid-column: span 1;
    }

    .decision-factors-grid[b-7trekbwr2a] {
        grid-template-columns: 1fr;
    }

    .use-case-grid[b-7trekbwr2a] {
        grid-template-columns: 1fr;
    }

    .cta-section[b-7trekbwr2a] {
        padding: 40px 24px;
        margin: 0 16px 60px;
    }

    .cta-title[b-7trekbwr2a] {
        font-size: 1.75rem;
    }

    .cta-features[b-7trekbwr2a] {
        gap: 20px;
    }

    .cta-buttons[b-7trekbwr2a] {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn[b-7trekbwr2a] {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .decision-flow[b-7trekbwr2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .decision-arrow[b-7trekbwr2a] {
        transform: rotate(90deg);
        align-self: center;
    }

    .decision-result[b-7trekbwr2a] {
        width: 100%;
    }

    .comparison-table-wrapper[b-7trekbwr2a] {
        padding: 16px;
    }

    .comparison-table th[b-7trekbwr2a],
    .comparison-table td[b-7trekbwr2a] {
        padding: 10px;
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@@media (max-width: 480px) {
    .oem-showcase[b-7trekbwr2a] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .showcase-card[b-7trekbwr2a] {
        padding: 16px;
    }

    .oem-logo-large[b-7trekbwr2a] {
        width: 64px;
        height: 64px;
        font-size: 1.25rem;
    }

    .factor-card[b-7trekbwr2a],
    .use-case-card[b-7trekbwr2a] {
        padding: 24px;
    }

    .oem-overview[b-7trekbwr2a],
    .oem-products[b-7trekbwr2a],
    .oem-strengths[b-7trekbwr2a],
    .oem-considerations[b-7trekbwr2a] {
        padding: 20px;
    }

    .key-metrics-grid[b-7trekbwr2a] {
        grid-template-columns: 1fr;
    }

    .product-item[b-7trekbwr2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* /Components/Pages/Resources/PowerCalculator.razor.rz.scp.css */
/* Power Calculator - Complete Styles

   Note: Hero and section base styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
*/

/* ============================================
   CSS Variables
   ============================================ */
:root[b-0qo7rch77w] {
    --power-primary: #06B6D4;
    --power-primary-dark: #0891B2;
    --power-secondary: #10B981;
    --power-secondary-dark: #059669;
    --power-tertiary: #6366F1;
    --power-purple: #8B5CF6;
    --power-orange: #F97316;
    --power-red: #EF4444;
    --power-bg-dark: #020617;
    --power-bg-section: #0F172A;
    --power-bg-card: rgba(15, 23, 42, 0.7);
    --power-bg-input: rgba(2, 6, 23, 0.7);
    --power-border: rgba(6, 182, 212, 0.2);
    --power-border-hover: rgba(6, 182, 212, 0.5);
    --power-border-subtle: rgba(6, 182, 212, 0.15);
    --power-border-medium: rgba(6, 182, 212, 0.3);
    --power-text: #F8FAFC;
    --power-text-secondary: #94A3B8;
    --power-text-muted: rgba(248, 250, 252, 0.7);
    --power-amd-color: #9ca3af;
    --power-intel-color: #0071C5;
    --power-glow: rgba(6, 182, 212, 0.4);
}

/* ============================================
   Base & Utility
   ============================================ */
.visually-hidden[b-0qo7rch77w] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Visual - Power Showcase Cards */

.power-showcase[b-0qo7rch77w] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem;
}

.power-card[b-0qo7rch77w] {
    position: relative;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--power-border-medium);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.power-card:hover[b-0qo7rch77w] {
    transform: translateY(-5px);
    border-color: var(--power-primary);
    box-shadow: 0 15px 40px rgba(6, 182, 212, 0.2);
}

.power-card.gpu-power[b-0qo7rch77w] {
    border-color: rgba(6, 182, 212, 0.4);
}

.power-card.cooling[b-0qo7rch77w] {
    border-color: rgba(16, 185, 129, 0.4);
}

.power-card.electrical[b-0qo7rch77w] {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: var(--power-primary);
}

.power-icon[b-0qo7rch77w] {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--power-primary) 0%, var(--power-secondary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.power-label[b-0qo7rch77w] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--power-text);
    margin-bottom: 0.5rem;
}

.power-desc[b-0qo7rch77w] {
    font-size: 0.9rem;
    color: var(--power-text-muted);
}

.power-glow[b-0qo7rch77w] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--power-glow) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   Page-specific Container
   ============================================ */
.power-container[b-0qo7rch77w] {
    max-width: 1400px;
    margin: 0 auto;
}

/* ============================================
   Executive Summary Cards
   ============================================ */
.power-summary-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.power-summary-card[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.power-summary-card:hover[b-0qo7rch77w] {
    border-color: var(--power-border-hover);
    transform: translateY(-5px);
}

.power-summary-icon[b-0qo7rch77w] {
    width: 56px;
    height: 56px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--power-primary);
}

.power-summary-card h3[b-0qo7rch77w] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--power-text);
    margin-bottom: 0.75rem;
}

.power-summary-card p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   Education Section
   ============================================ */
.power-education-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.power-education-block[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.power-education-block h3[b-0qo7rch77w] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--power-primary);
    margin-bottom: 1rem;
}

.power-education-block p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.power-list[b-0qo7rch77w] {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.power-list li[b-0qo7rch77w] {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--power-text-muted);
}

.power-list li[b-0qo7rch77w]::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--power-primary);
}

.power-list li strong[b-0qo7rch77w] {
    color: var(--power-text);
}

.power-note[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.1);
    border-left: 3px solid var(--power-primary);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* PUE Table */
.power-pue-table[b-0qo7rch77w] {
    margin-top: 1rem;
}

.power-pue-row[b-0qo7rch77w] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--power-border);
}

.power-pue-row:last-child[b-0qo7rch77w] {
    border-bottom: none;
}

.power-pue-label[b-0qo7rch77w] {
    color: var(--power-text-muted);
}

.power-pue-value[b-0qo7rch77w] {
    color: var(--power-primary);
    font-weight: 600;
}

/* Conversion Table */
.power-conversion-table[b-0qo7rch77w] {
    margin-top: 1rem;
}

.power-conversion-row[b-0qo7rch77w] {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--power-border);
}

.power-conversion-row:last-child[b-0qo7rch77w] {
    border-bottom: none;
}

.power-conversion-row span:first-child[b-0qo7rch77w] {
    color: var(--power-text-muted);
}

.power-conversion-row strong[b-0qo7rch77w] {
    color: var(--power-primary);
}

/* ============================================
   Calculator Section
   ============================================ */
.power-calculator-container[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.power-input-panel[b-0qo7rch77w],
.power-results-panel[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.power-results-panel[b-0qo7rch77w] {
    border-color: rgba(6, 182, 212, 0.3);
}

.power-panel-header[b-0qo7rch77w] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--power-border);
}

.power-panel-header h3[b-0qo7rch77w] {
    color: var(--power-primary);
    font-size: 1.4rem;
    font-weight: 600;
}

.power-input-group[b-0qo7rch77w] {
    margin-bottom: 1.5rem;
}

.power-label[b-0qo7rch77w] {
    display: block;
    color: var(--power-text);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.power-input[b-0qo7rch77w],
.power-select[b-0qo7rch77w] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--power-bg-input);
    border: 1px solid var(--power-border);
    border-radius: 8px;
    color: var(--power-text);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.power-input:focus[b-0qo7rch77w],
.power-select:focus[b-0qo7rch77w] {
    outline: none;
    border-color: var(--power-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.power-select option[b-0qo7rch77w] {
    background: #ffffff;
    color: #000000;
}

.power-select optgroup[b-0qo7rch77w] {
    background: #f0f0f0;
    color: #000000;
    font-weight: 600;
}

.power-input-row[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Slider Styles */
.power-slider[b-0qo7rch77w] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(6, 182, 212, 0.2);
    outline: none;
    -webkit-appearance: none;
    margin-top: 0.5rem;
}

.power-slider[b-0qo7rch77w]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--power-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.power-slider[b-0qo7rch77w]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--power-primary);
}

.power-slider[b-0qo7rch77w]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--power-primary);
    cursor: pointer;
    border: none;
}

.power-slider-value[b-0qo7rch77w] {
    color: var(--power-primary);
    font-weight: 600;
}

.power-slider-labels[b-0qo7rch77w] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--power-text-muted);
}

/* Results Panel */
.power-results-section[b-0qo7rch77w] {
    margin-bottom: 1.5rem;
}

.power-results-section h4[b-0qo7rch77w] {
    color: var(--power-primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.power-result-item[b-0qo7rch77w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--power-border);
}

.power-result-item:last-child[b-0qo7rch77w] {
    border-bottom: none;
}

.power-result-label[b-0qo7rch77w] {
    color: var(--power-text-muted);
    font-size: 0.95rem;
}

.power-result-value[b-0qo7rch77w] {
    color: var(--power-primary);
    font-weight: 600;
    font-size: 1.05rem;
}

.power-result-total[b-0qo7rch77w] {
    border-top: 2px solid rgba(6, 182, 212, 0.3);
    border-bottom: 2px solid rgba(6, 182, 212, 0.3);
    padding: 1rem 0;
    margin-top: 0.5rem;
}

.power-result-total .power-result-label[b-0qo7rch77w] {
    font-weight: 600;
    color: var(--power-text);
}

.power-result-highlight[b-0qo7rch77w] {
    font-size: 1.3rem !important;
    color: var(--power-accent) !important;
}

.power-result-cost[b-0qo7rch77w] {
    font-size: 1.4rem !important;
    color: var(--power-accent) !important;
}

.power-results-highlight[b-0qo7rch77w] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* ============================================
   Table Styles (Reference, Regional, etc.)
   ============================================ */
.power-table-wrapper[b-0qo7rch77w] {
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 12px;
    border: 1px solid var(--power-border);
}

.power-reference-table[b-0qo7rch77w],
.power-density-table[b-0qo7rch77w],
.power-electrical-table[b-0qo7rch77w],
.power-regional-table[b-0qo7rch77w] {
    width: 100%;
    border-collapse: collapse;
    background: rgba(15, 23, 42, 0.9);
}

.power-reference-table th[b-0qo7rch77w],
.power-density-table th[b-0qo7rch77w],
.power-electrical-table th[b-0qo7rch77w],
.power-regional-table th[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.1);
    color: var(--power-primary);
    font-weight: 600;
    text-align: left;
    padding: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.power-reference-table td[b-0qo7rch77w],
.power-density-table td[b-0qo7rch77w],
.power-electrical-table td[b-0qo7rch77w],
.power-regional-table td[b-0qo7rch77w] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--power-border);
    color: var(--power-text-muted);
}

.power-reference-table tbody tr:hover[b-0qo7rch77w],
.power-density-table tbody tr:hover[b-0qo7rch77w],
.power-electrical-table tbody tr:hover[b-0qo7rch77w],
.power-regional-table tbody tr:hover[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.05);
}

.power-reference-table a[b-0qo7rch77w],
.power-regional-table a[b-0qo7rch77w] {
    color: var(--power-primary);
    text-decoration: none;
}

.power-reference-table a:hover[b-0qo7rch77w],
.power-regional-table a:hover[b-0qo7rch77w] {
    text-decoration: underline;
}

/* Category Headers */
.power-table-category-header[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.05) !important;
}

.power-table-category-header td[b-0qo7rch77w] {
    font-weight: 600;
    color: var(--power-primary) !important;
    font-size: 0.95rem;
    padding: 0.75rem 1rem !important;
}

.power-table-amd td[b-0qo7rch77w] {
    color: var(--power-amd-color) !important;
}

.power-table-intel td[b-0qo7rch77w] {
    color: var(--power-intel-color) !important;
}

/* Highlight rows */
.power-table-highlight[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.08) !important;
}

.power-table-highlight td[b-0qo7rch77w] {
    color: var(--power-text) !important;
    font-weight: 500;
}

.power-regional-highlight[b-0qo7rch77w] {
    background: rgba(16, 185, 129, 0.08) !important;
}

.power-regional-highlight td[b-0qo7rch77w] {
    color: var(--power-accent) !important;
}

.power-table-note[b-0qo7rch77w] {
    color: var(--power-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 1rem;
    text-align: center;
}

/* ============================================
   Cooling Section
   ============================================ */
.power-cooling-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.power-cooling-card[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.power-cooling-card h3[b-0qo7rch77w] {
    color: var(--power-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.power-cooling-card p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.power-cooling-example[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.1);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.power-cooling-example-title[b-0qo7rch77w] {
    color: var(--power-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.power-cooling-example ul[b-0qo7rch77w] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.power-cooling-example li[b-0qo7rch77w] {
    color: var(--power-text-muted);
    padding: 0.25rem 0;
}

.power-cooling-example strong[b-0qo7rch77w] {
    color: var(--power-accent);
}

/* Cooling Options */
.power-cooling-options[b-0qo7rch77w] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.power-cooling-option[b-0qo7rch77w] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1rem;
}

.power-cooling-option h4[b-0qo7rch77w] {
    color: var(--power-text);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.power-cooling-option p[b-0qo7rch77w] {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.power-cooling-density[b-0qo7rch77w] {
    display: inline-block;
    background: rgba(6, 182, 212, 0.2);
    color: var(--power-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ============================================
   Electrical Section
   ============================================ */
.power-electrical-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.power-electrical-card[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.power-electrical-card h3[b-0qo7rch77w] {
    color: var(--power-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.power-electrical-card p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.power-formula-box[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid var(--power-border);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    margin: 1rem 0;
}

.power-formula[b-0qo7rch77w] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--power-primary);
    font-family: 'Courier New', monospace;
}

.power-electrical-example[b-0qo7rch77w] {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--power-accent);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    margin-top: 1rem;
    color: var(--power-text-muted);
    font-size: 0.9rem;
}

/* ============================================
   Best Practices Section
   ============================================ */
.power-practices-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.power-practice-card[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.power-practice-card:hover[b-0qo7rch77w] {
    border-color: var(--power-border-hover);
    transform: translateY(-5px);
}

.power-practice-number[b-0qo7rch77w] {
    position: absolute;
    top: -12px;
    left: 20px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--power-primary), var(--power-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--power-bg-dark);
}

.power-practice-card h3[b-0qo7rch77w] {
    color: var(--power-text);
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
}

.power-practice-card p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   Solutions / CTA Section
   ============================================ */
.power-solutions-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.power-solution-card[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.power-solution-card:hover[b-0qo7rch77w] {
    border-color: var(--power-border-hover);
    transform: translateY(-5px);
}

.power-solution-icon[b-0qo7rch77w] {
    width: 72px;
    height: 72px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--power-primary);
}

.power-solution-card h3[b-0qo7rch77w] {
    color: var(--power-text);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.power-solution-card p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.power-solution-link[b-0qo7rch77w] {
    color: var(--power-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.power-solution-link:hover[b-0qo7rch77w] {
    color: var(--power-secondary);
}

.power-cta-buttons[b-0qo7rch77w] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.power-cta-primary[b-0qo7rch77w],
.power-cta-secondary[b-0qo7rch77w] {
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.power-cta-primary[b-0qo7rch77w] {
    background: linear-gradient(135deg, var(--power-primary), var(--power-secondary));
    color: var(--power-bg-dark);
}

.power-cta-primary:hover[b-0qo7rch77w] {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3);
}

.power-cta-secondary[b-0qo7rch77w] {
    background: transparent;
    border: 2px solid var(--power-primary);
    color: var(--power-primary);
}

.power-cta-secondary:hover[b-0qo7rch77w] {
    background: rgba(6, 182, 212, 0.1);
    transform: translateY(-3px);
}

/* ============================================
   Related Resources
   ============================================ */
.power-related-grid[b-0qo7rch77w] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.power-related-card[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.power-related-card:hover[b-0qo7rch77w] {
    border-color: var(--power-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(6, 182, 212, 0.15);
}

.power-related-card h3[b-0qo7rch77w] {
    color: var(--power-primary);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.power-related-card p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 1200px) {
    .power-summary-grid[b-0qo7rch77w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .power-solutions-grid[b-0qo7rch77w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .power-practices-grid[b-0qo7rch77w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .power-cooling-grid[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .power-calculator-container[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }

    .power-stats-row[b-0qo7rch77w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .power-education-grid[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }

    .power-electrical-grid[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }

    .power-related-grid[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .power-hero[b-0qo7rch77w] {
        padding: 4rem 1.5rem 3rem;
        min-height: auto;
    }

    .power-hero h1[b-0qo7rch77w] {
        font-size: 2.25rem;
    }

    .power-hero-subtitle[b-0qo7rch77w] {
        font-size: 1rem;
    }

    .power-stats-row[b-0qo7rch77w] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .power-section[b-0qo7rch77w] {
        padding: 3rem 1.5rem;
    }

    .power-section-header h2[b-0qo7rch77w] {
        font-size: 1.75rem;
    }

    .power-summary-grid[b-0qo7rch77w],
    .power-solutions-grid[b-0qo7rch77w],
    .power-practices-grid[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }

    .power-input-row[b-0qo7rch77w] {
        grid-template-columns: 1fr;
    }

    .power-cta-buttons[b-0qo7rch77w] {
        flex-direction: column;
        align-items: center;
    }

    .power-cta-primary[b-0qo7rch77w],
    .power-cta-secondary[b-0qo7rch77w] {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .power-table-wrapper[b-0qo7rch77w] {
        margin: 1rem -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 480px) {
    .power-hero h1[b-0qo7rch77w] {
        font-size: 1.75rem;
    }

    .power-stat-value[b-0qo7rch77w] {
        font-size: 1.4rem;
    }

    .power-input-panel[b-0qo7rch77w],
    .power-results-panel[b-0qo7rch77w],
    .power-cooling-card[b-0qo7rch77w],
    .power-electrical-card[b-0qo7rch77w],
    .power-practice-card[b-0qo7rch77w],
    .power-solution-card[b-0qo7rch77w],
    .power-related-card[b-0qo7rch77w] {
        padding: 1.5rem;
    }

    .power-result-item[b-0qo7rch77w] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .power-result-value[b-0qo7rch77w] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Resources/Resources.razor.rz.scp.css */
/* Resources Page Styles */

/* ===========================================
   CONTENT INTRO SECTION (New)
   =========================================== */
.content-intro[b-wcgw3gpp43] {
    max-width: 1100px;
    margin: 0 auto;
}

.content-intro.centered[b-wcgw3gpp43] {
    text-align: center;
}

.content-intro-title[b-wcgw3gpp43] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 20px;
    line-height: 1.2;
}

.content-intro-lead[b-wcgw3gpp43] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.content-intro-note[b-wcgw3gpp43] {
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}

/* Overview Grid */
.resources-overview-grid[b-wcgw3gpp43] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 2rem;
    text-align: left;
}

.resources-overview-item[b-wcgw3gpp43] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
}

.resources-overview-icon[b-wcgw3gpp43] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.resources-overview-icon :deep(svg)[b-wcgw3gpp43] {
    width: 20px;
    height: 20px;
}

.resources-overview-icon.cyan[b-wcgw3gpp43] { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.resources-overview-icon.purple[b-wcgw3gpp43] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.resources-overview-icon.green[b-wcgw3gpp43] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.resources-overview-icon.gold[b-wcgw3gpp43] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.resources-overview-item h3[b-wcgw3gpp43] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.resources-overview-item p[b-wcgw3gpp43] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

@media (max-width: 1024px) {
    .resources-overview-grid[b-wcgw3gpp43] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .resources-overview-grid[b-wcgw3gpp43] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Resources/ServerComparison.razor.rz.scp.css */
/* ================================================================
   Server Comparison Page Styles - 2026 Redesign

   Note: Hero and section base styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
   ================================================================ */

/* Root CSS Variables */
:root[b-vomardve1l] {
    --primary: #6366F1;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --bg-dark: #020617;
    --bg-darker: #0F172A;
    --light: #F8FAFC;

    /* OEM Brand Colors */
    --dell-blue: #007DB8;
    --dell-blue-dark: #005A8C;
    --supermicro-green: #10B981;
    --supermicro-green-dark: #059669;
    --hpe-purple: #9333EA;
    --hpe-purple-dark: #7E22CE;
    --lenovo-red: #E2231A;
    --lenovo-red-dark: #B91C1C;
    --gigabyte-orange: #f59e0b;
    --gigabyte-orange-dark: #D97706;

    /* GPU Vendor Colors */
    --nvidia-green: #76B900;
    --amd-gray: #9ca3af;
}

/* Screen reader only */
.sr-only[b-vomardve1l] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Visual - Server Showcase */

.server-showcase[b-vomardve1l] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    perspective: 1000px;
}

.showcase-card[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.showcase-card:hover[b-vomardve1l] {
    transform: translateY(-5px);
}

.showcase-card.dell[b-vomardve1l] {
    border-color: rgba(0, 125, 184, 0.3);
}

.showcase-card.dell:hover[b-vomardve1l] {
    border-color: var(--dell-blue);
    box-shadow: 0 10px 40px rgba(0, 125, 184, 0.3);
}

.showcase-card.supermicro[b-vomardve1l] {
    border-color: rgba(16, 185, 129, 0.3);
}

.showcase-card.supermicro:hover[b-vomardve1l] {
    border-color: var(--supermicro-green);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.showcase-card.hpe[b-vomardve1l] {
    border-color: rgba(147, 51, 234, 0.3);
}

.showcase-card.hpe:hover[b-vomardve1l] {
    border-color: var(--hpe-purple);
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.3);
}

.showcase-card.lenovo[b-vomardve1l] {
    border-color: rgba(226, 35, 26, 0.3);
}

.showcase-card.lenovo:hover[b-vomardve1l] {
    border-color: var(--lenovo-red);
    box-shadow: 0 10px 40px rgba(226, 35, 26, 0.3);
}

.showcase-card.gigabyte[b-vomardve1l] {
    border-color: rgba(245, 158, 11, 0.3);
    grid-column: span 2;
}

.showcase-card.gigabyte:hover[b-vomardve1l] {
    border-color: var(--gigabyte-orange);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3);
}

.showcase-logo[b-vomardve1l] {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.showcase-card.dell .showcase-logo[b-vomardve1l] { color: var(--dell-blue); }
.showcase-card.supermicro .showcase-logo[b-vomardve1l] { color: var(--supermicro-green); }
.showcase-card.hpe .showcase-logo[b-vomardve1l] { color: var(--hpe-purple); }
.showcase-card.lenovo .showcase-logo[b-vomardve1l] { color: var(--lenovo-red); }
.showcase-card.gigabyte .showcase-logo[b-vomardve1l] { color: var(--gigabyte-orange); }

.showcase-model[b-vomardve1l] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.showcase-spec[b-vomardve1l] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.6);
}

.showcase-glow[b-vomardve1l] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}

/* ================================================================
   Market Overview
   ================================================================ */
.market-overview-grid[b-vomardve1l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.market-card[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    transition: all 0.3s ease;
}

.market-card:hover[b-vomardve1l] {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-3px);
}

.market-stat[b-vomardve1l] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.market-label[b-vomardve1l] {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.8);
    margin-bottom: 8px;
}

.market-source[b-vomardve1l] {
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.5);
}

.market-context-box[b-vomardve1l] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
}

.market-context-box h3[b-vomardve1l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.market-context-box p[b-vomardve1l] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
    margin-bottom: 16px;
}

.market-context-box p:last-child[b-vomardve1l] {
    margin-bottom: 0;
}

/* Market Share Table */
.market-share-table[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    overflow: hidden;
}

.market-share-table h3[b-vomardve1l] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.share-row[b-vomardve1l] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 14px 20px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.share-row.header[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.15);
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    margin-bottom: 8px;
}

.share-row:not(.header):hover[b-vomardve1l] {
    background: rgba(255, 255, 255, 0.05);
}

.share-row span[b-vomardve1l] {
    color: rgba(248, 250, 252, 0.8);
}

.share-row span:first-child[b-vomardve1l] {
    font-weight: 500;
    color: white;
}

.share-row.dell span:first-child[b-vomardve1l] { color: var(--dell-blue); }
.share-row.hpe span:first-child[b-vomardve1l] { color: var(--hpe-purple); }
.share-row.lenovo span:first-child[b-vomardve1l] { color: var(--lenovo-red); }
.share-row.supermicro span:first-child[b-vomardve1l] { color: var(--supermicro-green); }

.share-source[b-vomardve1l] {
    margin-top: 16px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.5);
}

/* GPU Table Rows */
.nvidia-row[b-vomardve1l] {
    background: rgba(118, 185, 0, 0.05);
}

.nvidia-row:hover[b-vomardve1l] {
    background: rgba(118, 185, 0, 0.1);
}

.nvidia-row.highlight[b-vomardve1l] {
    background: rgba(118, 185, 0, 0.12);
}

.nvidia-row.highlight:hover[b-vomardve1l] {
    background: rgba(118, 185, 0, 0.18);
}

.amd-row[b-vomardve1l] {
    background: rgba(237, 28, 36, 0.05);
}

.amd-row:hover[b-vomardve1l] {
    background: rgba(237, 28, 36, 0.1);
}

/* ================================================================
   Vendor Profiles
   ================================================================ */
.vendor-profiles[b-vomardve1l] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.vendor-profile[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.vendor-profile:hover[b-vomardve1l] {
    border-color: rgba(99, 102, 241, 0.3);
}

.vendor-profile.dell:hover[b-vomardve1l] { border-color: var(--dell-blue); }
.vendor-profile.supermicro:hover[b-vomardve1l] { border-color: var(--supermicro-green); }
.vendor-profile.hpe:hover[b-vomardve1l] { border-color: var(--hpe-purple); }
.vendor-profile.lenovo:hover[b-vomardve1l] { border-color: var(--lenovo-red); }
.vendor-profile.gigabyte:hover[b-vomardve1l] { border-color: var(--gigabyte-orange); }

.profile-header[b-vomardve1l] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.vendor-profile.dell .profile-header[b-vomardve1l] { border-bottom-color: rgba(0, 125, 184, 0.3); }
.vendor-profile.supermicro .profile-header[b-vomardve1l] { border-bottom-color: rgba(16, 185, 129, 0.3); }
.vendor-profile.hpe .profile-header[b-vomardve1l] { border-bottom-color: rgba(147, 51, 234, 0.3); }
.vendor-profile.lenovo .profile-header[b-vomardve1l] { border-bottom-color: rgba(226, 35, 26, 0.3); }
.vendor-profile.gigabyte .profile-header[b-vomardve1l] { border-bottom-color: rgba(245, 158, 11, 0.3); }

.profile-logo[b-vomardve1l] {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.vendor-profile.dell .profile-logo[b-vomardve1l] { background: linear-gradient(135deg, var(--dell-blue), var(--dell-blue-dark)); }
.vendor-profile.supermicro .profile-logo[b-vomardve1l] { background: linear-gradient(135deg, var(--supermicro-green), var(--supermicro-green-dark)); }
.vendor-profile.hpe .profile-logo[b-vomardve1l] { background: linear-gradient(135deg, var(--hpe-purple), var(--hpe-purple-dark)); }
.vendor-profile.lenovo .profile-logo[b-vomardve1l] { background: linear-gradient(135deg, var(--lenovo-red), var(--lenovo-red-dark)); }
.vendor-profile.gigabyte .profile-logo[b-vomardve1l] { background: linear-gradient(135deg, var(--gigabyte-orange), var(--gigabyte-orange-dark)); }

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

.profile-info h3[b-vomardve1l] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
}

.profile-tagline[b-vomardve1l] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.6);
}

.profile-stats[b-vomardve1l] {
    display: flex;
    gap: 20px;
}

.profile-stats .stat[b-vomardve1l] {
    text-align: center;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.profile-stats .stat-value[b-vomardve1l] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    display: block;
}

.profile-stats .stat-label[b-vomardve1l] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-content[b-vomardve1l] {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.profile-section[b-vomardve1l] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 22px;
}

.profile-section h4[b-vomardve1l] {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-section ul[b-vomardve1l] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-section li[b-vomardve1l] {
    position: relative;
    padding: 8px 0 8px 22px;
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
}

.profile-section li[b-vomardve1l]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: rgba(99, 102, 241, 0.6);
    font-weight: bold;
}

.profile-best-for[b-vomardve1l] {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 2px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    padding: 24px;
}

.profile-best-for h4[b-vomardve1l] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 10px;
}

.profile-best-for p[b-vomardve1l] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.85);
    line-height: 1.6;
    margin: 0;
}

/* ================================================================
   Pricing Section
   ================================================================ */
.pricing-disclaimer[b-vomardve1l] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 40px;
}

.disclaimer-icon[b-vomardve1l] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-vomardve1l] .disclaimer-icon svg {
    width: 24px;
    height: 24px;
    color: var(--gigabyte-orange);
}

.disclaimer-content h4[b-vomardve1l] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gigabyte-orange);
    margin-bottom: 10px;
}

.disclaimer-content p[b-vomardve1l] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.85);
    line-height: 1.6;
    margin: 0;
}

/* Pricing Table */
.pricing-table-wrapper[b-vomardve1l] {
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 30px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.pricing-table[b-vomardve1l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.pricing-table thead[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.1);
}

.pricing-table th[b-vomardve1l] {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.pricing-table td[b-vomardve1l] {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.pricing-table tr:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.05);
}

.pricing-table .highlight-row[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.1);
}

.pricing-table .highlight-row:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.15);
}

/* Pricing Position Grid */
.pricing-position[b-vomardve1l] {
    margin-top: 40px;
}

.pricing-position h3[b-vomardve1l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}

.position-grid[b-vomardve1l] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.position-card[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    transition: all 0.3s ease;
}

.position-card:hover[b-vomardve1l] {
    transform: translateY(-3px);
}

.position-card.dell[b-vomardve1l] { border-color: rgba(0, 125, 184, 0.4); }
.position-card.hpe[b-vomardve1l] { border-color: rgba(147, 51, 234, 0.4); }
.position-card.lenovo[b-vomardve1l] { border-color: rgba(226, 35, 26, 0.4); }
.position-card.supermicro[b-vomardve1l] { border-color: rgba(16, 185, 129, 0.4); }
.position-card.gigabyte[b-vomardve1l] { border-color: rgba(245, 158, 11, 0.4); }

.position-card.dell:hover[b-vomardve1l] { border-color: var(--dell-blue); box-shadow: 0 10px 30px rgba(0, 125, 184, 0.2); }
.position-card.hpe:hover[b-vomardve1l] { border-color: var(--hpe-purple); box-shadow: 0 10px 30px rgba(147, 51, 234, 0.2); }
.position-card.lenovo:hover[b-vomardve1l] { border-color: var(--lenovo-red); box-shadow: 0 10px 30px rgba(226, 35, 26, 0.2); }
.position-card.supermicro:hover[b-vomardve1l] { border-color: var(--supermicro-green); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2); }
.position-card.gigabyte:hover[b-vomardve1l] { border-color: var(--gigabyte-orange); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2); }

.position-vendor[b-vomardve1l] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.position-card.dell .position-vendor[b-vomardve1l] { color: var(--dell-blue); }
.position-card.hpe .position-vendor[b-vomardve1l] { color: var(--hpe-purple); }
.position-card.lenovo .position-vendor[b-vomardve1l] { color: var(--lenovo-red); }
.position-card.supermicro .position-vendor[b-vomardve1l] { color: var(--supermicro-green); }
.position-card.gigabyte .position-vendor[b-vomardve1l] { color: var(--gigabyte-orange); }

.position-tier[b-vomardve1l] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 8px;
}

.position-delta[b-vomardve1l] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    display: inline-block;
}

/* ================================================================
   TCO Section
   ================================================================ */
.tco-components[b-vomardve1l] {
    margin-bottom: 50px;
}

.tco-components h3[b-vomardve1l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}

.tco-component-grid[b-vomardve1l] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.tco-component[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    transition: all 0.3s ease;
}

.tco-component:hover[b-vomardve1l] {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-3px);
}

.component-percent[b-vomardve1l] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
}

.component-name[b-vomardve1l] {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    margin-bottom: 6px;
}

.component-note[b-vomardve1l] {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.6);
}

/* TCO Estimate Table */
.tco-estimate-table[b-vomardve1l] {
    margin-bottom: 30px;
}

.tco-estimate-table h3[b-vomardve1l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}

.estimate-wrapper[b-vomardve1l] {
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 30px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.estimate-table[b-vomardve1l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.estimate-table thead[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.1);
}

.estimate-table th[b-vomardve1l] {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.estimate-table th:first-child[b-vomardve1l] {
    text-align: left;
}

.estimate-table th.vendor-dell[b-vomardve1l] { color: var(--dell-blue); }
.estimate-table th.vendor-supermicro[b-vomardve1l] { color: var(--supermicro-green); }
.estimate-table th.vendor-hpe[b-vomardve1l] { color: var(--hpe-purple); }
.estimate-table th.vendor-lenovo[b-vomardve1l] { color: var(--lenovo-red); }
.estimate-table th.vendor-gigabyte[b-vomardve1l] { color: var(--gigabyte-orange); }

.estimate-table td[b-vomardve1l] {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.estimate-table td:first-child[b-vomardve1l] {
    text-align: left;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.9);
}

.estimate-table tr:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.05);
}

.estimate-table .total-row[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.15);
}

.estimate-table .total-row td[b-vomardve1l] {
    font-size: 1rem;
    color: white;
}

.estimate-table .total-row:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.2);
}

.estimate-table .lowest[b-vomardve1l] {
    color: var(--secondary);
}

.tco-disclaimer[b-vomardve1l] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 10px;
}

[b-vomardve1l] .tco-disclaimer svg {
    width: 20px;
    height: 20px;
    color: #a5b4fc;
    flex-shrink: 0;
    margin-top: 2px;
}

.tco-disclaimer p[b-vomardve1l] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.6;
    margin: 0;
}

.tco-link[b-vomardve1l] {
    text-align: center;
    margin-top: 30px;
}

/* ================================================================
   Decision Framework
   ================================================================ */
.use-case-grid[b-vomardve1l] {
    margin-bottom: 50px;
}

.use-case-grid h3[b-vomardve1l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}

.use-case-table[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.use-case-row[b-vomardve1l] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
    transition: background 0.2s ease;
}

.use-case-row:last-child[b-vomardve1l] {
    border-bottom: none;
}

.use-case-row.header[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.15);
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
}

.use-case-row:not(.header):hover[b-vomardve1l] {
    background: rgba(255, 255, 255, 0.03);
}

.use-case-row span[b-vomardve1l] {
    color: rgba(248, 250, 252, 0.8);
    font-size: 0.9rem;
}

.use-case-row span:first-child[b-vomardve1l] {
    font-weight: 500;
    color: white;
}

.vendor-badge[b-vomardve1l] {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vendor-badge.dell[b-vomardve1l] {
    background: rgba(0, 125, 184, 0.15);
    color: var(--dell-blue);
    border: 1px solid rgba(0, 125, 184, 0.3);
}

.vendor-badge.supermicro[b-vomardve1l] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--supermicro-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vendor-badge.hpe[b-vomardve1l] {
    background: rgba(147, 51, 234, 0.15);
    color: var(--hpe-purple);
    border: 1px solid rgba(147, 51, 234, 0.3);
}

.vendor-badge.lenovo[b-vomardve1l] {
    background: rgba(226, 35, 26, 0.15);
    color: var(--lenovo-red);
    border: 1px solid rgba(226, 35, 26, 0.3);
}

.vendor-badge.gigabyte[b-vomardve1l] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--gigabyte-orange);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Criteria Matrix */
.criteria-matrix h3[b-vomardve1l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 24px;
}

.matrix-wrapper[b-vomardve1l] {
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 30px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.matrix-table[b-vomardve1l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.matrix-table thead[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.1);
}

.matrix-table th[b-vomardve1l] {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.matrix-table th:first-child[b-vomardve1l] {
    text-align: left;
}

.matrix-table td[b-vomardve1l] {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.matrix-table td:first-child[b-vomardve1l] {
    text-align: left;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.9);
}

.matrix-table tr:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.05);
}

.matrix-table .rating-5[b-vomardve1l] {
    color: var(--secondary);
    font-weight: 700;
}

.matrix-table .rating-4[b-vomardve1l] {
    color: #a5b4fc;
    font-weight: 600;
}

.matrix-table .rating-3[b-vomardve1l] {
    color: rgba(248, 250, 252, 0.6);
}

/* ================================================================
   Support Table
   ================================================================ */
.support-table-wrapper[b-vomardve1l] {
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 30px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.support-table[b-vomardve1l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.support-table thead[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.1);
}

.support-table th[b-vomardve1l] {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.support-table th:first-child[b-vomardve1l] {
    text-align: left;
}

.support-table th.vendor-dell[b-vomardve1l] { color: var(--dell-blue); }
.support-table th.vendor-supermicro[b-vomardve1l] { color: var(--supermicro-green); }
.support-table th.vendor-hpe[b-vomardve1l] { color: var(--hpe-purple); }
.support-table th.vendor-lenovo[b-vomardve1l] { color: var(--lenovo-red); }
.support-table th.vendor-gigabyte[b-vomardve1l] { color: var(--gigabyte-orange); }

.support-table td[b-vomardve1l] {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.8);
}

.support-table td:first-child[b-vomardve1l] {
    text-align: left;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.9);
}

.support-table tr:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.05);
}

/* ================================================================
   CTA Section
   ================================================================ */
.cta-section[b-vomardve1l] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border-radius: 24px;
    padding: 60px;
    margin: 0 24px 80px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    text-align: center;
}

.cta-header[b-vomardve1l] {
    margin-bottom: 40px;
}

.cta-title[b-vomardve1l] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.cta-description[b-vomardve1l] {
    font-size: 1.1rem;
    color: rgba(248, 250, 252, 0.8);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.cta-features[b-vomardve1l] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cta-feature[b-vomardve1l] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248, 250, 252, 0.9);
    font-size: 1rem;
    font-weight: 500;
}

.cta-feature-icon[b-vomardve1l] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-vomardve1l] .cta-feature-icon svg {
    width: 20px;
    height: 20px;
    color: var(--secondary);
}

.cta-buttons[b-vomardve1l] {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-btn[b-vomardve1l] {
    padding: 16px 36px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

[b-vomardve1l] .cta-btn svg {
    width: 20px;
    height: 20px;
}

.cta-btn-primary[b-vomardve1l] {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    border: none;
}

.cta-btn-primary:hover[b-vomardve1l] {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.cta-btn-secondary[b-vomardve1l] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.cta-btn-secondary:hover[b-vomardve1l] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ================================================================
   Disclaimer Section
   ================================================================ */
.disclaimer-section[b-vomardve1l] {
    padding: 40px 0 80px;
}

.disclaimer-section .disclaimer-content[b-vomardve1l] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
}

.disclaimer-section .disclaimer-content h4[b-vomardve1l] {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.9);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-vomardve1l] .disclaimer-section .disclaimer-content h4 svg {
    width: 18px;
    height: 18px;
    color: #a5b4fc;
}

.disclaimer-section .disclaimer-content p[b-vomardve1l] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.65);
    line-height: 1.7;
    margin: 0;
}

/* ================================================================
   Responsive Design
   ================================================================ */

/* Large screens */
@@media (max-width: 1200px) {
    .market-overview-grid[b-vomardve1l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tco-component-grid[b-vomardve1l] {
        grid-template-columns: repeat(3, 1fr);
    }

    .position-grid[b-vomardve1l] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets */
@@media (max-width: 992px) {
    .server-showcase[b-vomardve1l] {
        max-width: 400px;
        margin: 0 auto;
    }

    .profile-content[b-vomardve1l] {
        grid-template-columns: 1fr;
    }

    .profile-best-for[b-vomardve1l] {
        grid-column: span 1;
    }

    .profile-header[b-vomardve1l] {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats[b-vomardve1l] {
        justify-content: center;
    }

    .use-case-row[b-vomardve1l] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .use-case-row.header[b-vomardve1l] {
        display: none;
    }

    .tco-component-grid[b-vomardve1l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .position-grid[b-vomardve1l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@@media (max-width: 768px) {
    .server-showcase[b-vomardve1l] {
        grid-template-columns: 1fr;
    }

    .showcase-card.gigabyte[b-vomardve1l] {
        grid-column: span 1;
    }

    .market-overview-grid[b-vomardve1l] {
        grid-template-columns: 1fr;
    }

    .market-stat[b-vomardve1l] {
        font-size: 2rem;
    }

    .share-row[b-vomardve1l] {
        grid-template-columns: 1fr 1fr;
    }

    .share-row span:last-child[b-vomardve1l] {
        display: none;
    }

    .vendor-profiles[b-vomardve1l] {
        gap: 24px;
    }

    .profile-stats[b-vomardve1l] {
        flex-direction: column;
        gap: 10px;
    }

    .tco-component-grid[b-vomardve1l] {
        grid-template-columns: 1fr;
    }

    .position-grid[b-vomardve1l] {
        grid-template-columns: 1fr;
    }

    .use-case-row[b-vomardve1l] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px;
    }

    .cta-section[b-vomardve1l] {
        padding: 40px 24px;
        margin: 0 16px 60px;
    }

    .cta-title[b-vomardve1l] {
        font-size: 1.75rem;
    }

    .cta-features[b-vomardve1l] {
        gap: 20px;
    }

    .cta-buttons[b-vomardve1l] {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn[b-vomardve1l] {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .specs-table-wrapper[b-vomardve1l],
    .gpu-specs-table-wrapper[b-vomardve1l],
    .pricing-table-wrapper[b-vomardve1l],
    .estimate-wrapper[b-vomardve1l],
    .matrix-wrapper[b-vomardve1l],
    .support-table-wrapper[b-vomardve1l] {
        padding: 16px;
    }

    .specs-table th[b-vomardve1l],
    .specs-table td[b-vomardve1l],
    .gpu-specs-table th[b-vomardve1l],
    .gpu-specs-table td[b-vomardve1l],
    .pricing-table th[b-vomardve1l],
    .pricing-table td[b-vomardve1l],
    .estimate-table th[b-vomardve1l],
    .estimate-table td[b-vomardve1l],
    .matrix-table th[b-vomardve1l],
    .matrix-table td[b-vomardve1l],
    .support-table th[b-vomardve1l],
    .support-table td[b-vomardve1l] {
        padding: 10px;
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@@media (max-width: 480px) {
    .profile-logo[b-vomardve1l] {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
    }

    .profile-info h3[b-vomardve1l] {
        font-size: 1.25rem;
    }

    .profile-section[b-vomardve1l] {
        padding: 16px;
    }

    .market-card[b-vomardve1l],
    .tco-component[b-vomardve1l],
    .position-card[b-vomardve1l] {
        padding: 18px;
    }

    .market-stat[b-vomardve1l] {
        font-size: 1.75rem;
    }

    .pricing-disclaimer[b-vomardve1l],
    .tco-disclaimer[b-vomardve1l] {
        flex-direction: column;
    }

    .pricing-disclaimer[b-vomardve1l] {
        padding: 20px;
    }

    .disclaimer-icon[b-vomardve1l] {
        width: 40px;
        height: 40px;
    }
}
/* /Components/Pages/Resources/TCOCalculator.razor.rz.scp.css */
/* ============================================================
   TCO Calculator Stylesheet
   AI Infrastructure Total Cost of Ownership Calculator

   Note: Hero and section base styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
   ============================================================ */

/* ==========================================================================
   CSS Variables - TCO Theme
   ========================================================================== */

:root[b-myz0kb2ji1] {
    --tco-primary: #10B981;
    --tco-primary-dark: #059669;
    --tco-primary-light: #34D399;
    --tco-secondary: #06B6D4;
    --tco-secondary-dark: #0891B2;
    --tco-tertiary: #6366F1;
    --tco-amber: #F59E0B;
    --tco-red: #EF4444;

    --tco-bg-dark: #020617;
    --tco-bg-medium: #0F172A;
    --tco-bg-light: #1E293B;

    --tco-text-primary: #F1F5F9;
    --tco-text-secondary: #94A3B8;
    --tco-text-muted: #64748B;

    --tco-border-subtle: rgba(16, 185, 129, 0.15);
    --tco-border-medium: rgba(16, 185, 129, 0.3);
    --tco-border-strong: rgba(16, 185, 129, 0.5);

    --tco-glow: rgba(16, 185, 129, 0.4);
    --tco-shadow: rgba(0, 0, 0, 0.3);
}

/* Hero Visual - TCO Showcase Cards */

.tco-showcase[b-myz0kb2ji1] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem;
}

.tco-card[b-myz0kb2ji1] {
    position: relative;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--tco-border-medium);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.tco-card:hover[b-myz0kb2ji1] {
    transform: translateY(-5px);
    border-color: var(--tco-primary);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.2);
}

.tco-card.capex[b-myz0kb2ji1] {
    border-color: rgba(16, 185, 129, 0.4);
}

.tco-card.opex[b-myz0kb2ji1] {
    border-color: rgba(6, 182, 212, 0.4);
}

.tco-card.savings[b-myz0kb2ji1] {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-color: var(--tco-primary);
}

.tco-icon[b-myz0kb2ji1] {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--tco-primary) 0%, var(--tco-secondary) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.tco-label[b-myz0kb2ji1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tco-text-primary);
    margin-bottom: 0.5rem;
}

.tco-desc[b-myz0kb2ji1] {
    font-size: 0.9rem;
    color: var(--tco-text-muted);
}

.tco-glow[b-myz0kb2ji1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--tco-glow) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

/* ==========================================================================
   Calculator Container - Two Column Layout
   ========================================================================== */

.calculator-container[b-myz0kb2ji1] {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(500px, 1.2fr);
    gap: 2.5rem;
    align-items: start;
}

/* ==========================================================================
   Input Panel
   ========================================================================== */

.input-panel[b-myz0kb2ji1] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--tco-border-medium);
    border-radius: 16px;
    padding: 2rem;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.input-panel h2[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tco-primary);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--tco-border-medium);
}

.input-section[b-myz0kb2ji1] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tco-border-subtle);
}

.input-section:last-of-type[b-myz0kb2ji1] {
    border-bottom: none;
}

.input-section h3[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tco-secondary);
    margin-bottom: 1.25rem;
}

/* Form Groups */
.form-group[b-myz0kb2ji1] {
    margin-bottom: 1.25rem;
}

.form-group label[b-myz0kb2ji1] {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--tco-text-primary);
    margin-bottom: 0.5rem;
}

.form-group input[b-myz0kb2ji1],
.form-group select[b-myz0kb2ji1] {
    width: 100%;
    background: rgba(2, 6, 23, 0.7);
    border: 1px solid var(--tco-border-medium);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    color: var(--tco-text-primary);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-group input:focus[b-myz0kb2ji1],
.form-group select:focus[b-myz0kb2ji1] {
    outline: none;
    border-color: var(--tco-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-group select[b-myz0kb2ji1] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 3rem;
}

/* Range Sliders */
.form-group input[type="range"][b-myz0kb2ji1] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, var(--tco-primary) 0%, rgba(16, 185, 129, 0.2) 100%);
    border-radius: 4px;
    outline: none;
    padding: 0;
    margin: 0.5rem 0;
}

.form-group input[type="range"][b-myz0kb2ji1]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--tco-primary);
    border: 3px solid var(--tco-bg-dark);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    transition: all 0.2s ease;
}

.form-group input[type="range"][b-myz0kb2ji1]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.form-group input[type="range"][b-myz0kb2ji1]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--tco-primary);
    border: 3px solid var(--tco-bg-dark);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.slider-value[b-myz0kb2ji1] {
    display: inline-block;
    background: rgba(16, 185, 129, 0.15);
    color: var(--tco-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 0.75rem;
}

.form-hint[b-myz0kb2ji1] {
    font-size: 0.85rem;
    color: var(--tco-text-muted);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Range Labels */
.range-labels[b-myz0kb2ji1] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--tco-text-muted);
    margin-top: 0.5rem;
}

.rate-examples[b-myz0kb2ji1] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--tco-text-muted);
    margin-top: 0.5rem;
}

/* Calculated Value Display */
.calculated-value[b-myz0kb2ji1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--tco-border-medium);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.calculated-value span:first-child[b-myz0kb2ji1] {
    font-size: 0.95rem;
    color: var(--tco-text-secondary);
}

.calculated-value .value[b-myz0kb2ji1] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tco-primary);
}

/* Action Buttons */
.action-buttons[b-myz0kb2ji1] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-calculate[b-myz0kb2ji1] {
    flex: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--tco-primary) 0%, var(--tco-primary-dark) 100%);
    color: white;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-calculate:hover[b-myz0kb2ji1] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.btn-reset[b-myz0kb2ji1] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--tco-text-secondary);
    padding: 1rem 1.5rem;
    border: 1px solid var(--tco-border-medium);
    border-radius: 8px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-reset:hover[b-myz0kb2ji1] {
    border-color: var(--tco-primary);
    color: var(--tco-primary);
}

/* ==========================================================================
   Results Panel
   ========================================================================== */

.results-panel[b-myz0kb2ji1] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--tco-border-medium);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.results-panel h2[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tco-primary);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--tco-border-medium);
}

/* Result Total - Main Summary */
.result-total[b-myz0kb2ji1] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 2px solid var(--tco-primary);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.result-total-label[b-myz0kb2ji1] {
    font-size: 1rem;
    color: var(--tco-text-secondary);
    margin-bottom: 0.5rem;
}

.result-total-value[b-myz0kb2ji1] {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--tco-primary);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 40px rgba(16, 185, 129, 0.3);
}

.result-metrics[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tco-border-medium);
}

.result-metrics .metric[b-myz0kb2ji1] {
    text-align: center;
}

.result-metrics .metric-value[b-myz0kb2ji1] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tco-secondary);
    margin-bottom: 0.25rem;
}

.result-metrics .metric-label[b-myz0kb2ji1] {
    font-size: 0.85rem;
    color: var(--tco-text-muted);
}

/* Result Cards */
.result-card[b-myz0kb2ji1] {
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid var(--tco-border-subtle);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.result-card h3[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tco-secondary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--tco-border-subtle);
}

/* Breakdown Tables */
.breakdown-table[b-myz0kb2ji1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-row[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.breakdown-row:hover[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.05);
}

.breakdown-row.total[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
    border-top: 1px solid var(--tco-border-medium);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.breakdown-label[b-myz0kb2ji1] {
    color: var(--tco-text-secondary);
    font-size: 0.95rem;
}

.breakdown-value[b-myz0kb2ji1] {
    color: var(--tco-primary);
    font-weight: 600;
    text-align: right;
}

.breakdown-percent[b-myz0kb2ji1] {
    color: var(--tco-text-muted);
    font-size: 0.85rem;
    text-align: right;
    min-width: 40px;
}

.breakdown-row.total .breakdown-label[b-myz0kb2ji1],
.breakdown-row.total .breakdown-value[b-myz0kb2ji1] {
    font-weight: 700;
}

/* Projection Table */
.projection-table[b-myz0kb2ji1] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.projection-header[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tco-primary);
}

.projection-row[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--tco-border-subtle);
    font-size: 0.9rem;
}

.projection-row:last-child[b-myz0kb2ji1] {
    border-bottom: none;
}

.projection-row span[b-myz0kb2ji1] {
    color: var(--tco-text-secondary);
}

.projection-row span:first-child[b-myz0kb2ji1] {
    font-weight: 600;
    color: var(--tco-text-primary);
}

.projection-row span:last-child[b-myz0kb2ji1] {
    font-weight: 600;
    color: var(--tco-primary);
}

/* Cloud Comparison */
.cloud-comparison[b-myz0kb2ji1] {
    background: rgba(6, 182, 212, 0.05);
    border-color: rgba(6, 182, 212, 0.3);
}

.cloud-comparison h3[b-myz0kb2ji1] {
    color: var(--tco-secondary);
}

.comparison-table-wrapper[b-myz0kb2ji1] {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.comparison-table[b-myz0kb2ji1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.comparison-table th[b-myz0kb2ji1] {
    background: rgba(6, 182, 212, 0.15);
    color: var(--tco-secondary);
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(6, 182, 212, 0.3);
}

.comparison-table td[b-myz0kb2ji1] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--tco-border-subtle);
    color: var(--tco-text-secondary);
}

.comparison-table tr:hover[b-myz0kb2ji1] {
    background: rgba(6, 182, 212, 0.05);
}

.comparison-table tr.highlight-row[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
}

.comparison-table tr.highlight-row td[b-myz0kb2ji1] {
    color: var(--tco-text-primary);
}

.savings-value[b-myz0kb2ji1] {
    color: var(--tco-primary);
    font-weight: 700;
}

.cost-value[b-myz0kb2ji1] {
    color: var(--tco-amber);
    font-weight: 600;
}

/* Savings Summary */
.savings-summary[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.savings-item[b-myz0kb2ji1] {
    text-align: center;
}

.savings-item .savings-label[b-myz0kb2ji1] {
    display: block;
    font-size: 0.8rem;
    color: var(--tco-text-muted);
    margin-bottom: 0.25rem;
}

.savings-item .savings-value[b-myz0kb2ji1] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tco-primary);
}

.savings-item .savings-value.positive[b-myz0kb2ji1] {
    color: var(--tco-primary);
}

/* Comparison Note */
.comparison-note[b-myz0kb2ji1] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    border-left: 3px solid var(--tco-secondary);
}

.comparison-note p[b-myz0kb2ji1] {
    font-size: 0.85rem;
    color: var(--tco-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Education Grid
   ========================================================================== */

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

.education-card[b-myz0kb2ji1] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--tco-border-subtle);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.education-card:hover[b-myz0kb2ji1] {
    border-color: var(--tco-border-medium);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.education-card.wide[b-myz0kb2ji1] {
    grid-column: span 2;
}

.education-card h3[b-myz0kb2ji1] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tco-primary);
    margin-bottom: 1rem;
}

.education-card p[b-myz0kb2ji1] {
    font-size: 1rem;
    color: var(--tco-text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.education-card p:last-child[b-myz0kb2ji1] {
    margin-bottom: 0;
}

/* Feature List */
.feature-list[b-myz0kb2ji1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li[b-myz0kb2ji1] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--tco-text-secondary);
    line-height: 1.6;
}

.feature-list li[b-myz0kb2ji1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--tco-primary);
    border-radius: 50%;
}

.feature-list li strong[b-myz0kb2ji1] {
    color: var(--tco-text-primary);
}

/* Break-Even Table */
.breakeven-table[b-myz0kb2ji1] {
    margin-top: 1.5rem;
}

.breakeven-row[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: 120px 1fr 150px;
    gap: 1.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--tco-border-subtle);
    align-items: center;
}

.breakeven-row.header[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: var(--tco-primary);
    border-bottom: 2px solid var(--tco-border-medium);
}

.breakeven-row:last-child[b-myz0kb2ji1] {
    border-bottom: none;
}

.breakeven-row span[b-myz0kb2ji1] {
    font-size: 0.95rem;
    color: var(--tco-text-secondary);
}

.breakeven-row .highlight[b-myz0kb2ji1] {
    color: var(--tco-primary);
    font-weight: 700;
}

.breakeven-row .note[b-myz0kb2ji1] {
    font-size: 0.85rem;
    color: var(--tco-text-muted);
    font-style: italic;
}

/* ==========================================================================
   Cost Category Grid
   ========================================================================== */

.cost-category-grid[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.cost-category-card[b-myz0kb2ji1] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--tco-border-subtle);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cost-category-card:hover[b-myz0kb2ji1] {
    border-color: var(--tco-border-medium);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.category-header[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(16, 185, 129, 0.1);
    border-bottom: 1px solid var(--tco-border-subtle);
}

.category-header h3[b-myz0kb2ji1] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tco-primary);
    margin: 0;
}

.category-header.hardware[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
}

.category-header.hardware h3[b-myz0kb2ji1] {
    color: var(--tco-primary);
}

.category-header.power[b-myz0kb2ji1] {
    background: rgba(245, 158, 11, 0.1);
}

.category-header.power h3[b-myz0kb2ji1] {
    color: var(--tco-amber);
}

.category-header.personnel[b-myz0kb2ji1] {
    background: rgba(99, 102, 241, 0.1);
}

.category-header.personnel h3[b-myz0kb2ji1] {
    color: var(--tco-tertiary);
}

.category-header.maintenance[b-myz0kb2ji1] {
    background: rgba(6, 182, 212, 0.1);
}

.category-header.maintenance h3[b-myz0kb2ji1] {
    color: var(--tco-secondary);
}

.category-content[b-myz0kb2ji1] {
    padding: 1.5rem 2rem;
}

.category-content p[b-myz0kb2ji1] {
    font-size: 0.95rem;
    color: var(--tco-text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.category-content ul[b-myz0kb2ji1] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.category-content ul li[b-myz0kb2ji1] {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--tco-text-secondary);
    font-size: 0.95rem;
}

.category-content ul li[b-myz0kb2ji1]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--tco-primary);
    border-radius: 50%;
}

.category-content ul li strong[b-myz0kb2ji1] {
    color: var(--tco-text-primary);
}

/* Category Tables */
.category-table[b-myz0kb2ji1] {
    margin-top: 1rem;
}

.category-table-row[b-myz0kb2ji1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tco-border-subtle);
    font-size: 0.9rem;
}

.category-table-row.header[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    color: var(--tco-primary);
}

.category-table-row:last-child[b-myz0kb2ji1] {
    border-bottom: none;
}

.category-table-row span[b-myz0kb2ji1] {
    color: var(--tco-text-secondary);
}

.table-note[b-myz0kb2ji1] {
    font-size: 0.85rem;
    color: var(--tco-text-muted);
    font-style: italic;
    margin-top: 0.75rem;
}

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

.cta-section[b-myz0kb2ji1] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 1px solid var(--tco-border-medium);
    border-radius: 24px;
    text-align: center;
}

.cta-header[b-myz0kb2ji1] {
    margin-bottom: 2rem;
}

.cta-title[b-myz0kb2ji1] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--tco-primary) 0%, var(--tco-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-description[b-myz0kb2ji1] {
    font-size: 1.15rem;
    color: var(--tco-text-secondary);
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
}

.cta-features[b-myz0kb2ji1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.cta-feature[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tco-text-secondary);
    font-size: 0.95rem;
}

.cta-feature-icon[b-myz0kb2ji1] {
    color: var(--tco-primary);
}

.cta-buttons[b-myz0kb2ji1] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-btn[b-myz0kb2ji1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn-primary[b-myz0kb2ji1] {
    background: linear-gradient(135deg, var(--tco-primary) 0%, var(--tco-primary-dark) 100%);
    color: white;
    border: none;
}

.cta-btn-primary:hover[b-myz0kb2ji1] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.cta-btn-secondary[b-myz0kb2ji1] {
    background: transparent;
    color: var(--tco-primary);
    border: 2px solid var(--tco-primary);
}

.cta-btn-secondary:hover[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
    transform: translateY(-2px);
}

/* ==========================================================================
   Disclaimer Section
   ========================================================================== */

.disclaimer-section[b-myz0kb2ji1] {
    padding: 3rem 2rem;
    background: var(--tco-bg-dark);
}

.disclaimer-content[b-myz0kb2ji1] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--tco-border-subtle);
    border-radius: 12px;
    border-left: 4px solid var(--tco-secondary);
}

.disclaimer-content h4[b-myz0kb2ji1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tco-secondary);
    margin-bottom: 0.75rem;
}

.disclaimer-content p[b-myz0kb2ji1] {
    font-size: 0.9rem;
    color: var(--tco-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Large screens */
@@media (max-width: 1400px) {
    .calculator-container[b-myz0kb2ji1] {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Medium screens */
@@media (max-width: 1200px) {
    .calculator-container[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
    }

    .input-panel[b-myz0kb2ji1] {
        position: static;
        max-height: none;
    }

    .education-grid[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
    }

    .education-card.wide[b-myz0kb2ji1] {
        grid-column: span 1;
    }

    .cost-category-grid[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
    }
}

/* Tablets */
@@media (max-width: 992px) {
    .result-metrics[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .savings-summary[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
    }

    .breakeven-row[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }
}

/* Mobile */
@@media (max-width: 768px) {
    .tco-showcase[b-myz0kb2ji1] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .tco-card.savings[b-myz0kb2ji1] {
        grid-column: span 1;
    }

    .input-panel[b-myz0kb2ji1],
    .results-panel[b-myz0kb2ji1] {
        padding: 1.5rem;
    }

    .action-buttons[b-myz0kb2ji1] {
        flex-direction: column;
    }

    .btn-calculate[b-myz0kb2ji1],
    .btn-reset[b-myz0kb2ji1] {
        width: 100%;
    }

    .breakdown-row[b-myz0kb2ji1] {
        grid-template-columns: 1fr auto;
    }

    .breakdown-percent[b-myz0kb2ji1] {
        display: none;
    }

    .projection-header[b-myz0kb2ji1],
    .projection-row[b-myz0kb2ji1] {
        grid-template-columns: 50px 1fr 1fr;
        font-size: 0.85rem;
    }

    .projection-header span:nth-child(2)[b-myz0kb2ji1],
    .projection-row span:nth-child(2)[b-myz0kb2ji1] {
        display: none;
    }

    .comparison-table[b-myz0kb2ji1] {
        font-size: 0.85rem;
    }

    .comparison-table th[b-myz0kb2ji1],
    .comparison-table td[b-myz0kb2ji1] {
        padding: 0.75rem 0.5rem;
    }

    .category-header[b-myz0kb2ji1],
    .category-content[b-myz0kb2ji1] {
        padding: 1.25rem 1.5rem;
    }

    .category-table-row[b-myz0kb2ji1] {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        font-size: 0.85rem;
    }

    .category-table-row span:nth-child(2)[b-myz0kb2ji1] {
        display: none;
    }

    .cta-section[b-myz0kb2ji1] {
        padding: 3rem 1.5rem;
    }

    .cta-buttons[b-myz0kb2ji1] {
        flex-direction: column;
    }

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

/* Small mobile */
@@media (max-width: 480px) {
    .hero-title[b-myz0kb2ji1] {
        font-size: 1.75rem;
    }

    .result-total-value[b-myz0kb2ji1] {
        font-size: 2rem;
    }

}

/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

.input-panel[b-myz0kb2ji1]::-webkit-scrollbar,
.results-panel[b-myz0kb2ji1]::-webkit-scrollbar {
    width: 8px;
}

.input-panel[b-myz0kb2ji1]::-webkit-scrollbar-track,
.results-panel[b-myz0kb2ji1]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

.input-panel[b-myz0kb2ji1]::-webkit-scrollbar-thumb,
.results-panel[b-myz0kb2ji1]::-webkit-scrollbar-thumb {
    background: var(--tco-primary);
    border-radius: 4px;
}

.input-panel[b-myz0kb2ji1]::-webkit-scrollbar-thumb:hover,
.results-panel[b-myz0kb2ji1]::-webkit-scrollbar-thumb:hover {
    background: var(--tco-primary-dark);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus indicators */
.btn-calculate:focus[b-myz0kb2ji1],
.btn-reset:focus[b-myz0kb2ji1],
.cta-btn:focus[b-myz0kb2ji1],
.hero-actions .btn-primary:focus[b-myz0kb2ji1],
.hero-actions .btn-outline:focus[b-myz0kb2ji1] {
    outline: 2px solid var(--tco-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@@media (prefers-reduced-motion: reduce) {
    *[b-myz0kb2ji1],
    *[b-myz0kb2ji1]::before,
    *[b-myz0kb2ji1]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@@media (prefers-contrast: high) {
    .tco-card[b-myz0kb2ji1],
    .result-card[b-myz0kb2ji1],
    .education-card[b-myz0kb2ji1],
    .cost-category-card[b-myz0kb2ji1] {
        border-width: 2px;
    }

    .breakdown-row.total[b-myz0kb2ji1] {
        border-width: 2px;
    }
}

/* Print styles */
@@media print {
    .guide-hero[b-myz0kb2ji1],
    .hero-actions[b-myz0kb2ji1],
    .action-buttons[b-myz0kb2ji1],
    .cta-section[b-myz0kb2ji1] {
        display: none;
    }

    .calculator-container[b-myz0kb2ji1] {
        display: block;
    }

    .input-panel[b-myz0kb2ji1],
    .results-panel[b-myz0kb2ji1] {
        background: white;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}
/* /Components/Pages/Services/AiDevelopment.razor.rz.scp.css */
/* ===========================================
   AI DEVELOPMENT PAGE - PAGE-SPECIFIC STYLES
   ===========================================
   Generic hero and section styles are in:
   - /css/generic-hero.css
   - /css/generic-sections.css
   =========================================== */

/* ===========================================
   CSS VARIABLES - BRAND COLORS
   =========================================== */
:root[b-szet7neglj] {
    --brand-color: #06b6d4;
    --brand-color-rgb: 6, 182, 212;
    --brand-color-dark: #0891b2;
}

/* ===========================================
   HERO ACCENT GRADIENT OVERRIDE
   =========================================== */
.page-hero-headline .accent[b-szet7neglj] {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================================
   BREADCRUMB
   =========================================== */
.page-breadcrumb-wrapper[b-szet7neglj] {
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 16px 0;
}

/* ===========================================
   WORKFLOW CARD - HERO VISUALIZATION
   =========================================== */
.aidev-workflow-card[b-szet7neglj] {
    position: relative;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.aidev-workflow-header[b-szet7neglj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.aidev-workflow-header :deep(.icon)[b-szet7neglj] {
    width: 16px;
    height: 16px;
    color: #8b5cf6;
}

.aidev-workflow-nodes[b-szet7neglj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px;
    gap: 12px;
}

.aidev-node[b-szet7neglj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #cbd5e1;
    width: 100%;
    max-width: 200px;
    justify-content: center;
}

.aidev-node :deep(.icon)[b-szet7neglj] {
    width: 16px;
    height: 16px;
}

.aidev-node.input[b-szet7neglj] {
    border-color: rgba(6,182,212,0.3);
    background: rgba(6,182,212,0.08);
}

.aidev-node.input :deep(.icon)[b-szet7neglj] {
    color: #06b6d4;
}

.aidev-node.agent[b-szet7neglj] {
    border-color: rgba(139,92,246,0.3);
    background: rgba(139,92,246,0.08);
}

.aidev-node.agent :deep(.icon)[b-szet7neglj] {
    color: #8b5cf6;
}

.aidev-node.output[b-szet7neglj] {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.08);
}

.aidev-node.output :deep(.icon)[b-szet7neglj] {
    color: #22c55e;
}

.aidev-node-group[b-szet7neglj] {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.aidev-node.tool[b-szet7neglj] {
    flex: 1;
    max-width: 100px;
    padding: 10px 12px;
    font-size: 0.75rem;
    flex-direction: column;
    gap: 6px;
}

.aidev-node.tool :deep(.icon)[b-szet7neglj] {
    color: #f59e0b;
}

.aidev-workflow-line[b-szet7neglj] {
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, rgba(139,92,246,0.4) 0%, rgba(139,92,246,0.1) 100%);
    border-radius: 1px;
}

.aidev-workflow-footer[b-szet7neglj] {
    padding: 12px 20px;
    background: #0a1018;
    border-top: 1px solid rgba(255,255,255,0.04);
    text-align: center;
}

.aidev-workflow-badge[b-szet7neglj] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    padding: 6px 12px;
    border-radius: 20px;
}

/* ===========================================
   SERVICES GRID
   =========================================== */
.aidev-services-grid[b-szet7neglj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.aidev-service-card[b-szet7neglj] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.aidev-service-card:hover[b-szet7neglj] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.aidev-service-icon[b-szet7neglj] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.aidev-service-icon :deep(.icon)[b-szet7neglj] {
    width: 26px;
    height: 26px;
}

.aidev-service-icon.cyan[b-szet7neglj] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.aidev-service-icon.purple[b-szet7neglj] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.aidev-service-icon.gold[b-szet7neglj] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.aidev-service-icon.green[b-szet7neglj] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.aidev-service-card h3[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.aidev-service-card > p[b-szet7neglj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.aidev-service-examples[b-szet7neglj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aidev-service-examples span[b-szet7neglj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #64748b;
}

.aidev-service-examples :deep(.icon)[b-szet7neglj] {
    width: 12px;
    height: 12px;
    color: #10b981;
}

/* ===========================================
   INDUSTRIES GRID
   =========================================== */
.aidev-industries-grid[b-szet7neglj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.aidev-industry-card[b-szet7neglj] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.aidev-industry-card:hover[b-szet7neglj] {
    border-color: rgba(6,182,212,0.2);
}

.aidev-industry-icon[b-szet7neglj] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 12px;
    color: #06b6d4;
    margin-bottom: 20px;
}

.aidev-industry-icon :deep(.icon)[b-szet7neglj] {
    width: 22px;
    height: 22px;
}

.aidev-industry-card h4[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px 0;
}

.aidev-industry-card p[b-szet7neglj] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   PROCESS TIMELINE
   =========================================== */
.aidev-process-timeline[b-szet7neglj] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.aidev-process-step[b-szet7neglj] {
    position: relative;
    padding: 32px 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.aidev-process-step[b-szet7neglj]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, rgba(6,182,212,0.4) 0%, transparent 100%);
}

.aidev-process-step:last-child[b-szet7neglj]::after {
    display: none;
}

/* Free consultation step highlight */
.aidev-process-step--free[b-szet7neglj] {
    border-color: rgba(34, 197, 94, 0.2);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, #0f1620 100%);
}

.aidev-process-step--free .aidev-step-number[b-szet7neglj] {
    color: #22c55e;
    opacity: 0.6;
}

.aidev-step-number[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #06b6d4;
    opacity: 0.4;
    margin-bottom: 20px;
}

.aidev-step-content h4[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.aidev-step-content p[b-szet7neglj] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.aidev-step-badge[b-szet7neglj] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.aidev-step-badge.free[b-szet7neglj] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}

.aidev-step-deliverables[b-szet7neglj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aidev-step-deliverables span[b-szet7neglj] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748b;
    background: rgba(255,255,255,0.04);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ===========================================
   COMPARISON
   =========================================== */
.aidev-comparison[b-szet7neglj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.aidev-comparison-side[b-szet7neglj] {
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.aidev-comparison-side.problem[b-szet7neglj] {
    border-top: 3px solid #ef4444;
}

.aidev-comparison-side.solution[b-szet7neglj] {
    border-top: 3px solid #22c55e;
}

.aidev-comparison-header[b-szet7neglj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.aidev-comparison-header :deep(.icon)[b-szet7neglj] {
    width: 24px;
    height: 24px;
}

.aidev-comparison-side.problem .aidev-comparison-header :deep(.icon)[b-szet7neglj] {
    color: #ef4444;
}

.aidev-comparison-side.solution .aidev-comparison-header :deep(.icon)[b-szet7neglj] {
    color: #22c55e;
}

.aidev-comparison-header h3[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.aidev-comparison-list[b-szet7neglj] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aidev-comparison-list li[b-szet7neglj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.9375rem;
    color: #94a3b8;
}

.aidev-comparison-list li:last-child[b-szet7neglj] {
    border-bottom: none;
}

.aidev-comparison-list :deep(.icon)[b-szet7neglj] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.aidev-comparison-list.negative :deep(.icon)[b-szet7neglj] {
    color: #ef4444;
}

.aidev-comparison-list.positive :deep(.icon)[b-szet7neglj] {
    color: #22c55e;
}

.aidev-comparison-cta[b-szet7neglj] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.aidev-comparison-cta p[b-szet7neglj] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

/* ===========================================
   TECH GRID
   =========================================== */
.aidev-tech-grid[b-szet7neglj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.aidev-tech-category[b-szet7neglj] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.aidev-tech-category h4[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.aidev-tech-items[b-szet7neglj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.aidev-tech-item[b-szet7neglj] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    padding: 6px 12px;
    border-radius: 4px;
}

.aidev-tech-category p[b-szet7neglj] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* ===========================================
   PRICING
   =========================================== */
.aidev-pricing-content[b-szet7neglj] {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.aidev-pricing-intro[b-szet7neglj] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 48px 0;
}

.aidev-pricing-grid[b-szet7neglj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    text-align: left;
}

.aidev-pricing-item[b-szet7neglj] {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.aidev-pricing-number[b-szet7neglj] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

.aidev-pricing-text h4[b-szet7neglj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.aidev-pricing-text p[b-szet7neglj] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   RESPONSIVE - 1200px
   =========================================== */
@media (max-width: 1400px) {
    .aidev-process-timeline[b-szet7neglj] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .aidev-process-timeline[b-szet7neglj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .aidev-process-step[b-szet7neglj]::after {
        display: none;
    }

    .aidev-tech-grid[b-szet7neglj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   RESPONSIVE - 1024px (Tablet)
   =========================================== */
@media (max-width: 1024px) {
    .aidev-services-grid[b-szet7neglj] {
        grid-template-columns: 1fr;
    }

    .aidev-industries-grid[b-szet7neglj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .aidev-comparison[b-szet7neglj] {
        grid-template-columns: 1fr;
    }

    .aidev-pricing-grid[b-szet7neglj] {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   RESPONSIVE - 768px (Mobile)
   =========================================== */
@media (max-width: 768px) {
    .aidev-industries-grid[b-szet7neglj] {
        grid-template-columns: 1fr;
    }

    .aidev-process-timeline[b-szet7neglj] {
        grid-template-columns: 1fr;
    }

    .aidev-tech-grid[b-szet7neglj] {
        grid-template-columns: 1fr;
    }

    .aidev-node-group[b-szet7neglj] {
        flex-direction: column;
        gap: 8px;
    }

    .aidev-node.tool[b-szet7neglj] {
        max-width: 200px;
        flex-direction: row;
    }
}
/* /Components/Shared/BensonChat.razor.rz.scp.css */
/* ============================================
   BENSON CHAT BOX — Reusable Component
   ============================================ */

.benson-chat[b-e60ugmw50e] {
    background: #0a0f18;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(245, 158, 11, 0.04);
}

/* Top bar */
.benson-chat-bar[b-e60ugmw50e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.benson-chat-dots[b-e60ugmw50e] {
    display: flex;
    gap: 7px;
}

.benson-chat-dots span[b-e60ugmw50e] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.benson-chat-dots span:nth-child(1)[b-e60ugmw50e] { background: #ef4444; }
.benson-chat-dots span:nth-child(2)[b-e60ugmw50e] { background: #f59e0b; }
.benson-chat-dots span:nth-child(3)[b-e60ugmw50e] { background: #22c55e; }

.benson-chat-label[b-e60ugmw50e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #64748b;
    letter-spacing: 0.04em;
}

/* Message area */
.benson-chat-messages[b-e60ugmw50e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px;
    min-height: 320px;
}

/* Individual messages — hidden by default */
.benson-msg[b-e60ugmw50e] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    max-width: 82%;
    padding: 16px 20px;
    border-radius: 12px;
    line-height: 1.6;
}

.benson-msg.revealed[b-e60ugmw50e] {
    opacity: 1;
    transform: translateY(0);
}

/* User messages — right-aligned */
.benson-msg.user[b-e60ugmw50e] {
    align-self: flex-end;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.benson-msg.user .benson-msg-text[b-e60ugmw50e] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    color: #f1f5f9;
}

/* Bot messages — left-aligned, gold accent */
.benson-msg.bot[b-e60ugmw50e] {
    align-self: flex-start;
    background: rgba(15, 23, 42, 0.6);
    border-left: 3px solid #f59e0b;
}

.benson-msg.bot .benson-msg-text[b-e60ugmw50e] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

/* Decorative input bar */
.benson-chat-input[b-e60ugmw50e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #475569;
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
}

[b-e60ugmw50e] .benson-chat-input svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .benson-chat[b-e60ugmw50e] {
        max-width: 100%;
    }

    .benson-chat-messages[b-e60ugmw50e] {
        padding: 20px 16px;
        min-height: 260px;
    }

    .benson-msg[b-e60ugmw50e] {
        max-width: 90%;
        padding: 14px 16px;
    }

    .benson-msg.user .benson-msg-text[b-e60ugmw50e],
    .benson-msg.bot .benson-msg-text[b-e60ugmw50e] {
        font-size: 0.8125rem;
    }
}

/* ============================================
   REDUCED MOTION — show all immediately
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .benson-msg[b-e60ugmw50e] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* /Components/Shared/BensonWaitlistButton.razor.rz.scp.css */
/* ===========================================
   BENSON WAITLIST BUTTON + MODAL
   =========================================== */

/* Modal */
.waitlist-modal[b-s9uu7nj3qs] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.waitlist-modal.open[b-s9uu7nj3qs] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-s9uu7nj3qs 0.2s ease;
}

@keyframes fadeIn-b-s9uu7nj3qs {
    from { opacity: 0; }
    to { opacity: 1; }
}

.waitlist-backdrop[b-s9uu7nj3qs] {
    position: absolute;
    inset: 0;
    background: #000000;
}

.waitlist-content[b-s9uu7nj3qs] {
    position: relative;
    z-index: 1;
    background: #0f1620;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-s9uu7nj3qs 0.3s ease;
}

@keyframes slideUp-b-s9uu7nj3qs {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.waitlist-close[b-s9uu7nj3qs] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.waitlist-close:hover[b-s9uu7nj3qs] {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.waitlist-close[b-s9uu7nj3qs]  .icon {
    width: 16px;
    height: 16px;
}

/* Header */
.waitlist-header[b-s9uu7nj3qs] {
    text-align: center;
    margin-bottom: 32px;
}

.waitlist-icon[b-s9uu7nj3qs] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 16px;
    margin: 0 auto 20px;
    color: #06b6d4;
}

.waitlist-icon[b-s9uu7nj3qs]  .icon {
    width: 28px;
    height: 28px;
}

.waitlist-header h2[b-s9uu7nj3qs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.waitlist-header p[b-s9uu7nj3qs] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

/* Form */
.waitlist-form[b-s9uu7nj3qs] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-s9uu7nj3qs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-s9uu7nj3qs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #f1f5f9;
}

.form-group label .required[b-s9uu7nj3qs] {
    color: #ef4444;
}

.form-group[b-s9uu7nj3qs]  input,
.form-group[b-s9uu7nj3qs]  select,
.form-group[b-s9uu7nj3qs]  textarea {
    width: 100%;
    padding: 12px 16px;
    background: #0a1018;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #f1f5f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.form-group[b-s9uu7nj3qs]  input::placeholder,
.form-group[b-s9uu7nj3qs]  textarea::placeholder {
    color: #64748b;
}

.form-group[b-s9uu7nj3qs]  input:focus,
.form-group[b-s9uu7nj3qs]  select:focus,
.form-group[b-s9uu7nj3qs]  textarea:focus {
    outline: none;
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

.form-group[b-s9uu7nj3qs]  select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Dropdown options - dark text on light background */
.form-group[b-s9uu7nj3qs]  select option {
    background: #ffffff;
    color: #1a1a1a;
}

.form-group[b-s9uu7nj3qs]  textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group[b-s9uu7nj3qs]  .validation-message {
    font-size: 0.8125rem;
    color: #ef4444;
}

.form-error[b-s9uu7nj3qs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #ef4444;
}

.form-error[b-s9uu7nj3qs]  .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Submit Button */
.btn-submit[b-s9uu7nj3qs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #030508;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.2);
    margin-top: 8px;
}

.btn-submit:hover:not(:disabled)[b-s9uu7nj3qs] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.3);
}

.btn-submit:disabled[b-s9uu7nj3qs] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-submit[b-s9uu7nj3qs]  .icon {
    width: 18px;
    height: 18px;
}

.spinner[b-s9uu7nj3qs] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(3, 5, 8, 0.3);
    border-top-color: #030508;
    border-radius: 50%;
    animation: spin-b-s9uu7nj3qs 0.8s linear infinite;
}

@keyframes spin-b-s9uu7nj3qs {
    to { transform: rotate(360deg); }
}

/* Success State */
.waitlist-success[b-s9uu7nj3qs] {
    text-align: center;
    padding: 20px 0;
}

.success-icon[b-s9uu7nj3qs] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    margin: 0 auto 24px;
    color: white;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3);
}

.success-icon[b-s9uu7nj3qs]  .icon {
    width: 32px;
    height: 32px;
}

.waitlist-success h2[b-s9uu7nj3qs] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.waitlist-success p[b-s9uu7nj3qs] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.btn-close-success[b-s9uu7nj3qs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-success:hover[b-s9uu7nj3qs] {
    border-color: #06b6d4;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .btn-gold[b-s9uu7nj3qs],
    .btn-outline[b-s9uu7nj3qs] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .waitlist-content[b-s9uu7nj3qs] {
        padding: 32px 24px;
        margin: 16px;
        width: calc(100% - 32px);
    }

    .waitlist-header h2[b-s9uu7nj3qs] {
        font-size: 1.25rem;
    }

    .waitlist-icon[b-s9uu7nj3qs] {
        width: 56px;
        height: 56px;
    }

    .waitlist-icon[b-s9uu7nj3qs]  .icon {
        width: 24px;
        height: 24px;
    }
}
/* /Components/Shared/BensonWaitlistModal.razor.rz.scp.css */
/* ===========================================
   BENSON WAITLIST MODAL
   =========================================== */

.waitlist-modal[b-dq90okd19h] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.waitlist-modal.open[b-dq90okd19h] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-dq90okd19h 0.2s ease;
}

@keyframes fadeIn-b-dq90okd19h {
    from { opacity: 0; }
    to { opacity: 1; }
}

.waitlist-backdrop[b-dq90okd19h] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.waitlist-content[b-dq90okd19h] {
    position: relative;
    background: #0f1620;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-dq90okd19h 0.3s ease;
}

@keyframes slideUp-b-dq90okd19h {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.waitlist-close[b-dq90okd19h] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.waitlist-close:hover[b-dq90okd19h] {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.waitlist-close[b-dq90okd19h]  .icon {
    width: 16px;
    height: 16px;
}

/* Header */
.waitlist-header[b-dq90okd19h] {
    text-align: center;
    margin-bottom: 32px;
}

.waitlist-icon[b-dq90okd19h] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 16px;
    margin: 0 auto 20px;
    color: #06b6d4;
}

.waitlist-icon[b-dq90okd19h]  .icon {
    width: 28px;
    height: 28px;
}

.waitlist-header h2[b-dq90okd19h] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.waitlist-header p[b-dq90okd19h] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

/* Form */
.waitlist-form[b-dq90okd19h] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-dq90okd19h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-dq90okd19h] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #f1f5f9;
}

.form-group label .required[b-dq90okd19h] {
    color: #ef4444;
}

.form-group[b-dq90okd19h]  input,
.form-group[b-dq90okd19h]  select,
.form-group[b-dq90okd19h]  textarea {
    width: 100%;
    padding: 12px 16px;
    background: #0a1018;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #f1f5f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.form-group[b-dq90okd19h]  input::placeholder,
.form-group[b-dq90okd19h]  textarea::placeholder {
    color: #64748b;
}

.form-group[b-dq90okd19h]  input:focus,
.form-group[b-dq90okd19h]  select:focus,
.form-group[b-dq90okd19h]  textarea:focus {
    outline: none;
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

.form-group[b-dq90okd19h]  select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-group[b-dq90okd19h]  textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group[b-dq90okd19h]  .validation-message {
    font-size: 0.8125rem;
    color: #ef4444;
}

.form-error[b-dq90okd19h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #ef4444;
}

.form-error[b-dq90okd19h]  .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Submit Button */
.btn-submit[b-dq90okd19h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #030508;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.2);
    margin-top: 8px;
}

.btn-submit:hover:not(:disabled)[b-dq90okd19h] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.3);
}

.btn-submit:disabled[b-dq90okd19h] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-submit[b-dq90okd19h]  .icon {
    width: 18px;
    height: 18px;
}

.spinner[b-dq90okd19h] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(3, 5, 8, 0.3);
    border-top-color: #030508;
    border-radius: 50%;
    animation: spin-b-dq90okd19h 0.8s linear infinite;
}

@keyframes spin-b-dq90okd19h {
    to { transform: rotate(360deg); }
}

/* Success State */
.waitlist-success[b-dq90okd19h] {
    text-align: center;
    padding: 20px 0;
}

.success-icon[b-dq90okd19h] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    margin: 0 auto 24px;
    color: white;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3);
}

.success-icon[b-dq90okd19h]  .icon {
    width: 32px;
    height: 32px;
}

.waitlist-success h2[b-dq90okd19h] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.waitlist-success p[b-dq90okd19h] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.btn-close-success[b-dq90okd19h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-success:hover[b-dq90okd19h] {
    border-color: #06b6d4;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

/* Responsive */
@media (max-width: 640px) {
    .waitlist-content[b-dq90okd19h] {
        padding: 32px 24px;
        margin: 16px;
        width: calc(100% - 32px);
    }

    .waitlist-header h2[b-dq90okd19h] {
        font-size: 1.25rem;
    }

    .waitlist-icon[b-dq90okd19h] {
        width: 56px;
        height: 56px;
    }

    .waitlist-icon[b-dq90okd19h]  .icon {
        width: 24px;
        height: 24px;
    }
}
/* /Components/Shared/Cards/BenefitCard.razor.rz.scp.css */
.benefit-card[b-0xqiq1wt2d] {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.benefit-card:hover[b-0xqiq1wt2d] {
    transform: translateY(-5px);
    border-color: #14B8A6;
    box-shadow: 0 10px 40px rgba(20, 184, 166, 0.2);
}

.benefit-number[b-0xqiq1wt2d] {
    display: inline-flex;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #14B8A6, #8B5CF6);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.benefit-card h3[b-0xqiq1wt2d] {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #F8FAFC;
}

.benefit-card p[b-0xqiq1wt2d] {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}
/* /Components/Shared/Cards/CategoryCard.razor.rz.scp.css */
.category-card[b-9pic60q1iq] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-card:hover[b-9pic60q1iq] {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.category-icon[b-9pic60q1iq] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 20px;
}

.category-title[b-9pic60q1iq] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.category-description[b-9pic60q1iq] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

.category-link[b-9pic60q1iq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: gap 0.3s ease;
}

.category-link:hover[b-9pic60q1iq] { gap: 12px; }
/* /Components/Shared/Cards/DeploymentCard.razor.rz.scp.css */
.deployment-card[b-r0m75x20hg] {
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.deployment-card:hover[b-r0m75x20hg] {
    transform: translateY(-5px);
    border-color: #14B8A6;
    box-shadow: 0 10px 40px rgba(20, 184, 166, 0.2);
}

.deployment-header[b-r0m75x20hg] {
    margin-bottom: 25px;
}

.deployment-header h3[b-r0m75x20hg] {
    font-size: 1.5rem;
    color: #F8FAFC;
    margin-bottom: 8px;
}

.deployment-goal[b-r0m75x20hg] {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-top: 8px;
}

.deployment-details[b-r0m75x20hg] {
    margin-top: 25px;
}
/* /Components/Shared/Cards/FeatureCard.razor.rz.scp.css */
/* FeatureCard Component Styles */

.feature-card[b-2unmuulpxh] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: 100%;
}

.feature-card:hover[b-2unmuulpxh] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.feature-icon[b-2unmuulpxh] {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.feature-icon.icon-primary[b-2unmuulpxh] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
}

.feature-icon.icon-secondary[b-2unmuulpxh] {
    background: linear-gradient(135deg, #10B981, #059669);
}

.feature-icon.icon-tertiary[b-2unmuulpxh] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
}

.feature-icon.icon-quaternary[b-2unmuulpxh] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.feature-icon i[b-2unmuulpxh] {
    font-size: 2rem;
    color: white;
}

.feature-card:hover .feature-icon[b-2unmuulpxh] {
    transform: scale(1.1);
}

.feature-card h3[b-2unmuulpxh] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: white;
}

.feature-card p[b-2unmuulpxh] {
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .feature-card[b-2unmuulpxh] {
        padding: 24px;
    }

    .feature-icon[b-2unmuulpxh] {
        width: 60px;
        height: 60px;
    }

    .feature-icon i[b-2unmuulpxh] {
        font-size: 1.75rem;
    }

    .feature-card h3[b-2unmuulpxh] {
        font-size: 1.2rem;
    }
}
/* /Components/Shared/Cards/GPUConfigCard.razor.rz.scp.css */
.gpu-config-card[b-keimg2bmi4] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.gpu-config-card.featured[b-keimg2bmi4] {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

.gpu-config-card:hover[b-keimg2bmi4] {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.25);
}

.config-header[b-keimg2bmi4] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.05));
    padding: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.config-title[b-keimg2bmi4] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.config-title h3[b-keimg2bmi4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.config-badge[b-keimg2bmi4] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-badge.professional[b-keimg2bmi4] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.config-badge.recommended[b-keimg2bmi4] {
    background: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.config-badge.enterprise[b-keimg2bmi4] {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.config-badge.cinema[b-keimg2bmi4] {
    background: rgba(168, 85, 247, 0.2);
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.model-info[b-keimg2bmi4] {
    color: rgba(248, 250, 252, 0.7);
    font-size: 0.95rem;
}

.config-specs[b-keimg2bmi4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 25px;
}

.config-why[b-keimg2bmi4] {
    background: rgba(15, 23, 42, 0.4);
    padding: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.config-why h4[b-keimg2bmi4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

.config-why p[b-keimg2bmi4] {
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
    font-size: 0.95rem;
}

@media (max-width: 1200px) {
    .config-specs[b-keimg2bmi4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Cards/PricingCard.razor.rz.scp.css */
/* PricingCard Component Styles */

.pricing-card[b-c5leu8tfwb] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin: 1rem 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.pricing-card:hover[b-c5leu8tfwb] {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pricing-title[b-c5leu8tfwb] {
    font-size: 1.4rem;
    color: #10B981;
    font-weight: 600;
    margin-bottom: 1rem;
}

.pricing-amount[b-c5leu8tfwb] {
    font-size: 1.8rem;
    color: #6366F1;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.pricing-details[b-c5leu8tfwb] {
    color: #b1bac4;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Dell Theme - Blue accent */
.pricing-card-dell[b-c5leu8tfwb] {
    background: rgba(13, 17, 23, 0.8);
    border: 1px solid rgba(0, 125, 184, 0.2);
}

.pricing-card-dell:hover[b-c5leu8tfwb] {
    border-color: rgba(0, 125, 184, 0.4);
    box-shadow: 0 10px 30px rgba(0, 125, 184, 0.1);
}

.pricing-card-dell .pricing-title[b-c5leu8tfwb] {
    color: #007db8;
}

.pricing-card-dell .pricing-amount[b-c5leu8tfwb] {
    color: #0078d4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .pricing-card[b-c5leu8tfwb] {
        padding: 1.5rem;
    }

    .pricing-title[b-c5leu8tfwb] {
        font-size: 1.2rem;
    }

    .pricing-amount[b-c5leu8tfwb] {
        font-size: 1.5rem;
    }

    .pricing-details[b-c5leu8tfwb] {
        font-size: 0.85rem;
    }
}
/* /Components/Shared/Cards/ProductCard.razor.rz.scp.css */
.product-card[b-dq1jhortd4] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 40px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-card[b-dq1jhortd4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.product-card:hover[b-dq1jhortd4] {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.product-card:hover[b-dq1jhortd4]::before { transform: scaleX(1); }

.card-header[b-dq1jhortd4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.card-icon[b-dq1jhortd4] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
    color: var(--primary);
}

.card-badge[b-dq1jhortd4] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.card-title[b-dq1jhortd4] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.card-subtitle[b-dq1jhortd4] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.5);
    margin-bottom: 20px;
}

.card-description[b-dq1jhortd4] {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.7);
    margin-bottom: 24px;
    line-height: 1.6;
}

.card-features[b-dq1jhortd4] {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item[b-dq1jhortd4] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
}

.feature-item i[b-dq1jhortd4] {
    color: var(--secondary);
    font-size: 16px;
}

.card-actions[b-dq1jhortd4] {
    display: grid;
    gap: 12px;
}

.card-btn[b-dq1jhortd4] {
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.card-btn-primary[b-dq1jhortd4] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.card-btn-primary:hover[b-dq1jhortd4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.card-btn-secondary[b-dq1jhortd4] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.card-btn-secondary:hover[b-dq1jhortd4] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
/* /Components/Shared/Cards/SpecItem.razor.rz.scp.css */
.spec-item[b-nvilxi1i3b] {
    text-align: center;
}

.spec-label[b-nvilxi1i3b] {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.spec-value[b-nvilxi1i3b] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}
/* /Components/Shared/Cards/WorkflowCard.razor.rz.scp.css */
.workflow-card[b-wctt0qca66] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.workflow-card:hover[b-wctt0qca66] {
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.workflow-icon[b-wctt0qca66] {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: white;
}

.workflow-card h3[b-wctt0qca66] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: white;
}

.workflow-card p[b-wctt0qca66] {
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}
/* /Components/Shared/DocsViewToggle/DocsViewToggle.razor.rz.scp.css */
.docs-view-toggle-container[b-u15nzrl69q] {
    display: flex;
    background-color: rgba(30, 30, 40, 0.8);
    border-radius: 0;
    padding: 2px;
    margin: 0 0 16px 0;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    border-right: none;
    width: 100%;
}

.docs-view-toggle-button[b-u15nzrl69q] {
    flex: 1 1 50%;
    padding: 8px 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    width: 50%;
}

.docs-view-toggle-button:hover[b-u15nzrl69q] {
    color: rgba(255, 255, 255, 0.9);
}

.docs-view-toggle-button.active[b-u15nzrl69q] {
    background-color: rgba(70, 70, 220, 0.6);
    color: white;
}

.docs-view-toggle-button i[b-u15nzrl69q] {
    font-size: 14px;
}

.docs-view-toggle-button span[b-u15nzrl69q] {
    font-size: 14px;
    font-weight: 500;
}
/* /Components/Shared/LastUpdated.razor.rz.scp.css */
.content-updated[b-ujfi3m37x1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: #64748b;
}

.content-updated[b-ujfi3m37x1]  svg,
.content-updated[b-ujfi3m37x1]  i {
    font-size: 0.75rem;
    color: #06b6d4;
}
/* /Components/Shared/LogoCarousel.razor.rz.scp.css */
.logo-carousel[b-p6dzg5t2u1] {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-carousel-track[b-p6dzg5t2u1] {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: carousel-scroll-b-p6dzg5t2u1 var(--carousel-speed, 30s) linear infinite;
}

.logo-carousel-item[b-p6dzg5t2u1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.logo-carousel-item:hover[b-p6dzg5t2u1] {
    opacity: 1;
}

.logo-carousel-item img[b-p6dzg5t2u1] {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@keyframes carousel-scroll-b-p6dzg5t2u1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .logo-carousel-track[b-p6dzg5t2u1] {
        gap: 40px;
    }

    .logo-carousel-item img[b-p6dzg5t2u1] {
        height: 28px;
        max-width: 120px;
    }
}
/* /Components/Shared/Marketplace/ServerCardStack.razor.rz.scp.css */
/* ===========================================
   SERVER CARD STACK - 3D Perspective Cascade
   Diagonal fan with slide-in animation
   =========================================== */

/* Outer container - perspective viewpoint */
.card-stack[b-nea7a3nm0t] {
    position: relative;
    perspective: 1200px;
    width: 100%;
    height: 100%;
    min-height: 540px;
    margin-top: -60px;
}

/* Ambient glow behind the entire stack */
.card-stack[b-nea7a3nm0t]::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
    height: 70%;
    background: radial-gradient(ellipse at 60% 40%, hsla(245, 80%, 50%, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 30% 70%, hsla(260, 70%, 45%, 0.08) 0%, transparent 50%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: glow-pulse-b-nea7a3nm0t 4s ease-in-out infinite alternate;
}

@keyframes glow-pulse-b-nea7a3nm0t {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Inner wrapper - tilts the whole stack as one unit */
.card-stack__inner[b-nea7a3nm0t] {
    position: absolute;
    inset: 0;
    transform: rotateX(8deg) rotateY(-12deg);
    transform-style: preserve-3d;
    transform-origin: 60% 45%;
    animation: stack-tilt-in-b-nea7a3nm0t 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    z-index: 1;
}

@keyframes stack-tilt-in-b-nea7a3nm0t {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
        opacity: 0.3;
    }
    100% {
        transform: rotateX(8deg) rotateY(-12deg);
        opacity: 1;
    }
}

/* Individual card - lighter solid background */
.stack-card[b-nea7a3nm0t] {
    position: absolute;
    width: 380px;
    border-radius: 14px;
    overflow: hidden;
    background: #161e2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid hsla(239, 60%, 80%, 0.18);
    border-left: 1px solid hsla(239, 60%, 80%, 0.08);

    /* Slide-in from right */
    animation: card-slide-in-b-nea7a3nm0t 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/*
 * Cards fan top-right to bottom-left:
 * Card 1 (top) is rightmost, card 4 (bottom) is leftmost.
 * Contained within the hero preview area.
 */

/* Card 1 - Top/Front (rightmost, fully visible) */
.stack-card--1[b-nea7a3nm0t] {
    z-index: 4;
    top: 0;
    left: 120px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        0 10px 25px rgba(0, 0, 0, 0.35),
        0 0 30px hsla(245, 70%, 50%, 0.06);
    animation-delay: 0.4s;
}

/* Card 2 */
.stack-card--2[b-nea7a3nm0t] {
    z-index: 3;
    top: 90px;
    left: 80px;
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.55),
        0 8px 20px rgba(0, 0, 0, 0.3),
        0 0 25px hsla(245, 70%, 50%, 0.05);
    animation-delay: 0.3s;
}

/* Card 3 */
.stack-card--3[b-nea7a3nm0t] {
    z-index: 2;
    top: 180px;
    left: 40px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.25),
        0 0 20px hsla(245, 70%, 50%, 0.04);
    animation-delay: 0.2s;
}

/* Card 4 - Bottom/Back (leftmost) */
.stack-card--4[b-nea7a3nm0t] {
    z-index: 1;
    top: 270px;
    left: 0;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 15px hsla(245, 70%, 50%, 0.03);
    animation-delay: 0.1s;
}

/* Slide-in from right animation */
@keyframes card-slide-in-b-nea7a3nm0t {
    0% {
        opacity: 0;
        transform: translateX(400px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Ambient glow on hover */
.stack-card__glow[b-nea7a3nm0t] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, hsla(260, 80%, 60%, 0.06), transparent, hsla(220, 80%, 60%, 0.06));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.stack-card:hover .stack-card__glow[b-nea7a3nm0t] {
    opacity: 1;
}

/* Card content layer */
.stack-card__content[b-nea7a3nm0t] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Header */
.stack-card__header[b-nea7a3nm0t] {
    padding: 14px 18px 12px;
}

.stack-card__status-row[b-nea7a3nm0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Status indicator */
.stack-card__status[b-nea7a3nm0t] {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.stack-card__status-glow[b-nea7a3nm0t] {
    position: absolute;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #10b981;
    opacity: 0.2;
    border-radius: 50%;
    filter: blur(3px);
}

.stack-card__status--available .stack-card__status-glow[b-nea7a3nm0t] {
    background-color: #10b981;
}

.stack-card__status-icon[b-nea7a3nm0t] {
    width: 12px;
    height: 12px;
    color: #10b981;
    position: relative;
    z-index: 1;
}

.stack-card__status--available .stack-card__status-icon[b-nea7a3nm0t] {
    color: #10b981;
}

.stack-card__status-text[b-nea7a3nm0t] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.05em;
}

/* Tier badge */
.stack-card__tier[b-nea7a3nm0t] {
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    font-weight: 500;
    color: #94a3b8;
}

.stack-card__tier--1[b-nea7a3nm0t] {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.25);
}

.stack-card__tier--2[b-nea7a3nm0t] {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.25);
}

.stack-card__tier--3[b-nea7a3nm0t] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
}

/* Title & category */
.stack-card__title[b-nea7a3nm0t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 2px 0;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

.stack-card__category[b-nea7a3nm0t] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

/* Specs grid */
.stack-card__specs-container[b-nea7a3nm0t] {
    padding: 0 18px 12px;
}

.stack-card__specs-grid[b-nea7a3nm0t] {
    background: #111827;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid hsla(239, 60%, 80%, 0.12);
    border-left: 1px solid hsla(239, 60%, 80%, 0.06);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stack-card__spec[b-nea7a3nm0t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stack-card__spec-label[b-nea7a3nm0t] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
}

.stack-card__spec-value[b-nea7a3nm0t] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #f1f5f9;
}

/* Location */
.stack-card__location[b-nea7a3nm0t] {
    padding: 0 18px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.stack-card__location-icon[b-nea7a3nm0t] {
    width: 11px;
    height: 11px;
    color: #64748b;
}

/* Divider */
.stack-card__divider[b-nea7a3nm0t] {
    margin: 0 18px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* Footer */
.stack-card__footer[b-nea7a3nm0t] {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stack-card__price-container[b-nea7a3nm0t] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stack-card__price-label[b-nea7a3nm0t] {
    font-size: 0.5625rem;
    color: #64748b;
}

.stack-card__price[b-nea7a3nm0t] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.stack-card__price-amount[b-nea7a3nm0t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.stack-card__price-unit[b-nea7a3nm0t] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Deploy button (decorative, non-interactive) with glow */
.stack-card__button[b-nea7a3nm0t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    pointer-events: none;
    box-shadow:
        0 0 15px hsla(245, 80%, 55%, 0.4),
        0 0 30px hsla(245, 80%, 55%, 0.15);
}

.stack-card__button i[b-nea7a3nm0t] {
    font-size: 0.625rem;
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 1200px) {
    .stack-card[b-nea7a3nm0t] {
        width: 350px;
    }

    .stack-card--1[b-nea7a3nm0t] { left: 100px; top: 0; }
    .stack-card--2[b-nea7a3nm0t] { left: 66px; top: 85px; }
    .stack-card--3[b-nea7a3nm0t] { left: 33px; top: 170px; }
    .stack-card--4[b-nea7a3nm0t] { left: 0; top: 255px; }
}

@media (max-width: 1024px) {
    .card-stack[b-nea7a3nm0t] {
        max-width: 460px;
        margin: 0 auto;
        min-height: 460px;
    }

    .card-stack__inner[b-nea7a3nm0t] {
        transform: rotateX(6deg) rotateY(-8deg);
    }

    .stack-card[b-nea7a3nm0t] {
        width: 320px;
    }

    .stack-card--1[b-nea7a3nm0t] { top: 0; left: 90px; }
    .stack-card--2[b-nea7a3nm0t] { top: 80px; left: 60px; }
    .stack-card--3[b-nea7a3nm0t] { top: 160px; left: 30px; }
    .stack-card--4[b-nea7a3nm0t] { top: 240px; left: 0; }
}

@media (max-width: 768px) {
    .card-stack[b-nea7a3nm0t] {
        display: none;
    }
}
/* /Components/Shared/Navigation/Breadcrumb.razor.rz.scp.css */
/* Breadcrumb Navigation - SLYD Design System */

.breadcrumb[b-bdai0bmctr] {
    padding: 1.5rem 0;
    text-align: center;
}

.breadcrumb-card[b-bdai0bmctr] {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    padding: 0.625rem 1.25rem;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.breadcrumb-list[b-bdai0bmctr] {
    display: flex;
    list-style: none;
    gap: 0;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-item[b-bdai0bmctr] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
}

.breadcrumb-link[b-bdai0bmctr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.breadcrumb-link :global(svg)[b-bdai0bmctr] {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.breadcrumb-link:hover[b-bdai0bmctr] {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
}

.breadcrumb-link:hover :global(svg)[b-bdai0bmctr] {
    opacity: 1;
    color: #06b6d4;
}

.breadcrumb-separator[b-bdai0bmctr] {
    display: flex;
    align-items: center;
    padding: 0 0.375rem;
    color: #475569;
}

.breadcrumb-separator :global(svg)[b-bdai0bmctr] {
    width: 12px;
    height: 12px;
}

.breadcrumb-item.current .breadcrumb-current[b-bdai0bmctr] {
    color: #f1f5f9;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(139, 92, 246, 0.08));
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .breadcrumb[b-bdai0bmctr] {
        padding: 1rem 0;
    }

    .breadcrumb-card[b-bdai0bmctr] {
        padding: 0.5rem 1rem;
        border-radius: 12px;
        max-width: 100%;
    }

    .breadcrumb-list[b-bdai0bmctr] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .breadcrumb-item[b-bdai0bmctr] {
        font-size: 0.8125rem;
    }

    .breadcrumb-link[b-bdai0bmctr] {
        padding: 0.25rem 0.375rem;
        gap: 0.375rem;
    }

    .breadcrumb-link :global(svg)[b-bdai0bmctr] {
        width: 12px;
        height: 12px;
    }

    .breadcrumb-separator[b-bdai0bmctr] {
        padding: 0 0.25rem;
    }

    .breadcrumb-separator :global(svg)[b-bdai0bmctr] {
        width: 10px;
        height: 10px;
    }

    .breadcrumb-item.current .breadcrumb-current[b-bdai0bmctr] {
        padding: 0.25rem 0.5rem;
    }
}

/* Very small screens - hide home icon text, show only icon */
@media (max-width: 480px) {
    .breadcrumb-card[b-bdai0bmctr] {
        border-radius: 10px;
    }

    .breadcrumb-item:first-child .breadcrumb-link span[b-bdai0bmctr] {
        display: none;
    }

    .breadcrumb-item:first-child .breadcrumb-link[b-bdai0bmctr] {
        padding: 0.25rem;
    }
}
/* /Components/Shared/Process/ProcessStep.razor.rz.scp.css */
/* ProcessStep Component Styles */

.process-step[b-h4voa0krut] {
    display: flex;
    gap: 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 28px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: 100%;
}

.process-step:hover[b-h4voa0krut] {
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.step-number[b-h4voa0krut] {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.step-content[b-h4voa0krut] {
    flex: 1;
}

.step-content h3[b-h4voa0krut] {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.step-content p[b-h4voa0krut] {
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .process-step[b-h4voa0krut] {
        padding: 20px;
        gap: 16px;
    }

    .step-number[b-h4voa0krut] {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .step-content h3[b-h4voa0krut] {
        font-size: 1.05rem;
    }

    .step-content p[b-h4voa0krut] {
        font-size: 0.9rem;
    }
}
/* /Components/Shared/Process/TimelineStep.razor.rz.scp.css */
.timeline-item[b-5o6nr1h1sv] {
    position: relative;
    margin-bottom: 30px;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    margin-left: 30px;
    transition: all 0.3s ease;
}

.timeline-item:hover[b-5o6nr1h1sv] {
    transform: translateX(10px);
    border-color: #14B8A6;
    box-shadow: 0 10px 40px rgba(20, 184, 166, 0.2);
}

.timeline-item[b-5o6nr1h1sv]::before {
    content: '';
    position: absolute;
    left: -45px;
    top: 30px;
    width: 20px;
    height: 20px;
    background: #14B8A6;
    border: 3px solid #020617;
    border-radius: 50%;
}

.timeline-header[b-5o6nr1h1sv] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.timeline-step[b-5o6nr1h1sv] {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, #14B8A6, #8B5CF6);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.timeline-item h3[b-5o6nr1h1sv] {
    font-size: 1.5rem;
    color: #F8FAFC;
    margin: 0;
}

.timeline-item p[b-5o6nr1h1sv] {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 15px 0;
}

.timeline-item ul[b-5o6nr1h1sv] {
    list-style: none;
    margin-top: 15px;
    padding: 0;
}

.timeline-item li[b-5o6nr1h1sv] {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: rgba(255, 255, 255, 0.7);
}

.timeline-item li[b-5o6nr1h1sv]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #14B8A6;
    font-weight: 700;
}
/* /Components/Shared/Sections/CTASection.razor.rz.scp.css */
.container[b-8dys3djuwq] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.section[b-8dys3djuwq] {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.cta-section[b-8dys3djuwq] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 80px 40px;
    text-align: center;
}

.cta-title[b-8dys3djuwq] {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: white;
}

.cta-description[b-8dys3djuwq] {
    font-size: 1.15rem;
    color: rgba(248, 250, 252, 0.7);
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.cta-buttons[b-8dys3djuwq] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button[b-8dys3djuwq] {
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.cta-button-primary[b-8dys3djuwq] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.cta-button-primary:hover[b-8dys3djuwq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.cta-button-secondary[b-8dys3djuwq] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.cta-button-secondary:hover[b-8dys3djuwq] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
/* /Components/Shared/Sections/FeatureHighlight.razor.rz.scp.css */
/* FeatureHighlight Component Styles */

.feature-card[b-m187ckwtlc] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin: 1rem 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.feature-card:hover[b-m187ckwtlc] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
}

.feature-title[b-m187ckwtlc] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #10B981;
    margin-bottom: 1rem;
}

.feature-description[b-m187ckwtlc] {
    color: #b1bac4;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.highlight-list[b-m187ckwtlc] {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

.highlight-list li[b-m187ckwtlc] {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 2rem;
    color: #e6edf3;
    line-height: 1.6;
}

.highlight-list li[b-m187ckwtlc]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #10B981;
    font-weight: 700;
}

.use-case-challenge[b-m187ckwtlc] {
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #e6edf3;
}

.use-case-solution[b-m187ckwtlc] {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #e6edf3;
}

/* Dell Theme - Blue accent */
.feature-card-dell[b-m187ckwtlc] {
    background: rgba(13, 17, 23, 0.8);
    border: 1px solid rgba(0, 125, 184, 0.2);
}

.feature-card-dell:hover[b-m187ckwtlc] {
    border-color: rgba(0, 125, 184, 0.4);
    box-shadow: 0 10px 30px rgba(0, 125, 184, 0.1);
}

.feature-card-dell .feature-title[b-m187ckwtlc] {
    color: #007db8;
}

.feature-card-dell .highlight-list li[b-m187ckwtlc]::before {
    color: #007db8;
}

.feature-card-dell .use-case-challenge[b-m187ckwtlc] {
    background: rgba(0, 125, 184, 0.1);
}

.feature-card-dell .use-case-solution[b-m187ckwtlc] {
    background: rgba(0, 120, 212, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .feature-card[b-m187ckwtlc] {
        padding: 1.5rem;
    }

    .feature-title[b-m187ckwtlc] {
        font-size: 1.1rem;
    }

    .feature-description[b-m187ckwtlc] {
        font-size: 0.9rem;
    }

    .highlight-list li[b-m187ckwtlc] {
        padding-left: 1.5rem;
        font-size: 0.9rem;
    }

    .use-case-challenge[b-m187ckwtlc],
    .use-case-solution[b-m187ckwtlc] {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}
/* /Components/Shared/Sections/Hero.razor.rz.scp.css */
/* ===========================================
   SPLIT HERO COMPONENT
   =========================================== */
.hero-split[b-8lbih6624m] {
    /* V3 defaults: tokens instead of hardcoded hex. Parameters
       (--hero-gradient / --hero-glow) still override per-consumer. */
    --hero-gradient: linear-gradient(180deg, var(--slyd-bg-body) 0%, var(--slyd-bg-elevated) 100%);
    --hero-glow:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--slyd-primary-glow) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, color-mix(in oklab, var(--slyd-secondary) 18%, transparent) 0%, transparent 50%);

    position: relative;
    z-index: 1;
    min-height: 60vh;
    padding: 80px 0 60px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--hero-gradient);
}

.hero-split[b-8lbih6624m]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hero-glow);
    pointer-events: none;
}

.hero-container[b-8lbih6624m] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

/* Hero Left - Content */
.hero-content[b-8lbih6624m] {
    position: relative;
}

.hero-tags[b-8lbih6624m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.hero-tag[b-8lbih6624m] {
    --tag-color: var(--hero-tag-color, var(--slyd-accent-gold));
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    font-family: var(--slyd-font-family-mono);
    font-size: var(--hero-tag-size, 0.75rem);
    font-weight: 600;
    letter-spacing: var(--hero-tag-spacing, 0.05em);
    line-height: 1;
    text-transform: uppercase;
    color: var(--tag-color);
    padding: var(--hero-tag-padding, 10px 16px);
    background: color-mix(in srgb, var(--tag-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color) 30%, transparent);
    border-radius: var(--hero-tag-radius, 4px);
    box-sizing: border-box;
    margin: 0;
}

.hero-badge[b-8lbih6624m] {
    --badge-color: var(--hero-badge-color, var(--slyd-accent-purple));
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-family: var(--slyd-font-family-mono);
    font-size: var(--hero-badge-size, 0.6875rem);
    font-weight: 600;
    letter-spacing: var(--hero-badge-spacing, 0.05em);
    line-height: 1;
    text-transform: uppercase;
    color: var(--badge-color);
    padding: var(--hero-badge-padding, 8px 14px);
    background: color-mix(in srgb, var(--badge-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color) 35%, transparent);
    border-radius: var(--hero-badge-radius, 4px);
    box-sizing: border-box;
    margin: 0;
}

/* Pulsing dot before tag text */
.hero-tag[b-8lbih6624m]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--tag-color);
    border-radius: 50%;
    animation: pulse-dot-b-8lbih6624m 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Completely hide dot when --no-dot class is present */
.hero-tag--no-dot[b-8lbih6624m]::before {
    display: none !important;
    content: none !important;
}

/* Remove gap when no dot */
.hero-tag--no-dot[b-8lbih6624m] {
    gap: 0;
}

@keyframes pulse-dot-b-8lbih6624m {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-headline[b-8lbih6624m] {
    font-family: var(--slyd-font-family-heading);
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--slyd-text-primary);
    margin: 0 0 24px 0;
}

/* Use ::deep for child component styles */
.hero-headline :deep(.accent)[b-8lbih6624m],
.hero-headline :global(.accent)[b-8lbih6624m] {
    --accent: var(--hero-accent-color, var(--slyd-accent-gold));
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #fff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subhead[b-8lbih6624m] {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--slyd-text-secondary);
    margin: 0 0 32px 0;
    max-width: 580px;
}

.hero-props[b-8lbih6624m] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: 40px;
}

.hero-actions[b-8lbih6624m] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Right - Preview */
.hero-preview[b-8lbih6624m] {
    position: relative;
}

/* Decorative grid element — default uses primary-tinted grid lines
   so it reads as part of the V3 hero glow on dark surfaces; consumers
   can still override via --hero-accent-color. */
.hero-grid-deco[b-8lbih6624m] {
    --deco-color: var(--hero-accent-color, var(--slyd-primary));
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--deco-color) 15%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--deco-color) 15%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    transform: rotate(15deg);
    pointer-events: none;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .hero-container[b-8lbih6624m] {
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .hero-container[b-8lbih6624m] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-content[b-8lbih6624m] {
        max-width: 600px;
        margin: 0 auto;
    }
    .hero-subhead[b-8lbih6624m] {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-props[b-8lbih6624m] {
        justify-content: center;
    }
    .hero-actions[b-8lbih6624m] {
        justify-content: center;
    }
    .hero-preview[b-8lbih6624m] {
        max-width: 480px;
        margin: 0 auto;
    }
    .hero-grid-deco[b-8lbih6624m] {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-split[b-8lbih6624m] {
        min-height: auto;
        padding: 60px 0 40px;
    }
    .hero-container[b-8lbih6624m] {
        padding: 0 24px;
        gap: 40px;
    }
    .hero-headline[b-8lbih6624m] {
        font-size: 2.25rem;
    }
    .hero-actions[b-8lbih6624m] {
        flex-direction: column;
    }
}
/* /Components/Shared/Sections/HeroProp.razor.rz.scp.css */
.hero-prop[b-1fabjct8uv] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.hero-prop :deep(.icon)[b-1fabjct8uv] {
    width: 20px;
    height: 20px;
    color: #06b6d4;
}
/* /Components/Shared/Sections/SectionHeader.razor.rz.scp.css */
/* SectionHeader Component Styles */

.section-header[b-mvn6k9uid3] {
    margin-bottom: 50px;
}

.section-header.text-center[b-mvn6k9uid3] {
    text-align: center;
}

.section-header h2[b-mvn6k9uid3] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: white;
    line-height: 1.2;
}

.section-header p[b-mvn6k9uid3] {
    font-size: 1.1rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
    max-width: 800px;
}

.section-header.text-center p[b-mvn6k9uid3] {
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .section-header h2[b-mvn6k9uid3] {
        font-size: 2rem;
    }

    .section-header p[b-mvn6k9uid3] {
        font-size: 1.05rem;
    }
}

@media (max-width: 768px) {
    .section-header[b-mvn6k9uid3] {
        margin-bottom: 35px;
    }

    .section-header h2[b-mvn6k9uid3] {
        font-size: 1.75rem;
    }

    .section-header p[b-mvn6k9uid3] {
        font-size: 1rem;
    }
}
/* /Components/Shared/Sections/StatsGrid.razor.rz.scp.css */
/* StatsGrid Component Styles */

.stats-grid[b-w24m25b1y9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.stat-card[b-w24m25b1y9] {
    text-align: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.stat-card:hover[b-w24m25b1y9] {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.stat-number[b-w24m25b1y9] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #10B981;
    display: block;
    line-height: 1;
}

.stat-label[b-w24m25b1y9] {
    color: #b1bac4;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: block;
}

/* Dell Theme - Blue accent */
.stat-card-dell[b-w24m25b1y9] {
    background: rgba(13, 17, 23, 0.6);
    border: 1px solid rgba(0, 125, 184, 0.2);
}

.stat-card-dell:hover[b-w24m25b1y9] {
    border-color: rgba(0, 125, 184, 0.4);
    box-shadow: 0 8px 16px rgba(0, 125, 184, 0.1);
}

.stat-card-dell .stat-number[b-w24m25b1y9] {
    color: #007db8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-grid[b-w24m25b1y9] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-card[b-w24m25b1y9] {
        padding: 1rem;
    }

    .stat-number[b-w24m25b1y9] {
        font-size: 2rem;
    }

    .stat-label[b-w24m25b1y9] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-w24m25b1y9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Tables/SpecificationTable.razor.rz.scp.css */
/* SpecificationTable Component Styles */

.spec-table[b-49eb3arl6n] {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.spec-table th[b-49eb3arl6n],
.spec-table td[b-49eb3arl6n] {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.spec-table thead tr:last-child th[b-49eb3arl6n] {
    border-bottom: 2px solid rgba(99, 102, 241, 0.3);
}

.spec-table tbody tr:last-child td[b-49eb3arl6n] {
    border-bottom: none;
}

.spec-table th[b-49eb3arl6n] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
    font-weight: 600;
    font-size: 0.95rem;
}

.spec-table td[b-49eb3arl6n] {
    color: #e6edf3;
    font-size: 0.9rem;
}

.spec-table tbody tr[b-49eb3arl6n] {
    transition: background-color 0.2s ease;
}

.spec-table tbody tr:hover[b-49eb3arl6n] {
    background: rgba(99, 102, 241, 0.05);
}

/* Dell Theme - Blue accent */
.spec-table-dell[b-49eb3arl6n] {
    background: rgba(13, 17, 23, 0.6);
}

.spec-table-dell th[b-49eb3arl6n],
.spec-table-dell td[b-49eb3arl6n] {
    border-bottom: 1px solid rgba(0, 125, 184, 0.1);
}

.spec-table-dell thead tr:last-child th[b-49eb3arl6n] {
    border-bottom: 2px solid rgba(0, 125, 184, 0.3);
}

.spec-table-dell th[b-49eb3arl6n] {
    background: rgba(0, 125, 184, 0.1);
    color: #007db8;
}

.spec-table-dell tbody tr:hover[b-49eb3arl6n] {
    background: rgba(0, 125, 184, 0.05);
}

/* Responsive Design */
@media (max-width: 768px) {
    .spec-table[b-49eb3arl6n] {
        font-size: 0.85rem;
        display: block;
        overflow-x: auto;
    }

    .spec-table th[b-49eb3arl6n],
    .spec-table td[b-49eb3arl6n] {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .spec-table[b-49eb3arl6n] {
        font-size: 0.75rem;
    }

    .spec-table th[b-49eb3arl6n],
    .spec-table td[b-49eb3arl6n] {
        padding: 0.5rem 0.4rem;
        font-size: 0.75rem;
    }
}
/* /Components/Shared/V3/CoverageMeter.razor.rz.scp.css */
/* CoverageMeter — V3 dark, token-only. Class recipes cloned from the
 * /need match-preview hero card (Need.razor.css) under the standalone
 * `covm-` namespace. Solid surfaces + radial primary glow + accent top
 * border — no glass tokens (they wash out over bg-body + particles). */

.covm[b-akt1xavwt5] {
    margin-top: 24px;
    text-align: left;
}

.covm-lead[b-akt1xavwt5] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--slyd-text-secondary);
    margin-bottom: 12px;
}

/* ── hero KPI card (≈ .need-mc + .need-hero-card) ── */

.covm-card[b-akt1xavwt5] {
    background: linear-gradient(135deg, var(--slyd-primary-soft) 0%, var(--slyd-bg-card) 100%);
    border: 1px solid var(--slyd-border);
    border-top: 2px solid var(--slyd-primary);
    border-radius: var(--slyd-radius-xl);
    overflow: hidden;
    position: relative;
}

.covm-card[b-akt1xavwt5]::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--slyd-primary-glow), transparent 60%);
    pointer-events: none;
}

.covm-card-in[b-akt1xavwt5] {
    padding: 24px 26px 18px;
    position: relative;
}

.covm-eyebrow[b-akt1xavwt5] {
    font-family: var(--slyd-font-family-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
    margin-bottom: 6px;
}

.covm-readout[b-akt1xavwt5] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.covm-big[b-akt1xavwt5] {
    font-family: var(--slyd-font-family-heading);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--slyd-primary);
}

.covm-big-unit[b-akt1xavwt5] {
    font-family: var(--slyd-font-family-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
}

.covm-sub[b-akt1xavwt5] {
    font-size: 14px;
    color: var(--slyd-text-secondary);
    margin-top: 8px;
}

/* ── source-mix bar (lane colors match /need source icons:
      inventory → success, forward → primary, OEM → gold) ── */

.covm-bar[b-akt1xavwt5] {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--slyd-bg-input);
    margin-top: 16px;
}

.covm-seg[b-akt1xavwt5] {
    flex-basis: 0%;
    transition: flex-basis var(--slyd-transition-fast);
}

.covm-seg-inv[b-akt1xavwt5] { background: var(--slyd-success); }
.covm-seg-fwd[b-akt1xavwt5] { background: var(--slyd-primary); }
.covm-seg-oem[b-akt1xavwt5] { background: var(--slyd-accent-gold); }

.covm-legend[b-akt1xavwt5] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.covm-lg[b-akt1xavwt5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--slyd-font-family-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
}

.covm-sw[b-akt1xavwt5] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.covm-sw-inv[b-akt1xavwt5] { background: var(--slyd-success); }
.covm-sw-fwd[b-akt1xavwt5] { background: var(--slyd-primary); }
.covm-sw-oem[b-akt1xavwt5] { background: var(--slyd-accent-gold); }

.covm-caption[b-akt1xavwt5] {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--slyd-text-secondary);
}

.covm-caption:empty[b-akt1xavwt5] { display: none; }

/* ── footer + CTA (≈ .need-hero-foot + .need-cta-btn) ── */

.covm-foot[b-akt1xavwt5] {
    padding: 14px 26px 16px;
    border-top: 1px dashed var(--slyd-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

.covm-cta[b-akt1xavwt5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--slyd-primary);
    color: var(--slyd-text-inverse);
    border: 1px solid transparent;
    border-radius: var(--slyd-radius-md);
    font-family: var(--slyd-font-family);
    font-size: 13px;
    font-weight: var(--slyd-font-weight-semibold);
    text-decoration: none;
    transition: background var(--slyd-transition-fast), transform var(--slyd-transition-fast);
}

.covm-cta:hover[b-akt1xavwt5] {
    background: var(--slyd-primary-dark);
    transform: translateY(-1px);
}

.covm-arr[b-akt1xavwt5] { font-family: var(--slyd-font-family-mono); }

.covm-note[b-akt1xavwt5] {
    font-family: var(--slyd-font-family-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slyd-text-tertiary);
}

@media (max-width: 640px) {
    .covm-legend[b-akt1xavwt5] { gap: 10px; }
    .covm-foot[b-akt1xavwt5] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Shared/V3/V3Footer.razor.rz.scp.css */
/* ============================================================
   V3Footer — shared footer.
   Mockup-verbatim CSS from SLYD Homepage v1.html L1210-1297.
   ============================================================ */

.v3foot[b-rp57t61ycx] {
    --primary: var(--slyd-primary);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --font-display: var(--slyd-font-family-heading);
    --font-mono: var(--slyd-font-family-mono);
    --radius-full: 9999px;

    padding: 64px 0 36px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--text-tertiary);
}

.v3foot *[b-rp57t61ycx] { box-sizing: border-box; }
.v3foot a[b-rp57t61ycx] { color: inherit; text-decoration: none; }

.v3foot-wrap[b-rp57t61ycx] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 780px) {
    .v3foot-wrap[b-rp57t61ycx] { padding: 0 20px; }
}

.v3foot-grid[b-rp57t61ycx] {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 36px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--border-subtle);
}

.v3foot-brand-link[b-rp57t61ycx] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.v3foot-brand-link img[b-rp57t61ycx] {
    display: block;
    height: 34px;
    width: auto;
}

.v3foot-brand-p[b-rp57t61ycx] {
    font-size: 13.5px;
    color: var(--text-tertiary);
    max-width: 280px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.v3foot-tag[b-rp57t61ycx] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.v3foot-col h5[b-rp57t61ycx] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px;
    font-weight: 500;
}

.v3foot-col a[b-rp57t61ycx] {
    display: block;
    padding: 4px 0;
    color: var(--text-tertiary);
    transition: color .1s;
}

.v3foot-col a:hover[b-rp57t61ycx] { color: var(--text-primary); }

.v3foot-bottom[b-rp57t61ycx] {
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.v3foot-copy[b-rp57t61ycx] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

@media (max-width: 1140px) {
    .v3foot-grid[b-rp57t61ycx] { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 780px) {
    .v3foot-grid[b-rp57t61ycx] { grid-template-columns: 1fr 1fr; }
}
/* /Components/Shared/V3/V3Nav.razor.rz.scp.css */
/* ============================================================
   V3Nav — shared top nav.
   Mockup-verbatim CSS from SLYD Homepage v1.html L229-477,
   adapted to namespaced classes (v3nav-*).

   Tokens: uses the legacy aliases (--primary, --bg-card, etc.)
   which slyd-design.css maps to --slyd-* tokens. No hardcoded
   hex. DARK is anchored at the App.razor level.
   ============================================================ */

/* Local token-alias block — declared on the header so the same
 * legacy var names the mockup CSS uses resolve here even if the
 * page's global cascade didn't include slyd-design.css for
 * some reason. Belt-and-suspenders. */
.v3nav-top[b-6b8wodot3s] {
    --primary: var(--slyd-primary);
    --primary-soft: var(--slyd-primary-soft);
    --primary-glow: var(--slyd-primary-glow);
    --primary-dark: var(--slyd-primary-dark);
    --secondary: var(--slyd-accent-purple);
    --accent: var(--slyd-accent-gold);
    --accent-soft: var(--slyd-accent-gold-soft);
    --gold: var(--slyd-accent-gold);
    --gold-dim: var(--slyd-accent-gold-dark);
    --success: var(--slyd-success);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --shadow-card: var(--slyd-shadow-card);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--bg-body) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    color: var(--text-primary);
}

.v3nav-top *[b-6b8wodot3s] { box-sizing: border-box; }
.v3nav-top a[b-6b8wodot3s] { color: inherit; text-decoration: none; }
.v3nav-top button[b-6b8wodot3s] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.v3nav-top-row[b-6b8wodot3s] {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 22px 40px;
    max-width: 1440px;
    margin: 0 auto;
}

.v3nav-brand[b-6b8wodot3s] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--text-primary);
}

.v3nav-brand img[b-6b8wodot3s] {
    display: block;
    height: 44px;
    width: auto;
}

.v3nav-items[b-6b8wodot3s] {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 17px;
}

.v3nav-item[b-6b8wodot3s] {
    position: relative;
    padding: 12px 18px;
    border-radius: var(--radius);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background .18s ease, color .18s ease;
}

.v3nav-item:hover[b-6b8wodot3s] { color: var(--text-primary); background: var(--bg-elevated); }

.v3nav-item-open[b-6b8wodot3s] {
    color: var(--text-primary);
    background: var(--primary-soft);
}

.v3nav-car[b-6b8wodot3s] {
    font-size: 11px;
    color: var(--text-tertiary);
    transition: transform .2s ease, color .2s ease;
    display: inline-block;
    line-height: 1;
}

.v3nav-item:hover .v3nav-car[b-6b8wodot3s] { color: var(--text-secondary); }

.v3nav-item-open .v3nav-car[b-6b8wodot3s] {
    transform: rotate(180deg);
    color: var(--primary);
}

.v3nav-top-right[b-6b8wodot3s] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.v3nav-ticker[b-6b8wodot3s] {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    background: var(--primary-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
    white-space: nowrap;
}

.v3nav-ticker[b-6b8wodot3s]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 25%, transparent);
    animation: v3nav-pulse-b-6b8wodot3s 2s ease-in-out infinite;
}

@keyframes v3nav-pulse-b-6b8wodot3s {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; transform: scale(1.3); }
}

/* Tick animation — subtle color flash when a ticker value changes.
   Applied by JS via .v3nav-tick on the data-live="ticker-*" spans.
   Keep it brief and non-distracting (~700ms). */
.v3nav-tick[b-6b8wodot3s] { animation: v3nav-tick-flash-b-6b8wodot3s .7s ease-out; }

@keyframes v3nav-tick-flash-b-6b8wodot3s {
    0%   { color: var(--success); }
    100% { color: inherit; }
}

@media (min-width: 1140px) {
    .v3nav-ticker[b-6b8wodot3s] { display: flex; }
}

.v3nav-tog[b-6b8wodot3s] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    border: 1px solid transparent;
    transition: all .12s;
}

.v3nav-tog:hover[b-6b8wodot3s] {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.v3nav-tog svg[b-6b8wodot3s] { width: 20px; height: 20px; }

/* Mode-toggle icons swap with data-mode (mockup pattern) */
:root[data-mode="dark"] .v3nav-tog .v3nav-sun[b-6b8wodot3s] { display: block; }
:root[data-mode="dark"] .v3nav-tog .v3nav-moon[b-6b8wodot3s] { display: none; }
:root[data-mode="light"] .v3nav-tog .v3nav-sun[b-6b8wodot3s] { display: none; }
:root[data-mode="light"] .v3nav-tog .v3nav-moon[b-6b8wodot3s] { display: block; }

.v3nav-btn[b-6b8wodot3s] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    padding: 13px 24px;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.v3nav-btn-ghost[b-6b8wodot3s] {
    color: var(--text-secondary);
    border-color: var(--border-hover);
}

.v3nav-btn-ghost:hover[b-6b8wodot3s] {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

.v3nav-btn-primary[b-6b8wodot3s] {
    color: hsl(229, 50%, 6%);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    font-weight: 600;
    border-color: var(--gold);
    box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--gold) 50%, transparent);
}

.v3nav-btn-primary:hover[b-6b8wodot3s] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px color-mix(in oklab, var(--gold) 60%, transparent);
}

.v3nav-arr[b-6b8wodot3s] {
    font-family: var(--font-mono);
    color: currentColor;
    opacity: .7;
}

/* ───── MEGA-MENU ───── */

.v3nav-mega[b-6b8wodot3s] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        opacity .18s cubic-bezier(.4, 0, .2, 1),
        transform .18s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear .18s;
    z-index: 55;
}

.v3nav-mega-open[b-6b8wodot3s] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity .18s cubic-bezier(.4, 0, .2, 1),
        transform .18s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 0s;
}

.v3nav-mega-grid[b-6b8wodot3s] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 32px 32px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 36px;
}

.v3nav-mega-resources .v3nav-mega-grid[b-6b8wodot3s] {
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
    gap: 28px;
}

.v3nav-mega-feature[b-6b8wodot3s] {
    padding: 24px 24px;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.v3nav-mega-feature[b-6b8wodot3s]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-glow), transparent 60%);
    opacity: .5;
}

.v3nav-mega-feature .v3nav-kicker[b-6b8wodot3s] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 12px;
    position: relative;
}

.v3nav-mega-feature h3[b-6b8wodot3s] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
    position: relative;
    color: var(--text-primary);
}

.v3nav-mega-feature p[b-6b8wodot3s] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
    position: relative;
}

.v3nav-mega-feature .v3nav-cta[b-6b8wodot3s] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--primary);
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.v3nav-mega-col h4[b-6b8wodot3s] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 14px;
    font-weight: 500;
}

.v3nav-mega-col ul[b-6b8wodot3s] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.v3nav-mega-col li[b-6b8wodot3s] {
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color .1s;
}

.v3nav-mega-col li:hover[b-6b8wodot3s] { color: var(--primary); }

.v3nav-mega-col li a[b-6b8wodot3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.v3nav-pill[b-6b8wodot3s] {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}

.v3nav-pill-live[b-6b8wodot3s] {
    color: var(--success);
    background: color-mix(in oklab, var(--success) 14%, transparent);
    border-color: color-mix(in oklab, var(--success) 30%, transparent);
}

/* ───── HAMBURGER (mobile only) ───── */

.v3nav-burger[b-6b8wodot3s] {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--text-secondary);
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
}

.v3nav-burger:hover[b-6b8wodot3s] {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.v3nav-burger-line[b-6b8wodot3s] {
    width: 18px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .18s ease, opacity .18s ease;
}

.v3nav-burger[aria-expanded="true"] .v3nav-burger-line:nth-child(1)[b-6b8wodot3s] {
    transform: translateY(5.5px) rotate(45deg);
}

.v3nav-burger[aria-expanded="true"] .v3nav-burger-line:nth-child(2)[b-6b8wodot3s] { opacity: 0; }

.v3nav-burger[aria-expanded="true"] .v3nav-burger-line:nth-child(3)[b-6b8wodot3s] {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* ───── DRAWER (mobile off-canvas, < 780px) ───── */

.v3nav-scrim[b-6b8wodot3s] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 70;
}

.v3nav-scrim-open[b-6b8wodot3s] {
    opacity: 1;
    pointer-events: auto;
}

.v3nav-drawer[b-6b8wodot3s] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 88vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    z-index: 75;
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-family: var(--font-body);
    visibility: hidden;
}

.v3nav-drawer-open[b-6b8wodot3s] {
    transform: translateX(0);
    visibility: visible;
}

.v3nav-drawer-head[b-6b8wodot3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}

.v3nav-drawer-close[b-6b8wodot3s] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
}

.v3nav-drawer-close:hover[b-6b8wodot3s] { background: var(--bg-elevated); color: var(--text-primary); }
.v3nav-drawer-close svg[b-6b8wodot3s] { width: 18px; height: 18px; }

.v3nav-drawer-body[b-6b8wodot3s] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
}

.v3nav-acc[b-6b8wodot3s] { border-bottom: 1px solid var(--border-subtle); }

.v3nav-acc-head[b-6b8wodot3s] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.v3nav-acc-head:hover[b-6b8wodot3s] { color: var(--primary); }

.v3nav-acc-car[b-6b8wodot3s] {
    font-size: 11px;
    color: var(--text-tertiary);
    transition: transform .2s ease, color .2s ease;
}

.v3nav-acc-head[aria-expanded="true"] .v3nav-acc-car[b-6b8wodot3s] {
    transform: rotate(180deg);
    color: var(--primary);
}

.v3nav-acc-panel[b-6b8wodot3s] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s ease;
    overflow: hidden;
}

.v3nav-acc-head[aria-expanded="true"] + .v3nav-acc-panel[b-6b8wodot3s] {
    grid-template-rows: 1fr;
}

.v3nav-acc-panel > *[b-6b8wodot3s] { min-height: 0; }

.v3nav-acc-panel[b-6b8wodot3s] {
    /* Wrap the children so the grid 0fr→1fr collapse works cleanly */
    padding: 0 12px;
}

.v3nav-acc-panel a[b-6b8wodot3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    margin: 0 -12px;
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text-secondary);
}

.v3nav-acc-panel a:first-child[b-6b8wodot3s] { margin-top: 4px; }
.v3nav-acc-panel a:last-child[b-6b8wodot3s] { margin-bottom: 12px; }
.v3nav-acc-panel a:hover[b-6b8wodot3s] {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.v3nav-acc-flat[b-6b8wodot3s] {
    display: block;
    padding: 14px 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.v3nav-acc-flat:hover[b-6b8wodot3s] { color: var(--primary); }

.v3nav-drawer-foot[b-6b8wodot3s] {
    padding: 16px 18px 22px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    background: var(--bg-elevated);
}

.v3nav-drawer-foot .v3nav-btn[b-6b8wodot3s] {
    justify-content: center;
    padding: 11px 14px;
}

/* Lock body scroll while drawer is open */
body.v3nav-no-scroll[b-6b8wodot3s] {
    overflow: hidden;
    touch-action: none;
}

/* ───── RESPONSIVE ───── */

@media (max-width: 1140px) {
    .v3nav-mega-grid[b-6b8wodot3s] { grid-template-columns: 1fr 1fr 1fr; }
    .v3nav-mega-resources .v3nav-mega-grid[b-6b8wodot3s] { grid-template-columns: 1fr 1fr 1fr; }
    .v3nav-mega-feature[b-6b8wodot3s] { grid-column: 1 / -1; }

    .v3nav-top-row[b-6b8wodot3s] { gap: 24px; padding: 18px 28px; }
    .v3nav-items[b-6b8wodot3s] { font-size: 15px; gap: 4px; }
    .v3nav-item[b-6b8wodot3s] { padding: 10px 12px; }
    .v3nav-brand img[b-6b8wodot3s] { height: 38px; }
    .v3nav-btn[b-6b8wodot3s] { font-size: 14px; padding: 11px 18px; }
}

@media (max-width: 780px) {
    .v3nav-items[b-6b8wodot3s] { display: none; }
    .v3nav-ticker[b-6b8wodot3s] { display: none !important; }
    .v3nav-cta-desktop[b-6b8wodot3s] { display: none; }
    .v3nav-burger[b-6b8wodot3s] { display: inline-flex; }
}

/* Drawer + scrim only render at the mobile breakpoint. Above it,
   the desktop nav-items + mega-menus carry navigation, so the
   drawer is force-hidden so it can't leak into the desktop view. */
@media (min-width: 781px) {
    .v3nav-scrim[b-6b8wodot3s],
    .v3nav-drawer[b-6b8wodot3s] { display: none; }
}

/* Respect prefers-reduced-motion — kill transitions + animations
   for users who've opted out. Open/close states still apply, just
   without the motion. */
@media (prefers-reduced-motion: reduce) {
    .v3nav-item[b-6b8wodot3s],
    .v3nav-car[b-6b8wodot3s],
    .v3nav-mega[b-6b8wodot3s],
    .v3nav-mega-open[b-6b8wodot3s],
    .v3nav-burger-line[b-6b8wodot3s],
    .v3nav-scrim[b-6b8wodot3s],
    .v3nav-drawer[b-6b8wodot3s],
    .v3nav-acc-car[b-6b8wodot3s],
    .v3nav-acc-panel[b-6b8wodot3s],
    .v3nav-tog[b-6b8wodot3s],
    .v3nav-btn[b-6b8wodot3s] { transition: none !important; }
    .v3nav-ticker[b-6b8wodot3s]::before { animation: none !important; }
    .v3nav-tick[b-6b8wodot3s] { animation: none !important; }
    .v3nav-mega[b-6b8wodot3s] { transform: none; }
    .v3nav-mega-open[b-6b8wodot3s] { transform: none; }
}
/* /Components/UI/SignInModal.razor.rz.scp.css */
.modal-overlay[b-wm438du1wa] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-wm438du1wa 0.2s ease;
}

@keyframes fadeIn-b-wm438du1wa {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-wm438du1wa] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-wm438du1wa 0.3s ease;
}

@keyframes slideUp-b-wm438du1wa {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close[b-wm438du1wa] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.modal-close:hover[b-wm438du1wa] {
    color: white;
}

.modal-header[b-wm438du1wa] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.modal-icon[b-wm438du1wa] {
    font-size: 3rem;
    color: #6366f1;
    margin-bottom: 1rem;
}

.modal-header h2[b-wm438du1wa] {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.modal-header p[b-wm438du1wa] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
}

.modal-body[b-wm438du1wa] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.selected-resource[b-wm438du1wa] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.resource-label[b-wm438du1wa] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    width: 100%;
}

.resource-name[b-wm438du1wa] {
    color: white;
    font-weight: 600;
    flex: 1;
}

.resource-price[b-wm438du1wa] {
    color: #6366f1;
    font-weight: 700;
    font-size: 1.1rem;
}

.auth-buttons[b-wm438du1wa] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn[b-wm438du1wa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary[b-wm438du1wa] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover[b-wm438du1wa] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-wm438du1wa] {
    background: transparent;
    color: #6366f1;
    border: 2px solid #6366f1;
}

.btn-secondary:hover[b-wm438du1wa] {
    background: #6366f1;
    color: white;
}

.divider[b-wm438du1wa] {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.divider[b-wm438du1wa]::before,
.divider[b-wm438du1wa]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.learn-more[b-wm438du1wa] {
    text-align: center;
}

.learn-more p[b-wm438du1wa] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0 0 0.75rem 0;
}

.learn-more .link[b-wm438du1wa] {
    color: #6366f1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: color 0.2s;
}

.learn-more .link:hover[b-wm438du1wa] {
    color: #818cf8;
}