@import '_content/BWE.AboutUs/BWE.AboutUs.vlhujyea5h.bundle.scp.css';
@import '_content/BWE.AIAgents/BWE.AIAgents.l5s8b749fr.bundle.scp.css';
@import '_content/BWE.BlogUpdates/BWE.BlogUpdates.9teg72u01v.bundle.scp.css';
@import '_content/BWE.CaseStudies/BWE.CaseStudies.apmp5vzquh.bundle.scp.css';
@import '_content/BWE.ConfirmationToast/BWE.ConfirmationToast.flhsm57u0i.bundle.scp.css';
@import '_content/BWE.Contact/BWE.Contact.ia01agvwf4.bundle.scp.css';
@import '_content/BWE.CookieConsent/BWE.CookieConsent.r4uizhip54.bundle.scp.css';
@import '_content/BWE.DesktopMenu/BWE.DesktopMenu.tcs2dasl53.bundle.scp.css';
@import '_content/BWE.DigitalMarketingHero/BWE.DigitalMarketingHero.d5y55iaur2.bundle.scp.css';
@import '_content/BWE.Documentation/BWE.Documentation.ev1wa2uhqx.bundle.scp.css';
@import '_content/BWE.EmailService/BWE.EmailService.45p8bc6n08.bundle.scp.css';
@import '_content/BWE.Entrepreneur/BWE.Entrepreneur.x9fq0l1z5s.bundle.scp.css';
@import '_content/BWE.FeaturedGallery/BWE.FeaturedGallery.3z6hjj2zkn.bundle.scp.css';
@import '_content/BWE.Footer/BWE.Footer.511pm0gmd9.bundle.scp.css';
@import '_content/BWE.GoogleMap/BWE.GoogleMap.txxvj97y9j.bundle.scp.css';
@import '_content/BWE.Header/BWE.Header.vdks2unnfg.bundle.scp.css';
@import '_content/BWE.HelpCenter/BWE.HelpCenter.7lfhunn03x.bundle.scp.css';
@import '_content/BWE.Integrations/BWE.Integrations.2bi7q7ynfd.bundle.scp.css';
@import '_content/BWE.Internships/BWE.Internships.quyfur718k.bundle.scp.css';
@import '_content/BWE.Jobs/BWE.Jobs.v6g6fs5w74.bundle.scp.css';
@import '_content/BWE.JoinNow/BWE.JoinNow.wv73tz8ybc.bundle.scp.css';
@import '_content/BWE.Launching/BWE.Launching.redpux8zed.bundle.scp.css';
@import '_content/BWE.LucideIcon/BWE.LucideIcon.59mc5jq9kz.bundle.scp.css';
@import '_content/BWE.MarketplaceApis/BWE.MarketplaceApis.iuww0toapz.bundle.scp.css';
@import '_content/BWE.Membership/BWE.Membership.rj994rjfj2.bundle.scp.css';
@import '_content/BWE.MentorshipByFounder/BWE.MentorshipByFounder.kcxm7olhvw.bundle.scp.css';
@import '_content/BWE.MenuService/BWE.MenuService.rm6cqh0h9w.bundle.scp.css';
@import '_content/BWE.MiniPopup/BWE.MiniPopup.6cwn28wz1g.bundle.scp.css';
@import '_content/BWE.MobileMenu/BWE.MobileMenu.grx23u7x8l.bundle.scp.css';
@import '_content/BWE.NavigationService/BWE.NavigationService.v7v8crdhsh.bundle.scp.css';
@import '_content/BWE.PartnerSpotlight/BWE.PartnerSpotlight.o3wf8qh7sa.bundle.scp.css';
@import '_content/BWE.Platform/BWE.Platform.j5jwar6683.bundle.scp.css';
@import '_content/BWE.Pricing/BWE.Pricing.jbsjlrds7e.bundle.scp.css';
@import '_content/BWE.PrivacyPolicy/BWE.PrivacyPolicy.az7jv9xzzi.bundle.scp.css';
@import '_content/BWE.ProductFeatures/BWE.ProductFeatures.sx1jbu202z.bundle.scp.css';
@import '_content/BWE.PromoOffer/BWE.PromoOffer.6yb44pttwg.bundle.scp.css';
@import '_content/BWE.ReconnectOverlay/BWE.ReconnectOverlay.250r1e1b5j.bundle.scp.css';
@import '_content/BWE.SEO/BWE.SEO.wiprrv6rxi.bundle.scp.css';
@import '_content/BWE.ShowcaseCard/BWE.ShowcaseCard.9x0p25spps.bundle.scp.css';
@import '_content/BWE.ShowcaseSection/BWE.ShowcaseSection.78rpfsapms.bundle.scp.css';
@import '_content/BWE.SwiperCarousel/BWE.SwiperCarousel.y5wxj1y9c4.bundle.scp.css';
@import '_content/BWE.TabletMenu/BWE.TabletMenu.fcs0ljrid1.bundle.scp.css';
@import '_content/BWE.Team/BWE.Team.k2me5szz14.bundle.scp.css';
@import '_content/BWE.TermsOfService/BWE.TermsOfService.p2y2mezxvt.bundle.scp.css';
@import '_content/BWE.VideoTutorials/BWE.VideoTutorials.luqi6z0501.bundle.scp.css';
@import '_content/BWE.WhyChooseUs/BWE.WhyChooseUs.syhqxt5f2n.bundle.scp.css';

/* /Components/App.razor.rz.scp.css */
html[b-xr54a8ot63], body[b-xr54a8ot63] {
    background: linear-gradient(to right, #ffffff, #f4f8fb);
    color: #333; /* Dark text for readability */
    overflow-x: hidden;
    overflow-y: auto; /* Must allow vertical scroll */
    height: auto;
    margin: 0;
    padding: 0;
}

body.has-cookie-banner[b-xr54a8ot63] {
    padding-bottom: calc(180px + env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
    body.has-cookie-banner[b-xr54a8ot63] {
        padding-bottom: calc(260px + env(safe-area-inset-bottom));
    }
}
@media (max-width: 768px) {
    .intro[b-xr54a8ot63] {
        padding-left: 5px;
        padding-right: 5px;
    }

    .intro-content[b-xr54a8ot63] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .intro-title[b-xr54a8ot63] {
        font-size: 2rem;
    }

    .intro-subtitle[b-xr54a8ot63] {
        font-size: 1rem;
    }

    .slogan-list[b-xr54a8ot63] {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        max-width: 600px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

    main[b-xr54a8ot63] {
        padding-top: 80px;
    }

    .cookie-modal-overlay[b-xr54a8ot63] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6); /* Dark overlay */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in/fade-out */
    }

        .cookie-modal-overlay.show[b-xr54a8ot63] {
            opacity: 1;
            visibility: visible;
        }

    .cookie-modal[b-xr54a8ot63] {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transform: translateY(-20px);
        animation: slideIn-b-xr54a8ot63 0.3s ease forwards; /* Popup animation */
    }

    @keyframes slideIn-b-xr54a8ot63 {
        from {
            transform: translateY(-20px);
        }

        to {
            transform: translateY(0);
        }
    }

    .cookie-modal h4[b-xr54a8ot63] {
        margin-bottom: 1rem;
        font-size: 1.2rem;
    }

    .cookie-option[b-xr54a8ot63] {
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
    }

        .cookie-option input[b-xr54a8ot63] {
            margin-right: 0.5rem;
        }

    .modal-buttons[b-xr54a8ot63] {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .btn-accept[b-xr54a8ot63], .btn-decline[b-xr54a8ot63] {
        padding: 0.5rem 1rem;
        border: none;
        cursor: pointer;
        background-color: #0047ab;
        color: white;
        border-radius: 5px;
        font-size: 1rem;
        transition: background-color 0.3s ease;
    }

        .btn-accept:hover[b-xr54a8ot63], .btn-decline:hover[b-xr54a8ot63] {
            background-color: #003580;
        }

    .btn-customize[b-xr54a8ot63] {
        padding: 0.5rem 1rem;
        border: none;
        cursor: pointer;
        background-color: #fff;
        color: #0047ab;
        border-radius: 5px;
        font-size: 1rem;
        border: 1px solid #0047ab;
    }

        .btn-customize:hover[b-xr54a8ot63] {
            background-color: #f0f0f0;
        }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-yqkehfk3sa] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Skip link styling comes from the Header component's isolated CSS (Header.razor.css).
   Keep a minimal fallback here in case the Header is not rendered. */
.skip-to-main[b-yqkehfk3sa] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-main:focus[b-yqkehfk3sa] {
    left: 0.75rem;
    top: 0.75rem;
    width: auto;
    height: auto;
    padding: 0.75rem 1.25rem;
    background: #ffffff;
    border: 2px solid #ff6b35;
    border-radius: 0.5rem;
    z-index: 100000;
}

.sr-only[b-yqkehfk3sa] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

main[b-yqkehfk3sa] {
    flex: 1;
}

.layout-main[b-yqkehfk3sa] {
    padding-top: 60px;
}

@media (min-width: 992px) {
    .layout-main[b-yqkehfk3sa] {
        padding-top: 104px;
    }
}


.sidebar[b-yqkehfk3sa] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-yqkehfk3sa] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-yqkehfk3sa]  a, .top-row[b-yqkehfk3sa]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-yqkehfk3sa]  a:hover, .top-row[b-yqkehfk3sa]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-yqkehfk3sa]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-yqkehfk3sa] {
        justify-content: space-between;
    }

    .top-row[b-yqkehfk3sa]  a, .top-row[b-yqkehfk3sa]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-yqkehfk3sa] {
        flex-direction: row;
    }

    .sidebar[b-yqkehfk3sa] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-yqkehfk3sa] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-yqkehfk3sa]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-yqkehfk3sa], article[b-yqkehfk3sa] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-yqkehfk3sa] {
    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-yqkehfk3sa] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-eot6xo91e2] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-eot6xo91e2] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-eot6xo91e2] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-eot6xo91e2] {
    font-size: 1.1rem;
}

.bi[b-eot6xo91e2] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-eot6xo91e2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-eot6xo91e2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-eot6xo91e2] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-eot6xo91e2] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-eot6xo91e2] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-eot6xo91e2] {
        padding-bottom: 1rem;
    }

    .nav-item[b-eot6xo91e2]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-eot6xo91e2]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-eot6xo91e2]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-eot6xo91e2] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-eot6xo91e2] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-eot6xo91e2] {
        display: none;
    }

    .nav-scrollable[b-eot6xo91e2] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/AIAgentsTest.razor.rz.scp.css */
.ai-agents-test-wrapper[b-a1hqulwsp5] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0F172A, #1E293B, #334155);
}
/* /Components/Pages/B2BEcommercePlatform.razor.rz.scp.css */
/* B2B Platform - Pain-Point Workflow Approach */

.b2b-platform-page[b-bfbymb71s2] {
    background: white;
}

/* Container */
.container[b-bfbymb71s2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Pain-Point Hero */
.b2b-hero[b-bfbymb71s2] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0d4f57 0%, #0d6b5a 100%);
    color: white;
    text-align: center;
}

.b2b-hero h1[b-bfbymb71s2] {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.hero-pain[b-bfbymb71s2] {
    font-size: 1.4rem;
    max-width: 900px;
    margin: 0 auto 30px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
}

.pain-badge[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.15);
    padding: 20px 40px;
    border-radius: 8px;
    max-width: 600px;
    margin: 30px auto 0;
    font-size: 1.2rem;
}

.pain-badge span[b-bfbymb71s2] {
    font-weight: 700;
    color: #ffd700;
}

/* Pain Points Section */
.b2b-pains[b-bfbymb71s2] {
    padding: 80px 20px;
    background: #f8f9fa;
}

.b2b-pains h2[b-bfbymb71s2] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 60px;
}

.pain-grid[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.pain-card[b-bfbymb71s2] {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

.pain-number[b-bfbymb71s2] {
    position: absolute;
    top: -20px;
    left: 30px;
    background: #dc3545;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
}

.pain-card h3[b-bfbymb71s2] {
    font-size: 1.8rem;
    color: #0A1929;
    margin-bottom: 20px;
    padding-top: 20px;
}

.pain-scenario[b-bfbymb71s2] {
    background: #fff3cd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #ffc107;
}

.pain-scenario strong[b-bfbymb71s2] {
    display: block;
    color: #856404;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.pain-scenario p[b-bfbymb71s2] {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 10px;
}

.pain-solution[b-bfbymb71s2] {
    background: #d4edda;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #28a745;
}

.pain-solution strong[b-bfbymb71s2] {
    display: block;
    color: #155724;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.pain-solution p[b-bfbymb71s2] {
    color: #495057;
    line-height: 1.6;
}

/* Workflows Section */
.b2b-workflows[b-bfbymb71s2] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0A1929 0%, #1e3a5f 100%);
    color: white;
}

.b2b-workflows h2[b-bfbymb71s2] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.workflow-container[b-bfbymb71s2] {
    max-width: 900px;
    margin: 0 auto;
}

.workflow-container h3[b-bfbymb71s2] {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #3B82F6;
}

.workflow-steps[b-bfbymb71s2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.workflow-step[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 12px;
    position: relative;
}

.workflow-step .step-number[b-bfbymb71s2] {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #7C3AED;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
}

.step-content h4[b-bfbymb71s2] {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #7C3AED;
}

.step-content p[b-bfbymb71s2] {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 10px;
}

.workflow-arrow[b-bfbymb71s2] {
    text-align: center;
    font-size: 2rem;
    color: #3B82F6;
}

/* Case Study */
.b2b-case-study[b-bfbymb71s2] {
    padding: 80px 20px;
    background: white;
}

.case-study-content[b-bfbymb71s2] {
    max-width: 1200px;
    margin: 0 auto;
}

.case-badge[b-bfbymb71s2] {
    background: #7C3AED;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
}

.case-study-content h2[b-bfbymb71s2] {
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 40px;
}

.case-details[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.case-before[b-bfbymb71s2], .case-after[b-bfbymb71s2] {
    padding: 30px;
    border-radius: 12px;
}

.case-before[b-bfbymb71s2] {
    background: #fff3cd;
    border-left: 5px solid #dc3545;
}

.case-after[b-bfbymb71s2] {
    background: #d4edda;
    border-left: 5px solid #28a745;
}

.case-before h3[b-bfbymb71s2], .case-after h3[b-bfbymb71s2] {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.case-before ul[b-bfbymb71s2], .case-after ul[b-bfbymb71s2] {
    list-style: none;
    padding: 0;
}

.case-before li[b-bfbymb71s2], .case-after li[b-bfbymb71s2] {
    padding: 10px 0;
    font-size: 1.1rem;
}

.case-quote[b-bfbymb71s2] {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 12px;
    border-left: 5px solid #7C3AED;
}

.case-quote p[b-bfbymb71s2] {
    font-size: 1.3rem;
    font-style: italic;
    color: #495057;
    margin-bottom: 20px;
    line-height: 1.8;
}

.case-quote cite[b-bfbymb71s2] {
    color: #6c757d;
    font-size: 1.1rem;
}

/* Specific Features */
.b2b-specific[b-bfbymb71s2] {
    padding: 80px 20px;
    background: #f8f9fa;
}

.b2b-specific h2[b-bfbymb71s2] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.specific-grid[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.specific-feature[b-bfbymb71s2] {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #7C3AED;
}

.specific-feature h3[b-bfbymb71s2] {
    font-size: 1.4rem;
    color: #0A1929;
    margin-bottom: 15px;
}

.specific-feature p[b-bfbymb71s2] {
    color: #495057;
    line-height: 1.6;
}

/* Calculator */
.b2b-calculator[b-bfbymb71s2] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: white;
}

.b2b-calculator h2[b-bfbymb71s2] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.calc-widget[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 12px;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.calc-inputs[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.input-group label[b-bfbymb71s2] {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.input-group input[b-bfbymb71s2] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    color: #0A1929;
}

.calc-btn[b-bfbymb71s2] {
    background: #0A1929;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.calc-btn:hover[b-bfbymb71s2] {
    background: #1e3a5f;
}

.calc-results[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.result-item[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.result-label[b-bfbymb71s2] {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.result-value[b-bfbymb71s2] {
    font-size: 3rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 10px;
}

.result-item small[b-bfbymb71s2] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

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

.calc-cta p[b-bfbymb71s2] {
    font-size: 1.3rem;
    margin-bottom: 25px;
}

/* Buyer Portal Preview (UNIQUE TO B2B PAGE) */
.buyer-portal-preview[b-bfbymb71s2] {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
}

.preview-header[b-bfbymb71s2] {
    text-align: center;
    margin-bottom: 80px;
}

.preview-header h2[b-bfbymb71s2] {
    font-size: 3rem;
    color: #0A1929;
    margin-bottom: 20px;
}

.preview-intro[b-bfbymb71s2] {
    font-size: 1.3rem;
    color: #495057;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Portal Walkthrough */
.portal-walkthrough[b-bfbymb71s2] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Walkthrough Step */
.walkthrough-step[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

.walkthrough-step.reverse[b-bfbymb71s2] {
    grid-template-columns: 1fr 1.2fr;
}

.walkthrough-step.reverse .step-visual[b-bfbymb71s2] {
    order: 2;
}

.walkthrough-step.reverse .step-explanation[b-bfbymb71s2] {
    order: 1;
}

.walkthrough-step.reverse .step-badge[b-bfbymb71s2] {
    left: auto;
    right: -30px;
}

.step-badge[b-bfbymb71s2] {
    position: absolute;
    top: -20px;
    left: -30px;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    z-index: 10;
}

/* Mock Screen */
.step-visual[b-bfbymb71s2] {
    position: relative;
}

.mock-screen[b-bfbymb71s2] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 30px;
    border: 3px solid #e9ecef;
    transition: all 0.3s ease;
}

.mock-screen:hover[b-bfbymb71s2] {
    box-shadow: 0 30px 80px rgba(124, 58, 237, 0.2);
    transform: translateY(-5px);
}

/* Login Screen Mock */
.screen-header[b-bfbymb71s2] {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.company-logo-placeholder[b-bfbymb71s2] {
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 700;
    display: inline-block;
}

.login-form-mock[b-bfbymb71s2] {
    max-width: 400px;
    margin: 0 auto;
}

.login-form-mock h3[b-bfbymb71s2] {
    text-align: center;
    color: #0A1929;
    margin-bottom: 25px;
    font-size: 1.8rem;
}

.input-mock[b-bfbymb71s2] {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #6c757d;
    font-size: 1.05rem;
}

.button-mock[b-bfbymb71s2] {
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button-mock.primary[b-bfbymb71s2] {
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: white;
    margin-top: 10px;
}

.button-mock.primary:hover[b-bfbymb71s2] {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.button-mock.primary.large[b-bfbymb71s2] {
    font-size: 1.2rem;
    padding: 18px 40px;
}

/* Dashboard Screen Mock */
.screen-topbar[b-bfbymb71s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-weight: 600;
}

.credit-display[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.95rem;
}

.dashboard-widgets[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.widget[b-bfbymb71s2] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid #e9ecef;
}

.widget-label[b-bfbymb71s2] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.widget-value[b-bfbymb71s2] {
    font-size: 2rem;
    font-weight: 800;
    color: #7C3AED;
}

.quick-actions-mock[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.action-btn[b-bfbymb71s2] {
    background: linear-gradient(135deg, #3B82F6 0%, #2563eb 100%);
    color: white;
    padding: 12px 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover[b-bfbymb71s2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Catalog Screen Mock */
.search-mock[b-bfbymb71s2] {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    padding: 12px 20px;
    border-radius: 8px;
    color: #6c757d;
    flex: 1;
    margin-right: 15px;
}

.filter-mock[b-bfbymb71s2] {
    background: #e9ecef;
    border: 2px solid #dee2e6;
    padding: 12px 20px;
    border-radius: 8px;
    color: #495057;
    font-weight: 600;
}

.products-grid-mock[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.product-card-mock[b-bfbymb71s2] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
}

.product-card-mock:hover[b-bfbymb71s2] {
    border-color: #7C3AED;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);
}

.product-img-placeholder[b-bfbymb71s2] {
    background: linear-gradient(135deg, #dee2e6 0%, #f8f9fa 100%);
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.product-name[b-bfbymb71s2] {
    font-weight: 700;
    color: #0A1929;
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.your-price[b-bfbymb71s2] {
    color: #495057;
    margin-bottom: 8px;
}

.your-price strong[b-bfbymb71s2] {
    color: #7C3AED;
    font-size: 1.3rem;
}

.stock-status[b-bfbymb71s2] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.stock-status.available[b-bfbymb71s2] {
    background: #d1fae5;
    color: #065f46;
}

.stock-status.low[b-bfbymb71s2] {
    background: #fed7aa;
    color: #92400e;
}

.stock-status.unavailable[b-bfbymb71s2] {
    background: #fee2e2;
    color: #991b1b;
}

.moq-note[b-bfbymb71s2] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.add-cart-mock[b-bfbymb71s2] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-cart-mock:hover[b-bfbymb71s2] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.notify-mock[b-bfbymb71s2] {
    background: #f8f9fa;
    border: 2px dashed #7C3AED;
    color: #7C3AED;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Checkout Screen Mock */
.cart-summary-mock[b-bfbymb71s2] {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.cart-summary-mock h4[b-bfbymb71s2] {
    color: #0A1929;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.cart-items[b-bfbymb71s2] {
    margin-bottom: 20px;
}

.cart-item[b-bfbymb71s2] {
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
    color: #495057;
    font-size: 1.05rem;
}

.totals-mock[b-bfbymb71s2] {
    padding-top: 15px;
}

.total-line[b-bfbymb71s2] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: #495057;
    font-size: 1.05rem;
}

.total-line.grand[b-bfbymb71s2] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0A1929;
    padding-top: 15px;
    border-top: 2px solid #7C3AED;
    margin-top: 10px;
}

.checkout-options-mock[b-bfbymb71s2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.option-section label[b-bfbymb71s2] {
    display: block;
    font-weight: 700;
    color: #0A1929;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.select-mock[b-bfbymb71s2] {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    padding: 12px 15px;
    border-radius: 8px;
    color: #495057;
    font-size: 1.05rem;
}

/* Tracking Screen Mock */
.order-header-mock[b-bfbymb71s2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.order-header-mock h4[b-bfbymb71s2] {
    color: #0A1929;
    font-size: 1.5rem;
    margin: 0;
}

.status-badge[b-bfbymb71s2] {
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
}

.status-badge.processing[b-bfbymb71s2] {
    background: linear-gradient(135deg, #3B82F6 0%, #2563eb 100%);
    color: white;
}

.tracking-timeline[b-bfbymb71s2] {
    margin-bottom: 30px;
}

.timeline-step[b-bfbymb71s2] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    position: relative;
}

.timeline-step:not(:last-child)[b-bfbymb71s2]::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 50px;
    width: 3px;
    height: calc(100% - 20px);
    background: #e9ecef;
}

.timeline-step.completed[b-bfbymb71s2]::after {
    background: #10b981;
}

.timeline-step.active[b-bfbymb71s2]::after {
    background: linear-gradient(180deg, #10b981 0%, #e9ecef 100%);
}

.step-dot[b-bfbymb71s2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9ecef;
    border: 4px solid white;
    box-shadow: 0 0 0 2px #e9ecef;
    flex-shrink: 0;
    margin-top: 3px;
}

.timeline-step.completed .step-dot[b-bfbymb71s2] {
    background: #10b981;
    box-shadow: 0 0 0 2px #10b981;
}

.timeline-step.active .step-dot[b-bfbymb71s2] {
    background: #3B82F6;
    box-shadow: 0 0 0 2px #3B82F6;
    animation: pulse-b-bfbymb71s2 2s infinite;
}

@keyframes pulse-b-bfbymb71s2 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.step-info strong[b-bfbymb71s2] {
    display: block;
    color: #0A1929;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.step-info small[b-bfbymb71s2] {
    color: #6c757d;
    font-size: 0.9rem;
}

.order-actions-mock[b-bfbymb71s2] {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

.action-link[b-bfbymb71s2] {
    color: #7C3AED;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-link:hover[b-bfbymb71s2] {
    color: #9333EA;
    text-decoration: underline;
}

/* Step Explanation */
.step-explanation h3[b-bfbymb71s2] {
    font-size: 1.8rem;
    color: #0A1929;
    margin-bottom: 15px;
}

.step-explanation p[b-bfbymb71s2] {
    font-size: 1.15rem;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 20px;
}

.benefit-list[b-bfbymb71s2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.benefit[b-bfbymb71s2] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 4px solid #10b981;
    padding: 12px 15px;
    border-radius: 6px;
    color: #065f46;
    font-weight: 600;
    font-size: 1.05rem;
}

/* Portal Benefits Summary */
.portal-benefits-summary[b-bfbymb71s2] {
    margin-top: 100px;
    padding: 60px 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.portal-benefits-summary h3[b-bfbymb71s2] {
    text-align: center;
    font-size: 2.2rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.benefits-comparison[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.before-portal[b-bfbymb71s2], .with-portal[b-bfbymb71s2] {
    padding: 30px;
    border-radius: 12px;
}

.before-portal[b-bfbymb71s2] {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border: 3px solid #dc2626;
}

.with-portal[b-bfbymb71s2] {
    background: linear-gradient(135deg, #d1fae5 0%, #f0fdf4 100%);
    border: 3px solid #10b981;
}

.before-portal h4[b-bfbymb71s2], .with-portal h4[b-bfbymb71s2] {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.before-portal h4[b-bfbymb71s2] {
    color: #991b1b;
}

.with-portal h4[b-bfbymb71s2] {
    color: #065f46;
}

.benefits-comparison ul[b-bfbymb71s2] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.benefits-comparison li[b-bfbymb71s2] {
    padding: 10px 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.before-portal li[b-bfbymb71s2] {
    color: #7f1d1d;
}

.with-portal li[b-bfbymb71s2] {
    color: #064e3b;
}

.time-waste[b-bfbymb71s2] {
    background: rgba(220, 38, 38, 0.2);
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    color: #7f1d1d;
    text-align: center;
}

.time-saved[b-bfbymb71s2] {
    background: rgba(16, 185, 129, 0.2);
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    color: #064e3b;
    text-align: center;
}

/* Portal ROI Calculator */
.portal-roi-calculator[b-bfbymb71s2] {
    margin-top: 80px;
    padding: 60px 40px;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    border-radius: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.portal-roi-calculator h3[b-bfbymb71s2] {
    text-align: center;
    font-size: 2.2rem;
    color: white;
    margin-bottom: 50px;
}

.calculator-grid[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.calculator-inputs[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.1);
    padding: 35px;
    border-radius: 16px;
}

.calculator-inputs .input-group[b-bfbymb71s2] {
    margin-bottom: 25px;
}

.calculator-inputs label[b-bfbymb71s2] {
    display: block;
    color: white;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.calculator-inputs input[b-bfbymb71s2] {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    color: #0A1929;
}

.calculate-roi-btn[b-bfbymb71s2] {
    width: 100%;
    background: white;
    color: #7C3AED;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calculate-roi-btn:hover[b-bfbymb71s2] {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.calculator-results[b-bfbymb71s2] {
    background: rgba(255, 255, 255, 0.15);
    padding: 35px;
    border-radius: 16px;
}

.result-main[b-bfbymb71s2] {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.result-value[b-bfbymb71s2] {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.result-label[b-bfbymb71s2] {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
}

.result-details[b-bfbymb71s2] {
    color: white;
}

.result-details p[b-bfbymb71s2] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.result-details ul[b-bfbymb71s2] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.result-details li[b-bfbymb71s2] {
    padding: 10px 0;
    font-size: 1.05rem;
    line-height: 1.6;
    padding-left: 30px;
    position: relative;
}

.result-details li[b-bfbymb71s2]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ffd700;
    font-weight: 800;
    font-size: 1.3rem;
}

/* Portal Preview CTA */
.portal-preview-cta[b-bfbymb71s2] {
    margin-top: 80px;
    text-align: center;
    padding: 60px 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.portal-preview-cta h3[b-bfbymb71s2] {
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 20px;
}

.portal-preview-cta p[b-bfbymb71s2] {
    font-size: 1.3rem;
    color: #495057;
    margin-bottom: 35px;
    line-height: 1.7;
}

.cta-button[b-bfbymb71s2] {
    display: inline-block;
    background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    color: white;
    padding: 18px 50px;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.cta-button:hover[b-bfbymb71s2] {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .walkthrough-step[b-bfbymb71s2],
    .walkthrough-step.reverse[b-bfbymb71s2] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .walkthrough-step.reverse .step-visual[b-bfbymb71s2] {
        order: 1;
    }

    .walkthrough-step.reverse .step-explanation[b-bfbymb71s2] {
        order: 2;
    }

    .step-badge[b-bfbymb71s2] {
        left: 50%;
        transform: translateX(-50%);
    }

    .walkthrough-step.reverse .step-badge[b-bfbymb71s2] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .calculator-grid[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }

    .benefits-comparison[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .preview-header h2[b-bfbymb71s2] {
        font-size: 2.2rem;
    }

    .preview-intro[b-bfbymb71s2] {
        font-size: 1.1rem;
    }

    .portal-walkthrough[b-bfbymb71s2] {
        gap: 60px;
    }

    .dashboard-widgets[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }

    .quick-actions-mock[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }

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

    .order-actions-mock[b-bfbymb71s2] {
        flex-direction: column;
    }

    .portal-benefits-summary[b-bfbymb71s2],
    .portal-roi-calculator[b-bfbymb71s2],
    .portal-preview-cta[b-bfbymb71s2] {
        padding: 40px 25px;
    }
}

@media (max-width: 480px) {
    .buyer-portal-preview[b-bfbymb71s2] {
        padding: 60px 15px;
    }

    .preview-header h2[b-bfbymb71s2] {
        font-size: 1.8rem;
    }

    .step-explanation h3[b-bfbymb71s2] {
        font-size: 1.5rem;
    }

    .mock-screen[b-bfbymb71s2] {
        padding: 20px;
    }

    .result-value[b-bfbymb71s2] {
        font-size: 2.5rem;
    }

    .portal-preview-cta h3[b-bfbymb71s2] {
        font-size: 2rem;
    }
}
    margin-bottom: 25px;[b-bfbymb71s2]
}

.cta-button[b-bfbymb71s2] {
    display: inline-block;
    background: #ffd700;
    color: #0A1929;
    padding: 18px 50px;
    border-radius: 6px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
}

.cta-button:hover[b-bfbymb71s2] {
    transform: scale(1.05);
}

/* Trust */
.b2b-trust[b-bfbymb71s2] {
    padding: 60px 20px;
    background: white;
}

.trust-grid[b-bfbymb71s2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.trust-item[b-bfbymb71s2] {
    text-align: center;
}

.trust-icon[b-bfbymb71s2] {
    font-size: 3rem;
    margin-bottom: 20px;
}

.trust-item h3[b-bfbymb71s2] {
    font-size: 1.4rem;
    color: #0A1929;
    margin-bottom: 15px;
}

.trust-item p[b-bfbymb71s2] {
    color: #6c757d;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .b2b-hero h1[b-bfbymb71s2] {
        font-size: 2rem;
    }

    .hero-pain[b-bfbymb71s2] {
        font-size: 1.2rem;
    }

    .pain-grid[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }

    .case-details[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }

    .calc-results[b-bfbymb71s2] {
        grid-template-columns: 1fr;
    }

    .result-value[b-bfbymb71s2] {
        font-size: 2.5rem;
    }
}
/* /Components/Pages/Developers/AppDevelopment.razor.rz.scp.css */
.appdev-hero[b-bqyx25ji76] {
    margin-top: 0.5rem;
}

.appdev-hero__grid[b-bqyx25ji76] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(18px, 3vw, 28px);
    align-items: start;
}

.appdev-hero__copy h2[b-bqyx25ji76] {
    margin-top: 0;
}

.appdev-pills[b-bqyx25ji76] {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.appdev-pills li[b-bqyx25ji76] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

.appdev-hero__shots[b-bqyx25ji76] {
    display: grid;
    gap: 12px;
}

.shot[b-bqyx25ji76] {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}

.shot img[b-bqyx25ji76] {
    display: block;
    width: 100%;
    height: auto;
}

.shot figcaption[b-bqyx25ji76] {
    padding: 10px 12px;
    font-weight: 650;
    font-size: 0.95rem;
    opacity: 0.92;
}

.shot-note[b-bqyx25ji76] {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.78;
}

.appdev-section[b-bqyx25ji76] {
    margin-top: clamp(24px, 4.2vw, 44px);
}

.appdev-cards[b-bqyx25ji76],
.store-grid[b-bqyx25ji76],
.support-grid[b-bqyx25ji76] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.store-grid[b-bqyx25ji76],
.support-grid[b-bqyx25ji76] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.appdev-card[b-bqyx25ji76],
.store[b-bqyx25ji76],
.support[b-bqyx25ji76] {
    border-radius: 18px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.store ul[b-bqyx25ji76] {
    margin: 10px 0 0;
}

.timeline[b-bqyx25ji76] {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.timeline__item[b-bqyx25ji76] {
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 14px 16px;
}

.timeline__title[b-bqyx25ji76] {
    font-weight: 750;
    letter-spacing: -0.01em;
}

.appdev-cta[b-bqyx25ji76] {
    margin-top: clamp(26px, 4.8vw, 54px);
    border-radius: 22px;
    padding: clamp(16px, 3vw, 24px);
    background:
        radial-gradient(800px 280px at 10% 10%, rgba(255,255,255,0.14), transparent 55%),
        linear-gradient(135deg, rgba(79,70,229,0.28), rgba(6,182,212,0.22));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 22px 90px rgba(0,0,0,0.22);
}

.appdev-cta__buttons[b-bqyx25ji76] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 980px) {
    .appdev-hero__grid[b-bqyx25ji76] {
        grid-template-columns: 1fr;
    }

    .store-grid[b-bqyx25ji76],
    .support-grid[b-bqyx25ji76] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appdev-cards[b-bqyx25ji76] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .store-grid[b-bqyx25ji76],
    .support-grid[b-bqyx25ji76],
    .appdev-cards[b-bqyx25ji76] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shot[b-bqyx25ji76],
    .appdev-card[b-bqyx25ji76],
    .tech[b-bqyx25ji76],
    .store[b-bqyx25ji76],
    .support[b-bqyx25ji76],
    .timeline__item[b-bqyx25ji76],
    .appdev-cta[b-bqyx25ji76] {
        transition: none;
    }
}
/* /Components/Pages/EcommercePlatform.razor.rz.scp.css */
/* eCommerce Platform - Comparison-Table Decision Framework */

.ecommerce-platform-page[b-1ydmiv2qis] {
    background: white;
}

/* Container */
.container[b-1ydmiv2qis] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Decision-Focused Hero */
.ecom-hero[b-1ydmiv2qis] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: white;
    text-align: center;
}

.ecom-hero h1[b-1ydmiv2qis] {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.hero-question[b-1ydmiv2qis] {
    font-size: 1.4rem;
    max-width: 900px;
    margin: 0 auto 30px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
}

.quick-answer[b-1ydmiv2qis] {
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 12px;
    max-width: 700px;
    margin: 40px auto 0;
    text-align: left;
}

.answer-badge[b-1ydmiv2qis] {
    background: #ffd700;
    color: #0A1929;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

.quick-answer p[b-1ydmiv2qis] {
    font-size: 1.2rem;
    margin: 0;
}

/* Comparison Table */
.ecom-comparison[b-1ydmiv2qis] {
    padding: 80px 20px;
    background: #f8f9fa;
}

.ecom-comparison h2[b-1ydmiv2qis] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.comparison-table[b-1ydmiv2qis] {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.table-header[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(135deg, #0A1929 0%, #1e3a5f 100%);
    color: white;
}

.header-cell[b-1ydmiv2qis] {
    padding: 30px 20px;
    text-align: center;
}

.header-cell .icon[b-1ydmiv2qis] {
    font-size: 3rem;
    margin-bottom: 10px;
}

.header-cell h3[b-1ydmiv2qis] {
    font-size: 1.3rem;
    margin: 0;
}

.table-row[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #e9ecef;
}

.table-row:last-child[b-1ydmiv2qis] {
    border-bottom: none;
}

.row-label[b-1ydmiv2qis] {
    padding: 25px 20px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0A1929;
    background: #f8f9fa;
    display: flex;
    align-items: center;
}

.cell[b-1ydmiv2qis] {
    padding: 25px 20px;
    text-align: center;
}

.cell span[b-1ydmiv2qis] {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.cell.marketplace span.bad[b-1ydmiv2qis] {
    color: #dc3545;
}

.cell.marketplace span.good[b-1ydmiv2qis] {
    color: #059669;
}

.cell.own-store span.good[b-1ydmiv2qis] {
    color: #059669;
}

.cell.own-store span.bad[b-1ydmiv2qis] {
    color: #dc3545;
}

.cell small[b-1ydmiv2qis] {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Decision Framework */
.ecom-decision[b-1ydmiv2qis] {
    padding: 80px 20px;
    background: white;
}

.ecom-decision h2[b-1ydmiv2qis] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.decision-grid[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px;
}

.decision-card[b-1ydmiv2qis] {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 12px;
    border-left: 5px solid #6c757d;
}

.decision-card.highlighted[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #e7f5f0 0%, #d4ede3 100%);
    border-left-color: #059669;
}

.decision-card h3[b-1ydmiv2qis] {
    font-size: 1.5rem;
    color: #0A1929;
    margin-bottom: 20px;
}

.decision-list[b-1ydmiv2qis] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.decision-list li[b-1ydmiv2qis] {
    padding: 10px 0;
    font-size: 1.1rem;
    color: #495057;
}

.decision-note[b-1ydmiv2qis] {
    font-style: italic;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
    margin: 0;
}

.best-strategy[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: white;
    padding: 50px;
    border-radius: 12px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.strategy-badge[b-1ydmiv2qis] {
    background: #ffd700;
    color: #0A1929;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
}

.best-strategy h3[b-1ydmiv2qis] {
    font-size: 2rem;
    margin-bottom: 20px;
}

.best-strategy p[b-1ydmiv2qis] {
    font-size: 1.2rem;
    line-height: 1.8;
}

/* Timeline */
.ecom-timeline[b-1ydmiv2qis] {
    padding: 80px 20px;
    background: #f8f9fa;
}

.ecom-timeline h2[b-1ydmiv2qis] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 60px;
}

.timeline-steps[b-1ydmiv2qis] {
    max-width: 900px;
    margin: 0 auto;
}

.timeline-step[b-1ydmiv2qis] {
    background: white;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.step-week[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.step-content h3[b-1ydmiv2qis] {
    font-size: 1.5rem;
    color: #0A1929;
    margin-bottom: 15px;
}

.step-content ul[b-1ydmiv2qis] {
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
}

.step-content li[b-1ydmiv2qis] {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.step-content li[b-1ydmiv2qis]:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: bold;
}

.step-time[b-1ydmiv2qis] {
    background: #e7f5f0;
    color: #059669;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
}

/* Calculator */
.ecom-calculator[b-1ydmiv2qis] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0A1929 0%, #1e3a5f 100%);
    color: white;
}

.ecom-calculator h2[b-1ydmiv2qis] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.calculator-widget[b-1ydmiv2qis] {
    background: rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 12px;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.calc-inputs[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.input-group label[b-1ydmiv2qis] {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.input-group input[b-1ydmiv2qis] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    color: #0A1929;
}

.calc-btn[b-1ydmiv2qis] {
    background: #059669;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.calc-btn:hover[b-1ydmiv2qis] {
    background: #047857;
}

.calc-results[b-1ydmiv2qis] {
    margin-top: 40px;
}

.result-comparison[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.result-item[b-1ydmiv2qis] {
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.result-label[b-1ydmiv2qis] {
    font-size: 1rem;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
}

.result-value[b-1ydmiv2qis] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
}

.marketplace-cost .result-value[b-1ydmiv2qis] {
    color: #ff6b6b;
}

.own-store-cost .result-value[b-1ydmiv2qis] {
    color: #51cf66;
}

.savings-highlight[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
}

.savings-label[b-1ydmiv2qis] {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.savings-amount[b-1ydmiv2qis] {
    font-size: 4rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 15px;
}

.savings-note[b-1ydmiv2qis] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.calculator-cta[b-1ydmiv2qis] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.calculator-cta p[b-1ydmiv2qis] {
    font-size: 1.3rem;
    margin-bottom: 25px;
}

.cta-button[b-1ydmiv2qis] {
    display: inline-block;
    background: #ffd700;
    color: #0A1929;
    padding: 18px 50px;
    border-radius: 6px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
}

.cta-button:hover[b-1ydmiv2qis] {
    transform: scale(1.05);
}

/* Trust Stats */
.ecom-trust[b-1ydmiv2qis] {
    padding: 60px 20px;
    background: white;
}

.trust-stats[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat[b-1ydmiv2qis] {
    text-align: center;
}

.stat-number[b-1ydmiv2qis] {
    font-size: 3rem;
    font-weight: 800;
    color: #059669;
    margin-bottom: 10px;
}

.stat-label[b-1ydmiv2qis] {
    font-size: 1.1rem;
    color: #6c757d;
}

/* ============================================
   PLATFORM COMPARISON MATRIX - UNIQUE SECTION
   ============================================ */

.platform-comparison-matrix[b-1ydmiv2qis] {
    padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 3vw, 2rem);
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 50%, #f0f4ff 100%);
    position: relative;
}

.platform-comparison-matrix h2[b-1ydmiv2qis] {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #0047ab 0%, #3377dd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-intro[b-1ydmiv2qis] {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 3rem;
    font-size: 1.125rem;
    color: #6b7280;
    line-height: 1.7;
}

.comparison-matrix[b-1ydmiv2qis] {
    display: grid;
    gap: 1px;
    background: #d1d5db;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
}

.matrix-row[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: 280px repeat(3, 1fr);
    gap: 1px;
    background: white;
}

.matrix-row.header-row[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #0047ab 0%, #3377dd 100%);
}

.matrix-row.header-row .matrix-cell[b-1ydmiv2qis] {
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
}

.matrix-row.header-row .feature-name[b-1ydmiv2qis] {
    background: #1f2937;
    font-weight: 700;
    font-size: 1.1rem;
}

.platform-logo[b-1ydmiv2qis] {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.platform-tagline[b-1ydmiv2qis] {
    font-size: 0.875rem;
    opacity: 0.95;
    margin: 0;
    font-weight: 400;
}

.matrix-row.header-row .highlighted[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8552 100%);
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
    position: relative;
}

.matrix-row.header-row .highlighted[b-1ydmiv2qis]::before {
    content: '⭐ RECOMMENDED';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.matrix-cell[b-1ydmiv2qis] {
    padding: 1.75rem 1.5rem;
    background: white;
    transition: background 0.3s ease;
}

.matrix-cell:hover[b-1ydmiv2qis] {
    background: #f9fafb;
}

.matrix-cell.highlighted[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
    border-left: 4px solid #ff6b35;
}

.matrix-cell.feature-name[b-1ydmiv2qis] {
    background: #f3f4f6;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.matrix-cell.feature-name strong[b-1ydmiv2qis] {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: #111827;
}

.matrix-cell.feature-name small[b-1ydmiv2qis] {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 400;
}

/* Cost Styling */
.cost[b-1ydmiv2qis] {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.cost.warning[b-1ydmiv2qis] {
    color: #d97706;
}

.cost.good[b-1ydmiv2qis] {
    color: #059669;
}

.cost.best[b-1ydmiv2qis] {
    color: #0047ab;
}

.total-cost[b-1ydmiv2qis] {
    margin-top: 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #374151;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

/* Rating Stars */
.rating[b-1ydmiv2qis] {
    display: block;
    font-size: 1.5rem;
    color: #fbbf24;
    margin-bottom: 0.75rem;
    letter-spacing: 0.1em;
}

/* Feature Badges */
.feature-badges[b-1ydmiv2qis] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.badge[b-1ydmiv2qis] {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.badge.green[b-1ydmiv2qis] {
    background: #d1fae5;
    color: #047857;
}

.badge.red[b-1ydmiv2qis] {
    background: #fee2e2;
    color: #dc2626;
}

.badge.yellow[b-1ydmiv2qis] {
    background: #fef3c7;
    color: #d97706;
}

.note[b-1ydmiv2qis] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

.icon-check[b-1ydmiv2qis] {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Total Row */
.matrix-row.total-row[b-1ydmiv2qis] {
    border-top: 3px solid #0047ab;
}

.matrix-row.total-row .matrix-cell[b-1ydmiv2qis] {
    padding: 2rem 1.5rem;
    background: #f9fafb;
}

.cost-breakdown[b-1ydmiv2qis] {
    font-size: 0.95rem;
}

.cost-breakdown p[b-1ydmiv2qis] {
    margin: 0.5rem 0;
    color: #4b5563;
}

.total-highlight[b-1ydmiv2qis] {
    font-size: 1.75rem;
    font-weight: 900;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #d1d5db;
}

.total-highlight.warning[b-1ydmiv2qis] {
    color: #d97706;
}

.total-highlight.best[b-1ydmiv2qis] {
    color: #0047ab;
}

/* Recommendation Box */
.recommendation-box[b-1ydmiv2qis] {
    margin-top: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
    border-radius: 20px;
    border: 3px solid #ff6b35;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15);
}

.recommendation-box h3[b-1ydmiv2qis] {
    font-size: 2rem;
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 2rem;
    text-align: center;
}

.recommendation-grid[b-1ydmiv2qis] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.recommendation[b-1ydmiv2qis] {
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recommendation:hover[b-1ydmiv2qis] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.recommendation.highlighted[b-1ydmiv2qis] {
    background: linear-gradient(135deg, #0047ab 0%, #3377dd 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(0, 71, 171, 0.3);
    transform: scale(1.05);
}

.recommendation.highlighted:hover[b-1ydmiv2qis] {
    transform: scale(1.08) translateY(-4px);
}

.recommendation h4[b-1ydmiv2qis] {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    color: #111827;
}

.recommendation.highlighted h4[b-1ydmiv2qis] {
    color: white;
}

.recommendation ul[b-1ydmiv2qis] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendation li[b-1ydmiv2qis] {
    padding: 0.65rem 0 0.65rem 1.75rem;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
}

.recommendation.highlighted li[b-1ydmiv2qis] {
    color: rgba(255, 255, 255, 0.95);
}

.recommendation li[b-1ydmiv2qis]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 900;
    font-size: 1.25rem;
}

.recommendation.highlighted li[b-1ydmiv2qis]::before {
    color: #ffd700;
}

/* Responsive Design */
@media (max-width: 1280px) {
    .matrix-row[b-1ydmiv2qis] {
        grid-template-columns: 240px repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .matrix-row[b-1ydmiv2qis] {
        grid-template-columns: 200px repeat(3, 1fr);
    }

    .matrix-cell[b-1ydmiv2qis] {
        padding: 1.25rem 1rem;
    }

    .cost[b-1ydmiv2qis] {
        font-size: 1.5rem;
    }

    .total-highlight[b-1ydmiv2qis] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .platform-comparison-matrix[b-1ydmiv2qis] {
        padding: 3rem 1rem;
    }

    .matrix-row[b-1ydmiv2qis] {
        grid-template-columns: 1fr;
    }

    .matrix-row.header-row .feature-name[b-1ydmiv2qis] {
        display: none;
    }

    .matrix-cell.feature-name[b-1ydmiv2qis] {
        background: #0047ab;
        color: white;
        text-align: center;
        font-size: 1.1rem;
    }

    .matrix-cell.feature-name strong[b-1ydmiv2qis] {
        color: white;
    }

    .matrix-cell.feature-name small[b-1ydmiv2qis] {
        color: rgba(255, 255, 255, 0.85);
    }

    .comparison-matrix[b-1ydmiv2qis] {
        border-radius: 12px;
    }

    .recommendation-grid[b-1ydmiv2qis] {
        grid-template-columns: 1fr;
    }

    .recommendation.highlighted[b-1ydmiv2qis] {
        transform: scale(1);
    }

    .recommendation.highlighted:hover[b-1ydmiv2qis] {
        transform: scale(1.02);
    }
}

@media (max-width: 480px) {
    .matrix-cell[b-1ydmiv2qis] {
        padding: 1rem 0.75rem;
    }

    .cost[b-1ydmiv2qis] {
        font-size: 1.35rem;
    }

    .platform-logo[b-1ydmiv2qis] {
        font-size: 1.5rem;
    }

    .recommendation-box[b-1ydmiv2qis] {
        padding: 1.5rem;
    }

    .recommendation[b-1ydmiv2qis] {
        padding: 1.5rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ecom-hero h1[b-1ydmiv2qis] {
        font-size: 2rem;
    }

    .table-header[b-1ydmiv2qis], .table-row[b-1ydmiv2qis] {
        grid-template-columns: 1fr;
    }

    .row-label[b-1ydmiv2qis] {
        background: #0A1929;
        color: white;
    }

    .timeline-step[b-1ydmiv2qis] {
        grid-template-columns: 1fr;
    }

    .result-comparison[b-1ydmiv2qis] {
        grid-template-columns: 1fr;
    }

    .savings-amount[b-1ydmiv2qis] {
        font-size: 3rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ========================================
   HOME PAGE - MINIMAL LAYOUT STYLES
   All section-specific CSS is in child components
   ======================================== */

/* Ensure consistent box-sizing */
.home-page *[b-xo2scbcgcs],
.home-page *[b-xo2scbcgcs]::before,
.home-page *[b-xo2scbcgcs]::after {
    box-sizing: border-box;
}

/* ROOT & LAYOUT */
.home-page[b-xo2scbcgcs] {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #0f172a;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* Wrapper for existing components that need zero padding */
.component-wrapper[b-xo2scbcgcs] {
    padding: 0 !important;
    margin: 0;
    width: 100%;
}

/* ========================================
   VIDEO TUTORIALS PREVIEW SECTION
   ======================================== */

.video-tutorials-preview[b-xo2scbcgcs] {
    padding: 4rem 1.5rem;
    background: #ffffff;
}

.video-tutorials-preview .section-header[b-xo2scbcgcs] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.video-tutorials-preview .section-title[b-xo2scbcgcs] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.video-tutorials-preview .section-subtitle[b-xo2scbcgcs] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.tutorials-grid[b-xo2scbcgcs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.tutorials-cta[b-xo2scbcgcs] {
    text-align: center;
    margin-top: 2rem;
}

.tutorials-cta .cta-button[b-xo2scbcgcs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tutorials-cta .cta-secondary[b-xo2scbcgcs] {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}

.tutorials-cta .cta-secondary:hover[b-xo2scbcgcs] {
    background: #e2e8f0;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .platform-showcase-section[b-xo2scbcgcs],
    .video-tutorials-preview[b-xo2scbcgcs] {
        padding: 3rem 1rem;
    }

    .tutorials-grid[b-xo2scbcgcs] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
/* /Components/Pages/HomeSeoSections.razor.rz.scp.css */
/* ========================================
   HOME SEO SECTIONS - ENTERPRISE EDITION
   Premium glassmorphism with modern animations
   ======================================== */

.home-seo[b-q9ngbogf83] {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f23 50%, #0a0a1a 100%);
    color: #ffffff;
    overflow: hidden;
}

.home-seo *[b-q9ngbogf83],
.home-seo *[b-q9ngbogf83]::before,
.home-seo *[b-q9ngbogf83]::after {
    box-sizing: border-box;
}

/* ----------------------------------------
   SECTION BASE STYLES
   ---------------------------------------- */
.seo-section[b-q9ngbogf83] {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
    z-index: 1;
    width: 100%;
}

.seo-section__ambient[b-q9ngbogf83] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.seo-orb[b-q9ngbogf83] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: seoOrbFloat-b-q9ngbogf83 25s ease-in-out infinite;
}

.seo-orb--1[b-q9ngbogf83] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #0d6b5a 0%, transparent 70%);
    top: -150px;
    left: -150px;
}

.seo-orb--2[b-q9ngbogf83] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #0d4f57 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation-delay: -10s;
}

@keyframes seoOrbFloat-b-q9ngbogf83 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -40px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
}

/* ----------------------------------------
   SECTION HEADER
   ---------------------------------------- */
.seo-section__header[b-q9ngbogf83] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.seo-badge[b-q9ngbogf83] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(13, 107, 90, 0.12);
    border: 1px solid rgba(13, 107, 90, 0.25);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5eead4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}

.seo-badge__glow[b-q9ngbogf83] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(13, 107, 90, 0.3), transparent);
    transform: translateX(-100%);
    animation: badgeGlow-b-q9ngbogf83 3s ease-in-out infinite;
}

@keyframes badgeGlow-b-q9ngbogf83 {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.seo-badge--secondary[b-q9ngbogf83] {
    background: rgba(13, 79, 87, 0.12);
    border-color: rgba(13, 79, 87, 0.25);
    color: #99f6e4;
}

.seo-badge--stats[b-q9ngbogf83] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

.seo-badge--accent[b-q9ngbogf83] {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.25);
    color: #5eead4;
}

.seo-badge--security[b-q9ngbogf83] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

.seo-badge svg[b-q9ngbogf83] {
    width: 16px;
    height: 16px;
}

.seo-title[b-q9ngbogf83] {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.seo-title__line[b-q9ngbogf83] {
    display: block;
    color: #ffffff;
}

.seo-title__gradient[b-q9ngbogf83] {
    display: block;
    background: linear-gradient(135deg, #0d6b5a 0%, #14b8a6 50%, #5eead4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-subtitle[b-q9ngbogf83] {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ----------------------------------------
   SOCIAL PROOF STATS SECTION
   ---------------------------------------- */
.seo-section--stats[b-q9ngbogf83] {
    background: linear-gradient(180deg, transparent 0%, rgba(13, 107, 90, 0.03) 50%, transparent 100%);
    padding: 4rem 1.5rem 5rem;
}

.seo-orb--stats-1[b-q9ngbogf83] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #14b8a6 0%, transparent 70%);
    top: -100px;
    left: 20%;
    opacity: 0.2;
}

.seo-orb--stats-2[b-q9ngbogf83] {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #0d6b5a 0%, transparent 70%);
    bottom: -80px;
    right: 15%;
    animation-delay: -8s;
    opacity: 0.25;
}

.seo-orb--stats-3[b-q9ngbogf83] {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #0d4f57 0%, transparent 70%);
    top: 50%;
    left: -100px;
    animation-delay: -16s;
    opacity: 0.2;
}

.seo-stats-grid[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .seo-stats-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.seo-stat-card[b-q9ngbogf83] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-stat-card.is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: var(--delay, 0s);
}

.seo-stat-card:hover[b-q9ngbogf83] {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--stat-color, #0d6b5a);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.3),
        0 0 40px color-mix(in srgb, var(--stat-color, #0d6b5a) 20%, transparent);
}

.seo-stat-card__glow[b-q9ngbogf83] {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--stat-color, #0d6b5a) 0%, transparent 60%);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.seo-stat-card:hover .seo-stat-card__glow[b-q9ngbogf83] {
    opacity: 0.08;
}

.seo-stat-card__icon[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--stat-color, #0d6b5a) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--stat-color, #0d6b5a) 30%, transparent);
    color: var(--stat-color, #0d6b5a);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.seo-stat-card:hover .seo-stat-card__icon[b-q9ngbogf83] {
    transform: scale(1.1);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--stat-color, #0d6b5a) 25%, transparent);
}

.seo-stat-card__value[b-q9ngbogf83] {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--stat-color, #0d6b5a) 0%, color-mix(in srgb, var(--stat-color, #0d6b5a) 70%, #fff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.03em;
}

.seo-stat-card__label[b-q9ngbogf83] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.seo-stat-card__sublabel[b-q9ngbogf83] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

/* Pulse animation for stat cards */
@keyframes statPulse-b-q9ngbogf83 {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--stat-color, #0d6b5a) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

.seo-stat-card.is-visible[b-q9ngbogf83] {
    animation: statPulse-b-q9ngbogf83 3s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0s) + 0.5s);
}

.seo-stat-card:hover[b-q9ngbogf83] {
    animation: none;
}

/* ----------------------------------------
   CAPABILITIES SECTION
   ---------------------------------------- */
.seo-capabilities-grid[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .seo-capabilities-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .seo-capabilities-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.seo-capability-card[b-q9ngbogf83] {
    position: relative;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.seo-capability-card.is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay, 0s);
}

.seo-capability-card:hover[b-q9ngbogf83] {
    transform: translateY(-8px);
    border-color: rgba(13, 107, 90, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 50px rgba(13, 107, 90, 0.1);
}

.seo-capability-card__glow[b-q9ngbogf83] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--icon-color, #0d6b5a), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.seo-capability-card:hover .seo-capability-card__glow[b-q9ngbogf83] {
    opacity: 1;
}

.seo-capability-card__icon[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.15), rgba(13, 79, 87, 0.1));
    border: 1px solid rgba(13, 107, 90, 0.2);
    color: var(--icon-color, #5eead4);
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
}

.seo-capability-card:hover .seo-capability-card__icon[b-q9ngbogf83] {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(13, 107, 90, 0.3);
}

.seo-capability-card__title[b-q9ngbogf83] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.seo-capability-card__desc[b-q9ngbogf83] {
    font-size: 0.925rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.seo-capability-card__features[b-q9ngbogf83] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.seo-feature-tag[b-q9ngbogf83] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: rgba(13, 107, 90, 0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #5eead4;
}

.seo-feature-tag svg[b-q9ngbogf83] {
    color: #14b8a6;
}

/* ----------------------------------------
   INDUSTRIES SECTION
   ---------------------------------------- */
.seo-section--industries[b-q9ngbogf83] {
    background: linear-gradient(180deg, transparent 0%, rgba(13, 107, 90, 0.03) 50%, transparent 100%);
}

.seo-industries-grid[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 640px) {
    .seo-industries-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .seo-industries-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.seo-industry-card[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
    min-width: 0;
    max-width: 100%;
}

.seo-industry-card.is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay, 0s);
}

.seo-industry-card:hover[b-q9ngbogf83] {
    transform: translateY(-4px) translateX(4px);
    border-color: var(--accent, rgba(13, 107, 90, 0.3));
    background: rgba(255, 255, 255, 0.05);
}

.seo-industry-card__icon[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent, #5eead4);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.seo-industry-card:hover .seo-industry-card__icon[b-q9ngbogf83] {
    background: linear-gradient(135deg, var(--accent, #0d6b5a), transparent);
    border-color: var(--accent, #0d6b5a);
}

.seo-industry-card__content[b-q9ngbogf83] {
    flex: 1;
    min-width: 0;
}

.seo-industry-card__title[b-q9ngbogf83] {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.seo-industry-card__desc[b-q9ngbogf83] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-industry-card__arrow[b-q9ngbogf83] {
    color: #475569;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.seo-industry-card:hover .seo-industry-card__arrow[b-q9ngbogf83] {
    color: var(--accent, #0d6b5a);
    transform: translateX(4px);
}

/* ----------------------------------------
   COMPARISON TABLE
   ---------------------------------------- */
.seo-comparison-table-wrap[b-q9ngbogf83] {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.seo-comparison-table[b-q9ngbogf83] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.seo-comparison-table th[b-q9ngbogf83],
.seo-comparison-table td[b-q9ngbogf83] {
    text-align: left;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.seo-comparison-table thead th[b-q9ngbogf83] {
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.seo-table-highlight[b-q9ngbogf83] {
    background: rgba(13, 107, 90, 0.08) !important;
    border-left: 1px solid rgba(13, 107, 90, 0.2);
    border-right: 1px solid rgba(13, 107, 90, 0.2);
}

.seo-table-logo[b-q9ngbogf83] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #0d6b5a, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.seo-table-row[b-q9ngbogf83] {
    transition: background-color 0.2s ease;
    opacity: 0;
    transform: translateX(-20px);
}

.seo-table-row.is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateX(0);
}

.seo-table-row:hover[b-q9ngbogf83] {
    background: rgba(255, 255, 255, 0.02);
}

.seo-table-feature[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: #e2e8f0;
}

.seo-table-feature__icon[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
}

.seo-check[b-q9ngbogf83] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.seo-check--yes[b-q9ngbogf83] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.seo-check--no[b-q9ngbogf83] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.seo-check--partial[b-q9ngbogf83] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.seo-table-value[b-q9ngbogf83] {
    font-weight: 500;
    color: #5eead4;
}

.seo-table-value--muted[b-q9ngbogf83] {
    color: #64748b;
}

/* ----------------------------------------
   INTEGRATIONS SECTION
   ---------------------------------------- */
.seo-section--integrations[b-q9ngbogf83] {
    background: linear-gradient(180deg, transparent 0%, rgba(13, 79, 87, 0.03) 50%, transparent 100%);
}

.seo-integrations-showcase[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .seo-integrations-showcase[b-q9ngbogf83] {
        grid-template-columns: 1fr 1fr;
    }
}

.seo-integrations-orbit[b-q9ngbogf83] {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .seo-integrations-orbit[b-q9ngbogf83] {
        width: 400px;
        height: 400px;
    }
}

.seo-integration-node[b-q9ngbogf83] {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    transform-origin: center;
    animation: orbitRotate-b-q9ngbogf83 30s linear infinite;
    animation-delay: calc(var(--orbit-index, 0) * -3.75s);
}

.seo-integration-node__inner[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #5eead4;
    animation: orbitCounterRotate-b-q9ngbogf83 30s linear infinite;
    animation-delay: calc(var(--orbit-index, 0) * -3.75s);
    transition: all 0.3s ease;
}

.seo-integration-node:hover .seo-integration-node__inner[b-q9ngbogf83] {
    background: rgba(13, 107, 90, 0.2);
    border-color: rgba(13, 107, 90, 0.4);
    transform: scale(1.2);
}

@keyframes orbitRotate-b-q9ngbogf83 {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(120px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(120px); }
}

@media (min-width: 640px) {
    @keyframes orbitRotate-b-q9ngbogf83 {
        from { transform: translate(-50%, -50%) rotate(0deg) translateX(160px); }
        to { transform: translate(-50%, -50%) rotate(360deg) translateX(160px); }
    }
}

@keyframes orbitCounterRotate-b-q9ngbogf83 {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.seo-integrations-center[b-q9ngbogf83] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.seo-integrations-center__logo[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.2), rgba(13, 79, 87, 0.2));
    border: 2px solid rgba(13, 107, 90, 0.3);
    border-radius: 20px;
    color: #5eead4;
    box-shadow: 0 0 60px rgba(13, 107, 90, 0.3);
}

.seo-integrations-center span[b-q9ngbogf83] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #5eead4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.seo-integrations-categories[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.seo-integration-category[b-q9ngbogf83] {
    opacity: 0;
    transform: translateY(20px);
}

.seo-integration-category.is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0);
}

.seo-integration-category__title[b-q9ngbogf83] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.seo-integration-category__items[b-q9ngbogf83] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.seo-integration-pill[b-q9ngbogf83] {
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-size: 0.8rem;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.seo-integration-pill:hover[b-q9ngbogf83] {
    background: rgba(13, 107, 90, 0.15);
    border-color: rgba(13, 107, 90, 0.3);
    color: #5eead4;
}

/* ----------------------------------------
   SECURITY SECTION
   ---------------------------------------- */
.seo-section--security[b-q9ngbogf83] {
    position: relative;
}

.seo-security-bg[b-q9ngbogf83] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.seo-security-grid-overlay[b-q9ngbogf83] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

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

@media (min-width: 768px) {
    .seo-security-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .seo-security-grid[b-q9ngbogf83] {
        grid-template-columns: repeat(6, 1fr);
    }
}

.seo-security-card[b-q9ngbogf83] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.seo-security-card.is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay, 0s);
}

.seo-security-card:hover[b-q9ngbogf83] {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
    transform: translateY(-4px);
}

.seo-security-card__icon[b-q9ngbogf83] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
    margin-bottom: 1rem;
}

.seo-security-card__title[b-q9ngbogf83] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.seo-security-card__desc[b-q9ngbogf83] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
}

/* ----------------------------------------
   REVEAL ANIMATIONS
   ---------------------------------------- */
[data-reveal][b-q9ngbogf83] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-reveal].is-visible[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0);
}

.home-seo-status[b-q9ngbogf83] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

.home-seo-status--yes[b-q9ngbogf83] {
    border-color: rgba(46, 204, 113, 0.35);
    background: rgba(46, 204, 113, 0.14);
}

.home-seo-status--maybe[b-q9ngbogf83] {
    border-color: rgba(241, 196, 15, 0.35);
    background: rgba(241, 196, 15, 0.14);
}

.home-seo-status--no[b-q9ngbogf83] {
    border-color: rgba(231, 76, 60, 0.35);
    background: rgba(231, 76, 60, 0.14);
}

.home-seo-table thead th[b-q9ngbogf83] {
    font-size: 0.9rem;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.03);
}

.home-seo-links[b-q9ngbogf83] {
    margin-top: 0.9rem;
    opacity: 0.95;
}

.home-seo-links a[b-q9ngbogf83] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-seo-faq[b-q9ngbogf83] {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.home-seo-faq-item[b-q9ngbogf83] {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(120% 120% at 0% 0%, rgba(13, 107, 90, 0.14) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.02) 100%);
    padding: 0.1rem;
    overflow: hidden;
    transition: border-color 220ms ease;
}

.home-seo-faq-item summary[b-q9ngbogf83] {
    cursor: pointer;
    font-weight: 600;
   list-style: none;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

.home-seo-faq-q[b-q9ngbogf83] {
    letter-spacing: -0.01em;
}

.home-seo-faq-toggle[b-q9ngbogf83] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(15, 23, 42, 0.92);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.12);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-seo-faq-toggle:focus-visible[b-q9ngbogf83] {
    outline: 3px solid rgba(13, 107, 90, 0.28);
    outline-offset: 2px;
}

.home-seo-faq-toggle[b-q9ngbogf83]::before {
    content: "+";
}

.home-seo-faq-item[open][b-q9ngbogf83] {
    border-color: rgba(255, 255, 255, 0.22);
}

.home-seo-faq-item[open] .home-seo-faq-toggle[b-q9ngbogf83]::before {
    content: "–";
}

.home-seo-faq-item[open] .home-seo-faq-toggle[b-q9ngbogf83] {
    transform: rotate(0deg) scale(1.02);
    color: rgba(255, 255, 255, 0.98);
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.92), rgba(13, 79, 87, 0.82));
    border-color: rgba(13, 107, 90, 0.40);
    box-shadow: 0 16px 34px rgba(13, 107, 90, 0.18);
}

/* Only apply the "white" hover state when the item is closed.
   On mobile, :hover can stick after tapping, which was overriding the [open] gradient state. */
.home-seo-faq-item:not([open]):hover .home-seo-faq-toggle[b-q9ngbogf83] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.14);
}

.home-seo-faq-item[open]:hover .home-seo-faq-toggle[b-q9ngbogf83] {
    transform: rotate(0deg) scale(1.02);
}

.home-seo-faq-a[b-q9ngbogf83] {
    padding: 0 1.1rem 1.05rem;
   opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.home-seo-faq-item[open] .home-seo-faq-a[b-q9ngbogf83] {
    opacity: 1;
    transform: translateY(0);
}

.home-seo-faq-item p[b-q9ngbogf83] {
    margin: 0.75rem 0 0;
    opacity: 0.9;
}


.home-seo-explore-grid[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

.home-seo-explore-card[b-q9ngbogf83] {
    grid-column: span 12;
    display: grid;
    gap: 0.25rem;
    padding: 1.05rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
   position: relative;
    overflow: hidden;
}

.home-seo-explore-card[b-q9ngbogf83]::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(420px 220px at 20% 0%, rgba(13, 107, 90, 0.24), transparent 60%);
    opacity: 0;
    transition: opacity 240ms ease;
}

.home-seo-explore-card:hover[b-q9ngbogf83] {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

.home-seo-explore-card:hover[b-q9ngbogf83]::before {
    opacity: 1;
}

.home-seo-explore-icon[b-q9ngbogf83] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(13, 107, 90, 0.20);
    border: 1px solid rgba(13, 107, 90, 0.36);
    margin-bottom: 0.3rem;
}

.home-seo-explore-title[b-q9ngbogf83] {
   position: relative;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.home-seo-explore-body[b-q9ngbogf83] {
   position: relative;
    opacity: 0.9;
}

.home-seo-explore-cta[b-q9ngbogf83] {
    position: relative;
    margin-top: 0.4rem;
    font-weight: 800;
    opacity: 0.95;
}

@media (min-width: 700px) {
    .home-seo-explore-card[b-q9ngbogf83] {
        grid-column: span 6;
    }
}

@media (min-width: 1024px) {
    .home-seo-explore-card[b-q9ngbogf83] {
        grid-column: span 3;
    }
}

/* Showcase Section: See Bhogi Commerce in Action */
.home-seo-section--showcase[b-q9ngbogf83] {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.home-seo-showcase-bg[b-q9ngbogf83] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
    border-radius: 32px;
    box-shadow: 0 8px 40px rgba(13, 107, 90, 0.10), 0 2px 8px rgba(0,0,0,0.04);
    padding: 3.5rem 2.5rem 3.5rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.home-seo-header--showcase[b-q9ngbogf83] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.home-seo-lede--showcase[b-q9ngbogf83] {
    font-size: 1.25rem;
    color: #374151;
    opacity: 0.95;
    margin-top: 1rem;
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.home-seo-showcase-grid[b-q9ngbogf83] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.home-seo-showcase-card[b-q9ngbogf83] {
    background: linear-gradient(135deg, #fff 0%, #f0fdf9 100%);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(13, 107, 90, 0.08);
    padding: 2.25rem 1.5rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1.5px solid rgba(13, 107, 90, 0.10);
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.home-seo-showcase-card:hover[b-q9ngbogf83] {
    box-shadow: 0 12px 40px rgba(13, 107, 90, 0.16);
    border-color: rgba(13, 107, 90, 0.18);
    transform: translateY(-6px) scale(1.03);
}

.home-seo-showcase-card-icon[b-q9ngbogf83] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(13, 107, 90, 0.10);
    font-size: 2rem;
}

.home-seo-showcase-card h3[b-q9ngbogf83] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: #1e293b;
}

.home-seo-showcase-card p[b-q9ngbogf83] {
    font-size: 1rem;
    color: #374151;
    margin: 0;
    opacity: 0.92;
}

@media (max-width: 900px) {
    .home-seo-showcase-bg[b-q9ngbogf83] {
        padding: 2rem 1rem 2.5rem 1rem;
        border-radius: 20px;
    }
    .home-seo-showcase-grid[b-q9ngbogf83] {
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .seo-section[b-q9ngbogf83] {
        padding: 3rem 1rem;
    }

    .home-seo-section--showcase[b-q9ngbogf83] {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .home-seo-showcase-bg[b-q9ngbogf83] {
        padding: 1.25rem 0.5rem 1.5rem 0.5rem;
        border-radius: 12px;
    }
    .home-seo-showcase-card[b-q9ngbogf83] {
        padding: 1.25rem 0.5rem 1.25rem 0.5rem;
        border-radius: 10px;
    }
    .home-seo-showcase-card-icon[b-q9ngbogf83] {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
        border-radius: 8px;
    }

    .seo-industries-grid[b-q9ngbogf83] {
        gap: 0.75rem;
    }

    .seo-industry-card[b-q9ngbogf83] {
        padding: 0.875rem;
        gap: 0.75rem;
        border-radius: 12px;
    }

    .seo-industry-card__icon[b-q9ngbogf83] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .seo-industry-card__title[b-q9ngbogf83] {
        font-size: 0.9rem;
    }

    .seo-industry-card__desc[b-q9ngbogf83] {
        font-size: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .seo-industry-card__arrow[b-q9ngbogf83] {
        width: 16px;
        height: 16px;
    }
}
/* /Components/Pages/Marketing/Features.razor.rz.scp.css */
.bwe-feature-grid[b-f5epmq9ybd]{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
	gap:1rem;
	margin-top:1.25rem;
}

.bwe-feature-card[b-f5epmq9ybd]{
	border:1px solid rgba(2, 6, 23, 0.10);
	border-radius:1.25rem;
	padding:1.15rem;
	background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
	box-shadow:0 10px 26px rgba(2, 6, 23, 0.06);
	transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

.bwe-feature-card:hover[b-f5epmq9ybd]{
	transform:translateY(-2px);
	box-shadow:0 18px 48px rgba(2, 6, 23, 0.10);
	border-color:rgba(13, 107, 90, 0.22);
}

.bwe-feature-icon[b-f5epmq9ybd]{
	width:42px;
	height:42px;
	display:grid;
	place-items:center;
	border-radius:12px;
	background:radial-gradient(120px 80px at 15% 15%, rgba(13, 107, 90, 0.18), rgba(20, 184, 166, 0.10));
	border:1px solid rgba(2, 6, 23, 0.10);
	margin-bottom:.75rem;
}

.bwe-feature-icon :deep(svg)[b-f5epmq9ybd]{
	width:22px;
	height:22px;
	stroke-width:2.0;
}

.bwe-feature-card h3[b-f5epmq9ybd]{
	margin:.2rem 0 .35rem;
	font-size:1.05rem;
	letter-spacing:-0.01em;
}

.bwe-feature-card p[b-f5epmq9ybd]{
	margin:0 0 .75rem;
	opacity:.85;
	line-height:1.65;
}

.bwe-feature-link[b-f5epmq9ybd]{
	font-weight:700;
	text-decoration:none;
	color:#0d6b5a;
}

.bwe-feature-link:hover[b-f5epmq9ybd]{
	text-decoration:underline;
}

.bwe-split[b-f5epmq9ybd]{
	margin-top:2.25rem;
	display:grid;
	grid-template-columns:1.3fr .9fr;
	gap:1.25rem;
	align-items:stretch;
}

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

.bwe-checklist[b-f5epmq9ybd]{
	list-style:none;
	padding:0;
	margin:.8rem 0 0;
	display:grid;
	gap:.65rem;
}

.bwe-checklist li[b-f5epmq9ybd]{
	display:flex;
	gap:.6rem;
	align-items:flex-start;
	line-height:1.55;
}

.bwe-checklist :deep(svg)[b-f5epmq9ybd]{
	width:18px;
	height:18px;
	margin-top:.15rem;
}

.bwe-mini-panel[b-f5epmq9ybd]{
	border:1px solid rgba(2, 6, 23, 0.10);
	border-radius:1.5rem;
	padding:1.25rem;
	background:radial-gradient(500px 220px at 10% 0%, rgba(13, 107, 90, 0.12), transparent 70%),
			radial-gradient(500px 220px at 90% 10%, rgba(20, 184, 166, 0.12), transparent 70%),
			linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
	box-shadow:0 18px 55px rgba(2, 6, 23, 0.10);
}

.bwe-mini-panel h3[b-f5epmq9ybd]{ margin-top:0; }

.bwe-mini-panel p[b-f5epmq9ybd]{ opacity:.85; line-height:1.65; }

.bwe-mini-stats[b-f5epmq9ybd]{
	margin-top:1rem;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:.75rem;
}

.bwe-mini-stats > div[b-f5epmq9ybd]{
	border:1px solid rgba(2, 6, 23, 0.10);
	border-radius:1rem;
	padding:.75rem;
	background:rgba(255,255,255,0.75);
}

.bwe-mini-stats strong[b-f5epmq9ybd]{
	display:block;
	font-size:1.25rem;
	letter-spacing:-0.01em;
}

.bwe-mini-stats span[b-f5epmq9ybd]{
	display:block;
	opacity:.75;
	margin-top:.15rem;
	font-size:.95rem;
}
/* /Components/Pages/Marketing/Industries.razor.rz.scp.css */
.industry-hero[b-59ttzb5mlz] {
    margin-top: 0.75rem;
    border-radius: 22px;
    padding: clamp(18px, 3.4vw, 28px);
    background:
        radial-gradient(950px 320px at 8% 10%, rgba(255,255,255,0.14), transparent 58%),
        radial-gradient(780px 320px at 92% 12%, rgba(79,70,229,0.22), transparent 62%),
        linear-gradient(135deg, rgba(10,37,64,0.26), rgba(13,71,161,0.18));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 26px 110px rgba(0,0,0,0.22);
}

.industry-hero__grid[b-59ttzb5mlz] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(14px, 2.6vw, 24px);
    align-items: start;
}

.industry-hero__grid h2[b-59ttzb5mlz] {
    margin-top: 0;
}

.industry-hero__badges[b-59ttzb5mlz] {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.industry-hero__badges li[b-59ttzb5mlz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.industry-bestfits[b-59ttzb5mlz] {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.industry-bestfits__card[b-59ttzb5mlz] {
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.industry-bestfits__card h3[b-59ttzb5mlz] {
    margin-top: 0;
}

.industry-bestfits__list[b-59ttzb5mlz] {
    margin: 10px 0 0;
    padding-left: 1.1rem;
}

.industry-section[b-59ttzb5mlz] {
    margin-top: clamp(22px, 4.2vw, 44px);
}

.industry-section__header p[b-59ttzb5mlz] {
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.industry-card p[b-59ttzb5mlz] {
    min-height: 3.2em;
}

@media (max-width: 980px) {
    .industry-hero__grid[b-59ttzb5mlz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/POSSystem.razor.rz.scp.css */
/* POS System Page - Problem-Scenario-Calculator Structure */

.pos-system-page[b-olhj87d9vr] {
    background: linear-gradient(135deg, #0A1929 0%, #1a2844 100%);
    min-height: 100vh;
}

/* Container */
.container[b-olhj87d9vr] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Problem-Focused Hero */
.pos-hero[b-olhj87d9vr] {
    padding: 80px 20px 60px;
    background: linear-gradient(135deg, #0A1929 0%, #1e3a5f 100%);
    color: white;
    text-align: center;
}

.pos-hero h1[b-olhj87d9vr] {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
}

.hero-problem[b-olhj87d9vr] {
    font-size: 1.5rem;
    color: #B0C4D4;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.problem-visual[b-olhj87d9vr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}

.problem-before[b-olhj87d9vr], .problem-after[b-olhj87d9vr] {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 12px;
    min-width: 200px;
}

.problem-before .icon[b-olhj87d9vr] {
    font-size: 3rem;
}

.problem-after .icon[b-olhj87d9vr] {
    font-size: 3rem;
}

.problem-visual p[b-olhj87d9vr] {
    font-size: 1.2rem;
    margin: 15px 0 5px;
    font-weight: 600;
}

.problem-visual small[b-olhj87d9vr] {
    color: #B0C4D4;
}

.arrow[b-olhj87d9vr] {
    font-size: 2rem;
    color: #14b8a6;
}

/* Cost Section */
.pos-cost[b-olhj87d9vr] {
    padding: 80px 20px;
    background: white;
}

.pos-cost h2[b-olhj87d9vr] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.cost-grid[b-olhj87d9vr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.cost-card[b-olhj87d9vr] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px;
    border-radius: 12px;
    border-left: 5px solid #dc3545;
    text-align: center;
}

.cost-stat[b-olhj87d9vr] {
    font-size: 3rem;
    font-weight: 800;
    color: #dc3545;
    margin-bottom: 10px;
}

.cost-label[b-olhj87d9vr] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0A1929;
    margin-bottom: 15px;
}

.cost-impact[b-olhj87d9vr] {
    color: #6c757d;
    line-height: 1.6;
}

/* Workflow Section */
.pos-workflow[b-olhj87d9vr] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0A1929 0%, #1e3a5f 100%);
    color: white;
}

.pos-workflow h2[b-olhj87d9vr] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.workflow-steps[b-olhj87d9vr] {
    max-width: 800px;
    margin: 0 auto;
}

.workflow-step[b-olhj87d9vr] {
    background: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
}

.step-number[b-olhj87d9vr] {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #0d6b5a;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-icon[b-olhj87d9vr] {
    font-size: 3rem;
    margin-bottom: 20px;
}

.workflow-step h3[b-olhj87d9vr] {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #14b8a6;
}

.workflow-step p[b-olhj87d9vr] {
    color: #B0C4D4;
    line-height: 1.6;
    font-size: 1.1rem;
}

.workflow-arrow[b-olhj87d9vr] {
    text-align: center;
    font-size: 2rem;
    color: #14b8a6;
    margin: 10px 0;
}

/* Scenario-Based Features */
.pos-features[b-olhj87d9vr] {
    padding: 80px 20px;
    background: white;
}

.pos-features h2[b-olhj87d9vr] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.features-grid[b-olhj87d9vr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-scenario[b-olhj87d9vr] {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border-left: 5px solid #0d6b5a;
}

.feature-scenario h3[b-olhj87d9vr] {
    font-size: 1.3rem;
    color: #0A1929;
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-scenario p[b-olhj87d9vr] {
    color: #495057;
    line-height: 1.6;
}

/* Savings Calculator */
.pos-savings[b-olhj87d9vr] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0d6b5a 0%, #084a3f 100%);
    color: white;
}

.pos-savings h2[b-olhj87d9vr] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.savings-calculator[b-olhj87d9vr] {
    background: rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 12px;
    max-width: 900px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.calculator-inputs[b-olhj87d9vr] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.input-group label[b-olhj87d9vr] {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.1rem;
}

.input-group input[b-olhj87d9vr] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1.2rem;
    color: #0A1929;
}

.calculate-btn[b-olhj87d9vr] {
    background: #0A1929;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.calculate-btn:hover[b-olhj87d9vr] {
    background: #1e3a5f;
}

.calculator-result[b-olhj87d9vr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.result-value[b-olhj87d9vr] {
    font-size: 4rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 10px;
}

.result-label[b-olhj87d9vr] {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.result-note[b-olhj87d9vr] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

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

.calculator-cta p[b-olhj87d9vr] {
    font-size: 1.3rem;
    margin-bottom: 25px;
}

.cta-button[b-olhj87d9vr] {
    display: inline-block;
    background: #ffd700;
    color: #0A1929;
    padding: 18px 50px;
    border-radius: 6px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s;
}

.cta-button:hover[b-olhj87d9vr] {
    transform: scale(1.05);
}

/* Trust Signals */
.pos-trust[b-olhj87d9vr] {
    padding: 80px 20px;
    background: white;
}

.trust-grid[b-olhj87d9vr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.trust-item[b-olhj87d9vr] {
    text-align: center;
}

.trust-icon[b-olhj87d9vr] {
    font-size: 3rem;
    margin-bottom: 20px;
}

.trust-item h3[b-olhj87d9vr] {
    font-size: 1.4rem;
    color: #0A1929;
    margin-bottom: 15px;
}

.trust-item p[b-olhj87d9vr] {
    color: #6c757d;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .pos-hero h1[b-olhj87d9vr] {
        font-size: 2rem;
    }

    .hero-problem[b-olhj87d9vr] {
        font-size: 1.2rem;
    }

    .problem-visual[b-olhj87d9vr] {
        flex-direction: column;
        gap: 20px;
    }

    .arrow[b-olhj87d9vr] {
        transform: rotate(90deg);
    }

    .savings-calculator[b-olhj87d9vr] {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .result-value[b-olhj87d9vr] {
        font-size: 3rem;
    }
}

/* Hardware Compatibility Guide (UNIQUE TO POS PAGE) */
.hardware-guide[b-olhj87d9vr] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.hardware-guide h2[b-olhj87d9vr] {
    text-align: center;
    font-size: 2.5rem;
    color: #0A1929;
    margin-bottom: 20px;
}

.guide-intro[b-olhj87d9vr] {
    text-align: center;
    font-size: 1.2rem;
    color: #495057;
    max-width: 800px;
    margin: 0 auto 60px;
}

.hardware-grid[b-olhj87d9vr] {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hardware Category */
.hardware-category[b-olhj87d9vr] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.category-header[b-olhj87d9vr] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #ff6b35;
}

.category-icon[b-olhj87d9vr] {
    font-size: 2.5rem;
}

.category-header h3[b-olhj87d9vr] {
    font-size: 1.8rem;
    color: #0A1929;
    margin: 0;
}

.hardware-items[b-olhj87d9vr] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Hardware Item */
.hardware-item[b-olhj87d9vr] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
}

.hardware-item:hover[b-olhj87d9vr] {
    border-color: #ff6b35;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.15);
    transform: translateY(-2px);
}

.item-header[b-olhj87d9vr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.item-header h4[b-olhj87d9vr] {
    font-size: 1.3rem;
    color: #0A1929;
    margin: 0;
}

/* Compatibility Badges */
.compatibility-badge[b-olhj87d9vr] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.compatibility-badge.compatible[b-olhj87d9vr] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.compatibility-badge.partial[b-olhj87d9vr] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.item-description[b-olhj87d9vr] {
    font-size: 1.05rem;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Recommendations */
.item-recommendations[b-olhj87d9vr] {
    background: rgba(59, 130, 246, 0.05);
    border-left: 4px solid #3B82F6;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
}

.item-recommendations strong[b-olhj87d9vr] {
    color: #0A1929;
    display: block;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.item-recommendations ul[b-olhj87d9vr] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-recommendations li[b-olhj87d9vr] {
    padding: 6px 0;
    color: #495057;
    position: relative;
    padding-left: 25px;
}

.item-recommendations li[b-olhj87d9vr]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.1rem;
}

.setup-note[b-olhj87d9vr] {
    background: rgba(255, 107, 53, 0.1);
    border-left: 4px solid #ff6b35;
    padding: 12px 15px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 0.95rem;
    color: #495057;
}

.setup-note strong[b-olhj87d9vr] {
    color: #0A1929;
}

/* Setup Bundles */
.setup-bundles[b-olhj87d9vr] {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 2px solid #e9ecef;
}

.setup-bundles h3[b-olhj87d9vr] {
    text-align: center;
    font-size: 2rem;
    color: #0A1929;
    margin-bottom: 15px;
}

.bundle-intro[b-olhj87d9vr] {
    text-align: center;
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 50px;
}

.bundles-grid[b-olhj87d9vr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Bundle Card */
.bundle-card[b-olhj87d9vr] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 35px;
    position: relative;
    transition: all 0.3s ease;
}

.bundle-card:hover[b-olhj87d9vr] {
    border-color: #3B82F6;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
    transform: translateY(-5px);
}

.bundle-card.recommended[b-olhj87d9vr] {
    border-color: #ff6b35;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
}

.bundle-card.recommended:hover[b-olhj87d9vr] {
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.25);
}

.bundle-badge[b-olhj87d9vr] {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b35 0%, #ff8552 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3);
}

.bundle-header[b-olhj87d9vr] {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.bundle-header h4[b-olhj87d9vr] {
    font-size: 1.5rem;
    color: #0A1929;
    margin: 0 0 15px 0;
}

.bundle-price[b-olhj87d9vr] {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3B82F6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bundle-items[b-olhj87d9vr] {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.bundle-items li[b-olhj87d9vr] {
    padding: 12px 0;
    color: #495057;
    position: relative;
    padding-left: 30px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.bundle-items li[b-olhj87d9vr]:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ff6b35;
    font-weight: bold;
    font-size: 1.5rem;
}

.bundle-note[b-olhj87d9vr] {
    text-align: center;
    font-weight: 600;
    color: #3B82F6;
    font-size: 1.05rem;
    margin: 0;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

/* Hardware FAQ */
.hardware-faq[b-olhj87d9vr] {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 2px solid #e9ecef;
}

.hardware-faq h3[b-olhj87d9vr] {
    text-align: center;
    font-size: 2rem;
    color: #0A1929;
    margin-bottom: 50px;
}

.faq-grid[b-olhj87d9vr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-item[b-olhj87d9vr] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-left: 5px solid #3B82F6;
    padding: 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.faq-item:hover[b-olhj87d9vr] {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
    transform: translateY(-3px);
}

.faq-item h4[b-olhj87d9vr] {
    font-size: 1.2rem;
    color: #0A1929;
    margin: 0 0 12px 0;
}

.faq-item p[b-olhj87d9vr] {
    color: #495057;
    line-height: 1.6;
    margin: 0;
    font-size: 1.05rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .bundles-grid[b-olhj87d9vr] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .hardware-guide h2[b-olhj87d9vr] {
        font-size: 2rem;
    }

    .guide-intro[b-olhj87d9vr] {
        font-size: 1.05rem;
    }

    .hardware-category[b-olhj87d9vr] {
        padding: 25px;
    }

    .category-header[b-olhj87d9vr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .category-icon[b-olhj87d9vr] {
        font-size: 2rem;
    }

    .category-header h3[b-olhj87d9vr] {
        font-size: 1.5rem;
    }

    .item-header[b-olhj87d9vr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bundles-grid[b-olhj87d9vr] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .hardware-guide[b-olhj87d9vr] {
        padding: 50px 15px;
    }

    .hardware-category[b-olhj87d9vr] {
        padding: 20px;
    }

    .bundle-card[b-olhj87d9vr] {
        padding: 25px;
    }

    .setup-bundles h3[b-olhj87d9vr] {
        font-size: 1.6rem;
    }

    .hardware-faq h3[b-olhj87d9vr] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* Professional, print-friendly resume styling */
.profile-page[b-rl88bux0c3] {
    --profile-accent: rgba(37, 99, 235, 0.95);
    --profile-accent-soft: rgba(37, 99, 235, 0.14);
    --profile-border: rgba(15, 23, 42, 0.12);
    --profile-surface: rgba(255, 255, 255, 0.86);
    --profile-surface-strong: rgba(255, 255, 255, 0.95);

    min-height: 100vh;
    background:
        radial-gradient(900px 520px at 10% 0%, rgba(37, 99, 235, 0.10), transparent 55%),
        radial-gradient(800px 520px at 90% 10%, rgba(14, 165, 233, 0.07), transparent 58%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 46%);
    color: #0f172a;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.profile-actions[b-rl88bux0c3] {
    max-width: 210mm;
    margin: 0 auto;
    padding: 12px 18px 0;
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: 10px;
    z-index: 20;
}

.profile-action-btn[b-rl88bux0c3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.12);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    text-decoration: none;
}

.profile-action-btn:hover[b-rl88bux0c3] {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.16);
}

.profile-action-btn:active[b-rl88bux0c3] {
    transform: translateY(0);
}

.profile-action-btn:focus-visible[b-rl88bux0c3] {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.profile-action-btn__icon[b-rl88bux0c3] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: rgba(37, 99, 235, 0.95);
}

/* A4-like readable width (screen) */
.profile-hero__inner[b-rl88bux0c3],
.profile-container[b-rl88bux0c3] {
    max-width: 210mm;
}

.profile-container[b-rl88bux0c3] {
    padding-left: clamp(12px, 2.4vw, 18px);
    padding-right: clamp(12px, 2.4vw, 18px);
}

.profile-hero[b-rl88bux0c3] {
    position: relative;
    padding: clamp(26px, 5vw, 54px) 18px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.92));
    border-bottom: 1px solid var(--profile-border);
    overflow: clip;
}

.profile-hero[b-rl88bux0c3]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(720px 360px at 50% 0%, rgba(37, 99, 235, 0.14), transparent 65%),
        radial-gradient(520px 340px at 90% 10%, rgba(34, 197, 94, 0.08), transparent 60%);
    opacity: 0.85;
}

.profile-hero__inner[b-rl88bux0c3] {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.profile-hero__layout[b-rl88bux0c3] {
    display: grid;
    gap: 18px;
    align-items: center;
}

.profile-hero__main[b-rl88bux0c3] {
    display: grid;
    gap: 10px;
}

.profile-hero__aside[b-rl88bux0c3] {
    display: flex;
    justify-content: center;
}

@media (min-width: 900px) {
    .profile-hero__inner[b-rl88bux0c3] {
        text-align: left;
    }

    .profile-hero__layout[b-rl88bux0c3] {
        grid-template-columns: 1.25fr 0.95fr;
        align-items: start;
    }

    .profile-hero__aside[b-rl88bux0c3] {
        justify-content: flex-end;
    }

    .profile-hero__meta[b-rl88bux0c3] {
        justify-content: flex-start;
    }

    .profile-certifications[b-rl88bux0c3] {
        justify-content: flex-end;
    }
}

.profile-hero__title[b-rl88bux0c3] {
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: clamp(2.0rem, 4.8vw, 3.2rem);
    line-height: 1.05;
    color: #0f172a;
}

.profile-hero__subtitle[b-rl88bux0c3] {
    margin-top: 10px;
    font-size: clamp(1.05rem, 2.0vw, 1.35rem);
    color: rgba(15, 23, 42, 0.78);
}

.profile-hero__meta[b-rl88bux0c3] {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.profile-certifications[b-rl88bux0c3] {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.profile-certitem[b-rl88bux0c3] {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 140px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--profile-surface);
    border: 1px solid var(--profile-border);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}

.profile-cert[b-rl88bux0c3] {
    height: 54px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(2, 6, 23, 0.10));
}

.profile-certname[b-rl88bux0c3] {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.78);
    text-align: center;
    line-height: 1.2;
}

.profile-chip[b-rl88bux0c3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--profile-surface);
    border: 1px solid var(--profile-border);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
    backdrop-filter: blur(10px);
}

.profile-link[b-rl88bux0c3] {
    text-decoration: none;
    color: #0f172a;
}

.profile-link:hover[b-rl88bux0c3] {
    background: rgba(15, 23, 42, 0.03);
}

.profile-container[b-rl88bux0c3] {
    margin: 0 auto;
    padding: 12px 18px 60px;
}

.profile-grid[b-rl88bux0c3] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

/* Print/PDF */
@media print {
    @page {
        size: A4;
        margin: 10mm;
    }

    html[b-rl88bux0c3], body[b-rl88bux0c3] {
        width: auto !important;
        font-family: Arial, Helvetica, sans-serif !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Reduce PDF size: avoid embedding lots of vector/icon content and heavy effects */
    .profile-h__icon[b-rl88bux0c3] {
        display: none !important;
    }

    .profile-hero[b-rl88bux0c3]::before {
        display: none !important;
    }

    .profile-hero[b-rl88bux0c3] {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.14);
        padding: 6mm 0 3mm;
    }

    .profile-hero__inner[b-rl88bux0c3] {
        text-align: center !important;
    }

    .profile-hero__layout[b-rl88bux0c3] {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .profile-hero__aside[b-rl88bux0c3] {
        justify-content: center !important;
    }

    .profile-cert[b-rl88bux0c3] {
        height: 34px;
        filter: none;
    }

    .profile-certname[b-rl88bux0c3] {
        font-size: 0.8rem;
        color: rgba(15, 23, 42, 0.85);
    }

    .profile-certifications[b-rl88bux0c3] {
        margin-top: 6px;
        gap: 6px;
        justify-content: center !important;
    }

    .profile-certitem[b-rl88bux0c3] {
        min-width: 0;
        padding: 6px 8px;
        box-shadow: none;
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, 0.14);
    }

    /* If the PDF is still too large, uncomment to remove badge images entirely */
    /*
    .profile-cert {
        display: none !important;
    }
    */

    .profile-chip[b-rl88bux0c3] {
        padding: 6px 10px;
        box-shadow: none;
        backdrop-filter: none;
    }

    .profile-container[b-rl88bux0c3] {
        max-width: 190mm;
        padding: 0;
    }

    .profile-grid[b-rl88bux0c3] {
        gap: 8px;
    }

    .profile-card[b-rl88bux0c3] {
        padding: 10px 10px 8px;
        border-radius: 10px;
        break-inside: auto;
        page-break-inside: auto;
    }

    .profile-h[b-rl88bux0c3],
    .profile-card__title[b-rl88bux0c3] {
        break-after: avoid;
        page-break-after: avoid;
    }

    .profile-bullets p[b-rl88bux0c3],
    .profile-bullets ul[b-rl88bux0c3] {
        break-inside: auto;
        page-break-inside: auto;
    }

    .profile-bullets ul.profile-bullets[b-rl88bux0c3] {
        padding-left: 16px;
    }

    .profile-role[b-rl88bux0c3] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .profile-card--full[b-rl88bux0c3] {
        break-inside: auto;
        page-break-inside: auto;
    }

    .profile-bullets[b-rl88bux0c3] {
        gap: 6px;
        line-height: 1.45;
    }

    .profile-timeline[b-rl88bux0c3] {
        gap: 10px;
    }

    .profile-timeline[b-rl88bux0c3],
    .profile-role__header[b-rl88bux0c3],
    .profile-role__title[b-rl88bux0c3],
    .profile-role__dates[b-rl88bux0c3] {
        break-inside: auto;
        page-break-inside: auto;
    }

    .profile-role ul.profile-bullets[b-rl88bux0c3],
    .profile-role .profile-bullets[b-rl88bux0c3] {
        break-inside: auto;
        page-break-inside: auto;
    }

    .profile-role li[b-rl88bux0c3] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .profile-card p + p[b-rl88bux0c3] {
        margin-top: 6px;
    }

    a[b-rl88bux0c3] {
        color: inherit;
        text-decoration: none;
    }

    .profile-page[b-rl88bux0c3] {
        background: #ffffff;
        color: #0f172a;
    }

    .profile-card[b-rl88bux0c3],
    .profile-role[b-rl88bux0c3],
    .profile-project[b-rl88bux0c3],
    .profile-contact__item[b-rl88bux0c3] {
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, 0.14);
        box-shadow: none;
        color: #0f172a;
    }

    .profile-role[b-rl88bux0c3]::before {
        display: none;
    }

    .profile-footer[b-rl88bux0c3] {
        color: rgba(15, 23, 42, 0.8);
    }

    .profile-actions[b-rl88bux0c3] {
        display: none !important;
    }
}

.profile-card[b-rl88bux0c3] {
    grid-column: span 12;
    padding: 18px 18px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--profile-surface-strong), var(--profile-surface));
    border: 1px solid var(--profile-border);
    box-shadow: 0 16px 46px rgba(2, 6, 23, 0.08);
    transition: transform .15s ease, box-shadow .22s ease, border-color .22s ease;
}

.profile-card:hover[b-rl88bux0c3] {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.20);
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.11);
}

.profile-card--full[b-rl88bux0c3] {
    grid-column: span 12;
}

@media (min-width: 900px) {
    .profile-card[b-rl88bux0c3] {
        grid-column: span 6;
    }

    .profile-card--full[b-rl88bux0c3] {
        grid-column: span 12;
    }
}

.profile-card__title[b-rl88bux0c3] {
    margin: 0 0 10px;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.92);
}

.profile-h[b-rl88bux0c3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    margin-bottom: 14px;
}

.profile-h__icon[b-rl88bux0c3] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(37, 99, 235, 0.95);
    flex: 0 0 auto;
}

.profile-h__icon svg[b-rl88bux0c3] {
    width: 18px;
    height: 18px;
}

.profile-bullets[b-rl88bux0c3] {
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    line-height: 1.55;
}

ul.profile-bullets[b-rl88bux0c3] {
    padding-left: 18px;
    list-style: disc;
}

ul.profile-bullets li[b-rl88bux0c3] {
    margin: 0;
}

/* Allow summary to be paragraph-based but keep spacing consistent */
.profile-card p[b-rl88bux0c3] {
    margin: 0;
    line-height: 1.65;
}

.profile-card p + p[b-rl88bux0c3] {
    margin-top: 10px;
}

.profile-section[b-rl88bux0c3] {
    margin-top: 12px;
}

.profile-section__title[b-rl88bux0c3] {
    font-weight: 800;
    opacity: 0.9;
    margin-bottom: 6px;
}

.profile-two-col[b-rl88bux0c3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 900px) {
    .profile-two-col[b-rl88bux0c3] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.profile-skillgrid[b-rl88bux0c3] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

.profile-skill[b-rl88bux0c3] {
    grid-column: span 12;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.profile-skill__title[b-rl88bux0c3] {
    font-weight: 800;
    margin-bottom: 8px;
}

@media (min-width: 900px) {
    .profile-skill[b-rl88bux0c3] { grid-column: span 6; }
}

.profile-timeline[b-rl88bux0c3] {
    display: grid;
    gap: 12px;
}

.profile-role[b-rl88bux0c3] {
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.10);
    position: relative;
    overflow: clip;
}

.profile-role[b-rl88bux0c3]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--profile-accent), rgba(34, 197, 94, 0.65));
    opacity: 0.65;
}

.profile-role__header[b-rl88bux0c3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.profile-role__title[b-rl88bux0c3] {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.profile-role__title strong[b-rl88bux0c3] {
    background: linear-gradient(135deg, var(--profile-accent) 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

.profile-role__dates[b-rl88bux0c3] {
    color: rgba(15, 23, 42, 0.7);
}

.profile-kv[b-rl88bux0c3] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px 14px;
}

.profile-kv__k[b-rl88bux0c3] {
    color: rgba(15, 23, 42, 0.72);
    font-weight: 700;
}

.profile-kv__v[b-rl88bux0c3] {
    opacity: 0.96;
}

.profile-project[b-rl88bux0c3] {
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.10);
    margin-top: 10px;
}

.profile-project__title[b-rl88bux0c3] {
    font-weight: 800;
}

.profile-project__meta[b-rl88bux0c3] {
    margin-top: 4px;
    color: rgba(15, 23, 42, 0.72);
    font-size: 0.95rem;
}

.profile-contact[b-rl88bux0c3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-contact__item[b-rl88bux0c3] {
    text-decoration: none;
    color: #0f172a;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.10);
}

.profile-contact__item:hover[b-rl88bux0c3] {
    background: rgba(2, 6, 23, 0.04);
}

.profile-contact__label[b-rl88bux0c3] {
    display: block;
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.72);
}

.profile-contact__value[b-rl88bux0c3] {
    display: block;
    font-weight: 800;
    margin-top: 6px;
}

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

.profile-footer[b-rl88bux0c3] {
    grid-column: span 12;
    text-align: center;
    color: rgba(15, 23, 42, 0.72);
    padding: 16px 4px 0;
}
/* /Components/Pages/ProtectFamilyHeroTest.razor.rz.scp.css */
.protect-family-hero-test[b-32uz5grbhk] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}
/* /Components/Pages/TestimonialsPage.razor.rz.scp.css */
/* ============================================================
   TESTIMONIALS PAGE - Enterprise Grade Design System
   ============================================================ */

.tst-section[b-4gpk2tpm5e] {
    position: relative;
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 50%, #e2e8f0 100%);
    padding: 120px 24px;
    overflow-x: hidden;
    min-height: 100vh;
}

.tst-section *[b-4gpk2tpm5e],
.tst-section *[b-4gpk2tpm5e]::before,
.tst-section *[b-4gpk2tpm5e]::after {
    box-sizing: border-box;
}

/* ============================================================
   PREMIUM BACKGROUND
   ============================================================ */

.tst-bg[b-4gpk2tpm5e] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.tst-bg__pattern[b-4gpk2tpm5e] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(13, 107, 90, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 90, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 50% at 50% 20%, black 20%, transparent 70%);
}

.tst-bg__gradient[b-4gpk2tpm5e] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(13, 107, 90, 0.08) 0%, transparent 60%);
}

.tst-bg__orb[b-4gpk2tpm5e] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.tst-bg__orb--1[b-4gpk2tpm5e] {
    width: 500px;
    height: 500px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.12) 0%, transparent 70%);
}

.tst-bg__orb--2[b-4gpk2tpm5e] {
    width: 400px;
    height: 400px;
    bottom: 20%;
    right: -80px;
    background: radial-gradient(circle, rgba(13, 79, 87, 0.08) 0%, transparent 70%);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.tst-container[b-4gpk2tpm5e] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
    width: 100%;
}

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

.tst-header[b-4gpk2tpm5e] {
    text-align: center;
    margin-bottom: 48px;
}

.tst-badge[b-4gpk2tpm5e] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
    border: 1px solid rgba(13, 107, 90, 0.2);
    border-radius: 100px;
    margin-bottom: 24px;
}

.tst-badge__icon[b-4gpk2tpm5e] {
    font-size: 1rem;
}

.tst-badge__text[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6b5a;
    letter-spacing: 0.02em;
}

.tst-badge__rating[b-4gpk2tpm5e] {
    padding: 4px 10px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
}

.tst-title[b-4gpk2tpm5e] {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.tst-title__line[b-4gpk2tpm5e] {
    display: block;
}

.tst-title__gradient[b-4gpk2tpm5e] {
    display: block;
    background: linear-gradient(135deg, #5eead4 0%, #14b8a6 50%, #0d6b5a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tst-subtitle[b-4gpk2tpm5e] {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   TRUST STATS
   ============================================================ */

.tst-trust-stats[b-4gpk2tpm5e] {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.tst-trust-stat[b-4gpk2tpm5e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tst-trust-stat__value[b-4gpk2tpm5e] {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.tst-trust-stat__label[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* ============================================================
   FILTERS
   ============================================================ */

.tst-filters[b-4gpk2tpm5e] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.tst-filter[b-4gpk2tpm5e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tst-filter:hover[b-4gpk2tpm5e] {
    border-color: #99f6e4;
    color: #0d6b5a;
}

.tst-filter--active[b-4gpk2tpm5e] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(13, 107, 90, 0.3);
}

.tst-filter--active:hover[b-4gpk2tpm5e] {
    color: #ffffff;
}

.tst-filter__icon[b-4gpk2tpm5e] {
    font-size: 1rem;
}

.tst-filter__count[b-4gpk2tpm5e] {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
}

.tst-filter--active .tst-filter__count[b-4gpk2tpm5e] {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   FEATURED TESTIMONIAL
   ============================================================ */

.tst-featured[b-4gpk2tpm5e] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: center;
    padding: 48px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.05) 0%, rgba(13, 79, 87, 0.05) 100%);
    border: 1px solid rgba(13, 107, 90, 0.1);
    border-radius: 28px;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.tst-featured--visible[b-4gpk2tpm5e] {
    opacity: 1;
    transform: translateY(0);
}

.tst-featured__badge[b-4gpk2tpm5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.tst-featured__quote[b-4gpk2tpm5e] {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.7;
    margin: 0 0 28px 0;
    font-style: italic;
}

.tst-featured__metrics[b-4gpk2tpm5e] {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.tst-featured__metric[b-4gpk2tpm5e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tst-featured__metric-value[b-4gpk2tpm5e] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0d6b5a;
}

.tst-featured__metric-label[b-4gpk2tpm5e] {
    font-size: 0.8125rem;
    color: #64748b;
}

.tst-featured__author[b-4gpk2tpm5e] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(13, 107, 90, 0.1);
}

.tst-featured__author-info[b-4gpk2tpm5e] {
    flex: 1;
}

.tst-featured__name[b-4gpk2tpm5e] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.tst-featured__role[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 2px;
}

.tst-featured__location[b-4gpk2tpm5e] {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin-top: 4px;
}

.tst-featured__rating[b-4gpk2tpm5e] {
    display: flex;
    gap: 2px;
}

/* Featured Visual */
.tst-featured__visual[b-4gpk2tpm5e] {
    position: relative;
    height: 300px;
}

.tst-featured__card-stack[b-4gpk2tpm5e] {
    position: relative;
    width: 100%;
    height: 100%;
}

.tst-featured__mock-card[b-4gpk2tpm5e] {
    position: absolute;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tst-featured__mock-card--1[b-4gpk2tpm5e] {
    top: 0;
    left: 0;
    width: 280px;
    height: 180px;
}

.tst-featured__mock-card--2[b-4gpk2tpm5e] {
    bottom: 40px;
    right: 0;
    padding: 16px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-weight: 600;
}

.tst-featured__mock-card--3[b-4gpk2tpm5e] {
    bottom: 0;
    left: 40px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
    font-weight: 600;
}

.tst-mock__header[b-4gpk2tpm5e] {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: #f1f5f9;
}

.tst-mock__dot[b-4gpk2tpm5e] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.tst-mock__dot:first-child[b-4gpk2tpm5e] { background: #ef4444; }
.tst-mock__dot:nth-child(2)[b-4gpk2tpm5e] { background: #f59e0b; }
.tst-mock__dot:nth-child(3)[b-4gpk2tpm5e] { background: #22c55e; }

.tst-mock__content[b-4gpk2tpm5e] {
    padding: 20px;
}

.tst-mock__chart[b-4gpk2tpm5e] {
    height: 80px;
    background: linear-gradient(180deg, rgba(13, 107, 90, 0.1) 0%, rgba(13, 107, 90, 0.3) 100%);
    border-radius: 8px;
}

.tst-mock__stat[b-4gpk2tpm5e] {
    font-size: 0.9375rem;
}

/* ============================================================
   TESTIMONIALS GRID
   ============================================================ */

.tst-grid[b-4gpk2tpm5e] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

/* ============================================================
   TESTIMONIAL CARD
   ============================================================ */

.tst-card[b-4gpk2tpm5e] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(30px);
}

.tst-card--visible[b-4gpk2tpm5e] {
    animation: cardReveal-b-4gpk2tpm5e 0.5s ease forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes cardReveal-b-4gpk2tpm5e {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tst-card:hover[b-4gpk2tpm5e] {
    transform: translateY(-8px);
    border-color: rgba(13, 107, 90, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.tst-card--highlighted[b-4gpk2tpm5e] {
    border-color: rgba(13, 107, 90, 0.3);
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.tst-card--highlighted:hover[b-4gpk2tpm5e] {
    border-color: rgba(13, 107, 90, 0.5);
}

.tst-card__highlight-badge[b-4gpk2tpm5e] {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.tst-card__header[b-4gpk2tpm5e] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.tst-card__meta[b-4gpk2tpm5e] {
    flex: 1;
    min-width: 0;
}

.tst-card__name[b-4gpk2tpm5e] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.tst-card__role[b-4gpk2tpm5e] {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 2px;
}

.tst-card__industry[b-4gpk2tpm5e] {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    background: rgba(13, 107, 90, 0.08);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0d6b5a;
}

.tst-card__rating[b-4gpk2tpm5e] {
    display: flex;
    gap: 1px;
}

.tst-card__quote[b-4gpk2tpm5e] {
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

.tst-card__results[b-4gpk2tpm5e] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.tst-card__result[b-4gpk2tpm5e] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tst-card__result-icon[b-4gpk2tpm5e] {
    font-size: 1.25rem;
}

.tst-card__result-text[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.tst-card__footer[b-4gpk2tpm5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ============================================================
   AVATAR
   ============================================================ */

.tst-avatar[b-4gpk2tpm5e] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.tst-avatar--large[b-4gpk2tpm5e] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.125rem;
}

.tst-avatar--blue[b-4gpk2tpm5e] { background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%); }
.tst-avatar--pink[b-4gpk2tpm5e] { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.tst-avatar--green[b-4gpk2tpm5e] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.tst-avatar--purple[b-4gpk2tpm5e] { background: linear-gradient(135deg, #0d4f57 0%, #115e59 100%); }
.tst-avatar--teal[b-4gpk2tpm5e] { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.tst-avatar--rose[b-4gpk2tpm5e] { background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%); }
.tst-avatar--emerald[b-4gpk2tpm5e] { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.tst-avatar--amber[b-4gpk2tpm5e] { background: linear-gradient(135deg, #0d6b5a 0%, #14b8a6 100%); }

/* ============================================================
   STAR RATING
   ============================================================ */

.tst-star[b-4gpk2tpm5e] {
    color: #14b8a6;
    font-size: 1.25rem;
}

.tst-star--small[b-4gpk2tpm5e] {
    font-size: 0.875rem;
}

/* ============================================================
   VIDEO TESTIMONIALS
   ============================================================ */

.tst-video-section[b-4gpk2tpm5e] {
    margin-bottom: 64px;
}

.tst-video-section__title[b-4gpk2tpm5e] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 28px 0;
    justify-content: center;
}

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

.tst-video-card[b-4gpk2tpm5e] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
}

.tst-video-card--visible[b-4gpk2tpm5e] {
    opacity: 1;
    transform: translateY(0);
}

.tst-video-card:hover[b-4gpk2tpm5e] {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.tst-video-card__thumbnail[b-4gpk2tpm5e] {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tst-video-card__play[b-4gpk2tpm5e] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #0f172a;
    transition: transform 0.3s ease;
}

.tst-video-card:hover .tst-video-card__play[b-4gpk2tpm5e] {
    transform: scale(1.1);
}

.tst-video-card__duration[b-4gpk2tpm5e] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}

.tst-video-card__content[b-4gpk2tpm5e] {
    padding: 20px;
}

.tst-video-card__title[b-4gpk2tpm5e] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.tst-video-card__desc[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.tst-video-card__author[b-4gpk2tpm5e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tst-video-card__author-name[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.tst-video-card__author-role[b-4gpk2tpm5e] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ============================================================
   INDUSTRIES
   ============================================================ */

.tst-industries[b-4gpk2tpm5e] {
    margin-bottom: 64px;
    text-align: center;
}

.tst-industries__title[b-4gpk2tpm5e] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 28px 0;
}

.tst-industries__grid[b-4gpk2tpm5e] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tst-industry-card[b-4gpk2tpm5e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.tst-industry-card:hover[b-4gpk2tpm5e] {
    border-color: #99f6e4;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.tst-industry-card__icon[b-4gpk2tpm5e] {
    font-size: 1.25rem;
}

.tst-industry-card__name[b-4gpk2tpm5e] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
}

.tst-industry-card__count[b-4gpk2tpm5e] {
    padding: 2px 10px;
    background: rgba(13, 107, 90, 0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0d6b5a;
}

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

.tst-cta[b-4gpk2tpm5e] {
    padding: 48px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 28px;
    text-align: center;
}

.tst-cta__title[b-4gpk2tpm5e] {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.tst-cta__desc[b-4gpk2tpm5e] {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

.tst-cta__actions[b-4gpk2tpm5e] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    width: 100%;
    max-width: 100%;
}

.tst-cta__primary[b-4gpk2tpm5e] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(13, 107, 90, 0.4);
}

.tst-cta__primary:hover[b-4gpk2tpm5e] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(13, 107, 90, 0.5);
}

.tst-cta__arrow[b-4gpk2tpm5e] {
    transition: transform 0.3s ease;
}

.tst-cta__primary:hover .tst-cta__arrow[b-4gpk2tpm5e] {
    transform: translateX(4px);
}

.tst-cta__secondary[b-4gpk2tpm5e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.tst-cta__secondary:hover[b-4gpk2tpm5e] {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.tst-cta__trust[b-4gpk2tpm5e] {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.tst-cta__trust-item[b-4gpk2tpm5e] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

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

    .tst-video-grid[b-4gpk2tpm5e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tst-featured[b-4gpk2tpm5e] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tst-featured__visual[b-4gpk2tpm5e] {
        display: none;
    }
}

@media (max-width: 992px) {
    .tst-section[b-4gpk2tpm5e] {
        padding: 96px 20px;
    }

    .tst-title[b-4gpk2tpm5e] {
        font-size: 2.75rem;
    }

    .tst-trust-stats[b-4gpk2tpm5e] {
        gap: 32px;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .tst-section[b-4gpk2tpm5e] {
        padding: 72px 16px;
    }

    .tst-title[b-4gpk2tpm5e] {
        font-size: 2.25rem;
    }

    .tst-subtitle[b-4gpk2tpm5e] {
        font-size: 1.1rem;
    }

    .tst-trust-stats[b-4gpk2tpm5e] {
        gap: 24px;
    }

    .tst-trust-stat__value[b-4gpk2tpm5e] {
        font-size: 1.5rem;
    }

    .tst-filters[b-4gpk2tpm5e] {
        gap: 8px;
    }

    .tst-filter[b-4gpk2tpm5e] {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }

    .tst-filter__label[b-4gpk2tpm5e] {
        display: none;
    }

    .tst-featured[b-4gpk2tpm5e] {
        padding: 28px;
    }

    .tst-featured__quote[b-4gpk2tpm5e] {
        font-size: 1.125rem;
    }

    .tst-featured__metrics[b-4gpk2tpm5e] {
        gap: 20px;
    }

    .tst-grid[b-4gpk2tpm5e] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tst-card[b-4gpk2tpm5e] {
        padding: 24px;
    }

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

    .tst-video-grid[b-4gpk2tpm5e] {
        grid-template-columns: 1fr;
    }

    .tst-industries__grid[b-4gpk2tpm5e] {
        gap: 10px;
    }

    .tst-industry-card[b-4gpk2tpm5e] {
        padding: 10px 18px;
    }

    .tst-cta[b-4gpk2tpm5e] {
        padding: 32px 20px;
    }

    .tst-cta__title[b-4gpk2tpm5e] {
        font-size: 1.5rem;
    }

    .tst-cta__actions[b-4gpk2tpm5e] {
        flex-direction: column;
        gap: 12px;
    }

    .tst-cta__primary[b-4gpk2tpm5e],
    .tst-cta__secondary[b-4gpk2tpm5e] {
        width: 100%;
        justify-content: center;
    }

    .tst-cta__trust[b-4gpk2tpm5e] {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
    .tst-section[b-4gpk2tpm5e] {
        padding: 56px 16px;
    }

    .tst-container[b-4gpk2tpm5e] {
        padding: 0;
    }

    .tst-badge[b-4gpk2tpm5e] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 10px 16px;
    }

    .tst-title[b-4gpk2tpm5e] {
        font-size: 1.875rem;
    }

    .tst-subtitle[b-4gpk2tpm5e] {
        font-size: 1rem;
    }

    .tst-trust-stats[b-4gpk2tpm5e] {
        gap: 16px;
    }

    .tst-trust-stat[b-4gpk2tpm5e] {
        min-width: 80px;
    }

    .tst-featured[b-4gpk2tpm5e] {
        padding: 24px;
        border-radius: 20px;
    }

    .tst-featured__author[b-4gpk2tpm5e] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .tst-card[b-4gpk2tpm5e] {
        padding: 20px;
        border-radius: 16px;
    }

    .tst-video-card__thumbnail[b-4gpk2tpm5e] {
        height: 160px;
    }

    .tst-cta[b-4gpk2tpm5e] {
        padding: 28px 16px;
        border-radius: 20px;
    }

    .tst-cta__actions[b-4gpk2tpm5e] {
        flex-direction: column;
    }

    .tst-cta__primary[b-4gpk2tpm5e],
    .tst-cta__secondary[b-4gpk2tpm5e] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .tst-card[b-4gpk2tpm5e],
    .tst-featured[b-4gpk2tpm5e],
    .tst-video-card[b-4gpk2tpm5e] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .tst-card:hover[b-4gpk2tpm5e],
    .tst-video-card:hover[b-4gpk2tpm5e],
    .tst-cta__primary:hover[b-4gpk2tpm5e],
    .tst-cta__secondary:hover[b-4gpk2tpm5e],
    .tst-filter:hover[b-4gpk2tpm5e],
    .tst-industry-card:hover[b-4gpk2tpm5e] {
        transform: none;
    }

    .tst-video-card:hover .tst-video-card__play[b-4gpk2tpm5e] {
        transform: none;
    }
}
/* /Components/Shared/Home/ComparisonSection.razor.rz.scp.css */
/* ========================================
   COMPARISON SECTION - Enterprise Design
   ======================================== */

.comparison-section[b-m6nsgf6vee] {
    position: relative;
    background:
        radial-gradient(900px 360px at 10% 0%, rgba(13, 107, 90, 0.16), transparent 70%),
        radial-gradient(700px 320px at 92% 100%, rgba(163, 163, 163, 0.14), transparent 74%),
        linear-gradient(180deg, #081f29 0%, #0c2f38 56%, #112831 100%);
    padding: 72px 24px;
    overflow-x: hidden;
}

.comparison-section *[b-m6nsgf6vee],
.comparison-section *[b-m6nsgf6vee]::before,
.comparison-section *[b-m6nsgf6vee]::after {
    box-sizing: border-box;
}

.comparison-bg-effects[b-m6nsgf6vee] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.comparison-gradient-orb[b-m6nsgf6vee] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.comparison-orb-1[b-m6nsgf6vee] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.34) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: floatOrb-b-m6nsgf6vee 8s ease-in-out infinite;
}

.comparison-orb-2[b-m6nsgf6vee] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(137, 148, 148, 0.28) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: floatOrb-b-m6nsgf6vee 10s ease-in-out infinite reverse;
}

@keyframes floatOrb-b-m6nsgf6vee {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

@media (max-width: 768px) {
    .comparison-section[b-m6nsgf6vee] {
        padding: 56px 20px;
    }
}

@media (max-width: 480px) {
    .comparison-section[b-m6nsgf6vee] {
        padding: 44px 16px;
    }
}

.container[b-m6nsgf6vee] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

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

.comparison-header[b-m6nsgf6vee] {
    text-align: center;
    margin-bottom: 34px;
}

.comparison-badge[b-m6nsgf6vee] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(13, 107, 90, 0.16);
    border: 1px solid rgba(13, 107, 90, 0.32);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ce7d7;
    margin-bottom: 14px;
    animation: fadeInDown-b-m6nsgf6vee 0.5s ease both;
}

.comparison-badge-icon[b-m6nsgf6vee] {
    width: 16px;
    height: 16px;
}

@keyframes fadeInDown-b-m6nsgf6vee {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-title[b-m6nsgf6vee] {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 12px 0;
    color: #ffffff;
    letter-spacing: -0.03em;
    animation: fadeInUp-b-m6nsgf6vee 0.5s ease 0.1s both;
}

.comparison-vs[b-m6nsgf6vee] {
    display: inline-block;
    padding: 4px 16px;
    margin: 0 8px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.2), rgba(119, 132, 132, 0.2));
    border: 1px solid rgba(13, 107, 90, 0.34);
    border-radius: 8px;
    font-size: 0.6em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ce7d7;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .section-title[b-m6nsgf6vee] {
        font-size: 2.25rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-m6nsgf6vee] {
        font-size: 1.75rem;
    }

    .comparison-vs[b-m6nsgf6vee] {
        display: block;
        margin: 8px auto;
        width: fit-content;
    }
}

.section-subtitle[b-m6nsgf6vee] {
    font-size: 1.125rem;
    color: #94a3b8;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.6;
    animation: fadeInUp-b-m6nsgf6vee 0.5s ease 0.15s both;
}

.section-subtitle strong[b-m6nsgf6vee] {
    color: #8ce2cf;
}

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

/* ========================================
   TABLE CONTAINER
   ======================================== */

.comparison-table-container[b-m6nsgf6vee] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(10px);
    animation: fadeInUp-b-m6nsgf6vee 0.6s ease 0.2s both;
}

@media (max-width: 768px) {
    .comparison-table-container[b-m6nsgf6vee] {
        padding: 18px 14px;
        border-radius: 20px;
    }
}

/* ========================================
   HEADER CARDS
   ======================================== */

.comparison-table-header-cards[b-m6nsgf6vee] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .comparison-table-header-cards[b-m6nsgf6vee] {
        grid-template-columns: 1fr 1fr;
    }

    .comparison-header-spacer[b-m6nsgf6vee] {
        display: none;
    }
}

.comparison-header-spacer[b-m6nsgf6vee] {
    /* Empty space for alignment */
}

.comparison-header-card[b-m6nsgf6vee] {
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    position: relative;
}

.comparison-header-card h3[b-m6nsgf6vee] {
    margin: 8px 0 0 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.comparison-card-icon[b-m6nsgf6vee] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.comparison-card-icon svg[b-m6nsgf6vee] {
    width: 22px;
    height: 22px;
}

.website-card[b-m6nsgf6vee] {
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.18), rgba(13, 107, 90, 0.06));
    border: 1px solid rgba(13, 107, 90, 0.3);
}

.website-card h3[b-m6nsgf6vee] {
    color: #8ce2cf;
}

.website-card .comparison-card-icon[b-m6nsgf6vee] {
    background: rgba(13, 107, 90, 0.25);
    color: #8ce2cf;
}

.marketplace-card[b-m6nsgf6vee] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.05));
    border: 1px solid rgba(251, 146, 60, 0.25);
}

.marketplace-card h3[b-m6nsgf6vee] {
    color: #fb923c;
}

.marketplace-card .comparison-card-icon[b-m6nsgf6vee] {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.comparison-card-tag[b-m6nsgf6vee] {
    position: absolute;
    top: -10px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-card-tag.recommended[b-m6nsgf6vee] {
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 107, 90, 0.35);
}

.comparison-card-tag.alternative[b-m6nsgf6vee] {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* ========================================
   COMPARISON ROWS
   ======================================== */

.comparison-rows[b-m6nsgf6vee] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comparison-row[b-m6nsgf6vee] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.comparison-row:hover[b-m6nsgf6vee] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(13, 107, 90, 0.3);
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .comparison-row[b-m6nsgf6vee] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .comparison-row:hover[b-m6nsgf6vee] {
        transform: none;
    }
}

.comparison-feature[b-m6nsgf6vee] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.comparison-feature-icon[b-m6nsgf6vee] {
    width: 32px;
    height: 32px;
    background: rgba(13, 107, 90, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8ce2cf;
    flex-shrink: 0;
}

.comparison-feature-icon svg[b-m6nsgf6vee] {
    width: 16px;
    height: 16px;
}

.comparison-value[b-m6nsgf6vee] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.25s ease;
}

@media (max-width: 768px) {
    .comparison-value[b-m6nsgf6vee] {
        justify-content: flex-start;
    }
}

.comparison-status-icon[b-m6nsgf6vee] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comparison-status-icon svg[b-m6nsgf6vee] {
    width: 12px;
    height: 12px;
}

/* Website values */
.website-value.yes[b-m6nsgf6vee] {
    background: rgba(13, 107, 90, 0.15);
    color: #8ce2cf;
}

.website-value.yes .comparison-status-icon[b-m6nsgf6vee] {
    background: rgba(13, 107, 90, 0.35);
}

/* Marketplace values */
.marketplace-value.yes[b-m6nsgf6vee] {
    background: rgba(13, 107, 90, 0.15);
    color: #8ce2cf;
}

.marketplace-value.yes .comparison-status-icon[b-m6nsgf6vee] {
    background: rgba(13, 107, 90, 0.35);
}

.marketplace-value.no[b-m6nsgf6vee] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.marketplace-value.no .comparison-status-icon[b-m6nsgf6vee] {
    background: rgba(239, 68, 68, 0.3);
}

.marketplace-value.limited[b-m6nsgf6vee] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.marketplace-value.limited .comparison-status-icon[b-m6nsgf6vee] {
    background: rgba(251, 191, 36, 0.3);
}

/* ========================================
   SUMMARY CARDS
   ======================================== */

.comparison-summary[b-m6nsgf6vee] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 600px) {
    .comparison-summary[b-m6nsgf6vee] {
        grid-template-columns: 1fr;
    }
}

.comparison-summary-card[b-m6nsgf6vee] {
    padding: 16px;
    border-radius: 14px;
    text-align: center;
}

.comparison-summary-card p[b-m6nsgf6vee] {
    margin: 8px 0 0 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

.website-summary[b-m6nsgf6vee] {
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.18), rgba(13, 107, 90, 0.06));
    border: 1px solid rgba(13, 107, 90, 0.25);
    color: #8ce2cf;
}

.marketplace-summary[b-m6nsgf6vee] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(251, 146, 60, 0.03));
    border: 1px solid rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.summary-score[b-m6nsgf6vee] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.score-number[b-m6nsgf6vee] {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

.score-label[b-m6nsgf6vee] {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.7;
}

/* ========================================
   CTA BUTTONS
   ======================================== */

.comparison-ctas[b-m6nsgf6vee] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 28px;
    flex-wrap: wrap;
    animation: fadeInUp-b-m6nsgf6vee 0.5s ease 0.3s both;
    width: 100%;
    max-width: 100%;
}

.cta-button[b-m6nsgf6vee] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
}

.cta-button svg[b-m6nsgf6vee] {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.cta-primary[b-m6nsgf6vee] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(13, 107, 90, 0.35);
}

.cta-primary:hover[b-m6nsgf6vee] {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(13, 107, 90, 0.48);
}

.cta-primary:hover svg[b-m6nsgf6vee] {
    transform: translateX(4px);
}

.cta-secondary[b-m6nsgf6vee] {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.cta-secondary:hover[b-m6nsgf6vee] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .comparison-ctas[b-m6nsgf6vee] {
        flex-direction: column;
        padding: 0;
    }

    .cta-button[b-m6nsgf6vee] {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.9rem;
    }
}

/* ========================================
   FOOTNOTE
   ======================================== */

.comparison-footnote[b-m6nsgf6vee] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px;
    background: rgba(13, 107, 90, 0.1);
    border: 1px solid rgba(13, 107, 90, 0.25);
    border-radius: 12px;
    color: #9ce7d7;
    font-size: 0.9375rem;
    animation: fadeInUp-b-m6nsgf6vee 0.5s ease 0.35s both;
    width: 100%;
    max-width: 100%;
}

.comparison-footnote svg[b-m6nsgf6vee] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.8;
}

.comparison-footnote strong[b-m6nsgf6vee] {
    color: #d9ffef;
}

@media (max-width: 600px) {
    .comparison-footnote[b-m6nsgf6vee] {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px 14px;
        font-size: 0.875rem;
    }
}
/* /Components/Shared/Home/CoreCapabilitiesSection.razor.rz.scp.css */
/* ============================================================
   CORE CAPABILITIES - Enterprise Premium Design System
   ============================================================ */

.core-capabilities-section[b-aec0j9dkm6] {
    position: relative;
    background: linear-gradient(180deg, #030712 0%, #0f172a 40%, #1e1b4b 100%);
    padding: 120px 24px;
    overflow: hidden;
}

/* ============================================================
   AMBIENT BACKGROUND EFFECTS
   ============================================================ */

.cc-ambient-bg[b-aec0j9dkm6] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cc-orb[b-aec0j9dkm6] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    animation: orbFloat-b-aec0j9dkm6 20s ease-in-out infinite;
}

.cc-orb-1[b-aec0j9dkm6] {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.45) 0%, transparent 70%);
    top: -300px;
    left: -200px;
    animation-delay: 0s;
}

.cc-orb-2[b-aec0j9dkm6] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(13, 79, 87, 0.35) 0%, transparent 70%);
    top: 30%;
    right: -200px;
    animation-delay: -5s;
}

.cc-orb-3[b-aec0j9dkm6] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.3) 0%, transparent 70%);
    bottom: -200px;
    left: 20%;
    animation-delay: -10s;
}

.cc-orb-4[b-aec0j9dkm6] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.25) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -15s;
}

@keyframes orbFloat-b-aec0j9dkm6 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 40px) scale(0.95); }
    75% { transform: translate(30px, 20px) scale(1.05); }
}

.cc-grid-overlay[b-aec0j9dkm6] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(13, 107, 90, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 90, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
}

.cc-noise-texture[b-aec0j9dkm6] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================================
   CONTAINER
   ============================================================ */

.cc-container[b-aec0j9dkm6] {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

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

.cc-header[b-aec0j9dkm6] {
    text-align: center;
    margin-bottom: 72px;
}

.cc-badge[b-aec0j9dkm6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: rgba(13, 107, 90, 0.15);
    border: 1px solid rgba(13, 107, 90, 0.4);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5eead4;
    margin-bottom: 24px;
    overflow: hidden;
}

.cc-badge-glow[b-aec0j9dkm6] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(13, 107, 90, 0.4), transparent);
    animation: shimmer-b-aec0j9dkm6 3s infinite;
}

@keyframes shimmer-b-aec0j9dkm6 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.cc-badge-icon[b-aec0j9dkm6] {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 1;
}

.cc-badge span:last-child[b-aec0j9dkm6] {
    position: relative;
    z-index: 1;
}

.cc-title[b-aec0j9dkm6] {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #ffffff;
    letter-spacing: -0.03em;
}

.cc-title-gradient[b-aec0j9dkm6] {
    display: block;
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 30%, #0d9488 60%, #0d6b5a 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift-b-aec0j9dkm6 8s ease infinite;
}

@keyframes gradientShift-b-aec0j9dkm6 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.cc-subtitle[b-aec0j9dkm6] {
    font-size: 1.25rem;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   CARDS GRID
   ============================================================ */

.cc-grid[b-aec0j9dkm6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 64px;
}

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

@media (max-width: 768px) {
    .cc-grid[b-aec0j9dkm6] {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   CARD BASE
   ============================================================ */

.cc-card[b-aec0j9dkm6] {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-card:hover[b-aec0j9dkm6] {
    transform: translateY(-12px);
}

.cc-card-glow[b-aec0j9dkm6] {
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(20px);
}

.cc-card:hover .cc-card-glow[b-aec0j9dkm6] {
    opacity: 0.6;
}

.cc-card-border[b-aec0j9dkm6] {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    padding: 2px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

.cc-card:hover .cc-card-border[b-aec0j9dkm6] {
    opacity: 1;
}

.cc-card-inner[b-aec0j9dkm6] {
    position: relative;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Card Theme Colors - Bhogi Brand Aligned */
.cc-card-marketing[b-aec0j9dkm6] {
    --accent-1: #2dd4bf;
    --accent-2: #0d6b5a;
}

.cc-card-marketplace[b-aec0j9dkm6] {
    --accent-1: #5eead4;
    --accent-2: #0d4f57;
}

.cc-card-ai[b-aec0j9dkm6] {
    --accent-1: #14b8a6;
    --accent-2: #fbbf24;
}

/* Featured Badge */
.cc-featured-badge[b-aec0j9dkm6] {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    padding: 6px 14px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
    animation: badgePulse-b-aec0j9dkm6 2s ease-in-out infinite;
}

@keyframes badgePulse-b-aec0j9dkm6 {
    0%, 100% { box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(251, 191, 36, 0.7); }
}

/* ============================================================
   CARD VISUAL - CLEAN ENTERPRISE ICON DISPLAY
   ============================================================ */

.cc-card-visual[b-aec0j9dkm6] {
    padding: 32px 24px 20px;
    display: flex;
    justify-content: center;
}

.cc-icons-orbit[b-aec0j9dkm6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}

.cc-icon-item[b-aec0j9dkm6] {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cc-card:hover .cc-icon-item[b-aec0j9dkm6] {
    transform: translateY(-4px);
}

.cc-icon-item:nth-child(1)[b-aec0j9dkm6] { transition-delay: 0s; }
.cc-icon-item:nth-child(2)[b-aec0j9dkm6] { transition-delay: 0.05s; }
.cc-icon-item:nth-child(3)[b-aec0j9dkm6] { transition-delay: 0.1s; }
.cc-icon-item:nth-child(4)[b-aec0j9dkm6] { transition-delay: 0.15s; }

.cc-icon[b-aec0j9dkm6] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cc-icon svg[b-aec0j9dkm6] {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.cc-card:hover .cc-icon[b-aec0j9dkm6] {
    transform: scale(1.08);
}

/* Tablet - slightly smaller icons */
@media (max-width: 1100px) {
    .cc-icon[b-aec0j9dkm6] {
        width: 50px;
        height: 50px;
        padding: 10px;
        border-radius: 14px;
    }

    .cc-icons-orbit[b-aec0j9dkm6] {
        gap: 10px;
    }
}

/* Mobile - 2x2 grid layout for icons */
@media (max-width: 768px) {
    .cc-card-visual[b-aec0j9dkm6] {
        padding: 24px 20px 16px;
    }

    .cc-icons-orbit[b-aec0j9dkm6] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 140px;
    }

    .cc-icon[b-aec0j9dkm6] {
        width: 52px;
        height: 52px;
        padding: 10px;
        border-radius: 14px;
    }
}

/* Small mobile - keep 2x2 but smaller */
@media (max-width: 400px) {
    .cc-icons-orbit[b-aec0j9dkm6] {
        gap: 10px;
        max-width: 120px;
    }

    .cc-icon[b-aec0j9dkm6] {
        width: 46px;
        height: 46px;
        padding: 9px;
        border-radius: 12px;
    }
}

/* ============================================================
   ICON BRAND COLORS - Clean Solid Backgrounds
   ============================================================ */

/* Marketing Icons */
.cc-icon-facebook[b-aec0j9dkm6] { 
    background: #1877f2;
    color: #ffffff;
}

.cc-icon-instagram[b-aec0j9dkm6] { 
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
}

.cc-icon-youtube[b-aec0j9dkm6] { 
    background: #ff0000;
    color: #ffffff;
}

.cc-icon-whatsapp[b-aec0j9dkm6] { 
    background: #25d366;
    color: #ffffff;
}

/* Marketplace Icons */
.cc-icon-amazon[b-aec0j9dkm6] {
    background: #ff9900;
    color: #232f3e;
}

.cc-icon-flipkart[b-aec0j9dkm6] {
    background: #2874f0;
    color: #ffe500;
}

.cc-icon-shopify[b-aec0j9dkm6] {
    background: #7ab55c;
    color: #ffffff;
}

.cc-icon-woocommerce[b-aec0j9dkm6] {
    background: #96588a;
    color: #ffffff;
}

.cc-icon-meesho[b-aec0j9dkm6] {
    background: linear-gradient(135deg, #f43397 0%, #ff6b6b 100%);
    color: #ffffff;
}

.cc-icon-store[b-aec0j9dkm6] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
}

/* AI Icons - Use transparent backgrounds for SVG images */
.cc-icon-chatgpt[b-aec0j9dkm6] { 
    background: rgba(116, 195, 194, 0.15);
}

.cc-icon-claude[b-aec0j9dkm6] { 
    background: rgba(204, 149, 102, 0.15);
}

.cc-icon-gemini[b-aec0j9dkm6] { 
    background: rgba(138, 180, 248, 0.15);
}

.cc-icon-copilot[b-aec0j9dkm6] { 
    background: rgba(0, 120, 212, 0.15);
}

/* AI icon images */
.cc-icon-img[b-aec0j9dkm6] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   CARD CONTENT
   ============================================================ */

.cc-card-content[b-aec0j9dkm6] {
    padding: 0 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cc-card-header[b-aec0j9dkm6] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.cc-card-icon-wrap[b-aec0j9dkm6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.cc-card-icon-wrap svg[b-aec0j9dkm6] {
    width: 24px;
    height: 24px;
}

.cc-card:hover .cc-card-icon-wrap[b-aec0j9dkm6] {
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.cc-card-titles[b-aec0j9dkm6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cc-card-label[b-aec0j9dkm6] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cc-card-content h3[b-aec0j9dkm6] {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    line-height: 1.3;
}

.cc-card-desc[b-aec0j9dkm6] {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.65;
    margin: 0 0 20px 0;
    flex: 1;
}

/* ============================================================
   CARD FEATURES
   ============================================================ */

.cc-card-features[b-aec0j9dkm6] {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-card-features li[b-aec0j9dkm6] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: #cbd5e1;
    font-weight: 500;
}

.cc-check[b-aec0j9dkm6] {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-check svg[b-aec0j9dkm6] {
    width: 12px;
    height: 12px;
    color: #0f172a;
}

/* ============================================================
   CARD CTA
   ============================================================ */

.cc-card-cta[b-aec0j9dkm6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    margin-top: auto;
}

.cc-card-cta svg[b-aec0j9dkm6] {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    color: var(--accent-1);
}

.cc-card-cta:hover[b-aec0j9dkm6] {
    color: var(--accent-1);
}

.cc-card-cta:hover svg[b-aec0j9dkm6] {
    transform: translateX(6px);
}

/* ============================================================
   STATS BAR
   ============================================================ */

.cc-stats[b-aec0j9dkm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 36px 48px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
    .cc-stats[b-aec0j9dkm6] {
        flex-wrap: wrap;
        gap: 32px;
        padding: 32px;
    }
}

@media (max-width: 600px) {
    .cc-stats[b-aec0j9dkm6] {
        flex-direction: column;
        gap: 24px;
    }
}

.cc-stat[b-aec0j9dkm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.cc-stat-value[b-aec0j9dkm6] {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #5eead4, #2dd4bf, #0d9488, #0d6b5a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-shadow: 0 0 40px rgba(13, 107, 90, 0.5);
}

.cc-stat-label[b-aec0j9dkm6] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cc-stat-separator[b-aec0j9dkm6] {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

@media (max-width: 900px) {
    .cc-stat-separator[b-aec0j9dkm6] {
        display: none;
    }
}

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

@media (max-width: 768px) {
    .core-capabilities-section[b-aec0j9dkm6] {
        padding: 80px 20px;
    }

    .cc-header[b-aec0j9dkm6] {
        margin-bottom: 48px;
    }

    .cc-subtitle[b-aec0j9dkm6] {
        font-size: 1.1rem;
    }

    /* Card content adjustments */
    .cc-card-content[b-aec0j9dkm6] {
        padding: 0 20px 24px;
    }

    .cc-card-header[b-aec0j9dkm6] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .cc-card-titles[b-aec0j9dkm6] {
        align-items: center;
    }

    .cc-card-desc[b-aec0j9dkm6] {
        text-align: center;
    }

    .cc-card-features[b-aec0j9dkm6] {
        justify-content: center;
    }

    .cc-card-features li[b-aec0j9dkm6] {
        justify-content: flex-start;
    }

    .cc-card-cta[b-aec0j9dkm6] {
        justify-content: center;
    }

    /* Featured badge repositioning */
    .cc-featured-badge[b-aec0j9dkm6] {
        top: 16px;
        right: 16px;
        font-size: 0.65rem;
        padding: 5px 12px;
    }
}

@media (max-width: 480px) {
    .core-capabilities-section[b-aec0j9dkm6] {
        padding: 60px 16px;
    }

    .cc-title[b-aec0j9dkm6] {
        font-size: 2rem;
    }

    .cc-subtitle[b-aec0j9dkm6] {
        font-size: 1rem;
    }

    .cc-card-content h3[b-aec0j9dkm6] {
        font-size: 1.2rem;
    }

    .cc-card-desc[b-aec0j9dkm6] {
        font-size: 0.9rem;
    }

    .cc-card-features li[b-aec0j9dkm6] {
        font-size: 0.85rem;
    }

    .cc-stat-value[b-aec0j9dkm6] {
        font-size: 2rem;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .cc-orb[b-aec0j9dkm6],
    .cc-icon-item[b-aec0j9dkm6],
    .cc-badge-glow[b-aec0j9dkm6],
    .cc-title-gradient[b-aec0j9dkm6] {
        animation: none;
    }
    
    .cc-card:hover[b-aec0j9dkm6],
    .cc-card:hover .cc-icon[b-aec0j9dkm6],
    .cc-card:hover .cc-card-icon-wrap[b-aec0j9dkm6] {
        transform: none;
    }
}
/* /Components/Shared/Home/EarlyAdopterSection.razor.rz.scp.css */
/* ========================================
   EARLY ADOPTER SECTION - Enterprise Design
   ======================================== */

.early-adopter-section[b-6stvz1ld5l] {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    color: #ffffff;
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

/* Background Effects */
.ea-bg-effects[b-6stvz1ld5l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ea-orb[b-6stvz1ld5l] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: ea-float-b-6stvz1ld5l 20s ease-in-out infinite;
}

.ea-orb--gold[b-6stvz1ld5l] {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #0d6b5a, #14b8a6);
    top: -100px;
    right: 10%;
    animation-delay: -5s;
}

.ea-orb--blue[b-6stvz1ld5l] {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #0d4f57, #0d6b5a);
    bottom: -100px;
    left: 5%;
}

.ea-grid-pattern[b-6stvz1ld5l] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
}

@keyframes ea-float-b-6stvz1ld5l {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .ea-orb[b-6stvz1ld5l] { animation: none; }
}

@media (max-width: 768px) {
    .early-adopter-section[b-6stvz1ld5l] {
        padding: 64px 16px;
    }
}

@media (max-width: 480px) {
    .early-adopter-section[b-6stvz1ld5l] {
        padding: 48px 12px;
    }
}

.container[b-6stvz1ld5l] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Section Header */
.early-adopter-header[b-6stvz1ld5l] {
    text-align: center;
    margin-bottom: 48px;
}

.early-adopter-badge[b-6stvz1ld5l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.2) 0%, rgba(20, 184, 166, 0.15) 100%);
    border: 1px solid rgba(13, 107, 90, 0.5);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5eead4;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.badge-icon[b-6stvz1ld5l] {
    width: 16px;
    height: 16px;
    animation: badge-pulse-b-6stvz1ld5l 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-6stvz1ld5l {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.section-title[b-6stvz1ld5l] {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 16px 0;
    color: #ffffff;
    text-align: center;
}

.title-highlight[b-6stvz1ld5l] {
    background: linear-gradient(135deg, #5eead4, #0d6b5a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .section-title[b-6stvz1ld5l] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-6stvz1ld5l] {
        font-size: 1.625rem;
    }
}

.section-subtitle[b-6stvz1ld5l] {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    margin: 0;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* Slot Counter */
.ea-slot-counter[b-6stvz1ld5l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 56px;
    padding: 20px 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.slot-visual[b-6stvz1ld5l] {
    width: 120px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.slot-progress[b-6stvz1ld5l] {
    height: 100%;
    position: relative;
}

.slot-fill[b-6stvz1ld5l] {
    height: 100%;
    width: var(--filled, 0%);
    background: linear-gradient(90deg, #0d6b5a, #14b8a6);
    border-radius: 8px;
    transition: width 1s ease-out;
}

.slot-info[b-6stvz1ld5l] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.slot-number[b-6stvz1ld5l] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #5eead4;
}

.slot-label[b-6stvz1ld5l] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Benefits Grid */
.early-adopter-benefits[b-6stvz1ld5l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 56px;
}

@media (max-width: 1024px) {
    .early-adopter-benefits[b-6stvz1ld5l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .early-adopter-benefits[b-6stvz1ld5l] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.benefit-card[b-6stvz1ld5l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 36px 28px;
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.benefit-card[b-6stvz1ld5l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, linear-gradient(90deg, #fbbf24, #f59e0b));
    opacity: 0;
    transition: opacity 300ms ease;
}

.benefit-card:hover[b-6stvz1ld5l]::before {
    opacity: 1;
}

.benefit-card--pricing[b-6stvz1ld5l] { --card-accent: linear-gradient(90deg, #0d6b5a, #14b8a6); }
.benefit-card--influence[b-6stvz1ld5l] { --card-accent: linear-gradient(90deg, #0d4f57, #0d6b5a); }
.benefit-card--recognition[b-6stvz1ld5l] { --card-accent: linear-gradient(90deg, #14b8a6, #5eead4); }

.benefit-card:hover[b-6stvz1ld5l] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

.benefit-number[b-6stvz1ld5l] {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    line-height: 1;
}

.benefit-icon[b-6stvz1ld5l] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 300ms ease;
}

.benefit-card:hover .benefit-icon[b-6stvz1ld5l] {
    transform: scale(1.1) rotate(-5deg);
}

.benefit-icon--gold[b-6stvz1ld5l] {
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.25), rgba(20, 184, 166, 0.15));
    color: #5eead4;
}

.benefit-icon--blue[b-6stvz1ld5l] {
    background: linear-gradient(135deg, rgba(13, 79, 87, 0.25), rgba(13, 107, 90, 0.15));
    color: #2dd4bf;
}

.benefit-icon--purple[b-6stvz1ld5l] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(94, 234, 212, 0.15));
    color: #99f6e4;
}

.benefit-card h3[b-6stvz1ld5l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.benefit-card p[b-6stvz1ld5l] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.65;
    margin-bottom: 20px;
}

.benefit-list[b-6stvz1ld5l] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-list li[b-6stvz1ld5l] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.benefit-list li:first-child[b-6stvz1ld5l] {
    border-top: none;
}

.check-icon[b-6stvz1ld5l] {
    flex-shrink: 0;
    color: #10b981;
}

/* Expectations Section */
.early-adopter-expectations[b-6stvz1ld5l] {
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(13, 79, 87, 0.08) 100%);
    border: 1px solid rgba(13, 107, 90, 0.25);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 56px;
    backdrop-filter: blur(12px);
}

.expectations-header[b-6stvz1ld5l] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.expectations-icon[b-6stvz1ld5l] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.25), rgba(20, 184, 166, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5eead4;
    flex-shrink: 0;
}

.expectations-header h3[b-6stvz1ld5l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.expectations-subtitle[b-6stvz1ld5l] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.expectations-grid[b-6stvz1ld5l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .expectations-grid[b-6stvz1ld5l] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .early-adopter-expectations[b-6stvz1ld5l] {
        padding: 28px 24px;
    }

    .expectations-header[b-6stvz1ld5l] {
        flex-direction: column;
        gap: 12px;
    }
}

.expectation-item[b-6stvz1ld5l] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 300ms ease;
}

.expectation-item:hover[b-6stvz1ld5l] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(13, 107, 90, 0.3);
}

.expectation-check[b-6stvz1ld5l] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    flex-shrink: 0;
}

.expectation-item span:last-child[b-6stvz1ld5l] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

/* CTA Section */
.early-adopter-cta[b-6stvz1ld5l] {
    text-align: center;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.12) 0%, rgba(13, 79, 87, 0.08) 100%);
    border: 2px solid rgba(13, 107, 90, 0.35);
    border-radius: 24px;
    padding: 56px 48px;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.cta-glow[b-6stvz1ld5l] {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.cta-content[b-6stvz1ld5l] {
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.cta-urgency[b-6stvz1ld5l] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto;
}

.cta-urgency strong[b-6stvz1ld5l] {
    color: #5eead4;
    font-weight: 700;
}

.early-adopter-button[b-6stvz1ld5l] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 48px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 12px 32px rgba(251, 191, 36, 0.3);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.early-adopter-button:hover[b-6stvz1ld5l] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 48px rgba(251, 191, 36, 0.4);
}

.early-adopter-button:active[b-6stvz1ld5l] {
    transform: translateY(-2px) scale(1);
}

.button-icon[b-6stvz1ld5l] {
    display: flex;
    color: #92400e;
}

.button-text[b-6stvz1ld5l] {
    letter-spacing: 0.3px;
}

.button-arrow[b-6stvz1ld5l] {
    display: flex;
    transition: transform 300ms ease;
}

.early-adopter-button:hover .button-arrow[b-6stvz1ld5l] {
    transform: translateX(4px);
}

.cta-secondary-text[b-6stvz1ld5l] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
}

.cta-link[b-6stvz1ld5l] {
    color: #fbbf24;
    text-decoration: none;
    font-weight: 600;
    transition: all 300ms ease;
}

.cta-link:hover[b-6stvz1ld5l] {
    color: #f59e0b;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .early-adopter-cta[b-6stvz1ld5l] {
        padding: 40px 28px;
    }

    .cta-urgency[b-6stvz1ld5l] {
        font-size: 1rem;
    }

    .early-adopter-button[b-6stvz1ld5l] {
        padding: 16px 36px;
        font-size: 0.95rem;
    }

    .benefit-card[b-6stvz1ld5l] {
        padding: 28px 24px;
    }

    .benefit-icon[b-6stvz1ld5l] {
        width: 48px;
        height: 48px;
    }

    .benefit-card h3[b-6stvz1ld5l] {
        font-size: 1.15rem;
    }

    .ea-slot-counter[b-6stvz1ld5l] {
        flex-direction: column;
        gap: 12px;
        padding: 16px 24px;
    }

    .slot-visual[b-6stvz1ld5l] {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .early-adopter-cta[b-6stvz1ld5l] {
        padding: 32px 20px;
    }

    .benefit-card[b-6stvz1ld5l] {
        padding: 24px 20px;
    }

    .early-adopter-badge[b-6stvz1ld5l] {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .early-adopter-button[b-6stvz1ld5l] {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
    }

    .button-arrow[b-6stvz1ld5l] {
        display: none;
    }

    .benefit-number[b-6stvz1ld5l] {
        font-size: 2rem;
    }
}
/* /Components/Shared/Home/FeaturesSection.razor.rz.scp.css */
/* ============================================================
   FEATURES SECTION - Enterprise Grade Design System
   ============================================================ */

.features-section[b-e7wx63nv0y] {
    position: relative;
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 50%, #e2e8f0 100%);
    padding: 120px 24px;
    overflow-x: hidden;
}

.features-section *[b-e7wx63nv0y],
.features-section *[b-e7wx63nv0y]::before,
.features-section *[b-e7wx63nv0y]::after {
    box-sizing: border-box;
}

/* ============================================================
   PREMIUM BACKGROUND EFFECTS
   ============================================================ */

.fs-bg[b-e7wx63nv0y] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.fs-bg__grid[b-e7wx63nv0y] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(13, 107, 90, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 90, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 70%);
}

.fs-bg__orb[b-e7wx63nv0y] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.fs-bg__orb--1[b-e7wx63nv0y] {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.15) 0%, transparent 70%);
}

.fs-bg__orb--2[b-e7wx63nv0y] {
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(13, 79, 87, 0.12) 0%, transparent 70%);
}

.fs-bg__glow[b-e7wx63nv0y] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.8) 100%);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.fs-container[b-e7wx63nv0y] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ============================================================
   ENTERPRISE HEADER
   ============================================================ */

.fs-header[b-e7wx63nv0y] {
    text-align: center;
    margin-bottom: 64px;
}

.fs-badge[b-e7wx63nv0y] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(13, 79, 87, 0.08) 100%);
    border: 1px solid rgba(13, 107, 90, 0.2);
    border-radius: 100px;
    margin-bottom: 24px;
}

.fs-badge__icon[b-e7wx63nv0y] {
    font-size: 1rem;
}

.fs-badge__text[b-e7wx63nv0y] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6b5a;
    letter-spacing: 0.02em;
}

.fs-badge__dot[b-e7wx63nv0y] {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 50%;
    animation: pulse-b-e7wx63nv0y 2s ease-in-out infinite;
}

@keyframes pulse-b-e7wx63nv0y {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

.fs-title[b-e7wx63nv0y] {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.fs-title__line[b-e7wx63nv0y] {
    display: block;
}

.fs-title__highlight[b-e7wx63nv0y] {
    display: block;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d9488 50%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fs-subtitle[b-e7wx63nv0y] {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   FEATURE CATEGORIES / TABS
   ============================================================ */

.fs-categories[b-e7wx63nv0y] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.fs-category[b-e7wx63nv0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.fs-category:hover[b-e7wx63nv0y] {
    border-color: rgba(13, 107, 90, 0.3);
    color: #0d6b5a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 107, 90, 0.1);
}

.fs-category--active[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(13, 107, 90, 0.35);
}

.fs-category--active:hover[b-e7wx63nv0y] {
    color: #ffffff;
    transform: translateY(-2px);
}

.fs-category__icon[b-e7wx63nv0y] {
    font-size: 1.1rem;
}

.fs-category__label[b-e7wx63nv0y] {
    display: inline;
}

/* ============================================================
   FEATURES GRID
   ============================================================ */

.fs-grid[b-e7wx63nv0y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

/* ============================================================
   FEATURE CARD - Premium Design
   ============================================================ */

.fs-card[b-e7wx63nv0y] {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.fs-card--visible[b-e7wx63nv0y] {
    animation: cardReveal-b-e7wx63nv0y 0.6s ease forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes cardReveal-b-e7wx63nv0y {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fs-card:hover[b-e7wx63nv0y] {
    transform: translateY(-8px);
    border-color: rgba(13, 107, 90, 0.3);
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(13, 107, 90, 0.1);
}

.fs-card--premium[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

.fs-card--premium:hover[b-e7wx63nv0y] {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 
        0 24px 48px rgba(251, 191, 36, 0.15),
        0 0 0 1px rgba(251, 191, 36, 0.2);
}

/* Premium Badge */
.fs-card__premium-badge[b-e7wx63nv0y] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #78350f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card Icon */
.fs-card__icon[b-e7wx63nv0y] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.fs-card__icon-inner[b-e7wx63nv0y] {
    font-size: 1.75rem;
    position: relative;
    z-index: 1;
}

.fs-card__icon-glow[b-e7wx63nv0y] {
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fs-card:hover .fs-card__icon[b-e7wx63nv0y] {
    transform: scale(1.1) rotate(-5deg);
}

.fs-card:hover .fs-card__icon-glow[b-e7wx63nv0y] {
    opacity: 1;
}

/* Icon Color Themes */
.fs-card__icon--blue[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}
.fs-card__icon--blue .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(59, 130, 246, 0.2);
}

.fs-card__icon--purple[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}
.fs-card__icon--purple .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(139, 92, 246, 0.2);
}

.fs-card__icon--green[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}
.fs-card__icon--green .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(34, 197, 94, 0.2);
}

.fs-card__icon--emerald[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}
.fs-card__icon--emerald .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(16, 185, 129, 0.2);
}

.fs-card__icon--orange[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
}
.fs-card__icon--orange .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(249, 115, 22, 0.2);
}

.fs-card__icon--pink[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
}
.fs-card__icon--pink .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(236, 72, 153, 0.2);
}

.fs-card__icon--indigo[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.fs-card__icon--indigo .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(99, 102, 241, 0.2);
}

.fs-card__icon--cyan[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
}
.fs-card__icon--cyan .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(6, 182, 212, 0.2);
}

.fs-card__icon--rose[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
}
.fs-card__icon--rose .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(244, 63, 94, 0.2);
}

.fs-card__icon--violet[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}
.fs-card__icon--violet .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(139, 92, 246, 0.2);
}

.fs-card__icon--amber[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.fs-card__icon--amber .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(245, 158, 11, 0.2);
}

.fs-card__icon--teal[b-e7wx63nv0y] {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
}
.fs-card__icon--teal .fs-card__icon-glow[b-e7wx63nv0y] {
    background: rgba(20, 184, 166, 0.2);
}

/* Card Content */
.fs-card__content[b-e7wx63nv0y] {
    flex: 1;
}

.fs-card__title[b-e7wx63nv0y] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.fs-card__desc[b-e7wx63nv0y] {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* Feature Highlights */
.fs-card__highlights[b-e7wx63nv0y] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-card__highlights li[b-e7wx63nv0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #475569;
}

.fs-card__check[b-e7wx63nv0y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-radius: 50%;
    font-size: 0.625rem;
    color: #16a34a;
    font-weight: 700;
    flex-shrink: 0;
}

/* Card Footer */
.fs-card__footer[b-e7wx63nv0y] {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.fs-card__link[b-e7wx63nv0y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6b5a;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fs-card__link:hover[b-e7wx63nv0y] {
    color: #0d4f57;
}

.fs-card__arrow[b-e7wx63nv0y] {
    transition: transform 0.3s ease;
}

.fs-card__link:hover .fs-card__arrow[b-e7wx63nv0y] {
    transform: translateX(4px);
}

/* Card Shine Effect */
.fs-card__shine[b-e7wx63nv0y] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.fs-card:hover .fs-card__shine[b-e7wx63nv0y] {
    left: 150%;
}

/* ============================================================
   STATS BAR
   ============================================================ */

.fs-stats[b-e7wx63nv0y] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 32px 48px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    margin-bottom: 48px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fs-stats--visible[b-e7wx63nv0y] {
    opacity: 1;
    transform: translateY(0);
}

.fs-stat[b-e7wx63nv0y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.fs-stat__value[b-e7wx63nv0y] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.fs-stat__label[b-e7wx63nv0y] {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.fs-stat__divider[b-e7wx63nv0y] {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
}

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

.fs-cta[b-e7wx63nv0y] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.fs-cta__primary[b-e7wx63nv0y] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(13, 107, 90, 0.3);
}

.fs-cta__primary:hover[b-e7wx63nv0y] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(13, 107, 90, 0.4);
}

.fs-cta__icon[b-e7wx63nv0y] {
    transition: transform 0.3s ease;
}

.fs-cta__primary:hover .fs-cta__icon[b-e7wx63nv0y] {
    transform: translateX(4px);
}

.fs-cta__secondary[b-e7wx63nv0y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.fs-cta__secondary:hover[b-e7wx63nv0y] {
    border-color: #0d6b5a;
    color: #0d6b5a;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(13, 107, 90, 0.1);
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

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

@media (max-width: 992px) {
    .features-section[b-e7wx63nv0y] {
        padding: 96px 20px;
    }

    .fs-title[b-e7wx63nv0y] {
        font-size: 2.75rem;
    }

    .fs-stats[b-e7wx63nv0y] {
        gap: 24px;
        padding: 24px 32px;
    }

    .fs-stat__value[b-e7wx63nv0y] {
        font-size: 1.5rem;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .features-section[b-e7wx63nv0y] {
        padding: 72px 16px;
    }

    .fs-container[b-e7wx63nv0y] {
        padding: 0;
    }

    .fs-title[b-e7wx63nv0y] {
        font-size: 2.25rem;
    }

    .fs-subtitle[b-e7wx63nv0y] {
        font-size: 1.1rem;
    }

    .fs-categories[b-e7wx63nv0y] {
        gap: 8px;
    }

    .fs-category[b-e7wx63nv0y] {
        padding: 10px 18px;
        font-size: 0.875rem;
    }

    .fs-category__label[b-e7wx63nv0y] {
        display: none;
    }

    .fs-category__icon[b-e7wx63nv0y] {
        font-size: 1.25rem;
    }

    .fs-grid[b-e7wx63nv0y] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .fs-card[b-e7wx63nv0y] {
        padding: 24px;
    }

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

    .fs-stats[b-e7wx63nv0y] {
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px;
    }

    .fs-stat__divider[b-e7wx63nv0y] {
        display: none;
    }

    .fs-stat[b-e7wx63nv0y] {
        min-width: 80px;
    }

    .fs-cta[b-e7wx63nv0y] {
        flex-direction: column;
        gap: 12px;
    }

    .fs-cta__primary[b-e7wx63nv0y],
    .fs-cta__secondary[b-e7wx63nv0y] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
    .features-section[b-e7wx63nv0y] {
        padding: 56px 16px;
    }

    .fs-container[b-e7wx63nv0y] {
        padding: 0;
    }

    .fs-badge[b-e7wx63nv0y] {
        padding: 8px 16px;
    }

    .fs-badge__text[b-e7wx63nv0y] {
        font-size: 0.8rem;
    }

    .fs-title[b-e7wx63nv0y] {
        font-size: 1.875rem;
    }

    .fs-subtitle[b-e7wx63nv0y] {
        font-size: 1rem;
    }

    .fs-card[b-e7wx63nv0y] {
        padding: 20px;
        border-radius: 16px;
    }

    .fs-card__icon[b-e7wx63nv0y] {
        width: 48px;
        height: 48px;
    }

    .fs-card__icon-inner[b-e7wx63nv0y] {
        font-size: 1.5rem;
    }

    .fs-card__title[b-e7wx63nv0y] {
        font-size: 1rem;
    }

    .fs-card__desc[b-e7wx63nv0y] {
        font-size: 0.875rem;
    }

    .fs-stats[b-e7wx63nv0y] {
        border-radius: 16px;
    }

    .fs-stat__value[b-e7wx63nv0y] {
        font-size: 1.25rem;
    }

    .fs-stat__label[b-e7wx63nv0y] {
        font-size: 0.75rem;
    }

    .fs-cta[b-e7wx63nv0y] {
        width: 100%;
        padding: 0;
    }

    .fs-cta__primary[b-e7wx63nv0y],
    .fs-cta__secondary[b-e7wx63nv0y] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .fs-card[b-e7wx63nv0y] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .fs-badge__dot[b-e7wx63nv0y] {
        animation: none;
    }

    .fs-card:hover[b-e7wx63nv0y],
    .fs-card:hover .fs-card__icon[b-e7wx63nv0y],
    .fs-cta__primary:hover[b-e7wx63nv0y],
    .fs-cta__secondary:hover[b-e7wx63nv0y],
    .fs-category:hover[b-e7wx63nv0y] {
        transform: none;
    }

    .fs-card__shine[b-e7wx63nv0y] {
        display: none;
    }

    .fs-stats[b-e7wx63nv0y] {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Shared/Home/FinalCtaSection.razor.rz.scp.css */
/* ========================================
   FINAL CTA SECTION - Enterprise Design
   ======================================== */

.final-cta-section[b-381curfegk] {
    background: linear-gradient(135deg, #0d4f57 0%, #0d6b5a 50%, #115e59 100%);
    color: #ffffff;
    text-align: center;
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Background Effects */
.fcs-bg-effects[b-381curfegk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.fcs-orb[b-381curfegk] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
}

.fcs-orb--1[b-381curfegk] {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #0d6b5a, #14b8a6);
    top: -150px;
    left: -100px;
    animation: fcs-float-b-381curfegk 18s ease-in-out infinite;
}

.fcs-orb--2[b-381curfegk] {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #5eead4, #2dd4bf);
    bottom: -100px;
    right: -50px;
    animation: fcs-float-b-381curfegk 22s ease-in-out infinite reverse;
}

.fcs-particles[b-381curfegk] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px, 80px 80px, 40px 40px;
}

@keyframes fcs-float-b-381curfegk {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
    .fcs-orb[b-381curfegk] { animation: none; }
}

@media (max-width: 768px) {
    .final-cta-section[b-381curfegk] {
        padding: 72px 16px;
    }
}

@media (max-width: 480px) {
    .final-cta-section[b-381curfegk] {
        padding: 56px 12px;
    }
}

.container[b-381curfegk] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Floating Brand Elements */
.fcs-brand-elements[b-381curfegk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fcs-brand-icon[b-381curfegk] {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.15;
    animation: fcs-icon-float-b-381curfegk 15s ease-in-out infinite;
}

.fcs-brand-icon--website[b-381curfegk] {
    top: 20%;
    left: 5%;
    background: linear-gradient(135deg, #0d6b5a, #14b8a6);
    color: white;
    animation-delay: 0s;
}

.fcs-brand-icon--pos[b-381curfegk] {
    top: 60%;
    right: 8%;
    background: linear-gradient(135deg, #14b8a6, #2dd4bf);
    color: white;
    animation-delay: -5s;
}

.fcs-brand-icon--marketplace[b-381curfegk] {
    bottom: 25%;
    left: 10%;
    background: linear-gradient(135deg, #5eead4, #99f6e4);
    color: #0d4f57;
    animation-delay: -10s;
}

@keyframes fcs-icon-float-b-381curfegk {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

@media (max-width: 768px) {
    .fcs-brand-elements[b-381curfegk] {
        display: none;
    }
}

/* Content */
.fcs-content[b-381curfegk] {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.fcs-badge[b-381curfegk] {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.section-title[b-381curfegk] {
    color: #ffffff;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 20px 0;
    text-align: center;
}

.title-highlight[b-381curfegk] {
    background: linear-gradient(135deg, #5eead4, #2dd4bf, #99f6e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .section-title[b-381curfegk] {
        font-size: 2rem;
    }

    .section-title br[b-381curfegk] {
        display: none;
    }
}

@media (max-width: 480px) {
    .section-title[b-381curfegk] {
        font-size: 1.625rem;
    }
}

.section-subtitle[b-381curfegk] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.15rem;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.7;
}

/* CTA Buttons */
.cta-buttons[b-381curfegk] {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.cta-primary-large[b-381curfegk],
.cta-secondary-large[b-381curfegk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.cta-icon[b-381curfegk] {
    display: flex;
    transition: transform 300ms ease;
}

.cta-primary-large[b-381curfegk] {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    color: #0d4f57;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.cta-primary-large:hover[b-381curfegk] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.cta-primary-large:hover .cta-icon[b-381curfegk] {
    transform: translateX(4px);
}

.cta-primary-large:focus[b-381curfegk] {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.cta-secondary-large[b-381curfegk] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

.cta-secondary-large:hover[b-381curfegk] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px);
}

.cta-secondary-large:focus[b-381curfegk] {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Trust Indicators */
.fcs-trust[b-381curfegk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.fcs-trust-item[b-381curfegk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.fcs-trust-item svg[b-381curfegk] {
    color: #5eead4;
}

.fcs-trust-divider[b-381curfegk] {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 640px) {
    .fcs-trust[b-381curfegk] {
        flex-direction: column;
        gap: 10px;
    }

    .fcs-trust-divider[b-381curfegk] {
        display: none;
    }
}

/* Note */
.cta-note[b-381curfegk] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0;
}

.cta-note-link[b-381curfegk] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    transition: all 300ms ease;
}

.cta-note-link:hover[b-381curfegk] {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .cta-buttons[b-381curfegk] {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .cta-primary-large[b-381curfegk],
    .cta-secondary-large[b-381curfegk] {
        width: calc(100% - 32px);
        max-width: 320px;
        justify-content: center;
        padding: 14px 28px;
        margin: 0 auto;
    }

    .section-subtitle[b-381curfegk] {
        font-size: 1.05rem;
        padding: 0 16px;
    }

    .fcs-content[b-381curfegk] {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .section-subtitle[b-381curfegk] {
        font-size: 1rem;
    }

    .cta-primary-large[b-381curfegk],
    .cta-secondary-large[b-381curfegk] {
        padding: 12px 24px;
        font-size: 1rem;
    }

    .fcs-badge[b-381curfegk] {
        font-size: 0.8rem;
        padding: 6px 16px;
    }
}
/* /Components/Shared/Home/HeroBanner.razor.rz.scp.css */
/* ========================================
   HERO BANNER COMPONENT
   ======================================== */

.hero-section[b-w602zqkwg1] {
    padding: 0 !important;
    margin: 0;
}

.hero-section[b-w602zqkwg1] {
    margin-top: calc(-1 * var(--nav-height-mobile, 60px));
    scroll-margin-top: var(--nav-height, 104px);
}

@media (min-width: 992px) {
    .hero-section[b-w602zqkwg1] {
        margin-top: calc(-1 * var(--nav-height, 104px));
    }
}

.banner-rotator[b-w602zqkwg1] {
    position: relative;
    width: 100%;
    height: calc(100svh + var(--nav-height-mobile, 60px));
    height: calc(100vh + var(--nav-height-mobile, 60px));
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    .banner-rotator[b-w602zqkwg1] {
        height: calc(100svh + var(--nav-height, 104px));
        height: calc(100vh + var(--nav-height, 104px));
    }
}

.banner-video[b-w602zqkwg1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-fallback[b-w602zqkwg1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-overlay[b-w602zqkwg1] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 540px at 15% 85%, rgba(13, 107, 90, 0.34), transparent 60%),
        radial-gradient(900px 500px at 90% 12%, rgba(185, 185, 185, 0.22), transparent 65%),
        linear-gradient(112deg, rgba(6, 34, 55, 0.86) 0%, rgba(7, 53, 61, 0.72) 42%, rgba(13, 107, 90, 0.62) 100%);
    z-index: 1;
    transition: background 0.4s ease;
}

.banner-rotator:hover .banner-overlay[b-w602zqkwg1] {
    background:
        radial-gradient(1100px 540px at 15% 85%, rgba(13, 107, 90, 0.42), transparent 60%),
        radial-gradient(900px 500px at 90% 12%, rgba(211, 211, 211, 0.28), transparent 65%),
        linear-gradient(112deg, rgba(6, 34, 55, 0.78) 0%, rgba(7, 53, 61, 0.66) 42%, rgba(13, 107, 90, 0.54) 100%);
}

.banner-content[b-w602zqkwg1] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 18px 44px;
    color: #fff;
    text-align: center;
    animation: fadeInUp-b-w602zqkwg1 0.8s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-badge-row[b-w602zqkwg1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hero-badge[b-w602zqkwg1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(210, 210, 210, 0.4);
    background: rgba(16, 38, 48, 0.6);
    color: rgba(244, 248, 251, 0.95);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}

.hero-copy-panel[b-w602zqkwg1] {
    position: relative;
    border: 1px solid rgba(190, 190, 190, 0.34);
    border-radius: 18px;
    padding: clamp(1rem, 2.1vw, 1.5rem);
    background: linear-gradient(138deg, rgba(7, 36, 51, 0.58), rgba(13, 44, 52, 0.48));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.hero-copy-panel[b-w602zqkwg1]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(13, 107, 90, 0.06), rgba(226, 226, 226, 0.8), rgba(13, 107, 90, 0.06));
}

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

.banner-title[b-w602zqkwg1] {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: 1.05;
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -1px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.banner-subtitle[b-w602zqkwg1] {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    opacity: 0.95;
    max-width: 780px;
    margin: 0 auto 24px;
    line-height: 1.7;
    font-weight: 400;
}

.banner-feature[b-w602zqkwg1] {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    margin: 16px 0;
    font-weight: 500;
}

.banner-ctas[b-w602zqkwg1] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 28px 0 20px;
    flex-wrap: wrap;
}

.cta-button[b-w602zqkwg1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
}

.cta-primary[b-w602zqkwg1] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0a5b4c 50%, #0e3f48 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(12, 73, 64, 0.45);
}

.cta-primary:hover[b-w602zqkwg1] {
    background: linear-gradient(135deg, #0f7663 0%, #0a5b4c 50%, #0b4b54 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(11, 71, 62, 0.6);
}

.cta-urgent[b-w602zqkwg1] {
    animation: pulse-glow-b-w602zqkwg1 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-w602zqkwg1 {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(37, 99, 235, 0.6), 0 0 40px rgba(37, 99, 235, 0.2);
    }
}

.cta-icon-spark[b-w602zqkwg1] {
    font-size: 1.1rem;
    animation: spark-bounce-b-w602zqkwg1 1s ease-in-out infinite;
}

@keyframes spark-bounce-b-w602zqkwg1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.cta-demo-icon[b-w602zqkwg1] {
    opacity: 0.9;
}

.cta-secondary[b-w602zqkwg1] {
    background: rgba(14, 34, 43, 0.42);
    color: #fff;
    border-color: rgba(207, 207, 207, 0.66);
    backdrop-filter: blur(8px);
}

.cta-secondary:hover[b-w602zqkwg1] {
    background: rgba(32, 57, 67, 0.5);
    transform: translateY(-2px);
    border-color: rgba(234, 234, 234, 0.85);
}

.sr-only[b-w602zqkwg1] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* Short viewport adjustments */
@media (max-height: 720px) {
    .banner-content[b-w602zqkwg1] {
        padding: 16px 18px 28px;
    }

    .banner-title[b-w602zqkwg1] {
        font-size: clamp(1.7rem, 4.6vw, 3.0rem);
        margin-bottom: 10px;
    }

    .banner-subtitle[b-w602zqkwg1] {
        font-size: clamp(0.95rem, 2.0vw, 1.15rem);
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .banner-ctas[b-w602zqkwg1] {
        margin: 18px 0 12px;
    }
}

@media (max-height: 600px) {
    .banner-content[b-w602zqkwg1] {
        padding: 14px 14px 22px;
    }

    .banner-feature[b-w602zqkwg1] {
        margin: 10px 0;
    }
}

@media (max-width: 768px) {
    .hero-badge-row[b-w602zqkwg1] {
        gap: 8px;
    }

    .hero-badge[b-w602zqkwg1] {
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    .hero-copy-panel[b-w602zqkwg1] {
        border-radius: 14px;
    }

    .banner-content[b-w602zqkwg1] {
        padding: 20px 16px 40px;
    }

    .banner-title[b-w602zqkwg1] {
        font-size: clamp(1.6rem, 5vw, 2.4rem);
        line-height: 1.15;
        margin-bottom: 10px;
    }

    .banner-subtitle[b-w602zqkwg1] {
        font-size: clamp(0.95rem, 2.5vw, 1.15rem);
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .banner-ctas[b-w602zqkwg1] {
        gap: 12px;
        margin: 20px 0 16px;
    }

    .cta-button[b-w602zqkwg1] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-badge[b-w602zqkwg1] {
        font-size: 0.7rem;
        padding: 5px 8px;
    }

    .banner-content[b-w602zqkwg1] {
        padding: 16px 12px 36px;
    }

    .banner-title[b-w602zqkwg1] {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .banner-subtitle[b-w602zqkwg1] {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .banner-feature[b-w602zqkwg1] {
        font-size: 0.85rem;
        margin: 12px 0;
    }

    .banner-ctas[b-w602zqkwg1] {
        flex-direction: column;
        gap: 10px;
    }

    .cta-button[b-w602zqkwg1] {
        width: 100%;
        padding: 10px 16px;
    }
}

@media print {
    .banner-rotator[b-w602zqkwg1] {
        display: none;
    }
}
/* /Components/Shared/Home/IndustriesSection.razor.rz.scp.css */
/* ============================================================
   INDUSTRIES SECTION - Enterprise Grade Design System
   ============================================================ */

.ind-section[b-cojf8939iq] {
    position: relative;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    padding: 120px 24px;
    overflow-x: hidden;
}

.ind-section *[b-cojf8939iq],
.ind-section *[b-cojf8939iq]::before,
.ind-section *[b-cojf8939iq]::after {
    box-sizing: border-box;
}

/* ============================================================
   PREMIUM BACKGROUND
   ============================================================ */

.ind-bg[b-cojf8939iq] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ind-bg__pattern[b-cojf8939iq] {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(rgba(13, 107, 90, 0.1) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
}

.ind-bg__gradient[b-cojf8939iq] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(13, 107, 90, 0.18) 0%, transparent 60%);
}

.ind-bg__orb[b-cojf8939iq] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.ind-bg__orb--1[b-cojf8939iq] {
    width: 500px;
    height: 500px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.2) 0%, transparent 70%);
}

.ind-bg__orb--2[b-cojf8939iq] {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -50px;
    background: radial-gradient(circle, rgba(13, 79, 87, 0.15) 0%, transparent 70%);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.ind-container[b-cojf8939iq] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ============================================================
   ENTERPRISE HEADER
   ============================================================ */

.ind-header[b-cojf8939iq] {
    text-align: center;
    margin-bottom: 64px;
}

.ind-badge[b-cojf8939iq] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(13, 107, 90, 0.15);
    border: 1px solid rgba(13, 107, 90, 0.3);
    border-radius: 100px;
    margin-bottom: 24px;
}

.ind-badge__icon[b-cojf8939iq] {
    font-size: 1rem;
}

.ind-badge__text[b-cojf8939iq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #5eead4;
    letter-spacing: 0.02em;
}

.ind-badge__pulse[b-cojf8939iq] {
    width: 8px;
    height: 8px;
    background: #14b8a6;
    border-radius: 50%;
    animation: pulse-b-cojf8939iq 2s ease-in-out infinite;
}

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

.ind-title[b-cojf8939iq] {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #ffffff;
    letter-spacing: -0.03em;
}

.ind-title__line[b-cojf8939iq] {
    display: block;
    color: #e2e8f0;
}

.ind-title__gradient[b-cojf8939iq] {
    display: block;
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #0d6b5a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ind-subtitle[b-cojf8939iq] {
    font-size: 1.25rem;
    color: #94a3b8;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   SPOTLIGHT SECTION
   ============================================================ */

.ind-spotlight[b-cojf8939iq] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: center;
    padding: 48px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(13, 79, 87, 0.08) 100%);
    border: 1px solid rgba(13, 107, 90, 0.2);
    border-radius: 28px;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.ind-spotlight--visible[b-cojf8939iq] {
    opacity: 1;
    transform: translateY(0);
}

.ind-spotlight__badge[b-cojf8939iq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.ind-spotlight__title[b-cojf8939iq] {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.ind-spotlight__desc[b-cojf8939iq] {
    font-size: 1.0625rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0 0 24px 0;
}

.ind-spotlight__stats[b-cojf8939iq] {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
}

.ind-spotlight__stat[b-cojf8939iq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ind-spotlight__stat-value[b-cojf8939iq] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #5eead4;
}

.ind-spotlight__stat-label[b-cojf8939iq] {
    font-size: 0.8125rem;
    color: #94a3b8;
}

.ind-spotlight__cta[b-cojf8939iq] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(13, 107, 90, 0.3);
}

.ind-spotlight__cta:hover[b-cojf8939iq] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(13, 107, 90, 0.4);
}

.ind-spotlight__arrow[b-cojf8939iq] {
    transition: transform 0.3s ease;
}

.ind-spotlight__cta:hover .ind-spotlight__arrow[b-cojf8939iq] {
    transform: translateX(4px);
}

/* Spotlight Visual */
.ind-spotlight__visual[b-cojf8939iq] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
}

.ind-spotlight__icon[b-cojf8939iq] {
    position: relative;
    z-index: 2;
    font-size: 5rem;
    filter: drop-shadow(0 10px 30px rgba(13, 107, 90, 0.3));
}

.ind-spotlight__rings[b-cojf8939iq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ind-spotlight__ring[b-cojf8939iq] {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(13, 107, 90, 0.25);
    animation: ringPulse-b-cojf8939iq 3s ease-in-out infinite;
}

.ind-spotlight__ring:nth-child(1)[b-cojf8939iq] {
    width: 120px;
    height: 120px;
    animation-delay: 0s;
}

.ind-spotlight__ring:nth-child(2)[b-cojf8939iq] {
    width: 180px;
    height: 180px;
    animation-delay: 0.5s;
}

.ind-spotlight__ring:nth-child(3)[b-cojf8939iq] {
    width: 240px;
    height: 240px;
    animation-delay: 1s;
}

@keyframes ringPulse-b-cojf8939iq {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

/* ============================================================
   INDUSTRIES GRID
   ============================================================ */

.ind-grid[b-cojf8939iq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* ============================================================
   INDUSTRY CARD
   ============================================================ */

.ind-card[b-cojf8939iq] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.ind-card--visible[b-cojf8939iq] {
    animation: cardReveal-b-cojf8939iq 0.5s ease forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes cardReveal-b-cojf8939iq {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ind-card:hover[b-cojf8939iq] {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.ind-card--popular[b-cojf8939iq] {
    border-color: rgba(13, 107, 90, 0.3);
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(30, 41, 59, 0.6) 100%);
}

.ind-card--popular:hover[b-cojf8939iq] {
    border-color: rgba(13, 107, 90, 0.5);
}

/* Popular Badge */
.ind-card__popular[b-cojf8939iq] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card Icon */
.ind-card__icon[b-cojf8939iq] {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.4s ease;
}

.ind-card__emoji[b-cojf8939iq] {
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.ind-card__glow[b-cojf8939iq] {
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ind-card:hover .ind-card__icon[b-cojf8939iq] {
    transform: scale(1.1) rotate(-5deg);
}

.ind-card:hover .ind-card__glow[b-cojf8939iq] {
    opacity: 1;
}

/* Icon Themes */
.ind-card__icon--amber[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
}
.ind-card__icon--amber .ind-card__glow[b-cojf8939iq] {
    background: rgba(251, 191, 36, 0.15);
}

.ind-card__icon--blue[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
}
.ind-card__icon--blue .ind-card__glow[b-cojf8939iq] {
    background: rgba(59, 130, 246, 0.15);
}

.ind-card__icon--emerald[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
}
.ind-card__icon--emerald .ind-card__glow[b-cojf8939iq] {
    background: rgba(16, 185, 129, 0.15);
}

.ind-card__icon--red[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
}
.ind-card__icon--red .ind-card__glow[b-cojf8939iq] {
    background: rgba(239, 68, 68, 0.15);
}

.ind-card__icon--pink[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.2) 100%);
}
.ind-card__icon--pink .ind-card__glow[b-cojf8939iq] {
    background: rgba(236, 72, 153, 0.15);
}

.ind-card__icon--teal[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.2) 100%);
}
.ind-card__icon--teal .ind-card__glow[b-cojf8939iq] {
    background: rgba(20, 184, 166, 0.15);
}

.ind-card__icon--orange[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(234, 88, 12, 0.2) 100%);
}
.ind-card__icon--orange .ind-card__glow[b-cojf8939iq] {
    background: rgba(249, 115, 22, 0.15);
}

.ind-card__icon--indigo[b-cojf8939iq] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%);
}
.ind-card__icon--indigo .ind-card__glow[b-cojf8939iq] {
    background: rgba(99, 102, 241, 0.15);
}

/* Card Content */
.ind-card__content[b-cojf8939iq] {
    flex: 1;
}

.ind-card__title[b-cojf8939iq] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.ind-card__desc[b-cojf8939iq] {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

/* Features List */
.ind-card__features[b-cojf8939iq] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ind-card__features li[b-cojf8939iq] {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-size: 0.6875rem;
    color: #cbd5e1;
    white-space: nowrap;
}

/* Card Footer */
.ind-card__footer[b-cojf8939iq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.ind-card__metric[b-cojf8939iq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ind-card__metric-value[b-cojf8939iq] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #ffffff;
}

.ind-card__metric-label[b-cojf8939iq] {
    font-size: 0.6875rem;
    color: #64748b;
}

.ind-card__arrow[b-cojf8939iq] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #64748b;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.ind-card:hover .ind-card__arrow[b-cojf8939iq] {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
    transform: translateX(4px);
}

/* Card Shine */
.ind-card__shine[b-cojf8939iq] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.ind-card:hover .ind-card__shine[b-cojf8939iq] {
    left: 150%;
}

/* ============================================================
   TRUST INDICATORS
   ============================================================ */

.ind-trust[b-cojf8939iq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 28px 40px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.ind-trust--visible[b-cojf8939iq] {
    opacity: 1;
    transform: translateY(0);
}

.ind-trust__item[b-cojf8939iq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ind-trust__icon[b-cojf8939iq] {
    font-size: 1.25rem;
}

.ind-trust__text[b-cojf8939iq] {
    font-size: 0.9375rem;
    color: #cbd5e1;
    font-weight: 500;
}

.ind-trust__divider[b-cojf8939iq] {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
}

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

.ind-cta[b-cojf8939iq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.ind-cta__primary[b-cojf8939iq] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(251, 146, 60, 0.3);
}

.ind-cta__primary:hover[b-cojf8939iq] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(251, 146, 60, 0.4);
}

.ind-cta__icon[b-cojf8939iq] {
    transition: transform 0.3s ease;
}

.ind-cta__primary:hover .ind-cta__icon[b-cojf8939iq] {
    transform: translateX(4px);
}

.ind-cta__secondary[b-cojf8939iq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.ind-cta__secondary:hover[b-cojf8939iq] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* ============================================================
   RESPONSIVE - LARGE TABLET
   ============================================================ */

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

    .ind-spotlight[b-cojf8939iq] {
        grid-template-columns: 1fr 240px;
        gap: 32px;
        padding: 36px;
    }
}

@media (max-width: 992px) {
    .ind-section[b-cojf8939iq] {
        padding: 96px 20px;
    }

    .ind-title[b-cojf8939iq] {
        font-size: 2.75rem;
    }

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

    .ind-spotlight[b-cojf8939iq] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ind-spotlight__visual[b-cojf8939iq] {
        display: none;
    }

    .ind-spotlight__stats[b-cojf8939iq] {
        justify-content: center;
    }

    .ind-trust[b-cojf8939iq] {
        gap: 20px;
        padding: 24px;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .ind-section[b-cojf8939iq] {
        padding: 72px 16px;
    }

    .ind-title[b-cojf8939iq] {
        font-size: 2.25rem;
    }

    .ind-subtitle[b-cojf8939iq] {
        font-size: 1.1rem;
    }

    .ind-spotlight[b-cojf8939iq] {
        padding: 28px;
        border-radius: 20px;
    }

    .ind-spotlight__title[b-cojf8939iq] {
        font-size: 1.5rem;
    }

    .ind-spotlight__stats[b-cojf8939iq] {
        flex-wrap: wrap;
        gap: 20px;
    }

    .ind-spotlight__stat-value[b-cojf8939iq] {
        font-size: 1.5rem;
    }

    .ind-grid[b-cojf8939iq] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ind-card[b-cojf8939iq] {
        padding: 20px;
    }

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

    .ind-trust[b-cojf8939iq] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ind-trust__divider[b-cojf8939iq] {
        display: none;
    }

    .ind-trust__item[b-cojf8939iq] {
        min-width: 45%;
        justify-content: center;
    }

    .ind-cta[b-cojf8939iq] {
        flex-direction: column;
        gap: 12px;
    }

    .ind-cta__primary[b-cojf8939iq],
    .ind-cta__secondary[b-cojf8939iq] {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
    .ind-section[b-cojf8939iq] {
        padding: 56px 16px;
    }

    .ind-container[b-cojf8939iq] {
        padding: 0;
    }

    .ind-badge[b-cojf8939iq] {
        padding: 8px 16px;
    }

    .ind-title[b-cojf8939iq] {
        font-size: 1.875rem;
    }

    .ind-subtitle[b-cojf8939iq] {
        font-size: 1rem;
    }

    .ind-spotlight[b-cojf8939iq] {
        padding: 24px;
    }

    .ind-spotlight__title[b-cojf8939iq] {
        font-size: 1.375rem;
    }

    .ind-spotlight__desc[b-cojf8939iq] {
        font-size: 0.9375rem;
    }

    .ind-card[b-cojf8939iq] {
        padding: 18px;
        border-radius: 16px;
    }

    .ind-card__icon[b-cojf8939iq] {
        width: 44px;
        height: 44px;
    }

    .ind-card__emoji[b-cojf8939iq] {
        font-size: 1.25rem;
    }

    .ind-card__title[b-cojf8939iq] {
        font-size: 1rem;
    }

    .ind-card__features li[b-cojf8939iq] {
        font-size: 0.625rem;
        padding: 3px 8px;
    }

    .ind-trust[b-cojf8939iq] {
        padding: 20px;
        border-radius: 14px;
    }

    .ind-trust__text[b-cojf8939iq] {
        font-size: 0.8125rem;
    }

    .ind-cta__primary[b-cojf8939iq],
    .ind-cta__secondary[b-cojf8939iq] {
        padding: 14px 20px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .ind-card[b-cojf8939iq],
    .ind-spotlight[b-cojf8939iq],
    .ind-trust[b-cojf8939iq] {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .ind-badge__pulse[b-cojf8939iq],
    .ind-spotlight__ring[b-cojf8939iq] {
        animation: none;
    }

    .ind-card:hover[b-cojf8939iq],
    .ind-card:hover .ind-card__icon[b-cojf8939iq],
    .ind-card:hover .ind-card__arrow[b-cojf8939iq],
    .ind-cta__primary:hover[b-cojf8939iq],
    .ind-cta__secondary:hover[b-cojf8939iq],
    .ind-spotlight__cta:hover[b-cojf8939iq] {
        transform: none;
    }

    .ind-card__shine[b-cojf8939iq] {
        display: none;
    }
}
/* /Components/Shared/Home/ProductPreviewSection.razor.rz.scp.css */
/* ========================================
   PRODUCT PREVIEW SECTION - Enterprise Grade
   Interactive platform showcase with device frames
   ======================================== */

/* Section Base */
.pp-section[b-gc06odltt1] {
    position: relative;
    padding: 100px 0 120px;
    overflow-x: hidden;
    background:
        radial-gradient(900px 360px at 10% 0%, rgba(13, 107, 90, 0.10), transparent 70%),
        radial-gradient(700px 300px at 90% 20%, rgba(166, 166, 166, 0.12), transparent 75%),
        linear-gradient(180deg, #f8fbfb 0%, #ffffff 45%, #f5f9f8 100%);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.pp-section *[b-gc06odltt1],
.pp-section *[b-gc06odltt1]::before,
.pp-section *[b-gc06odltt1]::after {
    box-sizing: border-box;
}

.pp-section.pp-visible[b-gc06odltt1] {
    opacity: 1;
    transform: translateY(0);
}

/* Background Effects */
.pp-bg[b-gc06odltt1] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.pp-bg-gradient[b-gc06odltt1] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(13, 107, 90, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 100% 30%, rgba(14, 79, 87, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 0% 70%, rgba(140, 150, 149, 0.08) 0%, transparent 50%);
}

.pp-bg-grid[b-gc06odltt1] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(13, 107, 90, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 90, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
}

.pp-bg-glow[b-gc06odltt1] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    transition: transform 0.3s ease-out;
}

.pp-bg-glow--1[b-gc06odltt1] {
    top: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.26) 0%, transparent 70%);
}

.pp-bg-glow--2[b-gc06odltt1] {
    bottom: -200px;
    left: -100px;
    background: radial-gradient(circle, rgba(110, 120, 120, 0.22) 0%, transparent 70%);
}

/* Container */
.pp-container[b-gc06odltt1] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
}

/* Header */
.pp-header[b-gc06odltt1] {
    text-align: center;
    margin-bottom: 48px;
}

.pp-badge[b-gc06odltt1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.10) 0%, rgba(14, 79, 87, 0.10) 100%);
    border: 1px solid rgba(13, 107, 90, 0.25);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6b5a;
    margin-bottom: 20px;
    position: relative;
}

.pp-badge-pulse[b-gc06odltt1] {
    position: absolute;
    left: 10px;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pp-pulse-b-gc06odltt1 2s infinite;
}

.pp-badge-icon[b-gc06odltt1] {
    font-size: 1rem;
}

@keyframes pp-pulse-b-gc06odltt1 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.pp-title[b-gc06odltt1] {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px;
    color: #0f172a;
}

.pp-title-line[b-gc06odltt1] {
    display: block;
}

.pp-title-gradient[b-gc06odltt1] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 55%, #5e7874 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pp-subtitle[b-gc06odltt1] {
    font-size: 1.15rem;
    color: #50636c;
    max-width: 550px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* Platform Stats */
.pp-stats[b-gc06odltt1] {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.pp-stat[b-gc06odltt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #d8e5e2;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(7, 37, 44, 0.07);
}

.pp-stat-value[b-gc06odltt1] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0c3741;
}

.pp-stat-label[b-gc06odltt1] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* View Tabs */
.pp-tabs[b-gc06odltt1] {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pp-tab[b-gc06odltt1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.pp-tab:hover[b-gc06odltt1] {
    background: #f1f5f9;
    color: #334155;
}

.pp-tab--active[b-gc06odltt1] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0c4f58 100%);
    color: white;
    box-shadow: 0 6px 18px rgba(8, 70, 60, 0.36);
}

.pp-tab--active:hover[b-gc06odltt1] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0c4f58 100%);
    color: white;
}

.pp-tab-icon[b-gc06odltt1] {
    font-size: 1.1rem;
}

.pp-tab-new[b-gc06odltt1] {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Showcase Area */
.pp-showcase[b-gc06odltt1] {
    position: relative;
    max-width: 950px;
    margin: 0 auto 48px;
}

/* Device Frames */
.pp-device[b-gc06odltt1] {
    position: relative;
}

.pp-device--desktop[b-gc06odltt1] {
    /* Desktop styling handled by browser frame */
}

.pp-device--mobile[b-gc06odltt1] {
    display: flex;
    justify-content: center;
}

/* Browser Frame */
.pp-browser[b-gc06odltt1] {
    background: #11252f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 0.25),
        0 30px 60px -15px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.pp-browser-header[b-gc06odltt1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #0a1b24;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-browser-controls[b-gc06odltt1] {
    display: flex;
    gap: 8px;
}

.pp-dot[b-gc06odltt1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.pp-dot--red[b-gc06odltt1] { background: #ff5f57; }
.pp-dot--yellow[b-gc06odltt1] { background: #ffbd2e; }
.pp-dot--green[b-gc06odltt1] { background: #28c840; }

.pp-browser-url[b-gc06odltt1] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.pp-url-lock[b-gc06odltt1] {
    font-size: 0.7rem;
}

.pp-browser-actions[b-gc06odltt1] {
    display: flex;
    gap: 12px;
}

.pp-browser-btn[b-gc06odltt1] {
    font-size: 1rem;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s;
}

.pp-browser-btn:hover[b-gc06odltt1] {
    color: #94a3b8;
}

.pp-browser-content[b-gc06odltt1] {
    aspect-ratio: 16 / 9.5;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    overflow: hidden;
}

/* Mobile Frame */
.pp-mobile-frame[b-gc06odltt1] {
    width: 280px;
    background: #1a1a2e;
    border-radius: 36px;
    padding: 12px;
    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.pp-mobile-notch[b-gc06odltt1] {
    width: 100px;
    height: 24px;
    background: #0f0f1a;
    border-radius: 12px;
    margin: 0 auto 8px;
}

.pp-mobile-screen[b-gc06odltt1] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
}

.pp-mobile-bar[b-gc06odltt1] {
    width: 100px;
    height: 4px;
    background: #475569;
    border-radius: 4px;
    margin: 12px auto 0;
}

/* Floating Cards */
.pp-floating-cards[b-gc06odltt1] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pp-float-card[b-gc06odltt1] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: var(--delay, 0s);
    z-index: 10;
}

.pp-float-card.pp-float-visible[b-gc06odltt1] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pp-float-card--top-right[b-gc06odltt1] {
    top: 40px;
    right: -30px;
}

.pp-float-card--bottom-left[b-gc06odltt1] {
    bottom: 80px;
    left: -20px;
}

.pp-float-card--bottom-right[b-gc06odltt1] {
    bottom: 40px;
    right: -20px;
}

.pp-float-icon[b-gc06odltt1] {
    font-size: 1.25rem;
}

.pp-float-content[b-gc06odltt1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-float-content strong[b-gc06odltt1] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pp-float-content span[b-gc06odltt1] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

/* Live Indicator */
.pp-live-bar[b-gc06odltt1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 0.85rem;
    color: #64748b;
}

.pp-live-dot[b-gc06odltt1] {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pp-pulse-b-gc06odltt1 2s infinite;
}

.pp-live-sep[b-gc06odltt1] {
    color: #cbd5e1;
}

/* Mock UI Styles */
.pp-mock-ui[b-gc06odltt1] {
    width: 100%;
    height: 100%;
    display: flex;
    color: #e2e8f0;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Dashboard Mock */
.pp-mock-sidebar[b-gc06odltt1] {
    width: 60px;
    background: rgba(0, 0, 0, 0.3);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.pp-mock-logo[b-gc06odltt1] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.pp-mock-nav[b-gc06odltt1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-mock-nav-item[b-gc06odltt1] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: all 0.2s;
}

.pp-mock-nav-item.active[b-gc06odltt1] {
    background: rgba(13, 107, 90, 0.35);
    opacity: 1;
}

.pp-mock-main[b-gc06odltt1] {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pp-mock-header-bar[b-gc06odltt1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pp-mock-title[b-gc06odltt1] {
    font-size: 1.1rem;
    font-weight: 600;
}

.pp-mock-date[b-gc06odltt1] {
    font-size: 0.8rem;
    color: #94a3b8;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.pp-mock-cards[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pp-mock-card[b-gc06odltt1] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-mock-card-label[b-gc06odltt1] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.pp-mock-card-value[b-gc06odltt1] {
    font-size: 1.25rem;
    font-weight: 700;
}

.pp-mock-card-trend[b-gc06odltt1] {
    font-size: 0.75rem;
    color: #22c55e;
}

.pp-mock-card--sales[b-gc06odltt1] { border-left: 3px solid #2563eb; }
.pp-mock-card--orders[b-gc06odltt1] { border-left: 3px solid #22c55e; }
.pp-mock-card--customers[b-gc06odltt1] { border-left: 3px solid #f59e0b; }

.pp-mock-chart[b-gc06odltt1] {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.pp-mock-chart-title[b-gc06odltt1] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 16px;
}

.pp-mock-chart-bars[b-gc06odltt1] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 8px;
}

.pp-mock-bar[b-gc06odltt1] {
    flex: 1;
    height: var(--h, 50%);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.6) 0%, rgba(37, 99, 235, 0.2) 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}

.pp-mock-bar--active[b-gc06odltt1] {
    background: linear-gradient(180deg, #2563eb 0%, rgba(37, 99, 235, 0.5) 100%);
}

/* Storefront Mock */
.pp-mock-store[b-gc06odltt1] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.pp-mock-store-header[b-gc06odltt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
}

.pp-mock-store-logo[b-gc06odltt1] {
    font-weight: 700;
    font-size: 1rem;
}

.pp-mock-store-nav[b-gc06odltt1] {
    display: flex;
    gap: 24px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.pp-mock-store-cart[b-gc06odltt1] {
    padding: 6px 12px;
    background: rgba(37, 99, 235, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
}

.pp-mock-store-hero[b-gc06odltt1] {
    padding: 48px 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-mock-hero-text[b-gc06odltt1] {
    font-size: 1.5rem;
    font-weight: 700;
}

.pp-mock-hero-cta[b-gc06odltt1] {
    display: inline-block;
    padding: 10px 24px;
    background: #2563eb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    width: fit-content;
    margin: 0 auto;
}

.pp-mock-products[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px;
    flex: 1;
}

.pp-mock-product[b-gc06odltt1] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pp-mock-product-img[b-gc06odltt1] {
    font-size: 2.5rem;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 8px;
}

.pp-mock-product-name[b-gc06odltt1] {
    font-size: 0.85rem;
    color: #e2e8f0;
}

.pp-mock-product-price[b-gc06odltt1] {
    font-size: 1rem;
    font-weight: 700;
    color: #22c55e;
}

/* POS Mock */
.pp-mock-pos[b-gc06odltt1] {
    width: 100%;
    display: flex;
}

.pp-mock-pos-left[b-gc06odltt1] {
    flex: 1.5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-mock-pos-search[b-gc06odltt1] {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #64748b;
}

.pp-mock-pos-grid[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    flex: 1;
}

.pp-mock-pos-item[b-gc06odltt1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pp-mock-pos-item:hover[b-gc06odltt1] {
    background: rgba(37, 99, 235, 0.2);
}

.pp-mock-pos-right[b-gc06odltt1] {
    width: 220px;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.pp-mock-pos-cart-title[b-gc06odltt1] {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-mock-pos-cart-items[b-gc06odltt1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-mock-pos-cart-item[b-gc06odltt1] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.pp-mock-pos-total[b-gc06odltt1] {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 1rem;
}

.pp-mock-pos-pay[b-gc06odltt1] {
    margin-top: 12px;
}

.pp-mock-pay-btn[b-gc06odltt1] {
    display: block;
    text-align: center;
    padding: 14px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 10px;
    font-weight: 600;
}

/* Analytics Mock */
.pp-mock-analytics[b-gc06odltt1] {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pp-mock-analytics-header[b-gc06odltt1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pp-mock-date-range[b-gc06odltt1] {
    font-size: 0.8rem;
    color: #94a3b8;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.pp-mock-analytics-grid[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pp-mock-analytics-card[b-gc06odltt1] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-mock-a-label[b-gc06odltt1] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.pp-mock-a-value[b-gc06odltt1] {
    font-size: 1.5rem;
    font-weight: 700;
}

.pp-mock-a-change[b-gc06odltt1] {
    font-size: 0.8rem;
}

.pp-mock-a-up[b-gc06odltt1] {
    color: #22c55e;
}

.pp-mock-analytics-chart[b-gc06odltt1] {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-end;
}

.pp-mock-line-chart[b-gc06odltt1] {
    width: 100%;
    height: 100%;
}

.pp-mock-line-chart svg[b-gc06odltt1] {
    width: 100%;
    height: 100%;
}

/* Mobile Mock */
.pp-mock-mobile[b-gc06odltt1] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.pp-mock-mobile-header[b-gc06odltt1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pp-mock-mobile-title[b-gc06odltt1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.pp-mock-mobile-bell[b-gc06odltt1] {
    font-size: 1.1rem;
}

.pp-mock-mobile-stats[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pp-mock-mobile-stat[b-gc06odltt1] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-align: center;
}

.pp-mock-m-value[b-gc06odltt1] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #e2e8f0;
}

.pp-mock-m-label[b-gc06odltt1] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.pp-mock-mobile-quick[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pp-mock-mobile-btn[b-gc06odltt1] {
    padding: 12px;
    background: rgba(37, 99, 235, 0.2);
    border-radius: 10px;
    font-size: 0.75rem;
    text-align: center;
    color: #cbd5e1;
}

.pp-mock-mobile-orders[b-gc06odltt1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-mock-mobile-section[b-gc06odltt1] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.pp-mock-mobile-order[b-gc06odltt1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #cbd5e1;
}

.pp-mock-status-new[b-gc06odltt1] {
    padding: 4px 8px;
    background: rgba(37, 99, 235, 0.3);
    color: #60a5fa;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.pp-mock-status-done[b-gc06odltt1] {
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Feature Highlights */
.pp-features[b-gc06odltt1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.pp-feature[b-gc06odltt1] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    transition-delay: var(--delay, 0s);
}

.pp-feature.pp-feature-visible[b-gc06odltt1] {
    opacity: 1;
    transform: translateY(0);
}

.pp-feature:hover[b-gc06odltt1] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.pp-feature-icon[b-gc06odltt1] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.pp-feature-icon--blue[b-gc06odltt1] {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}

.pp-feature-icon--green[b-gc06odltt1] {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
}

.pp-feature-icon--amber[b-gc06odltt1] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.pp-feature-icon--purple[b-gc06odltt1] {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.pp-feature-body[b-gc06odltt1] {
    flex: 1;
}

.pp-feature-title[b-gc06odltt1] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}

.pp-feature-desc[b-gc06odltt1] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.pp-feature-metric[b-gc06odltt1] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.pp-metric-value[b-gc06odltt1] {
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pp-metric-label[b-gc06odltt1] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Hotspots Info */
.pp-hotspots-info[b-gc06odltt1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: rgba(13, 107, 90, 0.06);
    border: 1px dashed rgba(13, 107, 90, 0.25);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 48px;
}

.pp-hotspot-pulse[b-gc06odltt1] {
    width: 10px;
    height: 10px;
    background: #0d6b5a;
    border-radius: 50%;
    animation: pp-pulse-b-gc06odltt1 2s infinite;
}

/* CTA Section */
.pp-cta[b-gc06odltt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 48px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.pp-cta-title[b-gc06odltt1] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px;
}

.pp-cta-text[b-gc06odltt1] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
}

.pp-cta-actions[b-gc06odltt1] {
    display: flex;
    gap: 16px;
}

.pp-cta-btn[b-gc06odltt1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pp-cta-btn--primary[b-gc06odltt1] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(8, 73, 62, 0.4);
}

.pp-cta-btn--primary:hover[b-gc06odltt1] {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(8, 73, 62, 0.52);
}

.pp-cta-arrow[b-gc06odltt1] {
    transition: transform 0.2s;
}

.pp-cta-btn--primary:hover .pp-cta-arrow[b-gc06odltt1] {
    transform: translateX(4px);
}

.pp-cta-btn--secondary[b-gc06odltt1] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pp-cta-btn--secondary:hover[b-gc06odltt1] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

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

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

    .pp-float-card--top-right[b-gc06odltt1] { right: 10px; }
    .pp-float-card--bottom-left[b-gc06odltt1] { left: 10px; }
    .pp-float-card--bottom-right[b-gc06odltt1] { right: 10px; }
}

@media (max-width: 992px) {
    .pp-section[b-gc06odltt1] {
        padding: 80px 0 100px;
    }

    .pp-stats[b-gc06odltt1] {
        gap: 16px;
    }

    .pp-stat[b-gc06odltt1] {
        padding: 10px 16px;
    }

    .pp-tabs[b-gc06odltt1] {
        gap: 6px;
        padding: 6px;
    }

    .pp-tab[b-gc06odltt1] {
        padding: 10px 16px;
    }

    .pp-tab-text[b-gc06odltt1] {
        display: none;
    }

    .pp-tab--active .pp-tab-text[b-gc06odltt1] {
        display: inline;
    }

    .pp-cta[b-gc06odltt1] {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding: 32px;
    }

    .pp-mock-cards[b-gc06odltt1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-mock-products[b-gc06odltt1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pp-section[b-gc06odltt1] {
        padding: 50px 0 60px;
    }

    .pp-header[b-gc06odltt1] {
        margin-bottom: 32px;
    }

    .pp-brand-lockup[b-gc06odltt1] {
        padding: 7px 12px 7px 9px;
    }

    .pp-brand-logo[b-gc06odltt1] {
        width: 88px;
        height: 18px;
    }

    .pp-brand-name[b-gc06odltt1] {
        font-size: 0.8rem;
    }

    .pp-badge[b-gc06odltt1] {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 8px;
    }

    .pp-title[b-gc06odltt1] {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .pp-subtitle[b-gc06odltt1] {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .pp-stats[b-gc06odltt1] {
        gap: 12px;
    }

    .pp-stat[b-gc06odltt1] {
        padding: 10px 14px;
    }

    .pp-stat-value[b-gc06odltt1] {
        font-size: 1rem;
    }

    .pp-stat-label[b-gc06odltt1] {
        font-size: 0.7rem;
    }

    .pp-tabs[b-gc06odltt1] {
        margin-bottom: 24px;
        padding: 6px;
    }

    .pp-tab[b-gc06odltt1] {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .pp-tab-text[b-gc06odltt1] {
        display: none;
    }

    .pp-tab-icon[b-gc06odltt1] {
        font-size: 1.2rem;
    }

    .pp-features[b-gc06odltt1] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pp-feature[b-gc06odltt1] {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .pp-feature-icon[b-gc06odltt1] {
        margin-bottom: 0;
    }

    .pp-feature-metric[b-gc06odltt1] {
        margin-top: 12px;
        padding-top: 12px;
    }

    .pp-floating-cards[b-gc06odltt1] {
        display: none;
    }

    .pp-browser[b-gc06odltt1] {
        border-radius: 12px;
    }

    .pp-browser-content[b-gc06odltt1] {
        aspect-ratio: 4 / 3;
    }

    .pp-mock-sidebar[b-gc06odltt1] {
        display: none;
    }

    .pp-mock-cards[b-gc06odltt1] {
        grid-template-columns: 1fr;
    }

    .pp-mock-pos-right[b-gc06odltt1] {
        display: none;
    }

    .pp-mock-products[b-gc06odltt1] {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
    }

    .pp-cta[b-gc06odltt1] {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .pp-cta-title[b-gc06odltt1] {
        font-size: 1.25rem;
    }

    .pp-cta-text[b-gc06odltt1] {
        font-size: 0.9rem;
    }

    .pp-cta-actions[b-gc06odltt1] {
        flex-direction: column;
        width: 100%;
    }

    .pp-cta-btn[b-gc06odltt1] {
        justify-content: center;
    }

    .pp-live-bar[b-gc06odltt1] {
        font-size: 0.75rem;
        margin-top: 16px;
    }
}

@media (max-width: 480px) {
    .pp-section[b-gc06odltt1] {
        padding: 40px 0 50px;
    }

    .pp-container[b-gc06odltt1] {
        padding: 0 16px;
    }

    .pp-brand-lockup[b-gc06odltt1] {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .pp-brand-logo[b-gc06odltt1] {
        width: 80px;
        height: 17px;
    }

    .pp-brand-name[b-gc06odltt1] {
        font-size: 0.74rem;
    }

    .pp-badge[b-gc06odltt1] {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .pp-title[b-gc06odltt1] {
        font-size: 1.35rem;
    }

    .pp-subtitle[b-gc06odltt1] {
        font-size: 0.9rem;
    }

    .pp-stats[b-gc06odltt1] {
        flex-direction: column;
        gap: 8px;
    }

    .pp-stat[b-gc06odltt1] {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
    }

    .pp-tabs[b-gc06odltt1] {
        width: 100%;
        justify-content: center;
        gap: 4px;
    }

    .pp-tab[b-gc06odltt1] {
        padding: 10px 12px;
        flex: 1;
        justify-content: center;
    }

    .pp-showcase[b-gc06odltt1] {
        margin-bottom: 32px;
    }

    .pp-browser-header[b-gc06odltt1] {
        padding: 10px 12px;
    }

    .pp-browser-controls[b-gc06odltt1] {
        display: none;
    }

    .pp-browser-url[b-gc06odltt1] {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .pp-browser-actions[b-gc06odltt1] {
        display: none;
    }

    .pp-browser-content[b-gc06odltt1] {
        aspect-ratio: 3 / 4;
    }

    .pp-mobile-frame[b-gc06odltt1] {
        width: 100%;
        max-width: 280px;
    }

    .pp-hotspots-info[b-gc06odltt1] {
        font-size: 0.75rem;
        padding: 10px;
    }

    .pp-cta[b-gc06odltt1] {
        padding: 24px 16px;
        border-radius: 14px;
    }

    .pp-cta-title[b-gc06odltt1] {
        font-size: 1.15rem;
    }

    .pp-cta-text[b-gc06odltt1] {
        font-size: 0.85rem;
    }

    .pp-cta-btn[b-gc06odltt1] {
        padding: 14px 20px;
        font-size: 0.9rem;
    }

    .pp-mock-header[b-gc06odltt1] {
        padding: 12px;
    }

    .pp-mock-main[b-gc06odltt1] {
        padding: 12px;
    }

    .pp-mock-products[b-gc06odltt1] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .pp-section[b-gc06odltt1],
    .pp-feature[b-gc06odltt1],
    .pp-float-card[b-gc06odltt1] {
        transition: none;
        animation: none;
    }

    .pp-section[b-gc06odltt1] {
        opacity: 1;
        transform: none;
    }

    .pp-feature[b-gc06odltt1] {
        opacity: 1;
        transform: none;
    }

    .pp-float-card[b-gc06odltt1] {
        opacity: 1;
        transform: none;
    }

    .pp-badge-pulse[b-gc06odltt1],
    .pp-live-dot[b-gc06odltt1],
    .pp-hotspot-pulse[b-gc06odltt1] {
        animation: none;
    }
}
/* /Components/Shared/Home/TrustBadgesSection.razor.rz.scp.css */
/* ========================================
   TRUST SECTION - Enterprise Grade
   Bhogi Commerce brand aligned
   ======================================== */

.trust-section[b-n81hm7amnp] {
    padding: 48px 0;
    background:
        radial-gradient(800px 300px at 15% 0%, rgba(13, 107, 90, 0.06), transparent 60%),
        radial-gradient(600px 250px at 85% 100%, rgba(13, 79, 87, 0.05), transparent 65%),
        linear-gradient(180deg, #fafcfc 0%, #f4f8f7 100%);
    border-top: 1px solid rgba(13, 107, 90, 0.08);
    border-bottom: 1px solid rgba(13, 107, 90, 0.08);
}

.trust-container[b-n81hm7amnp] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Header */
.trust-header[b-n81hm7amnp] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trust-eyebrow[b-n81hm7amnp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0d6b5a;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.08) 0%, rgba(13, 79, 87, 0.06) 100%);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(13, 107, 90, 0.12);
}

.trust-title[b-n81hm7amnp] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.trust-subtitle[b-n81hm7amnp] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
    max-width: 480px;
    line-height: 1.5;
}

/* Stats Bar */
.trust-stats-bar[b-n81hm7amnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfb 100%);
    border: 1px solid rgba(13, 107, 90, 0.1);
    border-radius: 16px;
    padding: 20px 32px;
    box-shadow:
        0 1px 2px rgba(13, 107, 90, 0.04),
        0 8px 24px rgba(13, 79, 87, 0.06);
}

.trust-stat[b-n81hm7amnp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 24px;
    position: relative;
}

.trust-stat:not(:last-child)[b-n81hm7amnp]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, transparent 0%, rgba(13, 107, 90, 0.15) 50%, transparent 100%);
}

.trust-stat-value[b-n81hm7amnp] {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.trust-stat-label[b-n81hm7amnp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Trust Badges */
.trust-badges[b-n81hm7amnp] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.trust-badge[b-n81hm7amnp] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcfb 100%);
    border: 1px solid rgba(13, 107, 90, 0.1);
    border-radius: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    box-shadow:
        0 1px 2px rgba(13, 107, 90, 0.03),
        0 4px 12px rgba(13, 79, 87, 0.05);
}

.trust-badge:hover[b-n81hm7amnp] {
    border-color: rgba(13, 107, 90, 0.2);
    box-shadow:
        0 1px 2px rgba(13, 107, 90, 0.04),
        0 8px 20px rgba(13, 79, 87, 0.1);
    transform: translateY(-2px);
}

.trust-badge-icon[b-n81hm7amnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(13, 79, 87, 0.08) 100%);
    color: #0d6b5a;
    flex-shrink: 0;
}

.trust-badge-content[b-n81hm7amnp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trust-badge-content strong[b-n81hm7amnp] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.trust-badge-content span[b-n81hm7amnp] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
    .trust-stats-bar[b-n81hm7amnp] {
        padding: 16px 20px;
    }

    .trust-stat[b-n81hm7amnp] {
        padding: 0 16px;
    }

    .trust-stat-value[b-n81hm7amnp] {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .trust-section[b-n81hm7amnp] {
        padding: 36px 0;
    }

    .trust-container[b-n81hm7amnp] {
        gap: 24px;
    }

    .trust-title[b-n81hm7amnp] {
        font-size: 1.3rem;
    }

    .trust-subtitle[b-n81hm7amnp] {
        font-size: 0.88rem;
    }

    .trust-stats-bar[b-n81hm7amnp] {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px;
    }

    .trust-stat[b-n81hm7amnp] {
        flex: 0 0 calc(50% - 8px);
        padding: 8px 0;
    }

    .trust-stat:not(:last-child)[b-n81hm7amnp]::after {
        display: none;
    }

    .trust-stat-value[b-n81hm7amnp] {
        font-size: 1.5rem;
    }

    .trust-badges[b-n81hm7amnp] {
        gap: 12px;
    }

    .trust-badge[b-n81hm7amnp] {
        padding: 12px 16px;
        gap: 12px;
    }

    .trust-badge-icon[b-n81hm7amnp] {
        width: 36px;
        height: 36px;
    }

    .trust-badge-icon svg[b-n81hm7amnp] {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .trust-section[b-n81hm7amnp] {
        padding: 28px 0;
    }

    .trust-eyebrow[b-n81hm7amnp] {
        font-size: 0.7rem;
        padding: 5px 12px;
    }

    .trust-stats-bar[b-n81hm7amnp] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .trust-badges[b-n81hm7amnp] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .trust-badge[b-n81hm7amnp] {
        justify-content: flex-start;
    }
}
/* /Components/Shared/Home/ValuePropsSection.razor.rz.scp.css */
/* ========================================
   VALUE PROPS SECTION - Enterprise Design
   ======================================== */

.value-props-section[b-zcja42t3vj] {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
    padding: 100px 24px;
    overflow: hidden;
}

.vp-background-effects[b-zcja42t3vj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.vp-grid-pattern[b-zcja42t3vj] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(13, 107, 90, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 90, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 40%, transparent 100%);
}

.vp-gradient-glow[b-zcja42t3vj] {
    position: absolute;
    width: 100%;
    height: 400px;
    top: -200px;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(13, 107, 90, 0.08) 0%, transparent 70%);
}

@media (max-width: 768px) {
    .value-props-section[b-zcja42t3vj] {
        padding: 72px 20px;
    }
}

@media (max-width: 480px) {
    .value-props-section[b-zcja42t3vj] {
        padding: 56px 16px;
    }
}

.container[b-zcja42t3vj] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

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

.vp-header[b-zcja42t3vj] {
    text-align: center;
    margin-bottom: 48px;
}

.vp-badge[b-zcja42t3vj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.08), rgba(13, 79, 87, 0.08));
    border: 1px solid rgba(13, 107, 90, 0.15);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6b5a;
    margin-bottom: 20px;
    animation: fadeInDown-b-zcja42t3vj 0.5s ease both;
}

.vp-badge-icon[b-zcja42t3vj] {
    width: 18px;
    height: 18px;
}

@keyframes fadeInDown-b-zcja42t3vj {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-title[b-zcja42t3vj] {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 16px 0;
    color: #0f172a;
    letter-spacing: -0.03em;
    animation: fadeInUp-b-zcja42t3vj 0.5s ease 0.1s both;
}

.vp-highlight[b-zcja42t3vj] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .section-title[b-zcja42t3vj] {
        font-size: 2.25rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-zcja42t3vj] {
        font-size: 1.75rem;
    }
}

.section-subtitle[b-zcja42t3vj] {
    font-size: 1.25rem;
    color: #475569;
    text-align: center;
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.7;
    animation: fadeInUp-b-zcja42t3vj 0.5s ease 0.15s both;
}

@media (max-width: 768px) {
    .section-subtitle[b-zcja42t3vj] {
        font-size: 1.0625rem;
    }
}

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

/* ========================================
   FLOW CONNECTOR
   ======================================== */

.vp-flow-connector[b-zcja42t3vj] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    position: relative;
}

.vp-flow-line[b-zcja42t3vj] {
    position: absolute;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(13, 107, 90, 0.3), transparent);
}

.vp-flow-dots[b-zcja42t3vj] {
    display: flex;
    gap: 80px;
    position: relative;
    z-index: 1;
}

.vp-flow-dot[b-zcja42t3vj] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.vp-flow-dot.active[b-zcja42t3vj] {
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    box-shadow: 0 0 0 4px rgba(13, 107, 90, 0.2);
}

@media (max-width: 768px) {
    .vp-flow-connector[b-zcja42t3vj] {
        display: none;
    }
}

/* ========================================
   CARDS GRID
   ======================================== */

.value-props-grid[b-zcja42t3vj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 1024px) {
    .value-props-grid[b-zcja42t3vj] {
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .value-props-grid[b-zcja42t3vj] {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ========================================
   VALUE PROP CARD
   ======================================== */

.value-prop-card[b-zcja42t3vj] {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 32px 28px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    animation: fadeInUp-b-zcja42t3vj 0.6s ease-out both;
    overflow: hidden;
}

.value-prop-card[b-zcja42t3vj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-accent), var(--card-accent-light));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.value-prop-card:hover[b-zcja42t3vj]::before {
    opacity: 1;
}

.value-prop-card:nth-child(1)[b-zcja42t3vj] { animation-delay: 0.1s; }
.value-prop-card:nth-child(2)[b-zcja42t3vj] { animation-delay: 0.2s; }
.value-prop-card:nth-child(3)[b-zcja42t3vj] { animation-delay: 0.3s; }

.value-prop-card:hover[b-zcja42t3vj] {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

@media (max-width: 900px) {
    .value-prop-card[b-zcja42t3vj] {
        padding: 28px 24px;
    }

    .value-prop-card:hover[b-zcja42t3vj] {
        transform: none;
    }
}

/* Card Theme Colors */
.vp-card-website[b-zcja42t3vj] {
    --card-accent: #0d6b5a;
    --card-accent-light: #14b8a6;
    --card-bg: rgba(13, 107, 90, 0.06);
}

.vp-card-manage[b-zcja42t3vj] {
    --card-accent: #0d4f57;
    --card-accent-light: #2dd4bf;
    --card-bg: rgba(13, 79, 87, 0.06);
}

.vp-card-grow[b-zcja42t3vj] {
    --card-accent: #14b8a6;
    --card-accent-light: #5eead4;
    --card-bg: rgba(20, 184, 166, 0.06);
}

/* ========================================
   CARD NUMBER
   ======================================== */

.vp-card-number[b-zcja42t3vj] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--card-accent);
    transition: all 0.3s ease;
}

.value-prop-card:hover .vp-card-number[b-zcja42t3vj] {
    background: var(--card-accent);
    color: #ffffff;
    transform: scale(1.1);
}

/* ========================================
   CARD HEADER
   ======================================== */

.vp-card-header[b-zcja42t3vj] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.value-prop-icon[b-zcja42t3vj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--card-bg);
    border-radius: 14px;
    color: var(--card-accent);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.value-prop-icon svg[b-zcja42t3vj] {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.value-prop-card:hover .value-prop-icon[b-zcja42t3vj] {
    background: var(--card-accent);
    color: #ffffff;
    transform: scale(1.05) rotate(-3deg);
}

@media (max-width: 768px) {
    .value-prop-card:hover .value-prop-icon[b-zcja42t3vj] {
        transform: none;
    }
}

.vp-card-title-group[b-zcja42t3vj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.vp-card-label[b-zcja42t3vj] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--card-accent);
    opacity: 0.9;
}

.value-prop-card h3[b-zcja42t3vj] {
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

@media (max-width: 480px) {
    .value-prop-card h3[b-zcja42t3vj] {
        font-size: 1.25rem;
    }
}

/* ========================================
   CARD CONTENT
   ======================================== */

.value-prop-card > p[b-zcja42t3vj] {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0 0 20px 0;
    flex-grow: 0;
}

/* ========================================
   VALUE PROP ITEMS
   ======================================== */

.value-prop-items[b-zcja42t3vj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.value-prop-items li[b-zcja42t3vj] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: #334155;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.value-prop-items li:hover[b-zcja42t3vj] {
    background: var(--card-bg);
    transform: translateX(4px);
}

.vp-item-icon[b-zcja42t3vj] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--card-accent);
}

.vp-item-icon svg[b-zcja42t3vj] {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .value-prop-items li[b-zcja42t3vj] {
        font-size: 0.875rem;
        padding: 8px 12px;
    }
}

/* ========================================
   CARD FOOTER
   ======================================== */

.vp-card-footer[b-zcja42t3vj] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.vp-card-link[b-zcja42t3vj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--card-accent);
    text-decoration: none;
    transition: all 0.25s ease;
}

.vp-card-link svg[b-zcja42t3vj] {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.vp-card-link:hover[b-zcja42t3vj] {
    gap: 12px;
}

.vp-card-link:hover svg[b-zcja42t3vj] {
    transform: translateX(4px);
}

/* ========================================
   BOTTOM CTA
   ======================================== */

.vp-bottom-cta[b-zcja42t3vj] {
    margin-top: 56px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.06), rgba(13, 79, 87, 0.06));
    border: 1px solid rgba(13, 107, 90, 0.12);
    border-radius: 20px;
    animation: fadeInUp-b-zcja42t3vj 0.6s ease 0.4s both;
}

.vp-cta-content[b-zcja42t3vj] {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.vp-cta-icon[b-zcja42t3vj] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.vp-cta-icon svg[b-zcja42t3vj] {
    width: 26px;
    height: 26px;
}

.vp-cta-text[b-zcja42t3vj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vp-cta-text strong[b-zcja42t3vj] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.vp-cta-text span[b-zcja42t3vj] {
    font-size: 0.9375rem;
    color: #64748b;
}

@media (max-width: 768px) {
    .vp-bottom-cta[b-zcja42t3vj] {
        padding: 24px 20px;
    }

    .vp-cta-content[b-zcja42t3vj] {
        flex-direction: column;
        text-align: center;
    }

    .vp-cta-text strong[b-zcja42t3vj] {
        font-size: 1rem;
    }

    .vp-cta-text span[b-zcja42t3vj] {
        font-size: 0.875rem;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .value-prop-card[b-zcja42t3vj],
    .vp-badge[b-zcja42t3vj],
    .section-title[b-zcja42t3vj],
    .section-subtitle[b-zcja42t3vj],
    .vp-bottom-cta[b-zcja42t3vj] {
        animation: none;
    }

    .value-prop-card:hover[b-zcja42t3vj],
    .value-prop-items li:hover[b-zcja42t3vj],
    .vp-card-link:hover[b-zcja42t3vj] {
        transform: none;
    }
}
/* /Components/Shared/Home/WebsiteFirstSection.razor.rz.scp.css */
/* ========================================
   WEBSITE-FIRST SECTION - Enterprise Grade
   Bhogi Commerce brand-aligned styling
   ======================================== */

/* Section */
.wfs[b-4o8ocrsl6x] {
    position: relative;
    padding: 56px 0 64px;
    background:
        radial-gradient(800px 300px at 10% 0%, rgba(13, 107, 90, 0.09), transparent 65%),
        radial-gradient(600px 250px at 90% 100%, rgba(150, 150, 150, 0.1), transparent 70%),
        linear-gradient(180deg, #f8fbfb 0%, #f3f8f7 50%, #f8fbfb 100%);
    overflow: hidden;
}

/* Background Effects */
.wfs-bg[b-4o8ocrsl6x] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.wfs-bg-orb[b-4o8ocrsl6x] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.wfs-bg-orb--1[b-4o8ocrsl6x] {
    width: 400px;
    height: 400px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.25) 0%, transparent 70%);
}

.wfs-bg-orb--2[b-4o8ocrsl6x] {
    width: 350px;
    height: 350px;
    bottom: -100px;
    right: -80px;
    background: radial-gradient(circle, rgba(150, 150, 150, 0.2) 0%, transparent 70%);
}

.wfs-container[b-4o8ocrsl6x] {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    z-index: 1;
}

/* Header */
.wfs-header[b-4o8ocrsl6x] {
    text-align: center;
    margin-bottom: 40px;
}

.wfs-badge[b-4o8ocrsl6x] {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(13, 107, 90, 0.1) 0%, rgba(13, 79, 87, 0.1) 100%);
    border: 1px solid rgba(13, 107, 90, 0.22);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0d6b5a;
    margin-bottom: 16px;
}

.wfs-title[b-4o8ocrsl6x] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin: 0 0 14px;
}

.wfs-highlight[b-4o8ocrsl6x] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 60%, #617a75 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wfs-subtitle[b-4o8ocrsl6x] {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

.wfs-subtitle strong[b-4o8ocrsl6x] {
    color: #0d6b5a;
    font-weight: 700;
}

/* Comparison */
.wfs-comparison[b-4o8ocrsl6x] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 44px;
}

.wfs-card[b-4o8ocrsl6x] {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wfs-card:hover[b-4o8ocrsl6x] {
    transform: translateY(-2px);
}

.wfs-card--bad[b-4o8ocrsl6x] {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
}

.wfs-card--bad:hover[b-4o8ocrsl6x] {
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.1);
}

.wfs-card--good[b-4o8ocrsl6x] {
    border-color: #0d6b5a;
    background: linear-gradient(180deg, #fff 0%, #eef8f4 100%);
    position: relative;
    box-shadow: 0 12px 32px rgba(13, 107, 90, 0.18);
}

.wfs-card--good:hover[b-4o8ocrsl6x] {
    box-shadow: 0 16px 40px rgba(13, 107, 90, 0.22);
}

.wfs-recommended[b-4o8ocrsl6x] {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(13, 107, 90, 0.3);
}

.wfs-card-title[b-4o8ocrsl6x] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
}

.wfs-list[b-4o8ocrsl6x] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}

.wfs-card-footer[b-4o8ocrsl6x] {
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.82rem;
}

.wfs-card-footer--bad[b-4o8ocrsl6x] {
    background: #fef2f2;
    color: #dc2626;
}

.wfs-card-footer--good[b-4o8ocrsl6x] {
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    color: #fff;
}

.wfs-vs[b-4o8ocrsl6x] {
    align-self: center;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b;
}

/* Features */
.wfs-features[b-4o8ocrsl6x] {
    margin-bottom: 40px;
}

.wfs-section-title[b-4o8ocrsl6x] {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 24px;
}

.wfs-features-grid[b-4o8ocrsl6x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wfs-feature[b-4o8ocrsl6x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.wfs-feature:hover[b-4o8ocrsl6x] {
    border-color: #b8dcd3;
    box-shadow: 0 8px 20px rgba(13, 107, 90, 0.1);
    transform: translateY(-2px);
}

.wfs-feature-icon[b-4o8ocrsl6x] {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.wfs-feature-content[b-4o8ocrsl6x] {
    flex: 1;
    min-width: 0;
}

.wfs-feature-content strong[b-4o8ocrsl6x] {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
    margin-bottom: 3px;
}

.wfs-feature-content span[b-4o8ocrsl6x] {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.wfs-feature-stat[b-4o8ocrsl6x] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0d6b5a;
    white-space: nowrap;
    padding: 4px 8px;
    background: rgba(13, 107, 90, 0.08);
    border-radius: 6px;
}

/* Testimonial */
.wfs-testimonial[b-4o8ocrsl6x] {
    position: relative;
    background: linear-gradient(135deg, #fff, #f8fbfb);
    border: 1px solid #dce9e6;
    border-radius: 18px;
    padding: 28px 28px 24px;
    margin-bottom: 32px;
    box-shadow: 0 8px 24px rgba(13, 107, 90, 0.06);
}

.wfs-quote-mark[b-4o8ocrsl6x] {
    position: absolute;
    top: 12px;
    left: 20px;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: rgba(13, 107, 90, 0.12);
    line-height: 1;
    pointer-events: none;
}

.wfs-testimonial blockquote[b-4o8ocrsl6x] {
    font-size: 1rem;
    font-style: italic;
    color: #334155;
    line-height: 1.7;
    margin: 0 0 20px;
    padding: 0;
    border: none;
}

.wfs-author[b-4o8ocrsl6x] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid #e8f0ed;
}

.wfs-avatar[b-4o8ocrsl6x] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(13, 107, 90, 0.25);
}

.wfs-author-info[b-4o8ocrsl6x] {
    flex: 1;
}

.wfs-author-info strong[b-4o8ocrsl6x] {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.wfs-author-info span[b-4o8ocrsl6x] {
    font-size: 0.78rem;
    color: #64748b;
}

.wfs-author-metric[b-4o8ocrsl6x] {
    text-align: right;
}

.wfs-revenue[b-4o8ocrsl6x] {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #22c55e;
}

.wfs-revenue-label[b-4o8ocrsl6x] {
    font-size: 0.68rem;
    color: #64748b;
}

/* Stats */
.wfs-stats[b-4o8ocrsl6x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #0a2f38 0%, #0d4f57 50%, #0d6b5a 100%);
    border-radius: 18px;
    margin-bottom: 32px;
    box-shadow: 0 12px 32px rgba(10, 47, 56, 0.25);
}

.wfs-stat[b-4o8ocrsl6x] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.wfs-stat-icon[b-4o8ocrsl6x] {
    font-size: 1.5rem;
}

.wfs-stat-content[b-4o8ocrsl6x] {
    display: flex;
    flex-direction: column;
}

.wfs-stat-content strong[b-4o8ocrsl6x] {
    font-size: 1.25rem;
    font-weight: 800;
}

.wfs-stat-content span[b-4o8ocrsl6x] {
    font-size: 0.72rem;
    opacity: 0.85;
}

/* CTA */
.wfs-cta[b-4o8ocrsl6x] {
    text-align: center;
    background: linear-gradient(180deg, #fff, #f8fbfb);
    border: 1px solid #dce9e6;
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 8px 28px rgba(13, 107, 90, 0.08);
}

.wfs-cta h3[b-4o8ocrsl6x] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}

.wfs-cta > p[b-4o8ocrsl6x] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 20px;
}

.wfs-cta-buttons[b-4o8ocrsl6x] {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}

.wfs-btn[b-4o8ocrsl6x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.wfs-btn--primary[b-4o8ocrsl6x] {
    background: linear-gradient(135deg, #0d6b5a, #0d4f57);
    color: #fff;
    box-shadow: 0 6px 18px rgba(13, 107, 90, 0.35);
}

.wfs-btn--primary:hover[b-4o8ocrsl6x] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 107, 90, 0.45);
}

.wfs-btn-arrow[b-4o8ocrsl6x] {
    transition: transform 0.2s;
}

.wfs-btn--primary:hover .wfs-btn-arrow[b-4o8ocrsl6x] {
    transform: translateX(3px);
}

.wfs-btn--secondary[b-4o8ocrsl6x] {
    background: #f8fafc;
    color: #0d6b5a;
    border: 2px solid #e2e8f0;
}

.wfs-btn--secondary:hover[b-4o8ocrsl6x] {
    background: #f1f5f9;
    border-color: #b8dcd3;
}

.wfs-cta-trust[b-4o8ocrsl6x] {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.8rem;
    color: #64748b;
}

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

@media (max-width: 900px) {
    .wfs-comparison[b-4o8ocrsl6x] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wfs-vs[b-4o8ocrsl6x] {
        display: none;
    }

    .wfs-features-grid[b-4o8ocrsl6x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wfs[b-4o8ocrsl6x] {
        padding: 40px 0 48px;
    }

    .wfs-header[b-4o8ocrsl6x] {
        margin-bottom: 32px;
    }

    .wfs-title[b-4o8ocrsl6x] {
        font-size: 1.5rem;
    }

    .wfs-subtitle[b-4o8ocrsl6x] {
        font-size: 0.95rem;
    }

    .wfs-card[b-4o8ocrsl6x] {
        padding: 20px;
    }

    .wfs-features-grid[b-4o8ocrsl6x] {
        grid-template-columns: 1fr;
    }

    .wfs-feature[b-4o8ocrsl6x] {
        padding: 16px;
    }

    .wfs-testimonial[b-4o8ocrsl6x] {
        padding: 24px 20px 20px;
    }

    .wfs-stats[b-4o8ocrsl6x] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .wfs-stat[b-4o8ocrsl6x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .wfs-cta[b-4o8ocrsl6x] {
        padding: 24px 20px;
    }

    .wfs-cta h3[b-4o8ocrsl6x] {
        font-size: 1.2rem;
    }

    .wfs-cta-buttons[b-4o8ocrsl6x] {
        flex-direction: column;
    }

    .wfs-btn[b-4o8ocrsl6x] {
        justify-content: center;
    }

    .wfs-cta-trust[b-4o8ocrsl6x] {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .wfs-container[b-4o8ocrsl6x] {
        padding: 0 16px;
    }

    .wfs-stats[b-4o8ocrsl6x] {
        grid-template-columns: 1fr;
    }

    .wfs-stat[b-4o8ocrsl6x] {
        flex-direction: row;
        gap: 12px;
    }
}
/* /Components/Shared/HowItWorks.razor.rz.scp.css */
/* ========================================
   HOW IT WORKS SECTION
   Simple 3-step onboarding process
   ======================================== */

.home-how-it-works[b-jmkh1dnm7x] {
    padding: 4rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.home-how-it-works .container[b-jmkh1dnm7x] {
    max-width: 1200px;
    margin: 0 auto;
}

.home-how-it-works .section-title[b-jmkh1dnm7x] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
    color: #1e293b;
}

.home-how-it-works .section-subtitle[b-jmkh1dnm7x] {
    font-size: 1.125rem;
    text-align: center;
    color: #64748b;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Steps Grid */
.steps-grid[b-jmkh1dnm7x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Individual Step Card */
.step-card[b-jmkh1dnm7x] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover[b-jmkh1dnm7x] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Step Number Badge */
.step-number[b-jmkh1dnm7x] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0d6b5a, #14b8a6);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(13, 107, 90, 0.4);
}

/* Step Icon */
.step-icon[b-jmkh1dnm7x] {
    width: 64px;
    height: 64px;
    margin: 1rem auto;
    padding: 1rem;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon svg[b-jmkh1dnm7x] {
    width: 32px;
    height: 32px;
    color: #0d6b5a;
}

.step-card h3[b-jmkh1dnm7x] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 1rem 0 0.75rem;
}

.step-card p[b-jmkh1dnm7x] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Trust Elements Below Steps */
.how-it-works-trust[b-jmkh1dnm7x] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.trust-item[b-jmkh1dnm7x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 500;
}

.trust-icon[b-jmkh1dnm7x] {
    font-size: 1.25rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .home-how-it-works[b-jmkh1dnm7x] {
        padding: 3rem 1rem;
    }

    .steps-grid[b-jmkh1dnm7x] {
        gap: 2.5rem;
    }

    .how-it-works-trust[b-jmkh1dnm7x] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}
/* /Components/Shared/IndustryPlaybook.razor.rz.scp.css */
.industry-playbook[b-3cb24o451a] {
    margin-top: 1.25rem;
}

.industry-playbook__grid[b-3cb24o451a] {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(14px, 2.8vw, 26px);
    align-items: start;
}

.industry-playbook__main h2[b-3cb24o451a] {
    margin-top: 0;
}

.industry-playbook__subhead[b-3cb24o451a] {
    margin-top: 1.25rem;
}

.industry-playbook__pills[b-3cb24o451a] {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.industry-playbook__pills li[b-3cb24o451a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.industry-playbook__timeline[b-3cb24o451a] {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.industry-playbook__timeline-item[b-3cb24o451a] {
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 14px 16px;
}

.industry-playbook__timeline-title[b-3cb24o451a] {
    font-weight: 750;
    letter-spacing: -0.01em;
}

.industry-playbook__timeline-body[b-3cb24o451a] {
    margin-top: 6px;
    opacity: 0.92;
}

.industry-playbook__panel[b-3cb24o451a] {
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.industry-playbook__aside[b-3cb24o451a] {
    display: grid;
    gap: 12px;
}

.industry-playbook__kpis[b-3cb24o451a] {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.industry-playbook__kpi[b-3cb24o451a] {
    border-radius: 14px;
    padding: 12px;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.10);
}

.industry-playbook__kpi strong[b-3cb24o451a] {
    display: block;
}

.industry-playbook__kpi span[b-3cb24o451a] {
    display: block;
    opacity: 0.88;
    margin-top: 2px;
}

.industry-playbook__bullets[b-3cb24o451a] {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 10px;
}

.industry-playbook__bullets li[b-3cb24o451a] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.industry-playbook__bullets .lucide[b-3cb24o451a] {
    margin-top: 2px;
    opacity: 0.9;
}

.industry-playbook__cta[b-3cb24o451a] {
    background:
        radial-gradient(650px 240px at 12% 10%, rgba(255,255,255,0.14), transparent 55%),
        linear-gradient(135deg, rgba(79,70,229,0.24), rgba(6,182,212,0.18));
    border: 1px solid rgba(255,255,255,0.16);
}

.industry-playbook__cta-actions[b-3cb24o451a] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 980px) {
    .industry-playbook__grid[b-3cb24o451a] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/MarketingPage.razor.rz.scp.css */
:global(:root)[b-gmu7n1a8y5] {
	--bwe-surface: #ffffff;
	--bwe-text: #0f172a;
	--bwe-muted: rgba(15, 23, 42, 0.68);
	--bwe-border: rgba(2, 6, 23, 0.10);
	--bwe-brand: #0d6b5a;
	--bwe-brand-2: #14b8a6;
	--bwe-cta: #0b1020;
	--bwe-shadow: 0 20px 60px rgba(2, 6, 23, 0.12);
	--bwe-glow: 0 0 40px rgba(13, 107, 90, 0.3);
}

.marketing-page[b-gmu7n1a8y5],
.marketing-page *[b-gmu7n1a8y5] {
	box-sizing: border-box;
}

.marketing-page[b-gmu7n1a8y5]{
  --page-pad: clamp(1rem, 3.5vw, 1.75rem);
	--marketing-pad: clamp(1rem, 3.5vw, 1.75rem);
  --marketing-content-max: 1040px;
	max-width: 1140px;
	margin-inline: auto;
	width: 100%;
	padding-top: 3.25rem;
	padding-bottom: 4rem;
	padding-left: max(var(--page-pad), env(safe-area-inset-left));
	padding-right: max(var(--page-pad), env(safe-area-inset-right));
	color: var(--bwe-text);
	box-sizing: border-box;
}

.marketing-content[b-gmu7n1a8y5]{
	max-width: var(--marketing-content-max);
	margin-inline: auto;
	width: 100%;
}

.marketing-hero__inner[b-gmu7n1a8y5]{
	padding: 0;
}

/* Premium Enterprise Hero Section */
.marketing-hero[b-gmu7n1a8y5]{
 padding-top: 2.75rem;
	padding-bottom: 2.75rem;
 padding-left: var(--marketing-pad);
	padding-right: var(--marketing-pad);
	border: 2px solid var(--bwe-border);
	border-radius: 1.75rem;
	background:
		radial-gradient(1000px 450px at 15% 15%, rgba(13, 107, 90, 0.18), transparent 65%),
		radial-gradient(1000px 450px at 85% 10%, rgba(20, 184, 166, 0.18), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.85));
	box-shadow: 
		0 20px 60px rgba(2, 6, 23, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
   position: relative;
	overflow: clip;
	transition: transform 0.3s ease, box-shadow 0.4s ease;
}

.marketing-hero:hover[b-gmu7n1a8y5] {
	transform: translateY(-4px);
	box-shadow: 
		0 30px 80px rgba(2, 6, 23, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 1),
		0 0 60px rgba(13, 107, 90, 0.1);
}

.marketing-hero[b-gmu7n1a8y5]::before{
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background:
		radial-gradient(600px 300px at 10% 0%, rgba(13, 107, 90, 0.25), transparent 65%),
		radial-gradient(600px 300px at 90% 8%, rgba(20, 184, 166, 0.25), transparent 65%);
	opacity: 0.6;
	filter: blur(1px);
	pointer-events: none;
	transform: translate3d(0,0,0);
	animation: heroPulse-b-gmu7n1a8y5 8s ease-in-out infinite;
}

@keyframes heroPulse-b-gmu7n1a8y5 {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 0.85; }
}

.marketing-hero > *[b-gmu7n1a8y5]{
	position: relative;
}

/* Premium Typography with Gradient Effects */
.marketing-hero h1[b-gmu7n1a8y5]{
	font-size: clamp(2.2rem, 3.6vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 1rem 0;
	font-weight: 900;
	background: linear-gradient(135deg, #0047ab 0%, #0b5cff 50%, #7c3aed 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% auto;
	animation: shimmerTitle-b-gmu7n1a8y5 6s linear infinite;
}

@keyframes shimmerTitle-b-gmu7n1a8y5 {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.marketing-subtitle[b-gmu7n1a8y5]{
	font-size: 1.15rem;
	opacity: 1;
	color: var(--bwe-muted);
	max-width: 78ch;
	line-height: 1.8;
	margin: 0;
	font-weight: 500;
}

/* Premium CTA Buttons */
.marketing-cta[b-gmu7n1a8y5]{
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin-top: 1.6rem;
}

.btn[b-gmu7n1a8y5]{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .9rem 1.35rem;
	border-radius: 1rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	border: 2px solid transparent;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	position: relative;
	overflow: hidden;
}

.btn[b-gmu7n1a8y5]::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.6s ease;
}

.btn:hover[b-gmu7n1a8y5]::before {
	left: 100%;
}

.btn:focus-visible[b-gmu7n1a8y5]{
	outline: 3px solid rgba(11, 92, 255, 0.4);
	outline-offset: 3px;
}

.btn:hover[b-gmu7n1a8y5]{
	transform: translateY(-3px) scale(1.02);
}

.btn:active[b-gmu7n1a8y5] {
	transform: translateY(-1px) scale(1.0);
}

.btn-primary[b-gmu7n1a8y5]{
   background-color: #0047ab;
	background-image: linear-gradient(135deg, #0047ab 0%, #0b5cff 100%);
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border-color: rgba(11, 92, 255, 0.3);
	box-shadow: 
		0 16px 35px rgba(2, 6, 23, 0.2),
		0 0 20px rgba(11, 92, 255, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:visited[b-gmu7n1a8y5]{
 color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

.btn-primary:hover[b-gmu7n1a8y5]{
   background-image: linear-gradient(135deg, #003a91 0%, #0047ab 100%);
	box-shadow: 
		0 24px 50px rgba(2, 6, 23, 0.28),
		0 0 40px rgba(11, 92, 255, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-secondary[b-gmu7n1a8y5]{
	background: rgba(255, 255, 255, 0.85);
	color: var(--bwe-text);
	border-color: rgba(11, 92, 255, 0.2);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 20px rgba(2, 6, 23, 0.08);
}

.btn-secondary:visited[b-gmu7n1a8y5]{
	color: var(--bwe-text);
}

.btn-secondary:hover[b-gmu7n1a8y5]{
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(11, 92, 255, 0.35);
	box-shadow: 0 20px 40px rgba(2, 6, 23, 0.14);
}

.marketing-section[b-gmu7n1a8y5]{
	margin-top: 2.5rem;
   padding-left: max(var(--marketing-pad), env(safe-area-inset-left));
	padding-right: max(var(--marketing-pad), env(safe-area-inset-right));
}

.marketing-section h2[b-gmu7n1a8y5]{
	font-size: clamp(1.45rem, 2.2vw, 1.9rem);
	margin: 0 0 1.2rem;
	letter-spacing: -0.02em;
	font-weight: 800;
	background: linear-gradient(135deg, #0047ab 0%, #0b5cff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Premium Highlights / feature cards */
.marketing-highlights[b-gmu7n1a8y5]{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.2rem;
}

.marketing-highlights li[b-gmu7n1a8y5]{
	border: 2px solid var(--bwe-border);
	border-radius: 1.4rem;
	padding: 1.35rem 1.35rem 1.25rem;
	background:
		radial-gradient(400px 250px at 20% 10%, rgba(11, 92, 255, 0.08), transparent 70%),
		linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
	box-shadow: 0 12px 32px rgba(2, 6, 23, 0.08);
	transform: translateY(0);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.marketing-highlights li[b-gmu7n1a8y5]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #0b5cff, #7c3aed);
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.marketing-highlights li:hover[b-gmu7n1a8y5]::before {
	transform: scaleX(1);
}

.marketing-highlights li:hover[b-gmu7n1a8y5]{
	transform: translateY(-6px);
   border-color: rgba(11, 92, 255, 0.25);
	box-shadow: 
		0 24px 60px rgba(2, 6, 23, 0.14),
		0 0 30px rgba(11, 92, 255, 0.1);
}

.marketing-highlights h3[b-gmu7n1a8y5]{
	margin: 0 0 .65rem 0;
	font-size: 1.1rem;
	letter-spacing: -0.01em;
	font-weight: 700;
}

.marketing-highlights p[b-gmu7n1a8y5]{
	margin: 0;
	color: var(--bwe-muted);
	line-height: 1.7;
}

/* Generic content styling inside marketing pages */
.marketing-section ul[b-gmu7n1a8y5]{
	padding-left: 1.15rem;
}

/* Premium Shared marketing blocks (used by multiple pages) */
.marketing-page .bwe-feature-grid[b-gmu7n1a8y5]{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:1.2rem;
	margin-top:1.5rem;
}

.marketing-page .bwe-feature-card[b-gmu7n1a8y5]{
	border:2px solid rgba(2, 6, 23, 0.12);
	border-radius:1.4rem;
	padding:1.4rem 1.3rem;
	background:
		radial-gradient(350px 220px at 25% 15%, rgba(11, 92, 255, 0.08), transparent 70%),
		linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
	box-shadow:0 12px 32px rgba(2, 6, 23, 0.08);
	transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.marketing-page .bwe-feature-card[b-gmu7n1a8y5]::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(11, 92, 255, 0.05), transparent);
	transition: left 0.6s ease;
}

.marketing-page .bwe-feature-card:hover[b-gmu7n1a8y5]::after {
	left: 100%;
}

.marketing-page .bwe-feature-card:hover[b-gmu7n1a8y5]{
	transform:translateY(-8px) scale(1.02);
	box-shadow:
		0 28px 70px rgba(2, 6, 23, 0.16),
		0 0 40px rgba(11, 92, 255, 0.15);
	border-color:rgba(11, 92, 255, 0.3);
}

.marketing-page .bwe-feature-icon[b-gmu7n1a8y5]{
	width:48px;
	height:48px;
	display:grid;
	place-items:center;
	border-radius:14px;
	background:
		radial-gradient(140px 90px at 20% 20%, rgba(11, 92, 255, 0.25), rgba(124, 58, 237, 0.15)),
		linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
	border:2px solid rgba(11, 92, 255, 0.15);
	margin-bottom:.9rem;
	box-shadow: 0 4px 12px rgba(11, 92, 255, 0.15);
	transition: all 0.3s ease;
}

.marketing-page .bwe-feature-card:hover .bwe-feature-icon[b-gmu7n1a8y5] {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 6px 20px rgba(11, 92, 255, 0.25);
}

.marketing-page .bwe-feature-icon :deep(svg)[b-gmu7n1a8y5]{
	width:24px;
	height:24px;
	stroke-width:2.2;
	color: #0b5cff;
}

.marketing-page .bwe-feature-card h3[b-gmu7n1a8y5]{
	margin:.3rem 0 .45rem;
	font-size:1.1rem;
	letter-spacing:-0.01em;
	font-weight: 700;
}

.marketing-page .bwe-feature-card p[b-gmu7n1a8y5]{
	margin:0;
	opacity:.88;
	line-height:1.7;
	color: var(--bwe-muted);
}

.marketing-page .bwe-feature-link[b-gmu7n1a8y5]{
	display: inline-block;
	margin-top: .6rem;
	font-weight:800;
	text-decoration:none;
	color:#0b5cff;
	transition: all 0.3s ease;
	position: relative;
}

.marketing-page .bwe-feature-link[b-gmu7n1a8y5]::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #0b5cff, #7c3aed);
	transition: width 0.3s ease;
}

.marketing-page .bwe-feature-link:hover[b-gmu7n1a8y5]{
	color: #003a91;
	transform: translateX(3px);
}

.marketing-page .bwe-feature-link:hover[b-gmu7n1a8y5]::after {
	width: calc(100% - 20px);
}

.marketing-page .bwe-split[b-gmu7n1a8y5]{
	margin-top:2.25rem;
	display:grid;
	grid-template-columns:1.3fr .9fr;
	gap:1.25rem;
	align-items:stretch;
}

@media (max-width: 900px){
	.marketing-page .bwe-split[b-gmu7n1a8y5]{ grid-template-columns:1fr; }
}

.marketing-page .bwe-checklist[b-gmu7n1a8y5]{
	list-style:none;
	padding:0;
	margin:.8rem 0 0;
	display:grid;
	gap:.65rem;
}

.marketing-page .bwe-checklist li[b-gmu7n1a8y5]{
	display:flex;
	gap:.6rem;
	align-items:flex-start;
	line-height:1.55;
}

.marketing-page .bwe-checklist :deep(svg)[b-gmu7n1a8y5]{
	width:18px;
	height:18px;
	margin-top:.15rem;
}

.marketing-page .bwe-mini-panel[b-gmu7n1a8y5]{
	border:1px solid rgba(2, 6, 23, 0.10);
	border-radius:1.5rem;
	padding:1.25rem;
	background:radial-gradient(500px 220px at 10% 0%, rgba(11, 92, 255, 0.12), transparent 70%),
			radial-gradient(500px 220px at 90% 10%, rgba(124, 58, 237, 0.12), transparent 70%),
			linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
	box-shadow:0 18px 55px rgba(2, 6, 23, 0.10);
}

.marketing-page .bwe-mini-panel h3[b-gmu7n1a8y5]{ margin-top:0; }

.marketing-page .bwe-mini-panel p[b-gmu7n1a8y5]{ opacity:.85; line-height:1.65; }

.marketing-page .bwe-mini-stats[b-gmu7n1a8y5]{
	margin-top:1rem;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:.75rem;
}

.marketing-page .bwe-mini-stats > div[b-gmu7n1a8y5]{
	border:1px solid rgba(2, 6, 23, 0.10);
	border-radius:1rem;
	padding:.75rem;
	background:rgba(255,255,255,0.75);
}

.marketing-page .bwe-mini-stats strong[b-gmu7n1a8y5]{
	display:block;
	font-size:1.25rem;
	letter-spacing:-0.01em;
}

.marketing-page .bwe-mini-stats span[b-gmu7n1a8y5]{
	display:block;
	opacity:.75;
	margin-top:.15rem;
	font-size:.95rem;
}

.marketing-section a:not(.btn)[b-gmu7n1a8y5]{
	color: var(--bwe-brand);
	text-decoration: none;
}

.marketing-section a:not(.btn):hover[b-gmu7n1a8y5]{
	text-decoration: underline;
}

/* Bottom CTA */
.marketing-bottom-cta[b-gmu7n1a8y5]{
	border-radius: 1.5rem;
   padding: 1.75rem var(--marketing-pad);
	border: 1px solid var(--bwe-border);
	background:
		radial-gradient(500px 220px at 10% 0%, rgba(11, 92, 255, 0.14), transparent 70%),
		radial-gradient(500px 220px at 90% 10%, rgba(124, 58, 237, 0.14), transparent 70%),
		linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
	box-shadow: var(--bwe-shadow);
}

.marketing-bottom-cta h2[b-gmu7n1a8y5]{
	margin-top: 0;
}

/* Lightweight reveal animations (no JS required) */
@media (prefers-reduced-motion: no-preference){
    .marketing-hero[b-gmu7n1a8y5]::before{
		animation: bweHeroGlow-b-gmu7n1a8y5 10s ease-in-out infinite;
	}

	.marketing-hero h1[b-gmu7n1a8y5],
	.marketing-subtitle[b-gmu7n1a8y5],
	.marketing-cta[b-gmu7n1a8y5]{
		opacity: 0;
		transform: translateY(10px);
		animation: bweFadeUp-b-gmu7n1a8y5 .6s ease both;
	}
	.marketing-subtitle[b-gmu7n1a8y5]{ animation-delay: .08s; }
	.marketing-cta[b-gmu7n1a8y5]{ animation-delay: .16s; }

	.marketing-hero[b-gmu7n1a8y5]{
		animation: bweFadeUp-b-gmu7n1a8y5 .6s ease both;
	}
	.marketing-highlights li[b-gmu7n1a8y5]{
		animation: bweFadeUp-b-gmu7n1a8y5 .7s ease both;
	}
	.marketing-highlights li:nth-child(2)[b-gmu7n1a8y5]{ animation-delay: .06s; }
	.marketing-highlights li:nth-child(3)[b-gmu7n1a8y5]{ animation-delay: .12s; }
	.marketing-highlights li:nth-child(4)[b-gmu7n1a8y5]{ animation-delay: .18s; }
   .marketing-section[aria-label="Content"][b-gmu7n1a8y5]{
		animation: bweFadeUp-b-gmu7n1a8y5 .7s ease both;
		animation-delay: .06s;
	}

	.marketing-page .reveal-fade[b-gmu7n1a8y5],
	.marketing-page .reveal-up[b-gmu7n1a8y5]{
		opacity: 0;
		transform: translateY(12px);
		animation: bweFadeUp-b-gmu7n1a8y5 .7s ease both;
	}
	.marketing-page .reveal-fade[b-gmu7n1a8y5]{ animation-delay: .02s; }
	.marketing-page .reveal-up[b-gmu7n1a8y5]{ animation-delay: .06s; }
}

@keyframes bweHeroGlow-b-gmu7n1a8y5{
	0%{ opacity: 0.50; transform: translateY(0px); }
	50%{ opacity: 0.70; transform: translateY(-6px); }
	100%{ opacity: 0.50; transform: translateY(0px); }
}

@keyframes bweFadeUp-b-gmu7n1a8y5{
	from{ opacity: 0; transform: translateY(10px); }
	to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px){
 .marketing-page[b-gmu7n1a8y5]{
		--page-pad: 1.15rem;
		--marketing-pad: 1.15rem;
	}
    .marketing-hero[b-gmu7n1a8y5]{
		padding-top: 1.6rem;
		padding-bottom: 1.6rem;
	}
	.marketing-page[b-gmu7n1a8y5]{
		padding-top: 2.5rem;
		padding-bottom: 3.25rem;
	}
}
/* /Components/Shared/PricingPreview.razor.rz.scp.css */
/* ========================================
   PRICING PREVIEW SECTION
   Teaser for Full Pricing Page
   ======================================== */

.home-pricing-preview[b-3tnq3pdd0q] {
    padding: 4rem 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.home-pricing-preview .container[b-3tnq3pdd0q] {
    max-width: 1100px;
    margin: 0 auto;
}

.home-pricing-preview .section-title[b-3tnq3pdd0q] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
    color: #1e293b;
}

.home-pricing-preview .section-subtitle[b-3tnq3pdd0q] {
    font-size: 1.125rem;
    text-align: center;
    color: #64748b;
    margin-bottom: 3rem;
}

/* Pricing Preview Grid */
.pricing-preview-grid[b-3tnq3pdd0q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Individual Pricing Card */
.pricing-preview-card[b-3tnq3pdd0q] {
    background: white;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 2px solid #e2e8f0;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-preview-card:hover[b-3tnq3pdd0q] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.pricing-preview-card.featured[b-3tnq3pdd0q] {
    border-color: #0d6b5a;
    transform: scale(1.02);
}

.pricing-preview-card.featured:hover[b-3tnq3pdd0q] {
    transform: scale(1.02) translateY(-4px);
}

/* Plan Badge */
.plan-badge[b-3tnq3pdd0q] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-badge.free[b-3tnq3pdd0q] {
    background: #dcfce7;
    color: #166534;
}

.plan-badge.popular[b-3tnq3pdd0q] {
    background: linear-gradient(135deg, #0d6b5a, #14b8a6);
    color: white;
}

.plan-badge.enterprise[b-3tnq3pdd0q] {
    background: #1e293b;
    color: white;
}

/* Plan Title */
.pricing-preview-card h3[b-3tnq3pdd0q] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.5rem 0 1rem;
}

/* Plan Price */
.plan-price[b-3tnq3pdd0q] {
    margin-bottom: 1rem;
}

.plan-price .price[b-3tnq3pdd0q] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #6366f1;
}

.plan-price .price-original[b-3tnq3pdd0q] {
    font-size: 1.25rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-right: 0.5rem;
}

.plan-price .period[b-3tnq3pdd0q] {
    font-size: 0.9rem;
    color: #64748b;
}

.plan-description[b-3tnq3pdd0q] {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Plan Features */
.plan-features[b-3tnq3pdd0q] {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.plan-features li[b-3tnq3pdd0q] {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

.plan-features li:last-child[b-3tnq3pdd0q] {
    border-bottom: none;
}

/* Pricing CTA */
.pricing-cta[b-3tnq3pdd0q] {
    text-align: center;
}

.pricing-cta .cta-button[b-3tnq3pdd0q] {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.pricing-cta .cta-button:hover[b-3tnq3pdd0q] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
}

.pricing-note[b-3tnq3pdd0q] {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #64748b;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .home-pricing-preview[b-3tnq3pdd0q] {
        padding: 3rem 1rem;
    }

    .pricing-preview-grid[b-3tnq3pdd0q] {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-preview-card.featured[b-3tnq3pdd0q] {
        transform: none;
        order: -1;
    }

    .pricing-preview-card.featured:hover[b-3tnq3pdd0q] {
        transform: translateY(-4px);
    }
}
/* /Components/Shared/ProductScreenshots.razor.rz.scp.css */
/* ============================================================
   PRODUCT SHOWCASE - Enterprise Premium Design
   ============================================================ */

.showcase-section[b-p8oadgqm35] {
    position: relative;
    background: linear-gradient(180deg, #030712 0%, #0f172a 50%, #1e1b4b 100%);
    padding: 120px 24px;
    overflow: hidden;
    min-height: 100vh;
}

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */

.showcase-ambient[b-p8oadgqm35] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.showcase-orb[b-p8oadgqm35] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    animation: orbFloat-b-p8oadgqm35 20s ease-in-out infinite;
}

.showcase-orb--1[b-p8oadgqm35] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(13, 107, 90, 0.45) 0%, transparent 70%);
    top: -200px;
    left: -150px;
}

.showcase-orb--2[b-p8oadgqm35] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(13, 79, 87, 0.35) 0%, transparent 70%);
    top: 40%;
    right: -200px;
    animation-delay: -7s;
}

.showcase-orb--3[b-p8oadgqm35] {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.3) 0%, transparent 70%);
    bottom: -150px;
    left: 30%;
    animation-delay: -14s;
}

@keyframes orbFloat-b-p8oadgqm35 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -25px) scale(1.05); }
    50% { transform: translate(-15px, 35px) scale(0.95); }
    75% { transform: translate(25px, 15px) scale(1.02); }
}

.showcase-grid-overlay[b-p8oadgqm35] {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.showcase-container[b-p8oadgqm35] {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

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

.showcase-header[b-p8oadgqm35] {
    text-align: center;
    margin-bottom: 64px;
}

.showcase-badge[b-p8oadgqm35] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: rgba(13, 107, 90, 0.15);
    border: 1px solid rgba(13, 107, 90, 0.4);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5eead4;
    margin-bottom: 24px;
    overflow: hidden;
}

.showcase-badge__glow[b-p8oadgqm35] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(13, 107, 90, 0.4), transparent);
    animation: shimmer-b-p8oadgqm35 3s infinite;
}

@keyframes shimmer-b-p8oadgqm35 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.showcase-badge :global(svg)[b-p8oadgqm35] {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
}

.showcase-badge span:last-child[b-p8oadgqm35] {
    position: relative;
    z-index: 1;
}

.showcase-title[b-p8oadgqm35] {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px 0;
    letter-spacing: -0.03em;
}

.showcase-title__line[b-p8oadgqm35] {
    display: block;
    color: #ffffff;
}

.showcase-title__gradient[b-p8oadgqm35] {
    display: block;
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 40%, #0d9488 70%, #0d6b5a 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift-b-p8oadgqm35 8s ease infinite;
}

@keyframes gradientShift-b-p8oadgqm35 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.showcase-subtitle[b-p8oadgqm35] {
    font-size: 1.25rem;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* ============================================================
   FILTERS
   ============================================================ */

.showcase-filters[b-p8oadgqm35] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.showcase-filter[b-p8oadgqm35] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-filter :global(svg)[b-p8oadgqm35] {
    width: 16px;
    height: 16px;
}

.showcase-filter:hover[b-p8oadgqm35] {
    background: rgba(13, 107, 90, 0.15);
    border-color: rgba(13, 107, 90, 0.4);
    color: #5eead4;
}

.showcase-filter--active[b-p8oadgqm35] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(13, 107, 90, 0.4);
}

.showcase-filter--active:hover[b-p8oadgqm35] {
    background: linear-gradient(135deg, #0d6b5a 0%, #0d4f57 100%);
    color: #ffffff;
}

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

.showcase-grid[b-p8oadgqm35] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 72px;
}

/* ============================================================
   CARD
   ============================================================ */

.showcase-card[b-p8oadgqm35] {
    position: relative;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

/* Visibility state - triggered by IntersectionObserver */
.showcase-card--visible[b-p8oadgqm35] {
    animation: fadeInUp-b-p8oadgqm35 0.5s ease forwards;
    animation-delay: var(--animation-delay, 0s);
}

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

.showcase-card:hover[b-p8oadgqm35] {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(13, 107, 90, 0.4);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(13, 107, 90, 0.15);
}

.showcase-card--featured[b-p8oadgqm35] {
    grid-column: span 2;
    grid-row: span 1;
}

.showcase-card__featured-badge[b-p8oadgqm35] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.showcase-card__featured-badge :global(svg)[b-p8oadgqm35] {
    width: 12px;
    height: 12px;
}

/* Image Container */
.showcase-card__image-container[b-p8oadgqm35] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.showcase-card--featured .showcase-card__image-container[b-p8oadgqm35] {
    aspect-ratio: 21 / 9;
}

.showcase-card__image[b-p8oadgqm35] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
}

/* Image loaded state - fade in */
.showcase-card__image--loaded[b-p8oadgqm35] {
    opacity: 1;
}

.showcase-card:hover .showcase-card__image[b-p8oadgqm35] {
    transform: scale(1.1);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */

.showcase-card__skeleton[b-p8oadgqm35] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(30, 41, 59, 0.8) 0%, 
        rgba(51, 65, 85, 0.8) 50%, 
        rgba(30, 41, 59, 0.8) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer-b-p8oadgqm35 1.5s infinite ease-in-out;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.showcase-card__skeleton--hidden[b-p8oadgqm35] {
    opacity: 0;
    pointer-events: none;
}

@keyframes skeletonShimmer-b-p8oadgqm35 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.showcase-card__overlay[b-p8oadgqm35] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.showcase-card:hover .showcase-card__overlay[b-p8oadgqm35] {
    opacity: 1;
}

.showcase-card__overlay-content[b-p8oadgqm35] {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.showcase-card:hover .showcase-card__overlay-content[b-p8oadgqm35] {
    transform: translateY(0);
}

.showcase-card__view-btn[b-p8oadgqm35] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.showcase-card__view-btn :global(svg)[b-p8oadgqm35] {
    width: 18px;
    height: 18px;
}

.showcase-card__shine[b-p8oadgqm35] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.6s ease;
}

.showcase-card:hover .showcase-card__shine[b-p8oadgqm35] {
    left: 150%;
}

/* Content */
.showcase-card__content[b-p8oadgqm35] {
    padding: 24px;
}

.showcase-card__category[b-p8oadgqm35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(13, 107, 90, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5eead4;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-card__category :global(svg)[b-p8oadgqm35] {
    width: 12px;
    height: 12px;
}

.showcase-card__title[b-p8oadgqm35] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.showcase-card:hover .showcase-card__title[b-p8oadgqm35] {
    color: #5eead4;
}

.showcase-card--featured .showcase-card__title[b-p8oadgqm35] {
    font-size: 1.5rem;
}

.showcase-card__description[b-p8oadgqm35] {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.showcase-card__tags[b-p8oadgqm35] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.showcase-card__tag[b-p8oadgqm35] {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #64748b;
    transition: all 0.3s ease;
}

.showcase-card:hover .showcase-card__tag[b-p8oadgqm35] {
    background: rgba(13, 107, 90, 0.15);
    border-color: rgba(13, 107, 90, 0.3);
    color: #5eead4;
}

/* ============================================================
   STATS BAR - Simplified without icons
   ============================================================ */

.showcase-stats[b-p8oadgqm35] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(20px);
}

.showcase-stat[b-p8oadgqm35] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
}

.showcase-stat__value[b-p8oadgqm35] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #5eead4 0%, #0d9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.showcase-stat__label[b-p8oadgqm35] {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */

.showcase-lightbox[b-p8oadgqm35] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.showcase-lightbox--open[b-p8oadgqm35] {
    opacity: 1;
    visibility: visible;
}

.showcase-lightbox__backdrop[b-p8oadgqm35] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
}

.showcase-lightbox__container[b-p8oadgqm35] {
    position: relative;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: lightboxIn-b-p8oadgqm35 0.4s ease;
}

@keyframes lightboxIn-b-p8oadgqm35 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.showcase-lightbox__close[b-p8oadgqm35] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.showcase-lightbox__close:hover[b-p8oadgqm35] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.showcase-lightbox__close :global(svg)[b-p8oadgqm35] {
    width: 24px;
    height: 24px;
}

.showcase-lightbox__image-wrapper[b-p8oadgqm35] {
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
}

.showcase-lightbox__image[b-p8oadgqm35] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-lightbox__info[b-p8oadgqm35] {
    padding: 28px;
}

.showcase-lightbox__category[b-p8oadgqm35] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a5b4fc;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-lightbox__category :global(svg)[b-p8oadgqm35] {
    width: 14px;
    height: 14px;
}

.showcase-lightbox__title[b-p8oadgqm35] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.showcase-lightbox__description[b-p8oadgqm35] {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.showcase-lightbox__tags[b-p8oadgqm35] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.showcase-lightbox__tag[b-p8oadgqm35] {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.showcase-lightbox__nav[b-p8oadgqm35] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.showcase-lightbox__nav-btn[b-p8oadgqm35] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.showcase-lightbox__nav-btn:hover[b-p8oadgqm35] {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}

.showcase-lightbox__nav-btn :global(svg)[b-p8oadgqm35] {
    width: 24px;
    height: 24px;
}

.showcase-lightbox__counter[b-p8oadgqm35] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 1200px) {
    .showcase-grid[b-p8oadgqm35] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .showcase-card--featured[b-p8oadgqm35] {
        grid-column: span 2;
    }

    .showcase-stats[b-p8oadgqm35] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .showcase-section[b-p8oadgqm35] {
        padding: 80px 20px;
    }

    .showcase-header[b-p8oadgqm35] {
        margin-bottom: 48px;
    }

    .showcase-subtitle[b-p8oadgqm35] {
        font-size: 1.1rem;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .showcase-section[b-p8oadgqm35] {
        padding: 64px 16px;
    }

    .showcase-badge[b-p8oadgqm35] {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .showcase-header[b-p8oadgqm35] {
        margin-bottom: 40px;
    }

    .showcase-subtitle[b-p8oadgqm35] {
        font-size: 1rem;
        margin-bottom: 32px;
    }

    .showcase-filters[b-p8oadgqm35] {
        gap: 8px;
    }

    .showcase-filter[b-p8oadgqm35] {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .showcase-filter span:last-child[b-p8oadgqm35] {
        display: none;
    }

    .showcase-grid[b-p8oadgqm35] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .showcase-card--featured[b-p8oadgqm35] {
        grid-column: span 1;
    }

    .showcase-card--featured .showcase-card__image-container[b-p8oadgqm35] {
        aspect-ratio: 16 / 10;
    }

    .showcase-card[b-p8oadgqm35] {
        border-radius: 18px;
    }

    .showcase-card:hover[b-p8oadgqm35] {
        transform: translateY(-6px);
    }

    .showcase-card__content[b-p8oadgqm35] {
        padding: 20px;
    }

    .showcase-card__title[b-p8oadgqm35] {
        font-size: 1.1rem;
    }

    .showcase-card--featured .showcase-card__title[b-p8oadgqm35] {
        font-size: 1.1rem;
    }

    .showcase-card__description[b-p8oadgqm35] {
        font-size: 0.85rem;
    }

    .showcase-stats[b-p8oadgqm35] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .showcase-stat[b-p8oadgqm35] {
        gap: 4px;
    }

    .showcase-stat__value[b-p8oadgqm35] {
        font-size: 1.25rem;
    }

    .showcase-stat__label[b-p8oadgqm35] {
        font-size: 0.75rem;
    }

    /* Lightbox Mobile */
    .showcase-lightbox__container[b-p8oadgqm35] {
        max-height: 95vh;
        border-radius: 18px;
    }

    .showcase-lightbox__image-wrapper[b-p8oadgqm35] {
        max-height: 40vh;
    }

    .showcase-lightbox__info[b-p8oadgqm35] {
        padding: 20px;
    }

    .showcase-lightbox__title[b-p8oadgqm35] {
        font-size: 1.25rem;
    }

    .showcase-lightbox__description[b-p8oadgqm35] {
        font-size: 0.9rem;
    }
}

/* ============================================================
   RESPONSIVE - SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
    .showcase-section[b-p8oadgqm35] {
        padding: 48px 12px;
    }

    .showcase-title[b-p8oadgqm35] {
        font-size: 2rem;
    }

    .showcase-subtitle[b-p8oadgqm35] {
        font-size: 0.95rem;
    }

    .showcase-filter[b-p8oadgqm35] {
        padding: 8px 12px;
    }

    .showcase-grid[b-p8oadgqm35] {
        gap: 16px;
    }

    .showcase-card[b-p8oadgqm35] {
        border-radius: 14px;
    }

    .showcase-card:hover[b-p8oadgqm35] {
        transform: none;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

    .showcase-card__content[b-p8oadgqm35] {
        padding: 16px;
    }

    .showcase-card__title[b-p8oadgqm35] {
        font-size: 1rem;
    }

    .showcase-card__description[b-p8oadgqm35] {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .showcase-card__tags[b-p8oadgqm35] {
        gap: 6px;
    }

    .showcase-card__tag[b-p8oadgqm35] {
        padding: 3px 8px;
        font-size: 0.7rem;
    }

    .showcase-stats[b-p8oadgqm35] {
        padding: 16px;
        gap: 12px;
        border-radius: 14px;
    }

    .showcase-stat__value[b-p8oadgqm35] {
        font-size: 1.1rem;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .showcase-orb[b-p8oadgqm35],
    .showcase-badge__glow[b-p8oadgqm35],
    .showcase-title__gradient[b-p8oadgqm35] {
        animation: none;
    }

    .showcase-card[b-p8oadgqm35] {
        animation: none;
        opacity: 1;
    }

    .showcase-card:hover[b-p8oadgqm35] {
        transform: none;
    }

    .showcase-card__image[b-p8oadgqm35],
    .showcase-card__shine[b-p8oadgqm35] {
        transition: none;
    }

    .showcase-card:hover .showcase-card__image[b-p8oadgqm35] {
        transform: none;
    }

    .showcase-lightbox__container[b-p8oadgqm35] {
        animation: none;
    }
}
/* /Components/Shared/SeoCompareLinks.razor.rz.scp.css */
/* Premium Enterprise Compare Section */
.seo-compare[b-0l6modfzgc] {
    margin-top: 1.5rem;
    padding: 1.5rem 1.4rem 1.6rem;
    border-radius: 22px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: 
        radial-gradient(1000px 360px at 15% 15%, rgba(0, 71, 171, 0.28), transparent 65%),
        radial-gradient(1000px 360px at 85% 10%, rgba(124, 58, 237, 0.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
    backdrop-filter: blur(15px);
    box-shadow: 
        0 20px 50px rgba(2, 6, 23, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.seo-compare[b-0l6modfzgc]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(11, 92, 255, 0.15) 0%, transparent 70%);
    animation: compareRotate-b-0l6modfzgc 20s linear infinite;
}

@keyframes compareRotate-b-0l6modfzgc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.seo-compare > *[b-0l6modfzgc] {
    position: relative;
    z-index: 1;
}

.seo-compare-label[b-0l6modfzgc] {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    opacity: 0.98;
    background: linear-gradient(135deg, #0047ab, #0b5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-compare-grid[b-0l6modfzgc] {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.1rem;
}

.seo-compare-card[b-0l6modfzgc] {
    grid-column: span 12;
    display: grid;
    gap: 0.4rem;
    padding: 1.3rem 1.25rem;
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.seo-compare-card[b-0l6modfzgc]::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(500px 260px at 25% 0%, rgba(11, 92, 255, 0.35), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.seo-compare-card[b-0l6modfzgc]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.7s ease;
}

.seo-compare-card:hover[b-0l6modfzgc]::after {
    left: 100%;
}

.seo-compare-card:hover[b-0l6modfzgc] {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(11, 92, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 24px 60px rgba(2, 6, 23, 0.2),
        0 0 40px rgba(11, 92, 255, 0.2);
}

.seo-compare-card:hover[b-0l6modfzgc]::before {
    opacity: 1;
}

.seo-compare-title[b-0l6modfzgc] {
    position: relative;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff, #e0e7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-compare-sub[b-0l6modfzgc] {
    position: relative;
    opacity: 0.92;
    max-width: 52ch;
    line-height: 1.6;
    font-weight: 500;
}

.seo-compare-cta[b-0l6modfzgc] {
    position: relative;
    margin-top: 0.4rem;
    font-weight: 800;
    opacity: 0.98;
    color: #60a5fa;
    transition: all 0.3s ease;
}

.seo-compare-card:hover .seo-compare-cta[b-0l6modfzgc] {
    color: #93c5fd;
    transform: translateX(5px);
}

@media (min-width: 900px) {
    .seo-compare-card[b-0l6modfzgc] {
        grid-column: span 6;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .seo-compare[b-0l6modfzgc] {
        animation: seoFadeUp-b-0l6modfzgc .7s ease both;
    }
    .seo-compare-card:nth-child(1)[b-0l6modfzgc] { 
        animation: seoFadeUp-b-0l6modfzgc .8s ease both; 
        animation-delay: .08s; 
    }
    .seo-compare-card:nth-child(2)[b-0l6modfzgc] { 
        animation: seoFadeUp-b-0l6modfzgc .8s ease both; 
        animation-delay: .16s; 
    }
}

@keyframes seoFadeUp-b-0l6modfzgc {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/SeoComparisonTable.razor.rz.scp.css */
.seo-table-wrap[b-87mdfj8da6] {
    overflow-x: auto;
    border-radius: 1.25rem;
    border: 1px solid rgba(2, 6, 23, 0.10);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.08);
}

.seo-table[b-87mdfj8da6] {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.seo-table th[b-87mdfj8da6],
.seo-table td[b-87mdfj8da6] {
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(2, 6, 23, 0.08);
}

.seo-table thead th[b-87mdfj8da6] {
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.80);
    background: rgba(15, 23, 42, 0.03);
}

.seo-table-row[b-87mdfj8da6] {
    transition: background-color 180ms ease;
}

.seo-table-row:hover[b-87mdfj8da6] {
    background: rgba(15, 23, 42, 0.02);
}

.seo-table-row--primary[b-87mdfj8da6] {
    background: rgba(13, 107, 90, 0.08);
}

.seo-table-row--primary:hover[b-87mdfj8da6] {
    background: rgba(13, 107, 90, 0.11);
}

.seo-status[b-87mdfj8da6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    border: 1px solid rgba(2, 6, 23, 0.10);
    background: rgba(2, 6, 23, 0.04);
}

.seo-status--yes[b-87mdfj8da6] {
    border-color: rgba(46, 204, 113, 0.35);
    background: rgba(46, 204, 113, 0.12);
}

.seo-status--maybe[b-87mdfj8da6] {
    border-color: rgba(241, 196, 15, 0.40);
    background: rgba(241, 196, 15, 0.12);
}

.seo-status--no[b-87mdfj8da6] {
    border-color: rgba(231, 76, 60, 0.40);
    background: rgba(231, 76, 60, 0.12);
}

.seo-status--unified[b-87mdfj8da6] {
    border-color: rgba(13, 107, 90, 0.35);
    background: rgba(13, 107, 90, 0.12);
}

@media (prefers-reduced-motion: no-preference) {
    .seo-table-wrap[b-87mdfj8da6] {
        animation: seoFadeUp-b-87mdfj8da6 .65s ease both;
    }
}

@keyframes seoFadeUp-b-87mdfj8da6 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/SeoFaqAccordion.razor.rz.scp.css */
.seo-faq[b-b5j4chst8b] {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.seo-faq-item[b-b5j4chst8b] {
    border-radius: 1.25rem;
    border: 1px solid rgba(2, 6, 23, 0.10);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(13, 107, 90, 0.10) 0%, rgba(255, 255, 255, 0.60) 55%, rgba(255, 255, 255, 0.72) 100%);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
}

.seo-faq-item summary[b-b5j4chst8b] {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

.seo-faq-item summary[b-b5j4chst8b]::after {
    content: "+";
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(15, 23, 42, 0.85);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(2, 6, 23, 0.10);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.seo-faq-item[open] summary[b-b5j4chst8b]::after {
   content: "–";
    transform: rotate(0deg) scale(1.02);
    background: rgba(13, 107, 90, 0.10);
    border-color: rgba(13, 107, 90, 0.22);
}

.seo-faq-a[b-b5j4chst8b] {
    padding: 0 1.1rem 1.05rem;
   opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.seo-faq-item[open] .seo-faq-a[b-b5j4chst8b] {
    opacity: 1;
    transform: translateY(0);
}

.seo-faq-a p[b-b5j4chst8b] {
    margin: 0;
    color: rgba(15, 23, 42, 0.76);
    line-height: 1.7;
}

@media (prefers-reduced-motion: no-preference) {
    .seo-faq-item[b-b5j4chst8b] {
        animation: seoFadeUp-b-b5j4chst8b .65s ease both;
    }
    .seo-faq-item:nth-child(2)[b-b5j4chst8b]{ animation-delay: .06s; }
    .seo-faq-item:nth-child(3)[b-b5j4chst8b]{ animation-delay: .12s; }
    .seo-faq-item:nth-child(4)[b-b5j4chst8b]{ animation-delay: .18s; }
}

@keyframes seoFadeUp-b-b5j4chst8b {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/SeoLinkCardGrid.razor.rz.scp.css */
.seo-link-grid[b-8tkplh3uyr] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.seo-link-card[b-8tkplh3uyr] {
    grid-column: span 12;
    display: grid;
    gap: 0.25rem;
    padding: 1.05rem 1.1rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(2, 6, 23, 0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.seo-link-card:hover[b-8tkplh3uyr] {
    transform: translateY(-3px);
    border-color: rgba(2, 6, 23, 0.16);
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.10);
}

.seo-link-title[b-8tkplh3uyr] {
    font-weight: 900;
    letter-spacing: -0.01em;
}

.seo-link-body[b-8tkplh3uyr] {
    color: rgba(15, 23, 42, 0.74);
    line-height: 1.65;
}

@media (min-width: 700px) {
    .seo-link-card[b-8tkplh3uyr] { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .seo-link-card[b-8tkplh3uyr] { grid-column: span 3; }
}

@media (prefers-reduced-motion: no-preference) {
    .seo-link-card[b-8tkplh3uyr] {
        animation: seoFadeUp-b-8tkplh3uyr .65s ease both;
    }
    .seo-link-card:nth-child(2)[b-8tkplh3uyr]{ animation-delay: .06s; }
    .seo-link-card:nth-child(3)[b-8tkplh3uyr]{ animation-delay: .12s; }
    .seo-link-card:nth-child(4)[b-8tkplh3uyr]{ animation-delay: .18s; }
}

@keyframes seoFadeUp-b-8tkplh3uyr {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Components/Shared/TrustBadges.razor.rz.scp.css */
/* ========================================
   TRUST BADGES SECTION
   Company Info & Credibility Indicators
   ======================================== */

.home-trust-badges[b-avo1vlwwkm] {
    padding: 2rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.home-trust-badges .container[b-avo1vlwwkm] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Trust Badges Grid */
.trust-badges-grid[b-avo1vlwwkm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

/* Individual Trust Badge */
.trust-badge[b-avo1vlwwkm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-badge:hover[b-avo1vlwwkm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.badge-icon[b-avo1vlwwkm] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.badge-content[b-avo1vlwwkm] {
    text-align: left;
}

.badge-title[b-avo1vlwwkm] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.3;
}

.badge-text[b-avo1vlwwkm] {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
}

/* Screen reader only text */
.sr-only[b-avo1vlwwkm] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .home-trust-badges[b-avo1vlwwkm] {
        padding: 1.5rem 1rem;
    }

    .trust-badges-grid[b-avo1vlwwkm] {
        gap: 1rem;
    }

    .trust-badge[b-avo1vlwwkm] {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 150px;
        padding: 0.5rem 0.75rem;
    }

    .badge-icon[b-avo1vlwwkm] {
        font-size: 1.25rem;
    }

    .badge-title[b-avo1vlwwkm] {
        font-size: 0.8rem;
    }

    .badge-text[b-avo1vlwwkm] {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .trust-badge[b-avo1vlwwkm] {
        flex: 1 1 100%;
    }
}