@import '_content/SLYD.Components/SLYD.Components.no7qjot5nm.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 */
/* Top Navigation */
.top-nav[b-7bl9flibh9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav-container[b-7bl9flibh9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.nav-logo[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.nav-logo:hover[b-7bl9flibh9] {
    opacity: 0.8;
}

.nav-logo img[b-7bl9flibh9] {
    height: 36px;
    width: auto;
}

.nav-menu[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item[b-7bl9flibh9] {
    position: relative;
}

.nav-link[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-link:hover[b-7bl9flibh9] {
    color: white;
    background: rgba(102, 126, 234, 0.1);
}

.nav-link.active[b-7bl9flibh9] {
    color: white;
    background: rgba(102, 126, 234, 0.2);
}

.nav-link i.fa-chevron-down[b-7bl9flibh9] {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.nav-item:hover .nav-link i.fa-chevron-down[b-7bl9flibh9] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu[b-7bl9flibh9] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 240px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.nav-item:hover .dropdown-menu[b-7bl9flibh9] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item[b-7bl9flibh9] {
    display: block;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.dropdown-item:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.15);
    color: white;
    transform: translateX(4px);
}

.dropdown-item i[b-7bl9flibh9] {
    margin-right: 10px;
    width: 16px;
    color: #667eea;
}

.dropdown-header[b-7bl9flibh9] {
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

.dropdown-divider[b-7bl9flibh9] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Mega Menu */
.mega-menu[b-7bl9flibh9] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 600px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

/* Hardware Mega Menu - Wider for more content */
.hardware-mega-menu[b-7bl9flibh9] {
    width: 700px;
    max-height: 80vh;
    overflow-y: auto;
}

.nav-item:hover .mega-menu[b-7bl9flibh9] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu-grid[b-7bl9flibh9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mega-menu-grid-wide[b-7bl9flibh9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    min-width: 1100px;
}

.mega-menu-section h4[b-7bl9flibh9] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.mega-menu-item[b-7bl9flibh9] {
    display: flex;
    align-items: start;
    gap: 12px;
    padding: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.mega-menu-item:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.15);
    color: white;
}

.mega-menu-icon[b-7bl9flibh9] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mega-menu-icon i[b-7bl9flibh9] {
    color: white;
    font-size: 1rem;
}

/* Custom Icon Styles */
.nvidia-icon[b-7bl9flibh9] {
    background: linear-gradient(135deg, #76B900, #00D4AA) !important;
}

.amd-icon[b-7bl9flibh9] {
    background: linear-gradient(135deg, #ED1C24, #B8292D) !important;
}

.oem-icon[b-7bl9flibh9] {
    background: linear-gradient(135deg, #4F46E5, #6366F1) !important;
}

.mega-menu-divider[b-7bl9flibh9] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}

.mega-menu-content h5[b-7bl9flibh9] {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
}

.mega-menu-content p[b-7bl9flibh9] {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* OEM Subitems */
.mega-menu-subitems[b-7bl9flibh9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 48px;
    margin-bottom: 12px;
}

.mega-menu-subitem[b-7bl9flibh9] {
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.mega-menu-subitem:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-left-color: rgba(102, 126, 234, 0.5);
    padding-left: 16px;
}

.oem-parent[b-7bl9flibh9] {
    margin-bottom: 8px;
}

/* Accordion Menus */
.accordion-item[b-7bl9flibh9] {
    margin-bottom: 8px;
}

/* Button reset for accessible accordion headers */
button.accordion-header[b-7bl9flibh9],
button.sub-accordion-header[b-7bl9flibh9] {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    width: 100%;
    color: inherit;
}

button.accordion-header:focus[b-7bl9flibh9],
button.sub-accordion-header:focus[b-7bl9flibh9] {
    outline: 2px solid rgba(99, 102, 241, 0.6);
    outline-offset: 2px;
}

.accordion-header[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.accordion-header:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.1);
}

.accordion-arrow[b-7bl9flibh9] {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease;
}

.accordion-arrow.rotated[b-7bl9flibh9] {
    transform: rotate(180deg);
}

.accordion-body[b-7bl9flibh9] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 48px;
}

.accordion-body.active[b-7bl9flibh9] {
    max-height: 1000px;
}

.accordion-link[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.accordion-link:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.15);
    color: white;
    transform: translateX(4px);
}

.accordion-link i[b-7bl9flibh9] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Sub-Accordion (for OEM → Server nesting) */
.sub-accordion-item[b-7bl9flibh9] {
    margin-bottom: 8px;
}

.sub-accordion-header[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    position: relative;
}

.sub-accordion-header:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.1);
    color: white;
}

.sub-accordion-header i:first-child[b-7bl9flibh9] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.sub-accordion-arrow[b-7bl9flibh9] {
    margin-left: auto;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease;
}

.sub-accordion-arrow.rotated[b-7bl9flibh9] {
    transform: rotate(180deg);
}

.sub-accordion-body[b-7bl9flibh9] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 24px;
}

.sub-accordion-body.active[b-7bl9flibh9] {
    max-height: 500px;
}

/* Action Buttons */
.nav-actions[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-btn[b-7bl9flibh9] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-btn-secondary[b-7bl9flibh9] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-btn-secondary:hover[b-7bl9flibh9] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.nav-btn-primary[b-7bl9flibh9] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.nav-btn-primary:hover[b-7bl9flibh9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* User Menu */
.user-menu[b-7bl9flibh9] {
    position: relative;
}

.user-button[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.user-button:hover[b-7bl9flibh9] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.user-button i.fa-user-circle[b-7bl9flibh9] {
    font-size: 1.2rem;
    color: rgba(99, 102, 241, 0.9);
}

.user-button i.fa-chevron-down[b-7bl9flibh9] {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.user-menu:hover .user-button i.fa-chevron-down[b-7bl9flibh9] {
    transform: rotate(180deg);
}

.user-dropdown[b-7bl9flibh9] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-width: 200px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-menu:hover .user-dropdown[b-7bl9flibh9] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown .dropdown-item[b-7bl9flibh9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.user-dropdown .dropdown-item:hover[b-7bl9flibh9] {
    background: rgba(102, 126, 234, 0.15);
    color: white;
}

.user-dropdown .dropdown-item i[b-7bl9flibh9] {
    width: 16px;
    text-align: center;
    color: rgba(99, 102, 241, 0.9);
}

.user-dropdown .dropdown-divider[b-7bl9flibh9] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle[b-7bl9flibh9] {
    display: none;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
    .nav-menu[b-7bl9flibh9] {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 20px;
        overflow-y: auto;
    }

    .nav-menu.active[b-7bl9flibh9] {
        display: flex;
    }

    .nav-item[b-7bl9flibh9] {
        width: 100%;
    }

    .nav-link[b-7bl9flibh9] {
        width: 100%;
        justify-content: space-between;
    }

    .dropdown-menu[b-7bl9flibh9],
    .mega-menu[b-7bl9flibh9] {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 8px;
        width: 100%;
    }

    .mega-menu-grid[b-7bl9flibh9] {
        grid-template-columns: 1fr;
    }

    .mobile-menu-toggle[b-7bl9flibh9] {
        display: block;
    }

    .nav-actions[b-7bl9flibh9] {
        display: none;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ===========================================
   ABOUT PAGE - SLYD DESIGN SYSTEM
   Uses shared CSS: generic-hero.css, generic-sections.css, brand-colors.css
   =========================================== */

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

.about-breadcrumb-wrapper .container[b-cxbp5i0xkj] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ===========================================
   HERO PREVIEW CARD (page-specific)
   =========================================== */
.about-preview-card[b-cxbp5i0xkj] {
    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);
}

.about-preview-header[b-cxbp5i0xkj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.about-preview-title[b-cxbp5i0xkj] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.about-preview-title :deep(svg)[b-cxbp5i0xkj] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.about-preview-badge[b-cxbp5i0xkj] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.about-preview-stats[b-cxbp5i0xkj] {
    padding: 16px;
}

.about-stat-row[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 14px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.about-stat-row:last-child[b-cxbp5i0xkj] {
    margin-bottom: 0;
}

.about-stat-row:hover[b-cxbp5i0xkj] {
    background: rgba(6,182,212,0.04);
    border-color: rgba(6,182,212,0.2);
}

.stat-indicator[b-cxbp5i0xkj] {
    width: 4px;
    height: 32px;
    border-radius: 2px;
}

.stat-indicator.cyan[b-cxbp5i0xkj] { background: #06b6d4; }
.stat-indicator.purple[b-cxbp5i0xkj] { background: #8b5cf6; }
.stat-indicator.green[b-cxbp5i0xkj] { background: #10b981; }
.stat-indicator.gold[b-cxbp5i0xkj] { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }

.stat-label[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    color: #94a3b8;
}

.stat-value[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

/* ===========================================
   SERVICES GRID
   =========================================== */
.about-services-grid[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-service-card[b-cxbp5i0xkj] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.about-service-card:hover[b-cxbp5i0xkj] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.about-service-icon[b-cxbp5i0xkj] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.about-service-icon :deep(svg)[b-cxbp5i0xkj] {
    width: 26px;
    height: 26px;
}

.about-service-icon.cyan[b-cxbp5i0xkj] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.about-service-icon.purple[b-cxbp5i0xkj] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.about-service-icon.green[b-cxbp5i0xkj] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.about-service-card h3[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.about-service-card > p[b-cxbp5i0xkj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.about-service-features[b-cxbp5i0xkj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.about-service-features span[b-cxbp5i0xkj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: #64748b;
}

.about-service-features :deep(svg)[b-cxbp5i0xkj] {
    width: 12px;
    height: 12px;
    color: #10b981;
}

/* ===========================================
   DIFFERENTIATORS SECTION
   =========================================== */
.about-differentiators[b-cxbp5i0xkj] {
    max-width: 1000px;
    margin: 0 auto;
}

.about-differentiator-main[b-cxbp5i0xkj] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    text-align: center;
}

.about-differentiator-main h3[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
}

.about-differentiator-main p[b-cxbp5i0xkj] {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #cbd5e1;
    max-width: 800px;
    margin: 0 auto;
}

.about-differentiator-grid[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

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

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

.about-differentiator-icon :deep(svg)[b-cxbp5i0xkj] {
    width: 20px;
    height: 20px;
}

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

.about-differentiator h4[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.about-differentiator p[b-cxbp5i0xkj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   TEAM GRID
   =========================================== */
.about-team-grid[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-team-card[b-cxbp5i0xkj] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.about-team-card:hover[b-cxbp5i0xkj] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.about-team-header[b-cxbp5i0xkj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #06b6d4;
}

.about-team-info h3[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.about-team-role[b-cxbp5i0xkj] {
    font-size: 0.8125rem;
    color: #64748b;
}

.about-linkedin-link[b-cxbp5i0xkj] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 119, 181, 0.1);
    border-radius: 8px;
    color: #0077B5;
    transition: all 0.25s ease;
}

.about-linkedin-link:hover[b-cxbp5i0xkj] {
    background: #0077B5;
    color: white;
    transform: scale(1.05);
}

.about-linkedin-link :deep(svg)[b-cxbp5i0xkj] {
    width: 18px;
    height: 18px;
}

.about-team-card > p[b-cxbp5i0xkj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   FAQ ACCORDION
   =========================================== */
.about-faq-container[b-cxbp5i0xkj] {
    max-width: 800px;
    margin: 0 auto;
}

.about-faq-item[b-cxbp5i0xkj] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.about-faq-item:last-child[b-cxbp5i0xkj] {
    margin-bottom: 0;
}

.about-faq-item:hover[b-cxbp5i0xkj] {
    border-color: rgba(6,182,212,0.3);
}

.about-faq-item[open][b-cxbp5i0xkj] {
    border-color: rgba(6,182,212,0.3);
    box-shadow: 0 8px 32px rgba(6,182,212,0.1);
}

.about-faq-question[b-cxbp5i0xkj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    cursor: pointer;
    list-style: none;
}

.about-faq-question[b-cxbp5i0xkj]::-webkit-details-marker {
    display: none;
}

.about-faq-question span[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f1f5f9;
    padding-right: 16px;
    line-height: 1.4;
}

.about-faq-question :deep(svg)[b-cxbp5i0xkj] {
    width: 20px;
    height: 20px;
    color: #06b6d4;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.about-faq-item[open] .about-faq-question :deep(svg)[b-cxbp5i0xkj] {
    transform: rotate(180deg);
}

.about-faq-answer[b-cxbp5i0xkj] {
    padding: 0 24px 24px;
}

.about-faq-answer p[b-cxbp5i0xkj] {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}

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

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

.about-cta-content[b-cxbp5i0xkj] {
    max-width: 700px;
    margin: 0 auto;
}

.about-cta-content h2[b-cxbp5i0xkj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

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

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

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .about-services-grid[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
    }

    .about-team-grid[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .about-differentiator-grid[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-breadcrumb-wrapper .container[b-cxbp5i0xkj],
    .about-cta .container[b-cxbp5i0xkj] {
        padding: 0 24px;
    }

    .about-cta-actions[b-cxbp5i0xkj] {
        flex-direction: column;
    }

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

    .about-cta[b-cxbp5i0xkj] {
        padding: 80px 0;
    }

    .about-differentiator-grid[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .about-service-card[b-cxbp5i0xkj],
    .about-team-card[b-cxbp5i0xkj] {
        padding: 24px;
    }

    .about-faq-question[b-cxbp5i0xkj] {
        padding: 20px;
    }

    .about-faq-question span[b-cxbp5i0xkj] {
        font-size: 0.95rem;
    }

    .about-faq-answer[b-cxbp5i0xkj] {
        padding: 0 20px 20px;
    }
}
/* /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 h2[b-4zwges2yyr] {
    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 h2:first-child[b-4zwges2yyr] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

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

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

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

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

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

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

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

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

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

.blogpost-article ol li[b-4zwges2yyr]::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 code[b-4zwges2yyr] {
    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 pre[b-4zwges2yyr] {
    margin: 24px 0;
    padding: 20px;
    background: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow-x: auto;
}

.blogpost-article pre code[b-4zwges2yyr] {
    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 hr[b-4zwges2yyr] {
    margin: 40px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blogpost-article img[b-4zwges2yyr] {
    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 h2[b-4zwges2yyr] {
        font-size: 1.5rem;
    }

    .blogpost-article h3[b-4zwges2yyr] {
        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/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(svg)[b-jlw2i9evaf] {
    width: 24px;
    height: 24px;
}

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

.careers-value-icon :deep(svg)[b-jlw2i9evaf] {
    width: 20px;
    height: 20px;
}

.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;
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.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 i[b-jlw2i9evaf] {
    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 i[b-jlw2i9evaf] {
    font-size: 0.6875rem;
    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 i[b-jlw2i9evaf] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.careers-job-apply:hover i[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/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 PAGE - GPU EQUIPMENT FINANCING
   Page-specific styles only - uses generic-hero.css and generic-sections.css
   =========================================== */

/* ===========================================
   BRAND COLORS
   =========================================== */
:root[b-ncau2jtjlk] {
    --brand-primary: #f59e0b;
    --brand-primary-rgb: 245, 158, 11;
    --brand-secondary: #06b6d4;
    --brand-secondary-rgb: 6, 182, 212;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
.skip-link[b-ncau2jtjlk] {
    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-ncau2jtjlk] {
    top: 16px;
}

/* ===========================================
   HERO SECTION - SPLIT LAYOUT
   =========================================== */
.financing-hero[b-ncau2jtjlk] {
    position: relative;
    z-index: 1;
    min-height: 60vh;
    padding: 140px 0 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.financing-hero[b-ncau2jtjlk]::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.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(6,182,212,0.04) 0%, transparent 50%);
    pointer-events: none;
}

.financing-hero-container[b-ncau2jtjlk] {
    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 Left - Content */
.financing-hero-content[b-ncau2jtjlk] {
    position: relative;
}

.financing-tag[b-ncau2jtjlk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f59e0b;
    padding: 10px 16px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 4px;
    margin-bottom: 28px;
}

.financing-tag[b-ncau2jtjlk]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    animation: pulse-dot-b-ncau2jtjlk 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-ncau2jtjlk {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.financing-headline[b-ncau2jtjlk] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0 0 24px 0;
}

.financing-headline .accent[b-ncau2jtjlk] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.financing-subhead[b-ncau2jtjlk] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 540px;
}

.financing-props[b-ncau2jtjlk] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-bottom: 40px;
}

.financing-prop[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.financing-prop :deep(.icon)[b-ncau2jtjlk] {
    width: 18px;
    height: 18px;
    color: #f59e0b;
}

.financing-actions[b-ncau2jtjlk] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Right - Preview Cards */
.financing-preview[b-ncau2jtjlk] {
    position: relative;
}

.financing-grid-deco[b-ncau2jtjlk] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(rgba(245,158,11,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,158,11,0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    transform: rotate(15deg);
    pointer-events: none;
}

.financing-stack[b-ncau2jtjlk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.financing-preview-card[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.financing-preview-card:hover[b-ncau2jtjlk] {
    border-color: rgba(245,158,11,0.3);
    transform: translateX(8px);
}

.financing-preview-icon[b-ncau2jtjlk] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,158,11,0.1);
    border-radius: 12px;
    color: #f59e0b;
}

.financing-preview-icon :deep(.icon)[b-ncau2jtjlk] {
    width: 24px;
    height: 24px;
}

.financing-preview-icon.secondary[b-ncau2jtjlk] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.financing-preview-icon.tertiary[b-ncau2jtjlk] {
    background: rgba(168,85,247,0.1);
    color: #a855f7;
}

.financing-preview-content h4[b-ncau2jtjlk] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.financing-preview-content p[b-ncau2jtjlk] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

.financing-preview-badge[b-ncau2jtjlk] {
    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 12px;
    border-radius: 20px;
}

.financing-preview-badge.secondary[b-ncau2jtjlk] {
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
}

.financing-preview-badge.tertiary[b-ncau2jtjlk] {
    color: #a855f7;
    background: rgba(168,85,247,0.1);
}

/* ===========================================
   FINANCING OPTIONS GRID
   =========================================== */
.financing-grid[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.financing-card[b-ncau2jtjlk] {
    padding: 36px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.financing-card:hover[b-ncau2jtjlk] {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-4px);
}

.financing-icon[b-ncau2jtjlk] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,158,11,0.1);
    border-radius: 14px;
    margin-bottom: 24px;
    color: #f59e0b;
}

.financing-icon :deep(.icon)[b-ncau2jtjlk] {
    width: 26px;
    height: 26px;
}

.financing-icon.secondary[b-ncau2jtjlk] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.financing-icon.tertiary[b-ncau2jtjlk] {
    background: rgba(168,85,247,0.1);
    color: #a855f7;
}

.financing-card h3[b-ncau2jtjlk] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.financing-card p[b-ncau2jtjlk] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

.financing-features[b-ncau2jtjlk] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.financing-features li[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
    font-size: 0.875rem;
    color: #94a3b8;
}

.financing-features li:first-child[b-ncau2jtjlk] {
    border-top: none;
}

.financing-features :deep(.icon)[b-ncau2jtjlk] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
}

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

.benefit-card[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: start;
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.benefit-card:hover[b-ncau2jtjlk] {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-4px);
}

.benefit-icon[b-ncau2jtjlk] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,158,11,0.1);
    border-radius: 12px;
    color: #f59e0b;
}

.benefit-icon :deep(.icon)[b-ncau2jtjlk] {
    width: 24px;
    height: 24px;
}

.benefit-icon.secondary[b-ncau2jtjlk] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.benefit-icon.tertiary[b-ncau2jtjlk] {
    background: rgba(168,85,247,0.1);
    color: #a855f7;
}

.benefit-icon.quaternary[b-ncau2jtjlk] {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}

.benefit-card h4[b-ncau2jtjlk] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

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

/* ===========================================
   PROCESS TIMELINE
   =========================================== */
.process-timeline[b-ncau2jtjlk] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.process-timeline[b-ncau2jtjlk]::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #f59e0b 0%, rgba(245,158,11,0.1) 100%);
}

.process-step[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 24px;
    padding: 32px 0;
    position: relative;
}

.step-number[b-ncau2jtjlk] {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1620;
    border: 2px solid #f59e0b;
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f59e0b;
    position: relative;
    z-index: 1;
}

.step-content[b-ncau2jtjlk] {
    padding-top: 4px;
}

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

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

/* ===========================================
   PARTNERS GRID (Who We Work With)
   =========================================== */
.partners-grid[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.partner-card[b-ncau2jtjlk] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

.partner-card:hover[b-ncau2jtjlk] {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-4px);
}

.partner-icon[b-ncau2jtjlk] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,158,11,0.1);
    border-radius: 12px;
    margin: 0 auto 20px;
    color: #f59e0b;
}

.partner-icon :deep(.icon)[b-ncau2jtjlk] {
    width: 24px;
    height: 24px;
}

.partner-icon.secondary[b-ncau2jtjlk] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.partner-icon.tertiary[b-ncau2jtjlk] {
    background: rgba(168,85,247,0.1);
    color: #a855f7;
}

.partner-icon.quaternary[b-ncau2jtjlk] {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}

.partner-card h4[b-ncau2jtjlk] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px 0;
}

.partner-card p[b-ncau2jtjlk] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

.partners-note[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    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: #94a3b8;
}

.partners-note :deep(.icon)[b-ncau2jtjlk] {
    width: 18px;
    height: 18px;
    color: #f59e0b;
    flex-shrink: 0;
}

/* ===========================================
   EQUIPMENT GRID (What We Finance)
   =========================================== */
.equipment-grid[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.equipment-card[b-ncau2jtjlk] {
    padding: 28px 20px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

.equipment-card:hover[b-ncau2jtjlk] {
    border-color: rgba(6,182,212,0.3);
    transform: translateY(-4px);
}

.equipment-icon[b-ncau2jtjlk] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,182,212,0.1);
    border-radius: 12px;
    margin: 0 auto 16px;
    color: #06b6d4;
}

.equipment-icon :deep(.icon)[b-ncau2jtjlk] {
    width: 24px;
    height: 24px;
}

.equipment-card h4[b-ncau2jtjlk] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.equipment-card p[b-ncau2jtjlk] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
    margin: 0;
}

.equipment-note[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    padding: 16px 24px;
    background: rgba(16,185,129,0.05);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.equipment-note :deep(.icon)[b-ncau2jtjlk] {
    width: 18px;
    height: 18px;
    color: #10b981;
    flex-shrink: 0;
}

/* ===========================================
   FAQ SECTION
   =========================================== */
.faq-grid[b-ncau2jtjlk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item[b-ncau2jtjlk] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item summary[b-ncau2jtjlk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-item summary[b-ncau2jtjlk]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-ncau2jtjlk]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary[b-ncau2jtjlk]::after {
    content: '\2212';
}

.faq-item summary:hover[b-ncau2jtjlk] {
    background: rgba(255,255,255,0.02);
}

.faq-item summary:focus[b-ncau2jtjlk] {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
}

.faq-item p[b-ncau2jtjlk] {
    padding: 0 24px 22px 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

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

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

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

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

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

.cta-actions[b-ncau2jtjlk] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.cta-footer[b-ncau2jtjlk] {
    font-size: 1rem;
    color: #64748b;
    font-style: italic;
    margin: 0;
}

/* ===========================================
   PARTNER LOGOS SECTION
   =========================================== */
.partner-logos-section[b-ncau2jtjlk] {
    position: relative;
    z-index: 1;
    padding: 60px 0 80px;
    background: #050a12;
}

.partner-logos-section .container[b-ncau2jtjlk] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
}

.partner-logos-title[b-ncau2jtjlk] {
    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;
}

.partner-logos-grid[b-ncau2jtjlk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 32px 48px;
    margin-bottom: 40px;
}

.partner-logo-link[b-ncau2jtjlk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.partner-logo-link img[b-ncau2jtjlk] {
    opacity: 1;
    filter: none;
    transition: transform 0.2s ease;
    max-width: 100%;
    height: auto;
}

.partner-logo-link:hover img[b-ncau2jtjlk] {
    transform: scale(1.05);
}

.partner-logo-text[b-ncau2jtjlk] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.partner-logo-text.light[b-ncau2jtjlk] {
    color: #cbd5e1;
}

.nvidia-partner-badge[b-ncau2jtjlk] {
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.nvidia-partner-badge img[b-ncau2jtjlk] {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nvidia-partner-badge img:hover[b-ncau2jtjlk] {
    opacity: 1;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .financing-hero-container[b-ncau2jtjlk] {
        gap: 48px;
    }
    .partners-grid[b-ncau2jtjlk] {
        grid-template-columns: repeat(2, 1fr);
    }
    .equipment-grid[b-ncau2jtjlk] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .financing-hero-container[b-ncau2jtjlk] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .financing-hero-content[b-ncau2jtjlk] {
        max-width: 600px;
        margin: 0 auto;
    }
    .financing-subhead[b-ncau2jtjlk] {
        margin-left: auto;
        margin-right: auto;
    }
    .financing-props[b-ncau2jtjlk] {
        justify-content: center;
    }
    .financing-actions[b-ncau2jtjlk] {
        justify-content: center;
    }
    .financing-preview[b-ncau2jtjlk] {
        max-width: 520px;
        margin: 0 auto;
    }
    .financing-grid-deco[b-ncau2jtjlk] {
        display: none;
    }
    .financing-grid[b-ncau2jtjlk] {
        grid-template-columns: repeat(2, 1fr);
    }
    .benefits-grid[b-ncau2jtjlk] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .financing-hero[b-ncau2jtjlk] {
        min-height: auto;
        padding: 120px 0 60px;
    }
    .financing-hero-container[b-ncau2jtjlk],
    .financing-cta .container[b-ncau2jtjlk],
    .partner-logos-section .container[b-ncau2jtjlk] {
        padding: 0 24px;
    }
    .financing-headline[b-ncau2jtjlk] {
        font-size: 2rem;
    }
    .financing-actions[b-ncau2jtjlk] {
        flex-direction: column;
    }
    .btn-gold[b-ncau2jtjlk],
    .btn-outline[b-ncau2jtjlk] {
        width: 100%;
        justify-content: center;
    }
    .financing-grid[b-ncau2jtjlk] {
        grid-template-columns: 1fr;
    }
    .partners-grid[b-ncau2jtjlk] {
        grid-template-columns: 1fr;
    }
    .equipment-grid[b-ncau2jtjlk] {
        grid-template-columns: repeat(2, 1fr);
    }
    .faq-grid[b-ncau2jtjlk] {
        grid-template-columns: 1fr;
    }
    .process-timeline[b-ncau2jtjlk]::before {
        left: 20px;
    }
    .process-step[b-ncau2jtjlk] {
        grid-template-columns: 42px 1fr;
        gap: 16px;
    }
    .step-number[b-ncau2jtjlk] {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    .cta-actions[b-ncau2jtjlk] {
        flex-direction: column;
    }
    .financing-preview-card[b-ncau2jtjlk] {
        grid-template-columns: 44px 1fr;
    }
    .financing-preview-badge[b-ncau2jtjlk] {
        grid-column: 2;
        justify-self: start;
        margin-top: 8px;
    }
    .partners-note[b-ncau2jtjlk],
    .equipment-note[b-ncau2jtjlk] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .equipment-grid[b-ncau2jtjlk] {
        grid-template-columns: 1fr;
    }
    .partner-logos-grid[b-ncau2jtjlk] {
        gap: 24px 32px;
    }
}
/* /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;
}

/* --------------------------------------------------------------------------
   FAQ SECTION
   -------------------------------------------------------------------------- */
.finapply-faq-grid[b-hjtayshnqb] {
    max-width: 800px;
    margin: 0 auto;
}

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

.finapply-faq-item summary[b-hjtayshnqb] {
    padding: 20px 24px;
    font-size: 1rem;
    font-weight: 500;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 48px;
}

.finapply-faq-item summary[b-hjtayshnqb]::-webkit-details-marker {
    display: none;
}

.finapply-faq-item summary[b-hjtayshnqb]::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: #64748b;
    transition: transform 0.2s ease;
}

.finapply-faq-item[open] summary[b-hjtayshnqb]::after {
    content: '−';
}

.finapply-faq-item summary:hover[b-hjtayshnqb] {
    background: rgba(6, 182, 212, 0.05);
}

.finapply-faq-item p[b-hjtayshnqb] {
    padding: 0 24px 20px;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #94a3b8;
}

/* --------------------------------------------------------------------------
   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;
}

/* ===========================================
   FAQ ACCORDION
   =========================================== */
.gpufin-faq-list[b-fp95el57um] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.gpufin-faq-item summary[b-fp95el57um] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    transition: all 0.2s ease;
}

.gpufin-faq-item summary[b-fp95el57um]::-webkit-details-marker {
    display: none;
}

.gpufin-faq-item summary:hover[b-fp95el57um] {
    background: rgba(255,255,255,0.02);
}

.gpufin-faq-item summary span[b-fp95el57um] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.gpufin-faq-item summary :deep(.icon)[b-fp95el57um] {
    width: 16px;
    height: 16px;
    color: #64748b;
    transition: transform 0.3s ease;
}

.gpufin-faq-item[open] summary :deep(.icon)[b-fp95el57um] {
    transform: rotate(180deg);
}

.gpufin-faq-answer[b-fp95el57um] {
    padding: 0 24px 24px;
}

.gpufin-faq-answer p[b-fp95el57um] {
    font-size: 0.9375rem;
    line-height: 1.7;
    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;
}

/* ===========================================
   FAQ
   =========================================== */
.infrafin-faq-grid[b-w6f8erdrt3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.infrafin-faq-item[b-w6f8erdrt3] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.infrafin-faq-item h4[b-w6f8erdrt3] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.infrafin-faq-item p[b-w6f8erdrt3] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   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-faq-grid[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;
}

/* ================================================================
   FAQ Section
   ================================================================ */
.faq-container[b-2qbvavkt6x] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item[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;
}

.faq-item:hover[b-2qbvavkt6x] {
    border-color: rgba(6, 182, 212, 0.3);
}

.faq-item[open][b-2qbvavkt6x] {
    border-color: rgba(6, 182, 212, 0.4);
}

.faq-question[b-2qbvavkt6x] {
    padding: 24px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.faq-question[b-2qbvavkt6x]::-webkit-details-marker {
    display: none;
}

.faq-question[b-2qbvavkt6x]::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(248, 250, 252, 0.5);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question[b-2qbvavkt6x]::after {
    transform: rotate(45deg);
}

.faq-question:hover[b-2qbvavkt6x] {
    background: rgba(6, 182, 212, 0.05);
}

.faq-answer[b-2qbvavkt6x] {
    padding: 0 28px 24px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
}

.faq-answer p[b-2qbvavkt6x] {
    margin: 0;
}

.faq-answer p strong[b-2qbvavkt6x] {
    color: var(--cooling-cyan);
}

/* ================================================================
   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;
    }

    .faq-question[b-2qbvavkt6x] {
        padding: 20px;
        font-size: 1rem;
    }

    .faq-answer[b-2qbvavkt6x] {
        padding: 0 20px 20px;
    }

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

/* ========================== */
/* FAQ Section */
/* ========================== */

.faq-grid[b-e8so6tuivm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item[b-e8so6tuivm] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-e8so6tuivm] {
    border-color: rgba(99, 102, 241, 0.3);
}

.faq-item[open][b-e8so6tuivm] {
    border-color: rgba(99, 102, 241, 0.4);
}

.faq-item summary[b-e8so6tuivm] {
    padding: 20px 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--light);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary[b-e8so6tuivm]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-e8so6tuivm]::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item[open] summary[b-e8so6tuivm]::after {
    transform: rotate(45deg);
}

.faq-item p[b-e8so6tuivm] {
    padding: 0 24px 20px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.7;
}

.faq-item a[b-e8so6tuivm] {
    color: var(--primary);
    text-decoration: none;
}

.faq-item a:hover[b-e8so6tuivm] {
    text-decoration: underline;
}

/* ========================== */
/* 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; }

    .faq-item summary[b-e8so6tuivm] { font-size: 0.95rem; padding: 16px 20px; }

    .faq-item p[b-e8so6tuivm] { padding: 0 20px 16px; }
}

@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);
}

/* =========================== */
/* FAQ Section */
/* =========================== */

.faq-grid[b-014eqkxfp3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item[b-014eqkxfp3] {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-014eqkxfp3] {
    border-color: rgba(99, 102, 241, 0.3);
}

.faq-item[open][b-014eqkxfp3] {
    border-color: rgba(99, 102, 241, 0.4);
}

.faq-item summary[b-014eqkxfp3] {
    padding: 20px 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--light);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary[b-014eqkxfp3]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-014eqkxfp3]::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item[open] summary[b-014eqkxfp3]::after {
    transform: rotate(45deg);
}

.faq-item p[b-014eqkxfp3] {
    padding: 0 24px 20px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.75);
    line-height: 1.7;
}

.faq-item a[b-014eqkxfp3] {
    color: var(--primary);
    text-decoration: none;
}

.faq-item a:hover[b-014eqkxfp3] {
    text-decoration: underline;
}

/* =========================== */
/* 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; }

    .faq-item summary[b-014eqkxfp3] { font-size: 0.95rem; padding: 16px 20px; }

    .faq-item p[b-014eqkxfp3] { padding: 0 20px 16px; }
}

@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-label[b-2ohcav7wds] {
    font-family: 'JetBrains Mono', 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-2ohcav7wds] {
    color: #76b900;
}

.showcase-card.amd .showcase-label[b-2ohcav7wds] {
    color: #ef4444;
}

.showcase-model[b-2ohcav7wds] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.showcase-spec[b-2ohcav7wds] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 4px;
}

.showcase-perf[b-2ohcav7wds] {
    font-size: 0.75rem;
    color: #64748b;
}

.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[b-2ohcav7wds] {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.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;
    margin: 0;
}

/* ===========================================
   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(5, 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;
}

/* ===========================================
   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;
}

/* ===========================================
   FAQ SECTION
   =========================================== */
.faq-grid[b-2ohcav7wds] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item[b-2ohcav7wds] {
    background: #0f1620;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item summary[b-2ohcav7wds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-item summary[b-2ohcav7wds]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-2ohcav7wds]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary[b-2ohcav7wds]::after {
    content: '\2212';
}

.faq-item summary:hover[b-2ohcav7wds] {
    background: rgba(255, 255, 255, 0.02);
}

.faq-item summary:focus[b-2ohcav7wds] {
    outline: 2px solid #06b6d4;
    outline-offset: -2px;
}

.faq-item p[b-2ohcav7wds] {
    padding: 0 24px 22px 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    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(3, 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;
    }

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

    .showcase-model[b-2ohcav7wds] {
        font-size: 2.25rem;
    }
}

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

    .showcase-model[b-2ohcav7wds] {
        font-size: 2rem;
    }
}
/* /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);
}

/* =====================================================
   FAQ SECTION
   ===================================================== */
.faq-grid[b-ao0d9nmbrv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-item[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;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-ao0d9nmbrv] {
    border-color: rgba(6, 182, 212, 0.3);
}

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

.faq-item summary[b-ao0d9nmbrv] {
    padding: 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    transition: background 0.3s ease;
}

.faq-item summary[b-ao0d9nmbrv]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-ao0d9nmbrv]::after {
    content: '+';
    font-size: 1.5rem;
    color: #06b6d4;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-item[open] summary[b-ao0d9nmbrv]::after {
    content: '−';
}

.faq-item summary:hover[b-ao0d9nmbrv] {
    background: rgba(6, 182, 212, 0.05);
}

.faq-item p[b-ao0d9nmbrv] {
    padding: 0 24px 24px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
}

/* =====================================================
   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);
    }

    .faq-grid[b-ao0d9nmbrv] {
        grid-template-columns: 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;
    }
}

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

    .faq-item summary[b-ao0d9nmbrv] {
        font-size: 0.95rem;
        padding: 20px;
    }

    .faq-item p[b-ao0d9nmbrv] {
        padding: 0 20px 20px;
        font-size: 0.9rem;
    }
}
/* /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: none;
    padding: 0;
    margin: 0 0 24px;
}

.solution-features li[b-grkwz0id0r] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.8);
    padding: 8px 0;
}

.solution-features li[b-grkwz0id0r]::before {
    content: '✓';
    color: #a855f7;
    font-weight: 700;
    flex-shrink: 0;
}

.solution-actions[b-grkwz0id0r] {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.solution-btn[b-grkwz0id0r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.solution-btn-primary[b-grkwz0id0r] {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
}

.solution-btn-primary:hover[b-grkwz0id0r] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.solution-btn :deep(svg)[b-grkwz0id0r] {
    width: 16px;
    height: 16px;
}

/* 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;
}

.extended-link[b-grkwz0id0r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a855f7;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.extended-link:hover[b-grkwz0id0r] {
    gap: 10px;
}

.extended-link :deep(svg)[b-grkwz0id0r] {
    width: 14px;
    height: 14px;
}

/* 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;
}

/* FAQ Section */
.faq-container[b-grkwz0id0r] {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item[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;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-grkwz0id0r] {
    border-color: rgba(139, 92, 246, 0.3);
}

.faq-item[open][b-grkwz0id0r] {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

.faq-question[b-grkwz0id0r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    cursor: pointer;
    list-style: none;
}

.faq-question[b-grkwz0id0r]::-webkit-details-marker {
    display: none;
}

.faq-question span[b-grkwz0id0r] {
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    padding-right: 16px;
}

.faq-question :deep(.faq-icon)[b-grkwz0id0r] {
    width: 20px;
    height: 20px;
    color: #a855f7;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-question :deep(.faq-icon)[b-grkwz0id0r] {
    transform: rotate(180deg);
}

.faq-answer[b-grkwz0id0r] {
    padding: 0 24px 24px;
}

.faq-answer p[b-grkwz0id0r] {
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.7);
    line-height: 1.7;
}

/* 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;
    }

    .faq-question[b-grkwz0id0r] {
        padding: 20px;
    }

    .faq-question span[b-grkwz0id0r] {
        font-size: 0.95rem;
    }

    .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;
    opacity: 0.6;
    filter: grayscale(100%) brightness(1.5);
    transition: all 0.3s ease;
}

.oem-card:hover .oem-logo img[b-4xafj1curz] {
    opacity: 1;
    filter: grayscale(0%) brightness(1);
}

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

/* ===========================================
   FAQ SECTION
   =========================================== */
.faq-grid[b-4xafj1curz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item[b-4xafj1curz] {
    background: #0f1620;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item summary[b-4xafj1curz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-item summary[b-4xafj1curz]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-4xafj1curz]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary[b-4xafj1curz]::after {
    content: '\2212';
}

.faq-item summary:hover[b-4xafj1curz] {
    background: rgba(255, 255, 255, 0.02);
}

.faq-item summary:focus[b-4xafj1curz] {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

.faq-item p[b-4xafj1curz] {
    padding: 0 24px 22px 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    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;
    }

    .faq-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: 800px;
    margin: 0 auto;
}

.deploy-opening p[b-8abefjxf1t] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin: 0 0 24px 0;
}

.deploy-opening-lead[b-8abefjxf1t] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
}

.deploy-opening-highlight[b-8abefjxf1t] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    text-align: center;
    margin-top: 40px !important;
    padding: 32px;
    background: rgba(6,182,212,0.05);
    border: 1px solid rgba(6,182,212,0.15);
    border-radius: 12px;
}

/* ===========================================
   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;
    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;
    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;
    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] {
    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;
    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;
    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;
    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;
}

/* ===========================================
   FAQ ACCORDION
   =========================================== */
.deploy-faq-list[b-8abefjxf1t] {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.deploy-faq-item summary[b-8abefjxf1t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    transition: all 0.2s ease;
}

.deploy-faq-item summary[b-8abefjxf1t]::-webkit-details-marker {
    display: none;
}

.deploy-faq-item summary:hover[b-8abefjxf1t] {
    background: rgba(255,255,255,0.02);
}

.deploy-faq-item summary span[b-8abefjxf1t] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.deploy-faq-item summary :deep(.icon)[b-8abefjxf1t] {
    width: 16px;
    height: 16px;
    color: #64748b;
    transition: transform 0.3s ease;
}

.deploy-faq-item[open] summary :deep(.icon)[b-8abefjxf1t] {
    transform: rotate(180deg);
}

.deploy-faq-answer[b-8abefjxf1t] {
    padding: 0 24px 24px;
}

.deploy-faq-answer p[b-8abefjxf1t] {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

.deploy-faq-answer a[b-8abefjxf1t] {
    color: #06b6d4;
    text-decoration: none;
}

.deploy-faq-answer a:hover[b-8abefjxf1t] {
    text-decoration: underline;
}

/* ===========================================
   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;
}

/* FAQ Section - AMD Brand Overrides */
.faq-section[b-gibfa5jb9x] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.faq-section h2[b-gibfa5jb9x] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-primary);
}

.faq-section .faq-item summary[b-gibfa5jb9x]::after {
    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;
}

/* =============================================================================
   FAQ SECTION - NVIDIA Brand Overrides (uses shared faq-accordion.css)
   ============================================================================= */
.faq-section[b-e8woxo8yzb] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.faq-section h2[b-e8woxo8yzb] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-primary);
}

/* NVIDIA green accent for FAQ */
.faq-section .faq-item summary[b-e8woxo8yzb]::after {
    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;
}

/* =============================================================================
   FAQ SECTION - Grace Blackwell Brand Overrides (uses shared faq-accordion.css)
   ============================================================================= */
.faq-section[b-6nto2oj75d] {
    padding: 80px 0;
}

.faq-section h2[b-6nto2oj75d] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-primary);
}

/* Grace Blackwell purple accent for FAQ */
.faq-section .faq-item summary[b-6nto2oj75d]::after {
    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;
}

/* =============================================================================
   FAQ SECTION - NVIDIA Brand Overrides (uses shared faq-accordion.css)
   ============================================================================= */
.faq-section[b-3qg4yj72vp] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.faq-section h2[b-3qg4yj72vp] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-primary);
}

/* NVIDIA green accent for FAQ */
.faq-section .faq-item summary[b-3qg4yj72vp]::after {
    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;
}

/* =============================================================================
   FAQ SECTION - RTX PRO Brand Overrides (uses shared faq-accordion.css)
   ============================================================================= */
.faq-section[b-37je9hoi24] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.faq-section h2[b-37je9hoi24] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-primary);
}

/* RTX PRO orange accent for FAQ */
.faq-section .faq-item summary[b-37je9hoi24]::after {
    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;
}

/* =============================================================================
   FAQ SECTION - Rubin Brand Overrides (uses shared faq-accordion.css)
   ============================================================================= */
.faq-section[b-ft66f6fs4m] {
    padding: 80px 0;
    background: rgba(30, 41, 59, 0.2);
}

.faq-section h2[b-ft66f6fs4m] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
    color: var(--text-primary);
}

/* Rubin cyan accent for FAQ */
.faq-section .faq-item summary[b-ft66f6fs4m]::after {
    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 MAIN PAGE
   Minimal scoped CSS - Uses shared component CSS

   Shared CSS loaded via HeadContent:
   - stats-strip.css
   - partners-grid.css
   - services-strip.css
   - faq-accordion.css
   - cta-section.css
   =========================================== */

/* ===========================================
   SECTION WRAPPERS
   Page-specific section backgrounds/spacing
   =========================================== */

/* Stats strip section wrapper */
.hardware-stats-strip[b-1usyvyx2sx] {
    background: rgba(15, 23, 42, 0.5);
}

/* Services section wrapper */
.hardware-services[b-1usyvyx2sx] {
    padding: 48px 0;
    background: #0a1018;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Invert logo for dark logos on dark background */
.invert-logo[b-1usyvyx2sx] {
    filter: brightness(0) invert(1);
}

/* ===========================================
   BUTTONS (if not loaded globally)
   =========================================== */

.btn-gold[b-1usyvyx2sx] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-gold:hover[b-1usyvyx2sx] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.btn-outline[b-1usyvyx2sx] {
    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;
    cursor: pointer;
}

.btn-outline:hover[b-1usyvyx2sx] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ===========================================
   HERO CUSTOM CONTENT
   Styles for content passed into Hero Props/Preview slots
   =========================================== */

/* Stats row inside Hero Props slot */
.hero-stats-row[b-1usyvyx2sx] {
    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-1usyvyx2sx] {
    text-align: center;
}

.hero-stat-value[b-1usyvyx2sx] {
    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-1usyvyx2sx] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

/* Showcase card inside Hero Preview slot */
.hardware-showcase[b-1usyvyx2sx] {
    position: relative;
    width: 100%;
    max-width: 440px;
}

.showcase-card[b-1usyvyx2sx] {
    position: relative;
    padding: 48px 40px;
    background: linear-gradient(145deg, #0f1620 0%, #0a1018 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

.showcase-card[b-1usyvyx2sx]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #76b900);
}

.showcase-card[b-1usyvyx2sx]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.showcase-label[b-1usyvyx2sx] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 12px;
}

.showcase-model[b-1usyvyx2sx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.showcase-arch[b-1usyvyx2sx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #64748b;
    margin-bottom: 24px;
}

.showcase-spec[b-1usyvyx2sx] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    padding: 10px 20px;
    background: rgba(118, 185, 0, 0.15);
    border: 1px solid rgba(118, 185, 0, 0.3);
    border-radius: 6px;
}

.showcase-glow[b-1usyvyx2sx] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(118, 185, 0, 0.08) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* ===========================================
   GPU GRID - Page Specific
   =========================================== */
.gpu-grid[b-1usyvyx2sx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.gpu-category[b-1usyvyx2sx] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.category-header[b-1usyvyx2sx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.category-header.nvidia[b-1usyvyx2sx] {
    background: linear-gradient(135deg, rgba(118, 185, 0, 0.1) 0%, rgba(118, 185, 0, 0.02) 100%);
}

.category-header.amd[b-1usyvyx2sx] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(148, 163, 184, 0.02) 100%);
}

.category-brand[b-1usyvyx2sx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
}

.category-label[b-1usyvyx2sx] {
    font-size: 0.8125rem;
    color: #64748b;
}

.gpu-cards[b-1usyvyx2sx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px;
}

.gpu-card[b-1usyvyx2sx] {
    position: relative;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.gpu-card:hover[b-1usyvyx2sx] {
    border-color: rgba(118, 185, 0, 0.4);
    background: rgba(118, 185, 0, 0.05);
    transform: translateY(-4px);
}

.gpu-card.amd:hover[b-1usyvyx2sx] {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.05);
}

.gpu-card-badge[b-1usyvyx2sx] {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
}

.gpu-card-badge.ultra[b-1usyvyx2sx] { background: linear-gradient(135deg, rgba(118, 185, 0, 0.2), rgba(168, 85, 247, 0.2)); color: #a855f7; }
.gpu-card-badge.flagship[b-1usyvyx2sx] { background: rgba(118, 185, 0, 0.15); color: #76b900; }
.gpu-card-badge.premium[b-1usyvyx2sx] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.gpu-card-badge.popular[b-1usyvyx2sx] { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.gpu-card-badge.proven[b-1usyvyx2sx] { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.gpu-card-badge.versatile[b-1usyvyx2sx] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.gpu-card-badge.nextgen[b-1usyvyx2sx] { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(251, 146, 60, 0.2)); color: #fb923c; }
.gpu-card-badge.enhanced[b-1usyvyx2sx] { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.gpu-card-badge.available[b-1usyvyx2sx] { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

.gpu-card.amd .gpu-card-badge.nextgen[b-1usyvyx2sx] { background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(241, 245, 249, 0.2)); color: #f1f5f9; }
.gpu-card.amd .gpu-card-badge.enhanced[b-1usyvyx2sx] { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

.gpu-card-model[b-1usyvyx2sx] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 24px 0 8px;
}

.gpu-card-spec[b-1usyvyx2sx] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #76b900;
    margin-bottom: 4px;
}

.gpu-card.amd .gpu-card-spec[b-1usyvyx2sx] { color: #94a3b8; }

.gpu-card-arch[b-1usyvyx2sx] {
    font-size: 0.75rem;
    color: #64748b;
}

/* ===========================================
   CATEGORIES GRID
   =========================================== */
.categories-grid[b-1usyvyx2sx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.category-card[b-1usyvyx2sx] {
    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;
}

.category-card:hover[b-1usyvyx2sx] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.05);
    transform: translateY(-4px);
}

.category-card.featured[b-1usyvyx2sx] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.category-card.featured:hover[b-1usyvyx2sx] {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}

.category-card-icon[b-1usyvyx2sx] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

.category-card-icon :deep(.icon)[b-1usyvyx2sx] { width: 24px; height: 24px; color: #6366f1; }
.category-card.featured .category-card-icon[b-1usyvyx2sx] { background: rgba(16, 185, 129, 0.1); }
.category-card.featured .category-card-icon :deep(.icon)[b-1usyvyx2sx] { color: #10b981; }

.category-card-content[b-1usyvyx2sx] { flex: 1; }
.category-card-content h3[b-1usyvyx2sx] { font-family: 'Space Grotesk', sans-serif; font-size: 1.125rem; font-weight: 600; color: #f1f5f9; margin: 0 0 8px 0; }
.category-card-content p[b-1usyvyx2sx] { font-size: 0.875rem; line-height: 1.6; color: #94a3b8; margin: 0 0 16px 0; }

.category-features[b-1usyvyx2sx] { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.category-features li[b-1usyvyx2sx] { font-size: 0.75rem; color: #64748b; padding: 4px 10px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; }

.category-card-arrow[b-1usyvyx2sx] { display: flex; align-items: center; justify-content: center; color: #475569; transition: color 0.3s ease; }
.category-card-arrow :deep(.icon)[b-1usyvyx2sx] { width: 20px; height: 20px; }
.category-card:hover .category-card-arrow[b-1usyvyx2sx] { color: #6366f1; }
.category-card.featured:hover .category-card-arrow[b-1usyvyx2sx] { color: #10b981; }

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

@media (max-width: 1024px) {
    .gpu-cards[b-1usyvyx2sx] { grid-template-columns: repeat(2, 1fr); }
    .showcase-model[b-1usyvyx2sx] { font-size: 4rem; }
}

@media (max-width: 900px) {
    .categories-grid[b-1usyvyx2sx] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero-stats-row[b-1usyvyx2sx] { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hero-stat-value[b-1usyvyx2sx] { font-size: 1.375rem; }
    .gpu-cards[b-1usyvyx2sx] { grid-template-columns: 1fr 1fr; }
    .category-card[b-1usyvyx2sx] { flex-direction: column; text-align: center; }
    .category-card-icon[b-1usyvyx2sx] { margin: 0 auto; }
    .category-features[b-1usyvyx2sx] { justify-content: center; }
    .category-card-arrow[b-1usyvyx2sx] { display: none; }
}

@media (max-width: 480px) {
    .showcase-model[b-1usyvyx2sx] { font-size: 3rem; }
    .showcase-arch[b-1usyvyx2sx] { font-size: 1.125rem; }
    .hero-stats-row[b-1usyvyx2sx] { grid-template-columns: 1fr 1fr; }
    .gpu-cards[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.featured[b-chu1xq2rgt]::before {
    content: 'Recommended';
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #14b8a6, #10b981);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* =====================================================
   FAQ SECTION
   ===================================================== */
.faq-grid[b-chu1xq2rgt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-item[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: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.3);
}

.faq-item[open][b-chu1xq2rgt] {
    border-color: rgba(20, 184, 166, 0.4);
}

.faq-item summary[b-chu1xq2rgt] {
    padding: 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    transition: background 0.3s ease;
}

.faq-item summary[b-chu1xq2rgt]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-chu1xq2rgt]::after {
    content: '+';
    font-size: 1.5rem;
    color: #14b8a6;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-item[open] summary[b-chu1xq2rgt]::after {
    content: '−';
}

.faq-item summary:hover[b-chu1xq2rgt] {
    background: rgba(20, 184, 166, 0.05);
}

.faq-item p[b-chu1xq2rgt] {
    padding: 0 24px 24px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
}

/* =====================================================
   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;
}

.cta-partners[b-chu1xq2rgt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cta-partners span[b-chu1xq2rgt] {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.5);
    font-weight: 500;
}

.partner-logos-inline[b-chu1xq2rgt] {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.cta-partner-link[b-chu1xq2rgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-partner-link img[b-chu1xq2rgt] {
    height: 24px;
    width: auto;
    opacity: 1;
    filter: none;
    transition: transform 0.2s ease;
}

.cta-partner-link:hover img[b-chu1xq2rgt] {
    transform: scale(1.05);
}

.cta-partner-text[b-chu1xq2rgt] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-partner-text.light[b-chu1xq2rgt] {
    color: #cbd5e1;
}

/* =====================================================
   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);
    }

    .faq-grid[b-chu1xq2rgt] {
        grid-template-columns: 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;
    }

    .cta-partners[b-chu1xq2rgt] {
        flex-direction: column;
        gap: 16px;
    }

    .partner-logos-inline[b-chu1xq2rgt] {
        gap: 20px;
    }

    .cta-partner-link img[b-chu1xq2rgt] {
        height: 20px;
    }

    .cta-partner-text[b-chu1xq2rgt] {
        font-size: 0.625rem;
    }
}

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

    .faq-item summary[b-chu1xq2rgt] {
        font-size: 0.95rem;
        padding: 20px;
    }

    .faq-item p[b-chu1xq2rgt] {
        padding: 0 20px 20px;
        font-size: 0.9rem;
    }
}
/* /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 - Dell Brand Overrides (base styles from specs-table.css) */
.comparison-table th[b-7r4ty3e5m8] {
    background: rgba(0, 125, 184, 0.1);
    color: #0078d4;
}

.comparison-table tbody tr:hover[b-7r4ty3e5m8] {
    background: rgba(0, 125, 184, 0.05);
}

/* 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(3, 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 :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 */
/* Dell-specific overrides for FAQ hover color */
.faq-item:hover[b-7r4ty3e5m8],
.faq-item[open][b-7r4ty3e5m8] {
    border-color: rgba(0, 125, 184, 0.3);
}

.faq-question:hover[b-7r4ty3e5m8] {
    color: #0078d4;
}

.faq-question:hover[b-7r4ty3e5m8]::after {
    border-color: #0078d4;
}

/* 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: #f47920 (GIGABYTE Orange)
   ========================================================================== */

/* CSS Variables */
:root[b-g53ijmzlh0] {
    --gigabyte-primary: #f47920;
    --gigabyte-primary-dark: #d66a1a;
    --gigabyte-primary-light: #ff8c3a;
    --gigabyte-bg-dark: #0a0f1a;
    --gigabyte-bg-card: #111827;
    --gigabyte-bg-card-alt: #1a2234;
    --gigabyte-border: rgba(244, 121, 32, 0.2);
    --gigabyte-border-hover: rgba(244, 121, 32, 0.4);
    --gigabyte-text: #e5e7eb;
    --gigabyte-text-muted: #9ca3af;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.gigabyte-hero[b-g53ijmzlh0] {
    position: relative;
    padding: 4rem 0 3rem;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.gigabyte-hero-bg[b-g53ijmzlh0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(244, 121, 32, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(244, 121, 32, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #0a0f1a 0%, #111827 100%);
    z-index: 0;
}

.gigabyte-hero-content[b-g53ijmzlh0] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.gigabyte-hero-text[b-g53ijmzlh0] {
    max-width: 600px;
}

.gigabyte-hero-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: 1.5rem;
}

.gigabyte-hero-badge :deep(svg)[b-g53ijmzlh0] {
    width: 16px;
    height: 16px;
}

.gigabyte-hero h1[b-g53ijmzlh0] {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f47920 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gigabyte-hero-subtitle[b-g53ijmzlh0] {
    font-size: 1.25rem;
    color: var(--gigabyte-text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.gigabyte-hero-ctas[b-g53ijmzlh0] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Buttons */
.gigabyte-btn-primary[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f47920, #d66a1a);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gigabyte-btn-primary:hover[b-g53ijmzlh0] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 121, 32, 0.35);
}

.gigabyte-btn-primary :deep(svg)[b-g53ijmzlh0] {
    width: 18px;
    height: 18px;
}

.gigabyte-btn-secondary[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #f47920;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(244, 121, 32, 0.4);
    transition: all 0.3s ease;
}

.gigabyte-btn-secondary:hover[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.1);
    border-color: #f47920;
}

.gigabyte-btn-secondary :deep(svg)[b-g53ijmzlh0] {
    width: 18px;
    height: 18px;
}

/* Hero Showcase Card */
.gigabyte-hero-showcase[b-g53ijmzlh0] {
    display: flex;
    justify-content: flex-end;
}

.showcase-card[b-g53ijmzlh0] {
    background: linear-gradient(135deg, rgba(244, 121, 32, 0.1) 0%, rgba(17, 24, 39, 0.9) 100%);
    border: 1px solid rgba(244, 121, 32, 0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
    backdrop-filter: blur(10px);
}

.showcase-badge[b-g53ijmzlh0] {
    display: inline-block;
    background: linear-gradient(135deg, #f47920, #d66a1a);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.showcase-title[b-g53ijmzlh0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.25rem;
}

.showcase-subtitle[b-g53ijmzlh0] {
    color: var(--gigabyte-text-muted);
    margin-bottom: 1.5rem;
}

.showcase-specs[b-g53ijmzlh0] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.showcase-specs li[b-g53ijmzlh0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(244, 121, 32, 0.1);
    color: var(--gigabyte-text);
    font-size: 0.9375rem;
}

.showcase-specs li:last-child[b-g53ijmzlh0] {
    border-bottom: none;
}

.showcase-specs :deep(svg)[b-g53ijmzlh0] {
    width: 18px;
    height: 18px;
    color: #f47920;
    flex-shrink: 0;
}

.showcase-link[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #f47920;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.showcase-link:hover[b-g53ijmzlh0] {
    gap: 0.75rem;
}

.showcase-link :deep(svg)[b-g53ijmzlh0] {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   GIGAPOD Section (Featured 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: var(--gigabyte-text-muted);
    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: var(--gigabyte-text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   Products Section
   ========================================================================== */

.gigabyte-products-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: #0a0f1a;
}

.section-header[b-g53ijmzlh0] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.section-header h2[b-g53ijmzlh0] {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.section-header p[b-g53ijmzlh0] {
    font-size: 1.125rem;
    color: var(--gigabyte-text-muted);
}

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

/* Product Cards */
.product-card[b-g53ijmzlh0] {
    background: var(--gigabyte-bg-card);
    border: 1px solid var(--gigabyte-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.product-card:hover[b-g53ijmzlh0] {
    border-color: var(--gigabyte-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(244, 121, 32, 0.15);
}

.product-card.featured[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.4);
    background: linear-gradient(135deg, rgba(244, 121, 32, 0.05) 0%, var(--gigabyte-bg-card) 100%);
}

.product-header[b-g53ijmzlh0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 0;
}

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

.product-icon :deep(svg)[b-g53ijmzlh0] {
    width: 24px;
    height: 24px;
    color: #f47920;
}

.product-badges[b-g53ijmzlh0] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.badge[b-g53ijmzlh0] {
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-featured[b-g53ijmzlh0] {
    background: linear-gradient(135deg, #f47920, #d66a1a);
    color: white;
}

.badge-new[b-g53ijmzlh0] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.badge-air[b-g53ijmzlh0] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.badge-flexible[b-g53ijmzlh0] {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.badge-modular[b-g53ijmzlh0] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.badge-flagship[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.2);
    color: #f47920;
}

.product-body[b-g53ijmzlh0] {
    padding: 1.5rem;
    flex: 1;
}

.product-body h3[b-g53ijmzlh0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.product-tagline[b-g53ijmzlh0] {
    color: var(--gigabyte-text-muted);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.product-specs[b-g53ijmzlh0] {
    background: rgba(10, 15, 26, 0.5);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.spec-row[b-g53ijmzlh0] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(244, 121, 32, 0.1);
}

.spec-row:last-child[b-g53ijmzlh0] {
    border-bottom: none;
}

.spec-label[b-g53ijmzlh0] {
    color: var(--gigabyte-text-muted);
    font-size: 0.875rem;
}

.spec-value[b-g53ijmzlh0] {
    color: var(--gigabyte-text);
    font-size: 0.875rem;
    font-weight: 500;
}

.product-features[b-g53ijmzlh0] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.product-features li[b-g53ijmzlh0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--gigabyte-text);
    font-size: 0.9375rem;
}

.product-features :deep(svg)[b-g53ijmzlh0] {
    width: 16px;
    height: 16px;
    color: #f47920;
    flex-shrink: 0;
}

.product-pricing[b-g53ijmzlh0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--gigabyte-border);
}

.price-label[b-g53ijmzlh0] {
    font-size: 0.875rem;
    color: var(--gigabyte-text-muted);
}

.price-value[b-g53ijmzlh0] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f47920;
}

.product-actions[b-g53ijmzlh0] {
    padding: 1.5rem;
    background: rgba(10, 15, 26, 0.5);
    display: flex;
    gap: 1rem;
}

.btn-product-primary[b-g53ijmzlh0] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f47920, #d66a1a);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-product-primary:hover[b-g53ijmzlh0] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 121, 32, 0.3);
}

.btn-product-secondary[b-g53ijmzlh0] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #f47920;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(244, 121, 32, 0.4);
    transition: all 0.3s ease;
}

.btn-product-secondary:hover[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.1);
    border-color: #f47920;
}

/* ==========================================================================
   Cooling Section
   ========================================================================== */

.cooling-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

.cooling-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cooling-card[b-g53ijmzlh0] {
    background: var(--gigabyte-bg-card);
    border: 1px solid var(--gigabyte-border);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.cooling-card:hover[b-g53ijmzlh0] {
    border-color: var(--gigabyte-border-hover);
    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: var(--gigabyte-text-muted);
    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: var(--gigabyte-text);
    font-size: 0.9375rem;
}

.cooling-benefits li[b-g53ijmzlh0]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #f47920;
    font-weight: 600;
}

/* ==========================================================================
   Comparison Section
   ========================================================================== */

.comparison-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: #0a0f1a;
}

.table-wrapper[b-g53ijmzlh0] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--gigabyte-border);
}

/* Comparison Table - Gigabyte Brand Overrides (base styles from specs-table.css) */
.comparison-table th[b-g53ijmzlh0] {
    background: rgba(244, 121, 32, 0.1);
    color: #f47920;
}

.comparison-table td[b-g53ijmzlh0] {
    background: var(--gigabyte-bg-card);
}

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

/* ==========================================================================
   Partnerships Section
   ========================================================================== */

.partnerships-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.partnerships-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.partnership-card[b-g53ijmzlh0] {
    background: var(--gigabyte-bg-card);
    border: 1px solid var(--gigabyte-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.partnership-card:hover[b-g53ijmzlh0] {
    transform: translateY(-4px);
}

.partnership-card.nvidia[b-g53ijmzlh0] {
    border-color: rgba(118, 185, 0, 0.3);
}

.partnership-card.nvidia:hover[b-g53ijmzlh0] {
    border-color: rgba(118, 185, 0, 0.5);
    box-shadow: 0 10px 30px rgba(118, 185, 0, 0.1);
}

.partnership-card.amd[b-g53ijmzlh0] {
    border-color: rgba(237, 28, 36, 0.3);
}

.partnership-card.amd:hover[b-g53ijmzlh0] {
    border-color: rgba(237, 28, 36, 0.5);
    box-shadow: 0 10px 30px rgba(237, 28, 36, 0.1);
}

.partnership-card.intel[b-g53ijmzlh0] {
    border-color: rgba(0, 113, 197, 0.3);
}

.partnership-card.intel:hover[b-g53ijmzlh0] {
    border-color: rgba(0, 113, 197, 0.5);
    box-shadow: 0 10px 30px rgba(0, 113, 197, 0.1);
}

.partnership-card.coolit[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.3);
}

.partnership-card.coolit:hover[b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.5);
    box-shadow: 0 10px 30px rgba(244, 121, 32, 0.1);
}

.partnership-header[b-g53ijmzlh0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gigabyte-border);
}

.partnership-header :deep(svg)[b-g53ijmzlh0] {
    width: 24px;
    height: 24px;
}

.partnership-card.nvidia .partnership-header :deep(svg)[b-g53ijmzlh0] {
    color: #76b900;
}

.partnership-card.amd .partnership-header :deep(svg)[b-g53ijmzlh0] {
    color: #ed1c24;
}

.partnership-card.intel .partnership-header :deep(svg)[b-g53ijmzlh0] {
    color: #0071c5;
}

.partnership-card.coolit .partnership-header :deep(svg)[b-g53ijmzlh0] {
    color: #f47920;
}

.partnership-header h3[b-g53ijmzlh0] {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
}

.partnership-features[b-g53ijmzlh0] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.partnership-features li[b-g53ijmzlh0] {
    padding: 0.5rem 0;
    color: var(--gigabyte-text-muted);
    font-size: 0.875rem;
    padding-left: 1.25rem;
    position: relative;
}

.partnership-features li[b-g53ijmzlh0]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #f47920;
}

/* ==========================================================================
   GPU Navigation Section
   ========================================================================== */

.gpu-nav-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: #0a0f1a;
}

.gpu-nav-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gpu-nav-card[b-g53ijmzlh0] {
    display: block;
    background: var(--gigabyte-bg-card);
    border: 1px solid var(--gigabyte-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.gpu-nav-card:hover[b-g53ijmzlh0] {
    border-color: var(--gigabyte-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(244, 121, 32, 0.1);
}

.gpu-nav-icon[b-g53ijmzlh0] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.gpu-nav-icon.nvidia[b-g53ijmzlh0] {
    background: rgba(118, 185, 0, 0.1);
}

.gpu-nav-icon.nvidia :deep(svg)[b-g53ijmzlh0] {
    color: #76b900;
}

.gpu-nav-icon.amd[b-g53ijmzlh0] {
    background: rgba(237, 28, 36, 0.1);
}

.gpu-nav-icon.amd :deep(svg)[b-g53ijmzlh0] {
    color: #ed1c24;
}

.gpu-nav-icon.intel[b-g53ijmzlh0] {
    background: rgba(0, 113, 197, 0.1);
}

.gpu-nav-icon.intel :deep(svg)[b-g53ijmzlh0] {
    color: #0071c5;
}

.gpu-nav-icon :deep(svg)[b-g53ijmzlh0] {
    width: 24px;
    height: 24px;
}

.gpu-nav-card h3[b-g53ijmzlh0] {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.gpu-nav-card p[b-g53ijmzlh0] {
    font-size: 0.875rem;
    color: var(--gigabyte-text-muted);
    line-height: 1.5;
}

/* ==========================================================================
   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 - Gigabyte Brand Overrides
   ========================================================================== */

.faq-section[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

.faq-item:hover[b-g53ijmzlh0],
.faq-item[open][b-g53ijmzlh0] {
    border-color: rgba(244, 121, 32, 0.4);
}

.faq-question[b-g53ijmzlh0]::after {
    border-color: #f47920;
}

/* ==========================================================================
   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 Primary Button */
.btn-giga-primary[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f47920, #d66a1a);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-giga-primary:hover[b-g53ijmzlh0] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 121, 32, 0.35);
}

.btn-giga-primary :deep(svg)[b-g53ijmzlh0] {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Secondary CTA Section
   ========================================================================== */

.secondary-cta[b-g53ijmzlh0] {
    padding: 5rem 0;
    background: #0a0f1a;
}

.secondary-cta-grid[b-g53ijmzlh0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.secondary-cta-card[b-g53ijmzlh0] {
    background: var(--gigabyte-bg-card);
    border: 1px solid var(--gigabyte-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.secondary-cta-card:hover[b-g53ijmzlh0] {
    border-color: var(--gigabyte-border-hover);
    transform: translateY(-4px);
}

.secondary-cta-card :deep(svg)[b-g53ijmzlh0] {
    width: 40px;
    height: 40px;
    color: #f47920;
    margin-bottom: 1rem;
}

.secondary-cta-card h3[b-g53ijmzlh0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.75rem;
}

.secondary-cta-card p[b-g53ijmzlh0] {
    font-size: 0.9375rem;
    color: var(--gigabyte-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.secondary-cta-card a[b-g53ijmzlh0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #f47920;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.secondary-cta-card a:hover[b-g53ijmzlh0] {
    gap: 0.75rem;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

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

    .partnerships-grid[b-g53ijmzlh0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 1024px) {
    .gigabyte-hero-content[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gigabyte-hero-text[b-g53ijmzlh0] {
        max-width: 100%;
    }

    .gigabyte-hero-ctas[b-g53ijmzlh0] {
        justify-content: center;
    }

    .gigabyte-hero-showcase[b-g53ijmzlh0] {
        justify-content: center;
    }

    .gigabyte-hero h1[b-g53ijmzlh0] {
        font-size: 2.75rem;
    }

    .products-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .cooling-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-g53ijmzlh0] {
        grid-template-columns: repeat(2, 1fr);
    }

    .secondary-cta-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }
}

@@media (max-width: 768px) {
    .gigabyte-hero[b-g53ijmzlh0] {
        padding: 3rem 0 2rem;
        min-height: auto;
    }

    .gigabyte-hero h1[b-g53ijmzlh0] {
        font-size: 2.25rem;
    }

    .gigabyte-hero-subtitle[b-g53ijmzlh0] {
        font-size: 1.0625rem;
    }

    .gigapod-section[b-g53ijmzlh0] {
        padding: 3rem 0;
    }

    .gigapod-header h2[b-g53ijmzlh0] {
        font-size: 1.75rem;
    }

    .gigapod-features-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .section-header h2[b-g53ijmzlh0] {
        font-size: 1.75rem;
    }

    .partnerships-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .gpu-nav-grid[b-g53ijmzlh0] {
        grid-template-columns: 1fr;
    }

    .gigabyte-btn-primary[b-g53ijmzlh0],
    .gigabyte-btn-secondary[b-g53ijmzlh0],
    .btn-giga-primary[b-g53ijmzlh0] {
        width: 100%;
        justify-content: center;
    }
}

@@media (max-width: 480px) {
    .gigabyte-hero h1[b-g53ijmzlh0] {
        font-size: 1.875rem;
    }

    .showcase-card[b-g53ijmzlh0] {
        padding: 1.5rem;
    }

    .product-body[b-g53ijmzlh0] {
        padding: 1.25rem;
    }

    .product-actions[b-g53ijmzlh0] {
        flex-direction: column;
        padding: 1.25rem;
    }

    .btn-product-primary[b-g53ijmzlh0],
    .btn-product-secondary[b-g53ijmzlh0] {
        width: 100%;
    }
}
/* /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: 1px solid rgba(1, 169, 130, 0.2);
}

.comparison-table th[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.1);
    color: #01a982;
}

.comparison-table tr:hover td[b-bpl2bjkhm3] {
    background: rgba(1, 169, 130, 0.05);
}

/* 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(3, 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 - HPE Brand Overrides
   ======================================== */
.faq-item:hover[b-bpl2bjkhm3],
.faq-item[open][b-bpl2bjkhm3] {
    border-color: rgba(1, 169, 130, 0.3);
}

.faq-question[b-bpl2bjkhm3]::after {
    border-color: #01a982;
}

/* ========================================
   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: 1px solid rgba(226, 0, 26, 0.2);
}

.comparison-table th[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.1);
    color: #e2001a;
}

.comparison-table tr:hover td[b-4177fwi8vk] {
    background: rgba(226, 0, 26, 0.05);
}

/* 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(3, 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 - Lenovo Brand Overrides
   ======================================== */
.faq-item:hover[b-4177fwi8vk],
.faq-item[open][b-4177fwi8vk] {
    border-color: rgba(226, 0, 26, 0.3);
}

.faq-question[b-4177fwi8vk]::after {
    border-color: #e2001a;
}

/* ========================================
   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 (base styles from specs-table.css) */
.comparison-table th[b-nzycq2rxl5] {
    background: rgba(0, 174, 66, 0.1);
    color: #00ae42;
}

.comparison-table tbody tr:hover[b-nzycq2rxl5] {
    background: rgba(0, 174, 66, 0.05);
}

/* 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(3, 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 - Supermicro Brand Overrides */
.faq-item:hover[b-nzycq2rxl5],
.faq-item[open][b-nzycq2rxl5] {
    border-color: rgba(0, 174, 66, 0.3);
}

.faq-question[b-nzycq2rxl5]::after {
    border-color: #00ae42;
}

/* 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);
}

/* =====================================================
   FAQ SECTION
   ===================================================== */
.faq-grid[b-iuiue1tm8e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-item[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;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-iuiue1tm8e] {
    border-color: rgba(245, 158, 11, 0.3);
}

.faq-item[open][b-iuiue1tm8e] {
    border-color: rgba(245, 158, 11, 0.4);
}

.faq-item summary[b-iuiue1tm8e] {
    padding: 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    transition: background 0.3s ease;
}

.faq-item summary[b-iuiue1tm8e]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-iuiue1tm8e]::after {
    content: '+';
    font-size: 1.5rem;
    color: #f59e0b;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-item[open] summary[b-iuiue1tm8e]::after {
    content: '−';
}

.faq-item summary:hover[b-iuiue1tm8e] {
    background: rgba(245, 158, 11, 0.05);
}

.faq-item p[b-iuiue1tm8e] {
    padding: 0 24px 24px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
}

/* =====================================================
   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);
    }

    .faq-grid[b-iuiue1tm8e] {
        grid-template-columns: 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;
    }

    .faq-item summary[b-iuiue1tm8e] {
        font-size: 0.95rem;
        padding: 20px;
    }

    .faq-item p[b-iuiue1tm8e] {
        padding: 0 20px 20px;
        font-size: 0.9rem;
    }
}
/* /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;
}

.section-subtitle[b-g0z41l54d0] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

.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: #a855f7;
    line-height: 1;
    margin-bottom: 4px;
}

.benefit-highlight.purple .benefit-number[b-g0z41l54d0] {
    color: #6366f1;
}

.benefit-highlight.cyan .benefit-number[b-g0z41l54d0] {
    color: #06b6d4;
}

.benefit-highlight.amber .benefit-number[b-g0z41l54d0] {
    color: #f59e0b;
}

.benefit-label[b-g0z41l54d0] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    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;
}

/* ===========================================
   FAQ SECTION
   =========================================== */
.faq-grid[b-g0z41l54d0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item[b-g0z41l54d0] {
    background: #0f1620;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item summary[b-g0z41l54d0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-item summary[b-g0z41l54d0]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-g0z41l54d0]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary[b-g0z41l54d0]::after {
    content: '\2212';
}

.faq-item summary:hover[b-g0z41l54d0] {
    background: rgba(255, 255, 255, 0.02);
}

.faq-item summary:focus[b-g0z41l54d0] {
    outline: 2px solid #a855f7;
    outline-offset: -2px;
}

.faq-item p[b-g0z41l54d0] {
    padding: 0 24px 22px 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   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;
    }

    .faq-grid[b-g0z41l54d0] {
        grid-template-columns: 1fr;
    }

    .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 PAGE
   Buy Enterprise GPU Servers
   =========================================== */

/* ===========================================
   HERO SECTION
   =========================================== */
.sales-hero[b-o276uxejrj] {
    position: relative;
    z-index: 1;
    min-height: 60vh;
    padding: 140px 0 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sales-hero[b-o276uxejrj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 70% 50% at 70% 30%, rgba(16, 185, 129, 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-o276uxejrj] {
    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-o276uxejrj] {
    position: relative;
}

.hero-badges[b-o276uxejrj] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.badge-primary[b-o276uxejrj] {
    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: #10b981;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
}

.badge-partner[b-o276uxejrj] {
    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-title[b-o276uxejrj] {
    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-o276uxejrj] {
    display: block;
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline[b-o276uxejrj] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 520px;
}

.hero-stats-row[b-o276uxejrj] {
    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-o276uxejrj] {
    text-align: center;
}

.hero-stat-value[b-o276uxejrj] {
    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-o276uxejrj] {
    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-o276uxejrj] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Visual */
.hero-visual[b-o276uxejrj] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-showcase[b-o276uxejrj] {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.showcase-card[b-o276uxejrj] {
    position: relative;
    padding: 56px 48px;
    background: linear-gradient(145deg, #0f1620 0%, #0a1018 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

.showcase-card[b-o276uxejrj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #06b6d4);
}

.showcase-card[b-o276uxejrj]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.showcase-label[b-o276uxejrj] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #10b981;
    margin-bottom: 16px;
}

.showcase-highlight[b-o276uxejrj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.showcase-subtext[b-o276uxejrj] {
    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-o276uxejrj] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    padding: 10px 20px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
}

.showcase-glow[b-o276uxejrj] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn-primary[b-o276uxejrj] {
    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, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 40px rgba(16, 185, 129, 0.2);
}

.btn-primary:hover[b-o276uxejrj] {
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(16, 185, 129, 0.3);
}

.btn-primary .icon[b-o276uxejrj] {
    width: 16px;
    height: 16px;
}

.btn-secondary[b-o276uxejrj] {
    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: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-secondary:hover[b-o276uxejrj] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.btn-secondary .icon[b-o276uxejrj] {
    width: 16px;
    height: 16px;
}

/* ===========================================
   STATS STRIP
   =========================================== */
.stats-strip[b-o276uxejrj] {
    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-o276uxejrj] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.stats-strip-grid[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-strip-item[b-o276uxejrj] {
    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-o276uxejrj] {
    width: 28px;
    height: 28px;
    color: #10b981;
    flex-shrink: 0;
}

.stat-strip-content[b-o276uxejrj] {
    display: flex;
    flex-direction: column;
}

.stat-strip-value[b-o276uxejrj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}

.stat-strip-label[b-o276uxejrj] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* ===========================================
   SECTION STYLES
   =========================================== */
.section[b-o276uxejrj] {
    position: relative;
    z-index: 1;
    padding: 100px 0;
}

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

.section-alt[b-o276uxejrj] {
    background: #0a1018;
}

.section-header[b-o276uxejrj] {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.section-tag[b-o276uxejrj] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #10b981;
    margin-bottom: 16px;
}

.section-title[b-o276uxejrj] {
    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-o276uxejrj] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

.section-cta[b-o276uxejrj] {
    text-align: center;
    margin-top: 48px;
}

/* ===========================================
   PRODUCT GRID
   =========================================== */
.product-grid[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-card[b-o276uxejrj] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    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;
}

.product-card:hover[b-o276uxejrj] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
    transform: translateY(-4px);
}

.product-card-header[b-o276uxejrj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.product-card-icon[b-o276uxejrj] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
}

.product-card-icon .icon[b-o276uxejrj] {
    width: 26px;
    height: 26px;
    color: #10b981;
}

.product-card-tag[b-o276uxejrj] {
    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;
}

.product-card-tag.hot[b-o276uxejrj] {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.product-card h3[b-o276uxejrj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.product-card > p[b-o276uxejrj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.product-features[b-o276uxejrj] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.product-features li[b-o276uxejrj] {
    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);
}

.product-features li:last-child[b-o276uxejrj] {
    border-bottom: none;
}

.product-features li .icon[b-o276uxejrj] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
}

.product-tags[b-o276uxejrj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.product-tag[b-o276uxejrj] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.product-card-arrow[b-o276uxejrj] {
    position: absolute;
    bottom: 32px;
    right: 32px;
    color: #475569;
    transition: all 0.3s ease;
}

.product-card-arrow .icon[b-o276uxejrj] {
    width: 20px;
    height: 20px;
}

.product-card:hover .product-card-arrow[b-o276uxejrj] {
    color: #10b981;
    transform: translateX(4px);
}

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

.benefit-card[b-o276uxejrj] {
    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-o276uxejrj] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.benefit-icon[b-o276uxejrj] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 14px;
    margin-bottom: 20px;
}

.benefit-icon .icon[b-o276uxejrj] {
    width: 28px;
    height: 28px;
    color: #10b981;
}

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

.benefit-card > p[b-o276uxejrj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.benefit-highlight[b-o276uxejrj] {
    padding: 16px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 8px;
    text-align: center;
}

.benefit-number[b-o276uxejrj] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #10b981;
    line-height: 1;
    margin-bottom: 4px;
}

.benefit-label[b-o276uxejrj] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===========================================
   PARTNERS GRID
   =========================================== */
.partners-grid[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

.partner-card[b-o276uxejrj] {
    padding: 28px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

a.partner-card[b-o276uxejrj],
.partner-link[b-o276uxejrj] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.partner-card:hover[b-o276uxejrj] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.05);
}

.partner-logo[b-o276uxejrj] {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.partner-logo img[b-o276uxejrj] {
    max-height: 36px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(100%) brightness(1.5);
    transition: all 0.3s ease;
}

.partner-card:hover .partner-logo img[b-o276uxejrj] {
    opacity: 1;
    filter: grayscale(0%) brightness(1);
}

.partner-card h4[b-o276uxejrj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 6px 0;
}

.partner-card p[b-o276uxejrj] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
    margin: 0 0 12px 0;
}

.partner-badge[b-o276uxejrj] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6366f1;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 4px;
}

/* ===========================================
   PROCESS GRID
   =========================================== */
.process-grid[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.process-card[b-o276uxejrj] {
    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;
}

.process-card:hover[b-o276uxejrj] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
    transform: translateY(-4px);
}

.process-number[b-o276uxejrj] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    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(16, 185, 129, 0.25);
}

.process-card h3[b-o276uxejrj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.process-card > p[b-o276uxejrj] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.process-detail[b-o276uxejrj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 6px;
}

.process-detail .icon[b-o276uxejrj] {
    width: 14px;
    height: 14px;
    color: #10b981;
}

.process-detail span[b-o276uxejrj] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ===========================================
   FINANCING STRIP
   =========================================== */
.financing-strip[b-o276uxejrj] {
    position: relative;
    z-index: 1;
    padding: 48px 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);
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}

.financing-strip .container[b-o276uxejrj] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

.financing-content[b-o276uxejrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.financing-text h3[b-o276uxejrj] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.financing-text p[b-o276uxejrj] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
    max-width: 500px;
}

.financing-features[b-o276uxejrj] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.financing-feature[b-o276uxejrj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.financing-feature .icon[b-o276uxejrj] {
    width: 18px;
    height: 18px;
    color: #10b981;
}

.financing-feature span[b-o276uxejrj] {
    font-size: 0.9375rem;
    color: #f1f5f9;
    font-weight: 500;
}

/* ===========================================
   FAQ SECTION
   =========================================== */
.faq-grid[b-o276uxejrj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item[b-o276uxejrj] {
    background: #0f1620;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item summary[b-o276uxejrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-item summary[b-o276uxejrj]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-o276uxejrj]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary[b-o276uxejrj]::after {
    content: '\2212';
}

.faq-item summary:hover[b-o276uxejrj] {
    background: rgba(255, 255, 255, 0.02);
}

.faq-item summary:focus[b-o276uxejrj] {
    outline: 2px solid #10b981;
    outline-offset: -2px;
}

.faq-item p[b-o276uxejrj] {
    padding: 0 24px 22px 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

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

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

.sales-cta .cta-content[b-o276uxejrj] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

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

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

.cta-actions[b-o276uxejrj] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cta-partners[b-o276uxejrj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cta-partners > span[b-o276uxejrj] {
    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-o276uxejrj] {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-partner-link[b-o276uxejrj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-partner-link img[b-o276uxejrj] {
    opacity: 1;
    filter: none;
    transition: transform 0.2s ease;
}

.cta-partner-link:hover img[b-o276uxejrj] {
    transform: scale(1.05);
}

.cta-partner-text[b-o276uxejrj] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-partner-text.light[b-o276uxejrj] {
    color: #cbd5e1;
}

a.partner-card[b-o276uxejrj] {
    text-decoration: none;
}

/* ===========================================
   SECONDARY CTA
   =========================================== */
.secondary-cta[b-o276uxejrj] {
    position: relative;
    z-index: 1;
    padding: 32px 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.15);
}

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

.secondary-cta-content[b-o276uxejrj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.secondary-cta-text[b-o276uxejrj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.secondary-cta-text .icon[b-o276uxejrj] {
    width: 24px;
    height: 24px;
    color: #a855f7;
}

.secondary-cta-text span[b-o276uxejrj] {
    font-size: 1.125rem;
    color: #f1f5f9;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */
@media (max-width: 1200px) {
    .hero-container[b-o276uxejrj] {
        gap: 48px;
    }

    .product-grid[b-o276uxejrj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid[b-o276uxejrj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .partners-grid[b-o276uxejrj] {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-grid[b-o276uxejrj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero-container[b-o276uxejrj] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content[b-o276uxejrj] {
        max-width: 600px;
        margin: 0 auto;
    }

    .hero-badges[b-o276uxejrj] {
        justify-content: center;
    }

    .hero-tagline[b-o276uxejrj] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-o276uxejrj] {
        justify-content: center;
    }

    .hero-visual[b-o276uxejrj] {
        max-width: 360px;
        margin: 0 auto;
    }

    .showcase-highlight[b-o276uxejrj] {
        font-size: 3.5rem;
    }

    .financing-content[b-o276uxejrj] {
        flex-direction: column;
        text-align: center;
    }

    .financing-text p[b-o276uxejrj] {
        max-width: none;
    }

    .financing-features[b-o276uxejrj] {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .product-grid[b-o276uxejrj] {
        grid-template-columns: 1fr;
    }

    .partners-grid[b-o276uxejrj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid[b-o276uxejrj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section[b-o276uxejrj] {
        padding: 80px 0;
    }

    .sales-hero[b-o276uxejrj] {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .hero-container[b-o276uxejrj],
    .section .container[b-o276uxejrj],
    .stats-strip .container[b-o276uxejrj],
    .financing-strip .container[b-o276uxejrj],
    .sales-cta .container[b-o276uxejrj],
    .secondary-cta .container[b-o276uxejrj] {
        padding: 0 24px;
    }

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

    .hero-stats-row[b-o276uxejrj] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hero-stat-value[b-o276uxejrj] {
        font-size: 1.25rem;
    }

    .hero-actions[b-o276uxejrj] {
        flex-direction: column;
    }

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

    .stats-strip-grid[b-o276uxejrj] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-strip-item[b-o276uxejrj] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .benefits-grid[b-o276uxejrj] {
        grid-template-columns: 1fr;
    }

    .partners-grid[b-o276uxejrj] {
        grid-template-columns: 1fr 1fr;
    }

    .faq-grid[b-o276uxejrj] {
        grid-template-columns: 1fr;
    }

    .cta-actions[b-o276uxejrj] {
        flex-direction: column;
    }

    .partner-logos-inline[b-o276uxejrj] {
        gap: 20px;
    }

    .cta-partner-link img[b-o276uxejrj] {
        max-width: 60px;
        height: auto;
    }

    .cta-partner-text[b-o276uxejrj] {
        font-size: 0.625rem;
    }

    .secondary-cta-content[b-o276uxejrj] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title[b-o276uxejrj] {
        font-size: 1.875rem;
    }

    .showcase-highlight[b-o276uxejrj] {
        font-size: 2.75rem;
    }

    .showcase-subtext[b-o276uxejrj] {
        font-size: 1.125rem;
    }

    .hero-stats-row[b-o276uxejrj] {
        grid-template-columns: 1fr 1fr;
    }

    .stats-strip-grid[b-o276uxejrj] {
        grid-template-columns: 1fr;
    }

    .partners-grid[b-o276uxejrj] {
        grid-template-columns: 1fr;
    }

    .financing-features[b-o276uxejrj] {
        flex-direction: column;
        gap: 12px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===========================================
   HOME PAGE - DIFFERENTIATED DESIGN SYSTEM
   Industrial / Technical Aesthetic
   =========================================== */

/* Hero uses shared Hero component styles */

.hero-container[b-fm6wgpyh6q] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
}

/* Hero Left - Content */
.hero-content[b-fm6wgpyh6q] {
    position: relative;
}

.hero-tag[b-fm6wgpyh6q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f59e0b;
    padding: 10px 16px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 4px;
    margin-bottom: 28px;
}

.hero-tag[b-fm6wgpyh6q]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    animation: pulse-dot-b-fm6wgpyh6q 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-fm6wgpyh6q {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

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

.hero-headline .accent[b-fm6wgpyh6q] {
    font-size: 0.8em;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subhead[b-fm6wgpyh6q] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 540px;
}

.hero-props[b-fm6wgpyh6q] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: 40px;
}

.hero-prop[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.hero-prop i[b-fm6wgpyh6q] {
    width: 20px;
    color: #06b6d4;
}

.hero-actions[b-fm6wgpyh6q] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Right - Marketplace Preview */
.hero-preview[b-fm6wgpyh6q] {
    position: relative;
}

.preview-card[b-fm6wgpyh6q] {
    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);
    transition: all 0.4s ease;
    display: block;
    text-decoration: none;
}

.preview-card:hover[b-fm6wgpyh6q] {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(245,158,11,0.3);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 8px 40px rgba(245,158,11,0.15);
}

.preview-header[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.preview-title[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
}

.preview-title i[b-fm6wgpyh6q] {
    color: #f59e0b;
}

.preview-live[b-fm6wgpyh6q] {
    display: 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;
    color: #10b981;
}

.preview-live[b-fm6wgpyh6q]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-dot-b-fm6wgpyh6q 2s ease-in-out infinite;
}

.preview-body[b-fm6wgpyh6q] {
    padding: 16px;
}

.gpu-row[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.gpu-row:last-child[b-fm6wgpyh6q] {
    margin-bottom: 0;
}

.gpu-row:hover[b-fm6wgpyh6q] {
    background: rgba(245,158,11,0.04);
    border-color: rgba(245,158,11,0.3);
}

.gpu-icon[b-fm6wgpyh6q] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #76b900 0%, #5a8f00 100%);
    border-radius: 10px;
    font-size: 1.125rem;
    color: white;
}

.gpu-icon.amd[b-fm6wgpyh6q] {
    background: linear-gradient(135deg, #ed1c24 0%, #b91c1c 100%);
}

.gpu-info .gpu-name[b-fm6wgpyh6q] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 2px 0;
}

.gpu-info span[b-fm6wgpyh6q] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.gpu-status[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.gpu-status i[b-fm6wgpyh6q] {
    font-size: 0.5rem;
}

.gpu-price[b-fm6wgpyh6q] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f59e0b;
    text-align: right;
}

.preview-cta[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(245,158,11,0.06);
    border-top: 1px solid rgba(255,255,255,0.04);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    text-decoration: none;
    transition: all 0.2s ease;
}

.preview-cta:hover[b-fm6wgpyh6q] {
    background: rgba(245,158,11,0.1);
}

.preview-cta i[b-fm6wgpyh6q] {
    transition: transform 0.2s ease;
}

.preview-cta:hover i[b-fm6wgpyh6q] {
    transform: translateX(4px);
}

/* Decorative grid element */
.hero-grid-deco[b-fm6wgpyh6q] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(rgba(245,158,11,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,158,11,0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    transform: rotate(15deg);
    pointer-events: none;
}

/* ===========================================
   PARTNERS SECTION
   =========================================== */
.partners[b-fm6wgpyh6q] {
    position: relative;
    z-index: 1;
    padding: 40px 0;
    background: #0a1018;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.partners .container[b-fm6wgpyh6q] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
}

.partners-label[b-fm6wgpyh6q] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

.partners-logos[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 72px;
}

.partner-logo[b-fm6wgpyh6q] {
    opacity: 0.9;
    filter: none;
}

.partner-logo:hover[b-fm6wgpyh6q] {
    opacity: 1;
    filter: none;
}

/* Invert dark-text logos (HPE, GigaComputing) so text appears white on dark bg */
.partner-logo.invert-logo[b-fm6wgpyh6q] {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.partner-logo.invert-logo:hover[b-fm6wgpyh6q] {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.partner-logo img[b-fm6wgpyh6q] {
    height: 60px;
    width: auto;
}

/* ===========================================
   SECTIONS - SHARED STYLES
   =========================================== */
.section[b-fm6wgpyh6q] {
    position: relative;
    z-index: 1;
    padding: 120px 0;
}

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

.section-header[b-fm6wgpyh6q] {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}

.section-tag[b-fm6wgpyh6q] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 16px;
}

.section-title[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #f1f5f9;
    margin: 0 0 20px 0;
}

.section-desc[b-fm6wgpyh6q] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

.section--alt[b-fm6wgpyh6q] {
    background: #0a1018;
}

/* ===========================================
   TWO-SIDED MARKETPLACE
   =========================================== */
.marketplace-split[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 32px;
    align-items: stretch;
}

.marketplace-side[b-fm6wgpyh6q] {
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.marketplace-side:hover[b-fm6wgpyh6q] {
    border-color: rgba(255,255,255,0.12);
}

.marketplace-side.consumers[b-fm6wgpyh6q] {
    border-top: 3px solid #f59e0b;
}

.marketplace-side.providers[b-fm6wgpyh6q] {
    border-top: 3px solid #06b6d4;
}

.side-icon[b-fm6wgpyh6q] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
    font-size: 1.5rem;
}

.consumers .side-icon[b-fm6wgpyh6q] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.providers .side-icon[b-fm6wgpyh6q] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.marketplace-side h3[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.side-tagline[b-fm6wgpyh6q] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0 0 24px 0;
}

.marketplace-side ul[b-fm6wgpyh6q] {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}

.marketplace-side li[b-fm6wgpyh6q] {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #94a3b8;
}

.marketplace-side li:last-child[b-fm6wgpyh6q] {
    border-bottom: none;
}

.marketplace-side li strong[b-fm6wgpyh6q] {
    color: #f1f5f9;
}

.marketplace-divider[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.marketplace-divider span[b-fm6wgpyh6q] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #151d28;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
}

/* ===========================================
   PROBLEM SECTION
   =========================================== */
.problem-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.problem-card[b-fm6wgpyh6q] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.problem-card:hover[b-fm6wgpyh6q] {
    border-color: rgba(239,68,68,0.3);
    transform: translateY(-4px);
}

.problem-icon[b-fm6wgpyh6q] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239,68,68,0.08);
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 1.25rem;
    color: #ef4444;
}

.problem-card h3[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.problem-card ul[b-fm6wgpyh6q] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-card li[b-fm6wgpyh6q] {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.5;
}

.problem-card li[b-fm6wgpyh6q]::before {
    content: '\00d7';
    position: absolute;
    left: 0;
    color: #ef4444;
    font-weight: 700;
}

.problem-stat[b-fm6wgpyh6q] {
    text-align: center;
    padding: 40px;
    background: rgba(239,68,68,0.04);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: 14px;
}

.problem-stat-num[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ef4444;
    line-height: 1;
    margin-bottom: 12px;
}

.problem-stat-text[b-fm6wgpyh6q] {
    font-size: 1.125rem;
    color: #f1f5f9;
    margin-bottom: 12px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.problem-stat-source[b-fm6wgpyh6q] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

.problem-stat-source a[b-fm6wgpyh6q] {
    color: #06b6d4;
    text-decoration: none;
}

.problem-stat-source a:hover[b-fm6wgpyh6q] {
    text-decoration: underline;
}

/* ===========================================
   FEATURES GRID
   =========================================== */
.features-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card[b-fm6wgpyh6q] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.feature-card:hover[b-fm6wgpyh6q] {
    border-color: rgba(245,158,11,0.3);
    transform: translateY(-4px);
}

.feature-icon[b-fm6wgpyh6q] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 1.25rem;
}

.feature-icon.gold[b-fm6wgpyh6q] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.feature-icon.cyan[b-fm6wgpyh6q] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.feature-icon.blue[b-fm6wgpyh6q] {
    background: rgba(59,130,246,0.1);
    color: #3b82f6;
}

.feature-card h3[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px 0;
}

.feature-card p[b-fm6wgpyh6q] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   STATS GRID
   =========================================== */
.stats-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-card[b-fm6wgpyh6q] {
    padding: 32px 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-align: center;
}

.stat-num[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #f59e0b;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label[b-fm6wgpyh6q] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #94a3b8;
    margin-bottom: 12px;
}

.stat-source[b-fm6wgpyh6q] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.stat-source a[b-fm6wgpyh6q] {
    color: #06b6d4;
    text-decoration: none;
}

.stat-source a:hover[b-fm6wgpyh6q] {
    text-decoration: underline;
}

/* ===========================================
   BENSON SECTION
   =========================================== */
.benson-content[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 60px;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
}

.benson-avatar[b-fm6wgpyh6q] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 24px;
    font-size: 3rem;
    color: #030508;
    box-shadow: 0 8px 40px rgba(245,158,11,0.15);
}

.benson-text h2[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.benson-text > p[b-fm6wgpyh6q] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
}

.benson-examples[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.benson-example[b-fm6wgpyh6q] {
    padding: 18px 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
}

.example-cmd[b-fm6wgpyh6q] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9375rem;
    color: #f1f5f9;
    margin-bottom: 6px;
}

.example-cmd[b-fm6wgpyh6q]::before {
    content: '\2192 ';
    color: #f59e0b;
}

.example-result[b-fm6wgpyh6q] {
    display: block;
    font-size: 0.8125rem;
    color: #94a3b8;
    padding-left: 20px;
}

/* ===========================================
   USE CASES GRID
   =========================================== */
.use-cases-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.use-case-card[b-fm6wgpyh6q] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.use-case-card:hover[b-fm6wgpyh6q] {
    border-color: rgba(6,182,212,0.3);
}

.use-case-card h3[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1875rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px 0;
}

.use-case-card > p[b-fm6wgpyh6q] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.use-case-card ul[b-fm6wgpyh6q] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.use-case-card li[b-fm6wgpyh6q] {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: #94a3b8;
}

.use-case-card li[b-fm6wgpyh6q]::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #06b6d4;
    font-weight: 600;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.cta-section[b-fm6wgpyh6q] {
    text-align: center;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

.cta-content[b-fm6wgpyh6q] {
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

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

.cta-dual[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.cta-option[b-fm6wgpyh6q] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    text-align: center;
}

.cta-option h3[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px 0;
}

.cta-option p[b-fm6wgpyh6q] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.cta-phone[b-fm6wgpyh6q] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
}

.cta-phone a[b-fm6wgpyh6q] {
    color: #06b6d4;
    text-decoration: none;
    font-weight: 600;
}

.cta-phone a:hover[b-fm6wgpyh6q] {
    text-decoration: underline;
}

/* ===========================================
   FAQ SECTION - Native details/summary accordion
   =========================================== */
.faq-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-item[b-fm6wgpyh6q] {
    padding: 0;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item summary[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-item summary[b-fm6wgpyh6q]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-fm6wgpyh6q]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #94a3b8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] summary[b-fm6wgpyh6q]::after {
    content: '\2212';
}

.faq-item summary:hover[b-fm6wgpyh6q] {
    background: rgba(255,255,255,0.02);
}

.faq-item summary:focus[b-fm6wgpyh6q] {
    outline: 2px solid #6366f1;
    outline-offset: -2px;
}

.faq-item p[b-fm6wgpyh6q] {
    padding: 0 28px 24px 28px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   HOW IT WORKS
   =========================================== */
.path-section[b-fm6wgpyh6q] {
    margin-bottom: 56px;
}

.path-section:last-child[b-fm6wgpyh6q] {
    margin-bottom: 0;
}

.path-title[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 28px 0;
}

.path-title i[b-fm6wgpyh6q] {
    color: #f59e0b;
}

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

.step-card[b-fm6wgpyh6q] {
    position: relative;
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}

.step-num[b-fm6wgpyh6q] {
    position: absolute;
    top: -14px;
    left: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #030508;
}

.step-card h3[b-fm6wgpyh6q] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 12px 0 10px 0;
}

.step-card p[b-fm6wgpyh6q] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .hero-container[b-fm6wgpyh6q] {
        gap: 48px;
    }
    .stats-grid[b-fm6wgpyh6q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero-container[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-content[b-fm6wgpyh6q] {
        max-width: 600px;
        margin: 0 auto;
    }
    .hero-subhead[b-fm6wgpyh6q] {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-props[b-fm6wgpyh6q] {
        justify-content: center;
    }
    .hero-actions[b-fm6wgpyh6q] {
        justify-content: center;
    }
    .hero-preview[b-fm6wgpyh6q] {
        max-width: 480px;
        margin: 0 auto;
    }
    .hero-grid-deco[b-fm6wgpyh6q] {
        display: none;
    }
    .marketplace-split[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
    }
    .marketplace-divider[b-fm6wgpyh6q] {
        display: none;
    }
    .problem-grid[b-fm6wgpyh6q],
    .features-grid[b-fm6wgpyh6q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section[b-fm6wgpyh6q] {
        padding: 80px 0;
    }
    .hero-split[b-fm6wgpyh6q] {
        min-height: auto;
        padding: 120px 0 60px;
    }
    .hero-container[b-fm6wgpyh6q],
    .section .container[b-fm6wgpyh6q],
    .partners .container[b-fm6wgpyh6q] {
        padding: 0 24px;
    }
    .hero-headline[b-fm6wgpyh6q] {
        font-size: 2.25rem;
    }
    .hero-actions[b-fm6wgpyh6q] {
        flex-direction: column;
    }
    .btn-gold[b-fm6wgpyh6q],
    .btn-outline[b-fm6wgpyh6q] {
        width: 100%;
        justify-content: center;
    }
    .problem-grid[b-fm6wgpyh6q],
    .features-grid[b-fm6wgpyh6q],
    .use-cases-grid[b-fm6wgpyh6q],
    .faq-grid[b-fm6wgpyh6q],
    .cta-dual[b-fm6wgpyh6q],
    .steps-grid[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
    }
    .stats-grid[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
    }
    .benson-content[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .benson-avatar[b-fm6wgpyh6q] {
        margin: 0 auto;
    }
    .benson-example[b-fm6wgpyh6q] {
        text-align: left;
    }
    .gpu-row[b-fm6wgpyh6q] {
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }
    .gpu-status[b-fm6wgpyh6q],
    .gpu-price[b-fm6wgpyh6q] {
        grid-column: 2;
    }
}

@media (max-width: 480px) {
    .partners-logos[b-fm6wgpyh6q] {
        gap: 32px 48px;
    }
    .partner-logo img[b-fm6wgpyh6q] {
        height: 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;
}

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

/* ===========================================
   FAQ SECTION
   =========================================== */
.leasebuy-faq-grid[b-btch77fnaa] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.leasebuy-faq-item[b-btch77fnaa] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.leasebuy-faq-item summary[b-btch77fnaa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.leasebuy-faq-item summary[b-btch77fnaa]::-webkit-details-marker {
    display: none;
}

.leasebuy-faq-item summary[b-btch77fnaa]::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 400;
    color: #64748b;
    flex-shrink: 0;
    margin-left: 16px;
}

.leasebuy-faq-item[open] summary[b-btch77fnaa]::after {
    content: '\2212';
}

.leasebuy-faq-item summary:hover[b-btch77fnaa] {
    background: rgba(255,255,255,0.02);
}

.leasebuy-faq-item summary:focus[b-btch77fnaa] {
    outline: 2px solid #06b6d4;
    outline-offset: -2px;
}

.leasebuy-faq-item p[b-btch77fnaa] {
    padding: 0 24px 22px 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   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-faq-grid[b-btch77fnaa] {
        grid-template-columns: 1fr;
    }
    .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/Partners.razor.rz.scp.css */
/* ===========================================
   PARTNERS PAGE - SLYD DESIGN SYSTEM
   Uses shared CSS: generic-hero.css, generic-sections.css, brand-colors.css
   =========================================== */

/* ===========================================
   HERO PREVIEW (page-specific)
   =========================================== */
.partners-logo-grid-preview[b-iwi78cy4us] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;
}

.preview-logo[b-iwi78cy4us] {
    width: 100%;
    height: 60px;
    object-fit: contain;
    opacity: 1;
    transition: all 0.3s ease;
}

.preview-logo:hover[b-iwi78cy4us] {
    transform: scale(1.05);
}

/* Brighten logos with black text for dark background visibility */
.preview-logo[alt="HPE"][b-iwi78cy4us] {
    filter: brightness(1.8);
}

.partners-badge[b-iwi78cy4us] {
    position: absolute;
    bottom: -20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #76b900 0%, #5a8f00 100%);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(118, 185, 0, 0.3);
}

.partners-badge i[b-iwi78cy4us],
.partners-badge :deep(svg)[b-iwi78cy4us] {
    font-size: 1rem;
    width: 16px;
    height: 16px;
}

/* ===========================================
   PARTNER CARDS
   =========================================== */
.partners-grid[b-iwi78cy4us] {
    display: grid;
    gap: 24px;
}

.partners-grid-1[b-iwi78cy4us] {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

.partners-grid-2[b-iwi78cy4us] {
    grid-template-columns: repeat(2, 1fr);
}

.partners-grid-3[b-iwi78cy4us] {
    grid-template-columns: repeat(3, 1fr);
}

.partners-card[b-iwi78cy4us] {
    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;
    position: relative;
}

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

.partners-card-featured[b-iwi78cy4us] {
    border-color: rgba(118, 185, 0, 0.3);
    background: rgba(15, 23, 42, 0.7);
}

.partners-card-featured:hover[b-iwi78cy4us] {
    border-color: rgba(118, 185, 0, 0.5);
}

.partners-card-wide[b-iwi78cy4us] {
    max-width: 100%;
}

.partners-card-badge[b-iwi78cy4us] {
    position: absolute;
    top: -12px;
    left: 24px;
    background: linear-gradient(135deg, #76b900 0%, #5a8f00 100%);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 4px;
}

.partners-card-logo[b-iwi78cy4us] {
    height: 60px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.partners-card-logo img[b-iwi78cy4us] {
    max-height: 50px;
    max-width: 160px;
    object-fit: contain;
}

/* Brighten logos with black/dark text for dark background visibility */
.partners-card-logo img[alt="Hewlett Packard Enterprise"][b-iwi78cy4us],
.partners-card-logo img[alt="PNY Technologies"][b-iwi78cy4us],
.partners-card-logo img[alt="Giga Computing"][b-iwi78cy4us] {
    filter: brightness(1.8);
}

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

.partners-card p[b-iwi78cy4us] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 20px;
}

.partners-card-highlights[b-iwi78cy4us] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.partners-card-highlights span[b-iwi78cy4us] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: #cbd5e1;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
    padding: 6px 12px;
    border-radius: 4px;
}

.partners-card-highlights span i[b-iwi78cy4us] {
    color: #22c55e;
    font-size: 0.75rem;
}

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

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

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

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

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

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

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

.content-intro-title[b-iwi78cy4us] {
    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-iwi78cy4us] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* Partner Types Grid */
.partners-types-grid[b-iwi78cy4us] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 3rem;
    text-align: left;
}

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

.partners-type-icon[b-iwi78cy4us] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(118, 185, 0, 0.15);
    color: #76b900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.partners-type-icon :deep(svg)[b-iwi78cy4us] {
    width: 22px;
    height: 22px;
}

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

.partners-type p[b-iwi78cy4us] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* Benefits Box */
.partners-benefits[b-iwi78cy4us] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;
    text-align: left;
}

.partners-benefits h3[b-iwi78cy4us] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 20px;
    text-align: center;
}

.partners-benefits-list[b-iwi78cy4us] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.partners-benefit[b-iwi78cy4us] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.partners-benefit :deep(svg)[b-iwi78cy4us] {
    color: #22c55e;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.partners-benefit span[b-iwi78cy4us] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #cbd5e1;
}

.partners-benefit strong[b-iwi78cy4us] {
    color: #f1f5f9;
}

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

@media (max-width: 1024px) {
    .partners-logo-grid-preview[b-iwi78cy4us] {
        max-width: 500px;
        margin: 0 auto;
    }

    .partners-badge[b-iwi78cy4us] {
        bottom: -20px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .partners-grid-2[b-iwi78cy4us] {
        grid-template-columns: 1fr;
    }

    .partners-types-grid[b-iwi78cy4us] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .partners-logo-grid-preview[b-iwi78cy4us] {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px;
    }

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

    .partners-benefits-list[b-iwi78cy4us] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .partners-types-grid[b-iwi78cy4us] {
        grid-template-columns: 1fr;
    }
}

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

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

    .partners-card[b-iwi78cy4us] {
        padding: 24px;
    }
}
/* /Components/Pages/Platform/Architecture.razor.rz.scp.css */
/* ===========================================
   ARCHITECTURE PAGE - SLYD DESIGN SYSTEM
   Page-specific styles (hero/section provided by generic CSS)
   =========================================== */

/* ===========================================
   HERO PREVIEW CARD
   =========================================== */

.arch-preview-card[b-2o8w505bgf] {
    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);
}

.arch-preview-header[b-2o8w505bgf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.arch-preview-title[b-2o8w505bgf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.arch-preview-title .icon[b-2o8w505bgf] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.arch-preview-badge[b-2o8w505bgf] {
    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;
}

.arch-preview-layers[b-2o8w505bgf] {
    padding: 16px;
}

.arch-layer-row[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.arch-layer-row:last-child[b-2o8w505bgf] {
    margin-bottom: 0;
}

.arch-layer-row:hover[b-2o8w505bgf] {
    background: rgba(6,182,212,0.04);
    border-color: rgba(6,182,212,0.2);
}

.layer-indicator[b-2o8w505bgf] {
    width: 4px;
    height: 24px;
    border-radius: 2px;
}

.layer-indicator.l1[b-2o8w505bgf] { background: #475569; }
.layer-indicator.l2[b-2o8w505bgf] { background: #64748b; }
.layer-indicator.l3[b-2o8w505bgf] { background: #10b981; }
.layer-indicator.l4[b-2o8w505bgf] { background: #ef4444; }
.layer-indicator.l5[b-2o8w505bgf] { background: #06b6d4; }
.layer-indicator.l6[b-2o8w505bgf] { background: #8b5cf6; }
.layer-indicator.l7[b-2o8w505bgf] { background: #22c55e; }
.layer-indicator.l8[b-2o8w505bgf] { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }

.layer-name[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.layer-tech[b-2o8w505bgf] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #64748b;
    text-align: right;
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.arch-opening[b-2o8w505bgf] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.arch-opening p[b-2o8w505bgf] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.arch-opening-lead[b-2o8w505bgf] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    font-weight: 500;
}

.arch-opening-result[b-2o8w505bgf] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
}

.arch-opening strong[b-2o8w505bgf] {
    color: #06b6d4;
}

/* ===========================================
   LAYER CARDS GRID
   =========================================== */
.arch-layers-grid[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.arch-layer-card[b-2o8w505bgf] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.arch-layer-card:hover[b-2o8w505bgf] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.arch-layer-card.highlight[b-2o8w505bgf] {
    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%);
}

.arch-layer-header[b-2o8w505bgf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.arch-layer-number[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #06b6d4;
    opacity: 0.6;
    flex-shrink: 0;
    line-height: 1;
}

.arch-layer-number.gold[b-2o8w505bgf] {
    color: #f59e0b;
    opacity: 1;
}

.arch-layer-title-group[b-2o8w505bgf] {
    flex: 1;
}

.arch-layer-title-group h3[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.arch-layer-subtitle[b-2o8w505bgf] {
    font-size: 0.8125rem;
    color: #64748b;
}

.arch-layer-icon[b-2o8w505bgf] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.arch-layer-icon .icon[b-2o8w505bgf] {
    width: 22px;
    height: 22px;
}

.arch-layer-icon.cyan[b-2o8w505bgf] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.arch-layer-icon.purple[b-2o8w505bgf] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.arch-layer-icon.green[b-2o8w505bgf] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.arch-layer-icon.red[b-2o8w505bgf] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.arch-layer-icon.gold[b-2o8w505bgf] {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}

.arch-layer-desc[b-2o8w505bgf] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.arch-layer-features[b-2o8w505bgf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.arch-layer-features span[b-2o8w505bgf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: #64748b;
}

.arch-layer-features .icon[b-2o8w505bgf] {
    width: 12px;
    height: 12px;
    color: #10b981;
}

/* ===========================================
   COMPONENTS GRID
   =========================================== */
.arch-components-grid[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.arch-component-card[b-2o8w505bgf] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.arch-component-card:hover[b-2o8w505bgf] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.arch-component-icon[b-2o8w505bgf] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.arch-component-icon .icon[b-2o8w505bgf] {
    width: 26px;
    height: 26px;
}

.arch-component-icon.cyan[b-2o8w505bgf] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.arch-component-icon.gold[b-2o8w505bgf] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.arch-component-icon.purple[b-2o8w505bgf] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.arch-component-card h3[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.arch-component-card > p[b-2o8w505bgf] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.arch-component-features[b-2o8w505bgf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arch-component-features span[b-2o8w505bgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #64748b;
}

.arch-component-features .icon[b-2o8w505bgf] {
    width: 12px;
    height: 12px;
    color: #10b981;
}

/* ===========================================
   COMPARISON SECTION
   =========================================== */
.arch-comparison[b-2o8w505bgf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.arch-comparison-side[b-2o8w505bgf] {
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.arch-comparison-side.diy[b-2o8w505bgf] {
    border-top: 3px solid #ef4444;
}

.arch-comparison-side.slyd[b-2o8w505bgf] {
    border-top: 3px solid #10b981;
}

.arch-comparison-header[b-2o8w505bgf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.arch-comparison-header .icon[b-2o8w505bgf] {
    width: 24px;
    height: 24px;
}

.arch-comparison-side.diy .arch-comparison-header .icon[b-2o8w505bgf] {
    color: #ef4444;
}

.arch-comparison-side.slyd .arch-comparison-header .icon[b-2o8w505bgf] {
    color: #10b981;
}

.arch-comparison-header h3[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.arch-comparison-list[b-2o8w505bgf] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arch-comparison-list li[b-2o8w505bgf] {
    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;
}

.arch-comparison-list li:last-child[b-2o8w505bgf] {
    border-bottom: none;
}

.arch-comparison-list .icon[b-2o8w505bgf] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.arch-comparison-list.negative .icon[b-2o8w505bgf] {
    color: #ef4444;
}

.arch-comparison-list.positive .icon[b-2o8w505bgf] {
    color: #10b981;
}

/* ===========================================
   SPECS TABLE
   =========================================== */
.arch-specs-table[b-2o8w505bgf] {
    max-width: 800px;
    margin: 0 auto;
    overflow-x: auto;
}

.arch-specs-table table[b-2o8w505bgf] {
    width: 100%;
    border-collapse: collapse;
}

.arch-specs-table th[b-2o8w505bgf],
.arch-specs-table td[b-2o8w505bgf] {
    padding: 18px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.arch-specs-table th[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #0a1018;
}

.arch-specs-table td[b-2o8w505bgf] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.arch-specs-table td:first-child[b-2o8w505bgf] {
    font-weight: 500;
    color: #f1f5f9;
}

.arch-specs-table tbody tr:hover td[b-2o8w505bgf] {
    background: rgba(255,255,255,0.02);
}

.arch-status[b-2o8w505bgf] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
}

.arch-status.production[b-2o8w505bgf] {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}

/* ===========================================
   ROADMAP TEASER
   =========================================== */
.arch-roadmap-teaser[b-2o8w505bgf] {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
}

.arch-roadmap-intro[b-2o8w505bgf] {
    text-align: center;
    margin-bottom: 32px;
}

.arch-roadmap-intro p[b-2o8w505bgf] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

.arch-roadmap-items[b-2o8w505bgf] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.arch-roadmap-item[b-2o8w505bgf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.arch-roadmap-item :global(svg)[b-2o8w505bgf] {
    width: 24px;
    height: 24px;
    color: #a78bfa;
    flex-shrink: 0;
    margin-top: 2px;
}

.arch-roadmap-item div[b-2o8w505bgf] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.arch-roadmap-item strong[b-2o8w505bgf] {
    color: #f1f5f9;
}

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

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

.arch-cta-content[b-2o8w505bgf] {
    max-width: 700px;
    margin: 0 auto;
}

.arch-cta-content h2[b-2o8w505bgf] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

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

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

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    .arch-layers-grid[b-2o8w505bgf] {
        grid-template-columns: 1fr;
    }

    .arch-components-grid[b-2o8w505bgf] {
        grid-template-columns: 1fr;
    }

    .arch-comparison[b-2o8w505bgf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .arch-cta .container[b-2o8w505bgf] {
        padding: 0 24px;
    }

    .arch-cta-actions[b-2o8w505bgf] {
        flex-direction: column;
    }

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

    .arch-layer-header[b-2o8w505bgf] {
        flex-wrap: wrap;
    }

    .arch-layer-icon[b-2o8w505bgf] {
        order: -1;
        width: 100%;
        margin-bottom: 16px;
    }

    .arch-layer-number[b-2o8w505bgf] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Platform/Benson.razor.rz.scp.css */
/* ===========================================
   BENSON AI PAGE - SLYD DESIGN SYSTEM
   =========================================== */

/* ===========================================
   HERO SECTION - SPLIT LAYOUT
   =========================================== */
.benson-hero[b-wkpc28lf5y] {
    position: relative;
    min-height: 60vh;
    padding: 140px 0 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.benson-hero[b-wkpc28lf5y]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(6,182,212,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,0.04) 0%, transparent 50%);
    pointer-events: none;
}

.benson-hero-container[b-wkpc28lf5y] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
}

.benson-hero-content[b-wkpc28lf5y] {
    position: relative;
}

.benson-hero-tags[b-wkpc28lf5y] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.benson-hero-tag[b-wkpc28lf5y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #06b6d4;
    padding: 10px 16px;
    background: rgba(6,182,212,0.08);
    border: 1px solid rgba(6,182,212,0.3);
    border-radius: 4px;
    margin-bottom: 0;
}

.benson-hero-tag.benson-coming-soon[b-wkpc28lf5y] {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.benson-hero-tag.benson-coming-soon[b-wkpc28lf5y]::before {
    background: #a78bfa;
}

.benson-launch-note[b-wkpc28lf5y] {
    font-size: 1rem;
    line-height: 1.6;
    color: #a78bfa;
    padding: 16px 20px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    margin-top: 16px;
}

.benson-hero-tag[b-wkpc28lf5y]::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #06b6d4;
    border-radius: 50%;
    animation: benson-pulse-dot-b-wkpc28lf5y 2s ease-in-out infinite;
}

@keyframes benson-pulse-dot-b-wkpc28lf5y {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.benson-hero-headline[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0 0 24px 0;
}

.benson-hero-headline .accent[b-wkpc28lf5y] {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benson-hero-subhead[b-wkpc28lf5y] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 540px;
}

.benson-hero-props[b-wkpc28lf5y] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: 40px;
}

.benson-hero-prop[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.benson-hero-prop .icon[b-wkpc28lf5y] {
    width: 18px;
    height: 18px;
    color: #06b6d4;
}

.benson-hero-actions[b-wkpc28lf5y] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Preview - Chat Interface */
.benson-hero-preview[b-wkpc28lf5y] {
    position: relative;
}

.benson-grid-deco[b-wkpc28lf5y] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(rgba(6,182,212,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,182,212,0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    transform: rotate(15deg);
    pointer-events: none;
}

.benson-chat-card[b-wkpc28lf5y] {
    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);
}

.benson-chat-header[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.benson-chat-title[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.benson-chat-title .icon[b-wkpc28lf5y] {
    width: 18px;
    height: 18px;
    color: #8b5cf6;
}

.benson-chat-status[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #64748b;
}

.status-dot[b-wkpc28lf5y] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: benson-status-pulse-b-wkpc28lf5y 2s ease-in-out infinite;
}

@keyframes benson-status-pulse-b-wkpc28lf5y {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

.benson-chat-body[b-wkpc28lf5y] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-message[b-wkpc28lf5y] {
    padding: 14px 16px;
    border-radius: 12px;
}

.chat-message.user[b-wkpc28lf5y] {
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.2);
    align-self: flex-end;
    max-width: 90%;
}

.chat-message.benson[b-wkpc28lf5y] {
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.15);
    align-self: flex-start;
}

.chat-label[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.chat-message.user .chat-label[b-wkpc28lf5y] {
    color: #06b6d4;
}

.chat-message.benson .chat-label[b-wkpc28lf5y] {
    color: #8b5cf6;
}

.chat-message.benson .chat-label .icon[b-wkpc28lf5y] {
    width: 12px;
    height: 12px;
}

.chat-message p[b-wkpc28lf5y] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
}

.chat-message ul[b-wkpc28lf5y] {
    margin: 10px 0 0 0;
    padding: 0 0 0 16px;
}

.chat-message li[b-wkpc28lf5y] {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.6;
}

.chat-confirm[b-wkpc28lf5y] {
    margin-top: 10px !important;
    font-weight: 500;
    color: #f1f5f9 !important;
}

.benson-chat-input[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #0a1018;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.benson-chat-input input[b-wkpc28lf5y] {
    flex: 1;
    background: transparent;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    color: #64748b;
    outline: none;
}

.benson-chat-input .icon[b-wkpc28lf5y] {
    width: 18px;
    height: 18px;
    color: #475569;
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.benson-opening[b-wkpc28lf5y] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.benson-opening p[b-wkpc28lf5y] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.benson-opening-lead[b-wkpc28lf5y] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    font-weight: 500;
}

.benson-opening-result[b-wkpc28lf5y] {
    font-size: 1.25rem !important;
    color: #f1f5f9 !important;
}

.benson-opening strong[b-wkpc28lf5y] {
    color: #06b6d4;
}

/* ===========================================
   BEFORE/AFTER COMPARISON
   =========================================== */
.benson-before-after[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.benson-before[b-wkpc28lf5y],
.benson-after[b-wkpc28lf5y] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
}

.benson-before[b-wkpc28lf5y] {
    border-top: 3px solid #ef4444;
}

.benson-after[b-wkpc28lf5y] {
    border-top: 3px solid #22c55e;
}

.benson-code-header[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.benson-code-header .icon[b-wkpc28lf5y] {
    width: 20px;
    height: 20px;
}

.benson-before .benson-code-header .icon[b-wkpc28lf5y] {
    color: #ef4444;
}

.benson-after .benson-code-header .icon[b-wkpc28lf5y] {
    color: #22c55e;
}

.benson-code-header h3[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.benson-code-block[b-wkpc28lf5y] {
    padding: 20px 24px;
}

.benson-code-block pre[b-wkpc28lf5y] {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.benson-code-block code[b-wkpc28lf5y] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #94a3b8;
}

.benson-code-block .code-user[b-wkpc28lf5y] {
    color: #06b6d4;
    font-weight: 600;
}

.benson-code-block .code-benson[b-wkpc28lf5y] {
    color: #8b5cf6;
    font-weight: 600;
}

/* ===========================================
   COMMANDS GRID
   =========================================== */
.benson-commands-grid[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.benson-command-card[b-wkpc28lf5y] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.benson-command-card:hover[b-wkpc28lf5y] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.command-say[b-wkpc28lf5y] {
    padding: 20px 24px;
    background: rgba(6,182,212,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.command-do[b-wkpc28lf5y] {
    padding: 20px 24px;
}

.command-label[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.command-say .command-label[b-wkpc28lf5y] {
    color: #06b6d4;
}

.command-do .command-label[b-wkpc28lf5y] {
    color: #8b5cf6;
}

.command-do .command-label .icon[b-wkpc28lf5y] {
    width: 12px;
    height: 12px;
}

.command-say p[b-wkpc28lf5y],
.command-do p[b-wkpc28lf5y] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
}

.command-say p[b-wkpc28lf5y] {
    font-style: italic;
}

/* ===========================================
   COMPARISON TABLE
   =========================================== */
.benson-difference-intro[b-wkpc28lf5y] {
    max-width: 700px;
    margin: 0 auto 48px;
    text-align: center;
}

.benson-difference-intro p[b-wkpc28lf5y] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}

.benson-difference-intro em[b-wkpc28lf5y] {
    font-style: italic;
}

.benson-difference-intro strong[b-wkpc28lf5y] {
    color: #06b6d4;
}

.benson-comparison[b-wkpc28lf5y] {
    max-width: 900px;
    margin: 0 auto;
}

.benson-comparison-table[b-wkpc28lf5y] {
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
}

.comparison-header[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: 1fr 120px 120px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.comparison-header .comparison-col[b-wkpc28lf5y] {
    padding: 18px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.comparison-header .comparison-col.generic[b-wkpc28lf5y] {
    text-align: center;
    color: #94a3b8;
}

.comparison-header .comparison-col.benson-col[b-wkpc28lf5y] {
    text-align: center;
    color: #8b5cf6;
}

.comparison-row[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: 1fr 120px 120px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s ease;
}

.comparison-row:last-child[b-wkpc28lf5y] {
    border-bottom: none;
}

.comparison-row:hover[b-wkpc28lf5y] {
    background: rgba(255,255,255,0.02);
}

.comparison-row .comparison-col[b-wkpc28lf5y] {
    padding: 16px 24px;
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.comparison-row .comparison-col.generic[b-wkpc28lf5y],
.comparison-row .comparison-col.benson-col[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-row .comparison-col .icon[b-wkpc28lf5y] {
    width: 18px;
    height: 18px;
}

.comparison-row .comparison-col.generic .icon[b-wkpc28lf5y] {
    color: #ef4444;
}

.comparison-row .comparison-col.benson-col .icon[b-wkpc28lf5y] {
    color: #22c55e;
}

/* ===========================================
   ARCHITECTURE CARDS
   =========================================== */
.benson-arch-grid[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.benson-arch-card[b-wkpc28lf5y] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benson-arch-card:hover[b-wkpc28lf5y] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.benson-arch-icon[b-wkpc28lf5y] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 24px;
}

.benson-arch-icon .icon[b-wkpc28lf5y] {
    width: 26px;
    height: 26px;
}

.benson-arch-icon.cyan[b-wkpc28lf5y] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.benson-arch-icon.gold[b-wkpc28lf5y] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.benson-arch-icon.purple[b-wkpc28lf5y] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.benson-arch-icon.green[b-wkpc28lf5y] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

.benson-arch-card h3[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.benson-arch-card p[b-wkpc28lf5y] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   CAPABILITIES SPLIT (DOES / DOESN'T)
   =========================================== */
.benson-capabilities-split[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.benson-does[b-wkpc28lf5y],
.benson-doesnt[b-wkpc28lf5y] {
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.benson-does[b-wkpc28lf5y] {
    border-top: 3px solid #22c55e;
}

.benson-doesnt[b-wkpc28lf5y] {
    border-top: 3px solid #ef4444;
}

.benson-does h3[b-wkpc28lf5y],
.benson-doesnt h3[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 24px 0;
}

.benson-does h3 .icon[b-wkpc28lf5y] {
    width: 22px;
    height: 22px;
    color: #22c55e;
}

.benson-doesnt h3 .icon[b-wkpc28lf5y] {
    width: 22px;
    height: 22px;
    color: #ef4444;
}

.capabilities-list[b-wkpc28lf5y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.capability-item[b-wkpc28lf5y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

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

.capability-name[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.capability-desc[b-wkpc28lf5y] {
    font-size: 0.8125rem;
    color: #64748b;
}

.doesnt-intro[b-wkpc28lf5y] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.doesnt-list[b-wkpc28lf5y] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.doesnt-list li[b-wkpc28lf5y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.doesnt-list .icon[b-wkpc28lf5y] {
    width: 14px;
    height: 14px;
    color: #ef4444;
    flex-shrink: 0;
}

.doesnt-focus[b-wkpc28lf5y] {
    font-size: 0.9375rem;
    margin: 0;
}

.doesnt-focus strong[b-wkpc28lf5y] {
    color: #f1f5f9;
}

/* ===========================================
   ROLES GRID
   =========================================== */
.benson-roles-grid[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.benson-role-card[b-wkpc28lf5y] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benson-role-card:hover[b-wkpc28lf5y] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

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

.role-icon[b-wkpc28lf5y] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.role-icon .icon[b-wkpc28lf5y] {
    width: 22px;
    height: 22px;
}

.role-icon.cyan[b-wkpc28lf5y] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.role-icon.gold[b-wkpc28lf5y] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.role-icon.purple[b-wkpc28lf5y] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.role-header h3[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.role-example[b-wkpc28lf5y] {
    padding: 16px;
    background: rgba(6,182,212,0.04);
    border: 1px solid rgba(6,182,212,0.1);
    border-radius: 10px;
    margin-bottom: 16px;
}

.role-command[b-wkpc28lf5y] {
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.5;
    color: #06b6d4;
    margin: 0;
}

.role-result[b-wkpc28lf5y] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   SECURITY GRID
   =========================================== */
.benson-security-grid[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.security-item[b-wkpc28lf5y] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.security-item:hover[b-wkpc28lf5y] {
    border-color: rgba(6,182,212,0.2);
}

.security-icon[b-wkpc28lf5y] {
    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;
}

.security-icon .icon[b-wkpc28lf5y] {
    width: 22px;
    height: 22px;
    color: #06b6d4;
}

.security-content h4[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 6px 0;
}

.security-content p[b-wkpc28lf5y] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

.security-summary[b-wkpc28lf5y] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.security-summary p[b-wkpc28lf5y] {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #f1f5f9;
    margin: 0;
}

.security-summary strong[b-wkpc28lf5y] {
    color: #06b6d4;
}

/* ===========================================
   VALUE GRID
   =========================================== */
.benson-value-grid[b-wkpc28lf5y] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.value-card[b-wkpc28lf5y] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.value-card:hover[b-wkpc28lf5y] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.value-icon[b-wkpc28lf5y] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin: 0 auto 24px;
}

.value-icon .icon[b-wkpc28lf5y] {
    width: 28px;
    height: 28px;
}

.value-icon.cyan[b-wkpc28lf5y] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.value-icon.gold[b-wkpc28lf5y] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.value-icon.purple[b-wkpc28lf5y] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.value-icon.green[b-wkpc28lf5y] {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

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

.value-card p[b-wkpc28lf5y] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.benson-cta[b-wkpc28lf5y] {
    position: relative;
    padding: 120px 0;
    text-align: center;
    background: linear-gradient(180deg, #0a1018 0%, #050a12 100%);
}

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

.benson-cta-content[b-wkpc28lf5y] {
    max-width: 700px;
    margin: 0 auto;
}

.benson-cta-content h2[b-wkpc28lf5y] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

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

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

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .benson-hero-container[b-wkpc28lf5y] {
        gap: 48px;
    }

    .benson-value-grid[b-wkpc28lf5y] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .benson-hero-container[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .benson-hero-content[b-wkpc28lf5y] {
        max-width: 600px;
        margin: 0 auto;
    }

    .benson-hero-subhead[b-wkpc28lf5y] {
        margin-left: auto;
        margin-right: auto;
    }

    .benson-hero-props[b-wkpc28lf5y] {
        justify-content: center;
    }

    .benson-hero-actions[b-wkpc28lf5y] {
        justify-content: center;
    }

    .benson-hero-preview[b-wkpc28lf5y] {
        max-width: 480px;
        margin: 0 auto;
    }

    .benson-grid-deco[b-wkpc28lf5y] {
        display: none;
    }

    .benson-before-after[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }

    .benson-commands-grid[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }

    .benson-arch-grid[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }

    .benson-capabilities-split[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }

    .benson-roles-grid[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }

    .benson-security-grid[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .benson-hero[b-wkpc28lf5y] {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .benson-hero-container[b-wkpc28lf5y],
    .benson-cta .container[b-wkpc28lf5y] {
        padding: 0 24px;
    }

    .benson-hero-headline[b-wkpc28lf5y] {
        font-size: 2.25rem;
    }

    .benson-hero-actions[b-wkpc28lf5y],
    .benson-cta-actions[b-wkpc28lf5y] {
        flex-direction: column;
    }

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

    .comparison-header[b-wkpc28lf5y],
    .comparison-row[b-wkpc28lf5y] {
        grid-template-columns: 1fr 80px 80px;
    }

    .comparison-header .comparison-col[b-wkpc28lf5y],
    .comparison-row .comparison-col[b-wkpc28lf5y] {
        padding: 14px 12px;
        font-size: 0.8125rem;
    }

    .benson-value-grid[b-wkpc28lf5y] {
        grid-template-columns: 1fr;
    }

    .benson-does[b-wkpc28lf5y],
    .benson-doesnt[b-wkpc28lf5y] {
        padding: 28px;
    }

    .benson-role-card[b-wkpc28lf5y] {
        padding: 24px;
    }

    .security-item[b-wkpc28lf5y] {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .benson-hero-props[b-wkpc28lf5y] {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .benson-chat-card[b-wkpc28lf5y] {
        font-size: 0.875rem;
    }

    .comparison-header[b-wkpc28lf5y],
    .comparison-row[b-wkpc28lf5y] {
        grid-template-columns: 1fr 60px 60px;
    }

    .comparison-header .comparison-col:first-child[b-wkpc28lf5y],
    .comparison-row .comparison-col:first-child[b-wkpc28lf5y] {
        font-size: 0.75rem;
    }
}
/* /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 CARD (Governance Dashboard)
   =========================================== */

.gov-preview-card[b-gsatoie6tq] {
    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);
}

.gov-preview-header[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gov-preview-title[b-gsatoie6tq] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.gov-preview-title :deep(.icon)[b-gsatoie6tq] {
    width: 16px;
    height: 16px;
    color: #06b6d4;
}

.gov-preview-badge[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.gov-preview-content[b-gsatoie6tq] {
    padding: 20px;
}

/* Compliance Score Metric */
.gov-preview-metric[b-gsatoie6tq] {
    margin-bottom: 20px;
}

.gov-metric-label[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.gov-metric-value[b-gsatoie6tq] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 8px;
}

.gov-metric-bar[b-gsatoie6tq] {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.gov-metric-fill[b-gsatoie6tq] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Recent Actions */
.gov-preview-actions[b-gsatoie6tq] {
    margin-bottom: 20px;
}

.gov-action-row[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.8125rem;
}

.gov-action-row:last-child[b-gsatoie6tq] {
    margin-bottom: 0;
}

.gov-action-row :deep(.icon)[b-gsatoie6tq] {
    width: 14px;
    height: 14px;
}

.gov-action-row.success :deep(.icon)[b-gsatoie6tq] {
    color: #10b981;
}

.gov-action-row.blocked :deep(.icon)[b-gsatoie6tq] {
    color: #ef4444;
}

.gov-action-row.warning :deep(.icon)[b-gsatoie6tq] {
    color: #f59e0b;
}

.gov-action-text[b-gsatoie6tq] {
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gov-action-time[b-gsatoie6tq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: #475569;
}

/* Preview Stats */
.gov-preview-stats[b-gsatoie6tq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gov-stat[b-gsatoie6tq] {
    text-align: center;
    padding: 12px 8px;
    background: #0a1018;
    border-radius: 8px;
}

.gov-stat-value[b-gsatoie6tq] {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.gov-stat-label[b-gsatoie6tq] {
    font-size: 0.6875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ===========================================
   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);
}

/* ===========================================
   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;
    }

    .gov-preview-stats[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 OVERVIEW PAGE - SCOPED STYLES
   CSS Prefix: plat-
   Note: Most styles are in wwwroot/css/platform.css
   This file contains additional styles for new sections
   =========================================== */

/* ===========================================
   HERO PREVIEW - NAV CARDS
   =========================================== */
.plat-nav-cards[b-vyt28y3yxr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plat-nav-card[b-vyt28y3yxr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.plat-nav-card:hover[b-vyt28y3yxr] {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateX(8px);
}

.plat-nav-icon[b-vyt28y3yxr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 10px;
    flex-shrink: 0;
}

.plat-nav-icon :global(svg)[b-vyt28y3yxr] {
    width: 24px;
    height: 24px;
    color: #06b6d4;
}

.plat-nav-icon.secondary[b-vyt28y3yxr] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

.plat-nav-icon.secondary :global(svg)[b-vyt28y3yxr] {
    color: #8b5cf6;
}

.plat-nav-icon.tertiary[b-vyt28y3yxr] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

.plat-nav-icon.tertiary :global(svg)[b-vyt28y3yxr] {
    color: #22c55e;
}

.plat-nav-icon.quaternary[b-vyt28y3yxr] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.plat-nav-icon.quaternary :global(svg)[b-vyt28y3yxr] {
    color: #f59e0b;
}

.plat-nav-content[b-vyt28y3yxr] {
    flex: 1;
}

.plat-nav-content h4[b-vyt28y3yxr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.plat-nav-content p[b-vyt28y3yxr] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.plat-nav-card :global(.plat-nav-arrow)[b-vyt28y3yxr] {
    width: 16px;
    height: 16px;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.plat-nav-card:hover :global(.plat-nav-arrow)[b-vyt28y3yxr] {
    color: #06b6d4;
    transform: translateX(4px);
}

/* Responsive for nav cards */
@media (max-width: 1024px) {
    .plat-nav-cards[b-vyt28y3yxr] {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .plat-nav-card[b-vyt28y3yxr] {
        padding: 16px 20px;
    }

    .plat-nav-icon[b-vyt28y3yxr] {
        width: 40px;
        height: 40px;
    }

    .plat-nav-icon :global(svg)[b-vyt28y3yxr] {
        width: 20px;
        height: 20px;
    }

    .plat-nav-content h4[b-vyt28y3yxr] {
        font-size: 0.9375rem;
    }

    .plat-nav-content p[b-vyt28y3yxr] {
        font-size: 0.75rem;
    }
}

/* ===========================================
   HARDWARE PARTNERS SECTION
   =========================================== */
.plat-partners-grid[b-vyt28y3yxr] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.plat-partner-card[b-vyt28y3yxr] {
    padding: 32px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.plat-partner-logos[b-vyt28y3yxr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 48px;
}

.plat-partner-name[b-vyt28y3yxr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #94a3b8;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.plat-partner-name:hover[b-vyt28y3yxr] {
    color: #f1f5f9;
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

.plat-gpu-grid[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.plat-gpu-category[b-vyt28y3yxr] {
    padding: 24px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    text-align: center;
}

.plat-gpu-category h4[b-vyt28y3yxr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

.plat-gpu-list[b-vyt28y3yxr] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.plat-gpu-list span[b-vyt28y3yxr] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    color: #06b6d4;
    padding: 8px 16px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 6px;
}

.plat-hardware-cta[b-vyt28y3yxr] {
    text-align: center;
    margin-top: 40px;
}

/* ===========================================
   COMING SOON LABEL
   =========================================== */
.component-label.coming-soon[b-vyt28y3yxr] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ===========================================
   PLATFORM ROADMAP SECTION
   =========================================== */
.roadmap-grid[b-vyt28y3yxr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.roadmap-quarter[b-vyt28y3yxr] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.roadmap-quarter-header[b-vyt28y3yxr] {
    padding: 16px 24px;
    background: rgba(6, 182, 212, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.roadmap-quarter-label[b-vyt28y3yxr] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: #06b6d4;
    letter-spacing: 0.05em;
}

.roadmap-items[b-vyt28y3yxr] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.roadmap-item[b-vyt28y3yxr] {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.roadmap-item-header[b-vyt28y3yxr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.roadmap-item-header :global(svg)[b-vyt28y3yxr] {
    width: 20px;
    height: 20px;
    color: #06b6d4;
}

.roadmap-item-header h4[b-vyt28y3yxr] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.roadmap-item p[b-vyt28y3yxr] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

.roadmap-item-list[b-vyt28y3yxr] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roadmap-item-list li[b-vyt28y3yxr] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
}

.roadmap-item-list li strong[b-vyt28y3yxr] {
    color: #cbd5e1;
}

/* ===========================================
   COMPARISON TABLE ENHANCEMENTS
   =========================================== */
.comparison-table tbody td strong[b-vyt28y3yxr] {
    color: #10b981;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .plat-partner-logos[b-vyt28y3yxr] {
        gap: 16px 24px;
    }

    .plat-partner-name[b-vyt28y3yxr] {
        font-size: 0.9375rem;
        padding: 10px 18px;
    }

    .plat-gpu-grid[b-vyt28y3yxr] {
        grid-template-columns: 1fr;
    }

    .plat-gpu-list span[b-vyt28y3yxr] {
        font-size: 0.8125rem;
        padding: 6px 12px;
    }

    .roadmap-grid[b-vyt28y3yxr] {
        grid-template-columns: 1fr;
    }

    .roadmap-items[b-vyt28y3yxr] {
        padding: 20px;
    }

    .roadmap-item-header h4[b-vyt28y3yxr] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .plat-partner-logos[b-vyt28y3yxr] {
        flex-direction: column;
        align-items: center;
    }

    .plat-partner-name[b-vyt28y3yxr] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/Platform/Security.razor.rz.scp.css */
/* ===========================================
   SECURITY PAGE - SLYD DESIGN SYSTEM
   CSS Prefix: sec-
   Page-specific styles (hero/section provided by generic CSS)
   =========================================== */

/* ===========================================
   HERO PREVIEW CARD (page-specific content)
   =========================================== */
.sec-preview-card[b-nviiqetz3k] {
    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);
}

.sec-preview-header[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0a1018;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-preview-title[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.sec-preview-title :global(.icon)[b-nviiqetz3k] {
    width: 16px;
    height: 16px;
    color: #10b981;
}

.sec-preview-badge[b-nviiqetz3k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.sec-preview-layers[b-nviiqetz3k] {
    padding: 16px;
}

.sec-layer-row[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.sec-layer-row:last-child[b-nviiqetz3k] {
    margin-bottom: 0;
}

.sec-layer-row.active[b-nviiqetz3k] {
    border-color: rgba(16,185,129,0.2);
    background: rgba(16,185,129,0.04);
}

.sec-layer-indicator[b-nviiqetz3k] {
    width: 4px;
    height: 24px;
    border-radius: 2px;
}

.sec-layer-indicator.green[b-nviiqetz3k] {
    background: #10b981;
}

.sec-layer-indicator.cyan[b-nviiqetz3k] {
    background: #06b6d4;
}

.sec-layer-name[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f1f5f9;
}

.sec-layer-status :global(.icon)[b-nviiqetz3k] {
    width: 16px;
    height: 16px;
    color: #10b981;
}

.sec-preview-footer[b-nviiqetz3k] {
    padding: 16px 20px;
    background: #0a1018;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.sec-compliance-badges[b-nviiqetz3k] {
    display: flex;
    gap: 8px;
}

.sec-badge[b-nviiqetz3k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(6,182,212,0.2);
}

/* ===========================================
   OPENING STATEMENT
   =========================================== */
.sec-opening[b-nviiqetz3k] {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.sec-opening p[b-nviiqetz3k] {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.sec-opening-lead[b-nviiqetz3k] {
    font-size: 1.375rem !important;
    color: #f1f5f9 !important;
    font-weight: 500;
}

.sec-opening-emphasis[b-nviiqetz3k] {
    font-size: 1.375rem !important;
    color: #06b6d4 !important;
    font-weight: 600;
    font-style: italic;
    margin-top: 32px !important;
}

.sec-opening strong[b-nviiqetz3k] {
    color: #06b6d4;
}

/* ===========================================
   FEATURE CARDS GRID (Zero-Trust)
   =========================================== */
.sec-features-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.sec-feature-card[b-nviiqetz3k] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.sec-feature-card:hover[b-nviiqetz3k] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.sec-feature-icon[b-nviiqetz3k] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}

.sec-feature-icon :global(.icon)[b-nviiqetz3k] {
    width: 22px;
    height: 22px;
}

.sec-feature-icon.cyan[b-nviiqetz3k] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.sec-feature-icon.purple[b-nviiqetz3k] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.sec-feature-icon.green[b-nviiqetz3k] {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}

.sec-feature-icon.gold[b-nviiqetz3k] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.sec-feature-card h3[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.sec-feature-card p[b-nviiqetz3k] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   ZERO-TRUST FLOW
   =========================================== */
.sec-flow-section[b-nviiqetz3k] {
    max-width: 700px;
    margin: 0 auto;
    padding: 48px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}

.sec-flow-title[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    text-align: center;
    margin: 0 0 8px 0;
}

.sec-flow-desc[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
    text-align: center;
    margin: 0 0 32px 0;
}

.sec-flow-steps[b-nviiqetz3k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sec-flow-step[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sec-flow-step:hover[b-nviiqetz3k] {
    border-color: rgba(6,182,212,0.2);
    background: rgba(6,182,212,0.04);
}

.sec-step-number[b-nviiqetz3k] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.sec-step-label[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #cbd5e1;
}

.sec-flow-emphasis[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #10b981;
    text-align: center;
    margin: 32px 0 0 0;
}

/* ===========================================
   ENCRYPTION TABLE
   =========================================== */
.sec-encryption-table-wrapper[b-nviiqetz3k] {
    max-width: 700px;
    margin: 0 auto 48px;
    overflow-x: auto;
}

.sec-encryption-table[b-nviiqetz3k] {
    width: 100%;
    border-collapse: collapse;
    background: #0f1620;
    border-radius: 12px;
    overflow: hidden;
}

.sec-encryption-table th[b-nviiqetz3k],
.sec-encryption-table td[b-nviiqetz3k] {
    padding: 18px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-encryption-table th[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #0a1018;
}

.sec-encryption-table td[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.sec-encryption-table tbody tr:last-child td[b-nviiqetz3k] {
    border-bottom: none;
}

.sec-encryption-table tbody tr:hover td[b-nviiqetz3k] {
    background: rgba(255,255,255,0.02);
}

.sec-data-state[b-nviiqetz3k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #06b6d4;
}

/* ===========================================
   DATA CARDS
   =========================================== */
.sec-data-cards[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 48px;
}

.sec-data-card[b-nviiqetz3k] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.sec-data-card:hover[b-nviiqetz3k] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.sec-data-icon[b-nviiqetz3k] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}

.sec-data-icon :global(.icon)[b-nviiqetz3k] {
    width: 24px;
    height: 24px;
}

.sec-data-icon.cyan[b-nviiqetz3k] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.sec-data-icon.purple[b-nviiqetz3k] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.sec-data-card h3[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 12px 0;
}

.sec-data-card p[b-nviiqetz3k] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

.sec-data-emphasis[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #10b981;
    text-align: center;
    margin: 0;
}

/* ===========================================
   ACCESS CONTROL
   =========================================== */
.sec-access-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 64px;
}

.sec-access-card[b-nviiqetz3k] {
    padding: 24px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-align: center;
}

.sec-access-card.highlight[b-nviiqetz3k] {
    border-color: rgba(245,158,11,0.3);
    background: linear-gradient(135deg, rgba(245,158,11,0.04) 0%, #0f1620 100%);
}

.sec-access-card h4[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.sec-role-list[b-nviiqetz3k] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sec-role-list li[b-nviiqetz3k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: #94a3b8;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-role-list li:last-child[b-nviiqetz3k] {
    border-bottom: none;
}

.sec-custom-desc[b-nviiqetz3k] {
    font-size: 0.875rem;
    color: #f59e0b;
    margin: 0;
}

/* Identity Section */
.sec-identity-section[b-nviiqetz3k] {
    max-width: 900px;
    margin: 0 auto 48px;
    text-align: center;
}

.sec-identity-title[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.sec-identity-desc[b-nviiqetz3k] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0 0 32px 0;
}

.sec-identity-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sec-identity-item[b-nviiqetz3k] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: left;
}

.sec-identity-item :global(.icon)[b-nviiqetz3k] {
    width: 16px;
    height: 16px;
    color: #10b981;
    flex-shrink: 0;
    margin-top: 2px;
}

.sec-identity-item div[b-nviiqetz3k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sec-identity-item strong[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.sec-identity-item span[b-nviiqetz3k] {
    font-size: 0.8125rem;
    color: #64748b;
}

/* JIT Section */
.sec-jit-section[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
    padding: 28px 32px;
    background: #0f1620;
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 12px;
}

.sec-jit-icon[b-nviiqetz3k] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.sec-jit-icon :global(.icon)[b-nviiqetz3k] {
    width: 26px;
    height: 26px;
}

.sec-jit-icon.gold[b-nviiqetz3k] {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.sec-jit-content h4[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.sec-jit-content p[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   AUDIT & LOGGING
   =========================================== */
.sec-audit-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto 48px;
}

.sec-audit-context[b-nviiqetz3k] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.sec-context-item[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-context-item:last-child[b-nviiqetz3k] {
    border-bottom: none;
}

.sec-context-label[b-nviiqetz3k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #06b6d4;
    width: 60px;
    flex-shrink: 0;
}

.sec-context-value[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.sec-audit-features[b-nviiqetz3k] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.sec-audit-features h4[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.sec-audit-features > p[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.sec-integrity-list[b-nviiqetz3k] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sec-integrity-list li[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.sec-integrity-list :global(.icon)[b-nviiqetz3k] {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
}

.sec-integrity-list strong[b-nviiqetz3k] {
    color: #f1f5f9;
}

/* Alerting Card */
.sec-alerting-card[b-nviiqetz3k] {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
    padding: 28px 32px;
    background: #0f1620;
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 12px;
}

.sec-alerting-icon[b-nviiqetz3k] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.sec-alerting-icon :global(.icon)[b-nviiqetz3k] {
    width: 26px;
    height: 26px;
}

.sec-alerting-icon.red[b-nviiqetz3k] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.sec-alerting-content h4[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.sec-alerting-content p[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
}

/* ===========================================
   CONFIDENTIAL COMPUTING
   =========================================== */
.sec-confidential-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sec-confidential-card[b-nviiqetz3k] {
    padding: 32px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.sec-confidential-icon[b-nviiqetz3k] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
}

.sec-confidential-icon :global(.icon)[b-nviiqetz3k] {
    width: 24px;
    height: 24px;
}

.sec-confidential-icon.cyan[b-nviiqetz3k] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.sec-confidential-icon.purple[b-nviiqetz3k] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.sec-confidential-card h3[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

.sec-confidential-card > p[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 16px 0;
}

.sec-tee-list[b-nviiqetz3k],
.sec-certified-list[b-nviiqetz3k] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sec-tee-list li[b-nviiqetz3k],
.sec-certified-list li[b-nviiqetz3k] {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 0.9375rem;
    color: #94a3b8;
}

.sec-tee-list li[b-nviiqetz3k]::before,
.sec-certified-list li[b-nviiqetz3k]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #06b6d4;
    border-radius: 50%;
}

.sec-certified-note[b-nviiqetz3k] {
    font-size: 0.875rem;
    color: #64748b;
    font-style: italic;
    margin-top: 16px !important;
}

/* ===========================================
   COMPLIANCE FRAMEWORKS
   =========================================== */
.sec-compliance-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sec-compliance-card[b-nviiqetz3k] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.sec-compliance-card:hover[b-nviiqetz3k] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.sec-compliance-header[b-nviiqetz3k] {
    margin-bottom: 20px;
}

.sec-compliance-name[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #06b6d4;
}

.sec-compliance-list[b-nviiqetz3k] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sec-compliance-list li[b-nviiqetz3k] {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 0.875rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-compliance-list li:last-child[b-nviiqetz3k] {
    border-bottom: none;
}

.sec-compliance-list li[b-nviiqetz3k]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
}

/* ===========================================
   COMPLIANCE AUTOMATION
   =========================================== */
.sec-automation-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.sec-automation-card[b-nviiqetz3k] {
    padding: 28px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

.sec-automation-card:hover[b-nviiqetz3k] {
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.sec-automation-icon[b-nviiqetz3k] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin: 0 auto 20px;
}

.sec-automation-icon :global(.icon)[b-nviiqetz3k] {
    width: 24px;
    height: 24px;
}

.sec-automation-icon.cyan[b-nviiqetz3k] {
    background: rgba(6,182,212,0.1);
    color: #06b6d4;
}

.sec-automation-icon.red[b-nviiqetz3k] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.sec-automation-icon.purple[b-nviiqetz3k] {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}

.sec-automation-icon.green[b-nviiqetz3k] {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}

.sec-automation-card h4[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px 0;
}

.sec-automation-card p[b-nviiqetz3k] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
}

/* Evidence Section */
.sec-evidence-section[b-nviiqetz3k] {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: #0f1620;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.sec-evidence-title[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    text-align: center;
    margin: 0 0 8px 0;
}

.sec-evidence-desc[b-nviiqetz3k] {
    font-size: 1rem;
    color: #94a3b8;
    text-align: center;
    margin: 0 0 32px 0;
}

.sec-evidence-grid[b-nviiqetz3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sec-evidence-item[b-nviiqetz3k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #0a1018;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    text-align: center;
}

.sec-evidence-item :global(.icon)[b-nviiqetz3k] {
    width: 24px;
    height: 24px;
    color: #06b6d4;
}

.sec-evidence-item span[b-nviiqetz3k] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ===========================================
   COMPARISON TABLE
   =========================================== */
.sec-comparison-table-wrapper[b-nviiqetz3k] {
    max-width: 900px;
    margin: 0 auto 48px;
    overflow-x: auto;
}

.sec-comparison-table[b-nviiqetz3k] {
    width: 100%;
    border-collapse: collapse;
    background: #0f1620;
    border-radius: 14px;
    overflow: hidden;
}

.sec-comparison-table th[b-nviiqetz3k],
.sec-comparison-table td[b-nviiqetz3k] {
    padding: 20px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sec-comparison-table th[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: #64748b;
    background: #0a1018;
}

.sec-comparison-table th.negative[b-nviiqetz3k] {
    color: #ef4444;
}

.sec-comparison-table th.positive[b-nviiqetz3k] {
    color: #10b981;
}

.sec-comparison-table td[b-nviiqetz3k] {
    font-size: 0.9375rem;
    color: #94a3b8;
}

.sec-comparison-table td:first-child[b-nviiqetz3k] {
    font-weight: 600;
    color: #f1f5f9;
}

.sec-comparison-table tbody tr:last-child td[b-nviiqetz3k] {
    border-bottom: none;
}

.sec-comparison-table tbody tr:hover td[b-nviiqetz3k] {
    background: rgba(255,255,255,0.02);
}

.sec-comparison-emphasis[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: #10b981;
    text-align: center;
    margin: 0;
}

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

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

.sec-cta-content[b-nviiqetz3k] {
    max-width: 700px;
    margin: 0 auto;
}

.sec-cta-content h2[b-nviiqetz3k] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 16px 0;
}

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

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

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

    .sec-access-grid[b-nviiqetz3k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sec-identity-grid[b-nviiqetz3k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sec-compliance-grid[b-nviiqetz3k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sec-automation-grid[b-nviiqetz3k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sec-evidence-grid[b-nviiqetz3k] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .sec-confidential-grid[b-nviiqetz3k] {
        grid-template-columns: 1fr;
    }

    .sec-audit-grid[b-nviiqetz3k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sec-cta .container[b-nviiqetz3k] {
        padding: 0 24px;
    }

    .sec-cta-actions[b-nviiqetz3k] {
        flex-direction: column;
    }

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

    .sec-features-grid[b-nviiqetz3k],
    .sec-access-grid[b-nviiqetz3k],
    .sec-identity-grid[b-nviiqetz3k],
    .sec-compliance-grid[b-nviiqetz3k],
    .sec-automation-grid[b-nviiqetz3k],
    .sec-evidence-grid[b-nviiqetz3k] {
        grid-template-columns: 1fr;
    }

    .sec-data-cards[b-nviiqetz3k] {
        grid-template-columns: 1fr;
    }

    .sec-jit-section[b-nviiqetz3k],
    .sec-alerting-card[b-nviiqetz3k] {
        flex-direction: column;
        text-align: center;
    }

    .sec-jit-section[b-nviiqetz3k],
    .sec-alerting-card[b-nviiqetz3k] {
        padding: 24px;
    }

    .sec-flow-section[b-nviiqetz3k] {
        padding: 24px;
    }

    .sec-evidence-section[b-nviiqetz3k] {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .sec-preview-card[b-nviiqetz3k] {
        margin: 0 -8px;
    }

    .sec-compliance-badges[b-nviiqetz3k] {
        flex-wrap: wrap;
    }
}
/* /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);
}

/* ================================================================
   FAQ Section
   ================================================================ */
.faq-container[b-7trekbwr2a] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item[b-7trekbwr2a] {
    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;
}

.faq-item:hover[b-7trekbwr2a] {
    border-color: rgba(99, 102, 241, 0.3);
}

.faq-item[open][b-7trekbwr2a] {
    border-color: rgba(99, 102, 241, 0.4);
}

.faq-question[b-7trekbwr2a] {
    padding: 24px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.faq-question[b-7trekbwr2a]::-webkit-details-marker {
    display: none;
}

.faq-question[b-7trekbwr2a]::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(248, 250, 252, 0.5);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question[b-7trekbwr2a]::after {
    transform: rotate(45deg);
}

.faq-question:hover[b-7trekbwr2a] {
    background: rgba(99, 102, 241, 0.05);
}

.faq-answer[b-7trekbwr2a] {
    padding: 0 28px 24px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
}

.faq-answer p[b-7trekbwr2a] {
    margin: 0;
}

/* ================================================================
   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;
    }

    .faq-question[b-7trekbwr2a] {
        padding: 20px;
        font-size: 1rem;
    }

    .faq-answer[b-7trekbwr2a] {
        padding: 0 20px 20px;
    }
}
/* /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;
}

/* ============================================
   FAQ Section
   ============================================ */
.power-faq-container[b-0qo7rch77w] {
    max-width: 900px;
    margin: 0 auto;
}

.power-faq-item[b-0qo7rch77w] {
    background: var(--power-bg-card);
    border: 1px solid var(--power-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.power-faq-item:hover[b-0qo7rch77w] {
    border-color: var(--power-border-hover);
}

.power-faq-item[open][b-0qo7rch77w] {
    border-color: var(--power-primary);
}

.power-faq-question[b-0qo7rch77w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    color: var(--power-text);
    font-weight: 500;
    font-size: 1.05rem;
    list-style: none;
}

.power-faq-question[b-0qo7rch77w]::-webkit-details-marker {
    display: none;
}

.power-faq-question span[b-0qo7rch77w] {
    flex: 1;
    padding-right: 1rem;
}

.power-faq-icon[b-0qo7rch77w] {
    color: var(--power-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.power-faq-item[open] .power-faq-icon[b-0qo7rch77w] {
    transform: rotate(180deg);
}

.power-faq-answer[b-0qo7rch77w] {
    padding: 0 1.5rem 1.5rem;
}

.power-faq-answer p[b-0qo7rch77w] {
    color: var(--power-text-muted);
    line-height: 1.7;
}

/* ============================================
   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-faq-question[b-0qo7rch77w] {
        font-size: 0.95rem;
        padding: 1rem;
    }

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

/* ================================================================
   FAQ Section
   ================================================================ */
.faq-container[b-vomardve1l] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item[b-vomardve1l] {
    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;
}

.faq-item:hover[b-vomardve1l] {
    border-color: rgba(99, 102, 241, 0.3);
}

.faq-item[open][b-vomardve1l] {
    border-color: rgba(99, 102, 241, 0.4);
}

.faq-question[b-vomardve1l] {
    padding: 24px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.faq-question[b-vomardve1l]::-webkit-details-marker {
    display: none;
}

.faq-question[b-vomardve1l]::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(248, 250, 252, 0.5);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question[b-vomardve1l]::after {
    transform: rotate(45deg);
}

.faq-question:hover[b-vomardve1l] {
    background: rgba(99, 102, 241, 0.05);
}

.faq-answer[b-vomardve1l] {
    padding: 0 28px 24px;
    font-size: 0.95rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.7;
}

.faq-answer p[b-vomardve1l] {
    margin: 0 0 16px;
}

.faq-answer p:last-child[b-vomardve1l] {
    margin-bottom: 0;
}

.faq-answer ul[b-vomardve1l] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.faq-answer li[b-vomardve1l] {
    position: relative;
    padding: 8px 0 8px 24px;
}

.faq-answer li[b-vomardve1l]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--secondary);
}

/* ================================================================
   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;
    }

    .faq-question[b-vomardve1l] {
        padding: 20px;
        font-size: 1rem;
    }

    .faq-answer[b-vomardve1l] {
        padding: 0 20px 20px;
    }

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

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.faq-container[b-myz0kb2ji1] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item[b-myz0kb2ji1] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--tco-border-subtle);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover[b-myz0kb2ji1] {
    border-color: var(--tco-border-medium);
}

.faq-item[open][b-myz0kb2ji1] {
    border-color: var(--tco-primary);
}

.faq-question[b-myz0kb2ji1] {
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tco-text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    list-style: none;
}

.faq-question[b-myz0kb2ji1]::-webkit-details-marker {
    display: none;
}

.faq-question[b-myz0kb2ji1]::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--tco-primary);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-question[b-myz0kb2ji1]::after {
    content: '-';
}

.faq-item[open] .faq-question[b-myz0kb2ji1] {
    background: rgba(16, 185, 129, 0.1);
    border-bottom: 1px solid var(--tco-border-subtle);
}

.faq-answer[b-myz0kb2ji1] {
    padding: 1.5rem;
    font-size: 0.95rem;
    color: var(--tco-text-secondary);
    line-height: 1.7;
}

.faq-answer p[b-myz0kb2ji1] {
    margin-bottom: 1rem;
}

.faq-answer p:last-child[b-myz0kb2ji1] {
    margin-bottom: 0;
}

.faq-answer ul[b-myz0kb2ji1] {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.faq-answer li[b-myz0kb2ji1] {
    margin-bottom: 0.5rem;
}

.faq-answer strong[b-myz0kb2ji1] {
    color: var(--tco-text-primary);
}

/* ==========================================================================
   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;
    }

    .faq-question[b-myz0kb2ji1] {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .faq-answer[b-myz0kb2ji1] {
        padding: 1rem;
    }
}

/* ==========================================================================
   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 */
.faq-question:focus[b-myz0kb2ji1],
.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],
    .faq-item[b-myz0kb2ji1] {
        border-width: 2px;
    }

    .breakdown-row.total[b-myz0kb2ji1],
    .faq-item[open] .faq-question[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(4, 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;
}

.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: 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/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/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] {
    --hero-gradient: linear-gradient(180deg, #020617 0%, #0a1628 100%);
    --hero-glow: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139, 92, 246, 0.08) 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, #f59e0b);
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    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, #8b5cf6);
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-family: 'JetBrains Mono', monospace;
    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: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    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, #f59e0b);
    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.7;
    color: #94a3b8;
    margin: 0 0 32px 0;
    max-width: 540px;
}

.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 */
.hero-grid-deco[b-8lbih6624m] {
    --deco-color: var(--hero-accent-color, #f59e0b);
    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/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;
}