/* /Components/Layout/MainLayout.razor.rz.scp.css */
.top-navbar[b-kslgnixrd8] {
    background: rgba(6, 13, 24, 0.92);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    padding: 0.85rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
}

.top-navbar .navbar-brand[b-kslgnixrd8] {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-white) !important;
    display: flex;
    align-items: center;
    padding: 0;
    transition: transform var(--transition-fast);
}

.top-navbar .navbar-brand:hover[b-kslgnixrd8] {
    transform: scale(1.02);
}

.navbar-logo[b-kslgnixrd8] {
    height: 38px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .navbar-logo[b-kslgnixrd8] { height: 28px; }
}

.top-navbar .nav-link[b-kslgnixrd8] {
    color: rgba(255, 255, 255, 0.60) !important;
    padding: 0.5rem 1.5rem;
    transition: color var(--transition-fast);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
}

.top-navbar .nav-link[b-kslgnixrd8]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: var(--color-blue);
    transition: width var(--transition-base), left var(--transition-base);
    border-radius: 1px;
}

.top-navbar .nav-link:hover[b-kslgnixrd8]::after,
.top-navbar .nav-link.active[b-kslgnixrd8]::after {
    width: 50%;
    left: 25%;
}

.top-navbar .nav-link:hover[b-kslgnixrd8],
.top-navbar .nav-link.active[b-kslgnixrd8] {
    color: var(--color-white) !important;
}

/* Section picker: shows the section you are in, and reveals the other one on click.
   Reset to plain-button box model explicitly -- native <button> chrome otherwise sits on
   top of the inherited .nav-link padding and reads as a stray extra indent next to the
   plain <a> nav links, which don't carry that baggage. */
.top-navbar .section-dropdown .dropdown-toggle[b-kslgnixrd8] {
    background: none;
    border: none;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.top-navbar .section-dropdown .dropdown-toggle[b-kslgnixrd8]::after {
    content: '';
    position: static;
    width: 0;
    height: 0;
    margin-left: 0.1rem;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0;
    background: none;
    transition: transform var(--transition-fast);
}

.top-navbar .section-dropdown .dropdown-toggle:hover[b-kslgnixrd8]::after,
.top-navbar .section-dropdown .dropdown-toggle.show[b-kslgnixrd8]::after {
    width: 0;
    left: auto;
    transform: rotate(180deg);
}

.top-navbar .section-dropdown .dropdown-toggle.show[b-kslgnixrd8] {
    color: var(--color-white) !important;
}

.top-navbar .dropdown-menu[b-kslgnixrd8] {
    background: rgba(6, 13, 24, 0.98);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    margin-top: 0.65rem;
    min-width: 240px;
    box-shadow: var(--shadow-lg);
}

.top-navbar .dropdown-item[b-kslgnixrd8] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.top-navbar .dropdown-item:hover[b-kslgnixrd8],
.top-navbar .dropdown-item:focus[b-kslgnixrd8] {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-white);
}

.top-navbar .dropdown-item.active[b-kslgnixrd8] {
    background: rgba(197, 235, 76, 0.12);
    color: var(--color-accent);
    font-weight: 600;
}

@media (min-width: 992px) {
    /* Divider separates the section picker from this section's own pages. */
    .section-dropdown[b-kslgnixrd8] {
        position: relative;
        margin-right: 0.75rem;
        padding-right: 0.75rem;
    }

    .section-dropdown[b-kslgnixrd8]::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 991px) {
    /* ms-auto shrink-wraps and right-aligns the nav list on desktop; in the collapsed
       mobile menu that just pushes it toward the right edge instead of letting it fill
       the row, which is what sent the section chip's text off the edge of the screen. */
    .navbar-nav.ms-auto[b-kslgnixrd8] {
        margin-left: 0 !important;
        width: 100%;
    }
}

@media (max-width: 991px) {
    /* The collapse used to sit in normal flow, pushing the whole page down as it opened --
       the menu links ended up flush against whatever content started the page (on the
       homepage, "Betting & Gaming" directly above a section also titled "Betting &
       Gaming"), and every frame of the open/close height animation forced the entire page
       below to reflow, which is what read as stutter. Floating it as an absolutely
       positioned panel over the page fixes both: nothing below it moves, and it now reads
       as its own layer instead of an odd extension of the page content. */
    .navbar-collapse[b-kslgnixrd8] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 0;
        padding: 1rem 1rem 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(6, 13, 24, 0.98);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
    }

    .section-dropdown[b-kslgnixrd8] {
        margin-bottom: 0.75rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .top-navbar .section-dropdown .dropdown-toggle[b-kslgnixrd8] {
        width: 100%;
        justify-content: space-between;
        padding: 0.75rem 1rem !important;
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-md);
        font-size: 14px;
        font-weight: 600;
        color: var(--color-white) !important;
    }

    /* Expands in place under the chip instead of floating like a desktop dropdown, which
       on a narrow screen could overflow the edge or read as detached from what opened it. */
    .top-navbar .dropdown-menu[b-kslgnixrd8] {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.5rem;
        box-shadow: none;
    }

    .top-navbar .nav-link[b-kslgnixrd8] {
        padding: 0.65rem 0.5rem;
    }
}

.top-navbar .demo-btn[b-kslgnixrd8] {
    background: var(--color-accent);
    color: var(--color-primary-dark) !important;
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.75rem !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 14px rgba(197, 235, 76, 0.25);
    transition: all var(--transition-base);
    margin-left: 0.75rem;
    border: none;
    position: relative;
    overflow: hidden;
}

.top-navbar .demo-btn[b-kslgnixrd8]::after {
    display: none;
}

.top-navbar .demo-btn:hover[b-kslgnixrd8] {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(197, 235, 76, 0.40);
    color: var(--color-primary-dark) !important;
    background: var(--color-accent-hover);
}

.demo-btn-mobile[b-kslgnixrd8] { display: none; }
.demo-btn-desktop[b-kslgnixrd8] { display: block; }

@media (max-width: 991px) {
    .demo-btn-mobile[b-kslgnixrd8] {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }
    /* Smaller than the desktop pill so it never crowds the hamburger off the row. */
    .demo-btn-mobile.demo-btn[b-kslgnixrd8] {
        padding: 0.45rem 1.1rem !important;
        font-size: 11px;
    }
    .demo-btn-desktop[b-kslgnixrd8] { display: none !important; }
}

@media (max-width: 380px) {
    .demo-btn-mobile.demo-btn[b-kslgnixrd8] {
        padding: 0.4rem 0.85rem !important;
        font-size: 10px;
        letter-spacing: 0.04em;
    }
}

/* Narrow phones (SE-width and similar): logo + CTA + toggler no longer fit on one row at
   the sizes above, which wraps the toggler onto its own line again. Shrinking the logo
   buys back just enough room. */
@media (max-width: 340px) {
    .navbar-logo[b-kslgnixrd8] { height: 22px; }
    .demo-btn-mobile[b-kslgnixrd8] {
        margin-right: 0.4rem;
    }
    .demo-btn-mobile.demo-btn[b-kslgnixrd8] {
        padding: 0.35rem 0.7rem !important;
        font-size: 9px;
    }
}

.top-navbar .navbar-toggler[b-kslgnixrd8] {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.65rem;
    flex-shrink: 0;
}

.top-navbar .navbar-toggler:focus[b-kslgnixrd8] {
    box-shadow: 0 0 0 2px rgba(197, 235, 76, 0.15);
}

.top-navbar .navbar-toggler-icon[b-kslgnixrd8] {
    background-image: 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.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.page[b-kslgnixrd8] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    min-height: 100vh;
}

main[b-kslgnixrd8] {
    flex: 1;
    background: transparent;
}

#blazor-error-ui[b-kslgnixrd8] {
    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-kslgnixrd8] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.site-footer[b-kslgnixrd8] {
    background: var(--color-secondary-dark);
    color: var(--color-text-dark);
    padding: 5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
    position: relative;
}

.site-footer[b-kslgnixrd8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}

.footer-main[b-kslgnixrd8] {
    padding-bottom: 3.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-brand[b-kslgnixrd8] {
    max-width: 300px;
}

.footer-logo-link[b-kslgnixrd8] {
    display: inline-block;
    margin-bottom: 1.25rem;
    transition: opacity var(--transition-fast);
}

.footer-logo-link:hover[b-kslgnixrd8] {
    opacity: 0.8;
}

.footer-logo[b-kslgnixrd8] {
    height: 40px;
    width: auto;
    display: block;
}

.footer-description[b-kslgnixrd8] {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 0;
}

.footer-legal[b-kslgnixrd8] {
    color: var(--color-text-muted);
    opacity: 0.7;
    font-size: 11px;
    line-height: 1.6;
    margin-top: 0.85rem;
    margin-bottom: 0;
}

.footer-heading[b-kslgnixrd8] {
    color: var(--color-text-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

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

.footer-links li[b-kslgnixrd8] {
    margin-bottom: 0.65rem;
}

.footer-links a[b-kslgnixrd8] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: color var(--transition-fast);
}

.footer-links a:hover[b-kslgnixrd8] {
    color: var(--color-accent);
}

.footer-bottom[b-kslgnixrd8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 0;
}

.footer-bottom .copyright-text[b-kslgnixrd8] {
    color: var(--color-text-muted) !important;
    font-size: 12px;
    margin-bottom: 0;
}

.footer-bottom-links[b-kslgnixrd8] {
    display: flex;
    gap: 1.75rem;
}

.footer-bottom-links a[b-kslgnixrd8] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 12px;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover[b-kslgnixrd8] {
    color: var(--color-accent);
}

@media (max-width: 767px) {
    .site-footer[b-kslgnixrd8] { padding: 3rem 0 0; }
    .footer-brand[b-kslgnixrd8] { max-width: 100%; text-align: center; margin: 0 auto 1.5rem; }
    .footer-bottom[b-kslgnixrd8] { flex-direction: column; gap: 0.75rem; text-align: center; }
    .footer-bottom-links[b-kslgnixrd8] { justify-content: center; }
}

.whatsapp-float-button[b-kslgnixrd8] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--color-blue);
    color: var(--color-white);
    padding: 12px 18px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(30, 107, 255, 0.25);
    z-index: 999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-weight: 600;
}

/* Background stays the same blue on hover (rather than the usual lighter hover tint) so the
   white text keeps its ~4.6:1 contrast -- a lighter blue would drop that under 4:1. */
.whatsapp-float-button:hover[b-kslgnixrd8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(30, 107, 255, 0.35);
    color: var(--color-white);
    text-decoration: none;
}

.whatsapp-float-button i[b-kslgnixrd8] {
    font-size: 1.5rem;
}

.whatsapp-text[b-kslgnixrd8] {
    font-size: 0.95rem;
    white-space: nowrap;
    font-weight: 600;
}

@media (max-width: 576px) {
    .whatsapp-float-button[b-kslgnixrd8] {
        bottom: 16px;
        right: 16px;
        padding: 12px 18px;
    }
    .whatsapp-float-button i[b-kslgnixrd8] { font-size: 1.3rem; }
    .whatsapp-text[b-kslgnixrd8] { font-size: 0.85rem; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4b9pm1028y],
.components-reconnect-repeated-attempt-visible[b-4b9pm1028y],
.components-reconnect-failed-visible[b-4b9pm1028y],
.components-pause-visible[b-4b9pm1028y],
.components-resume-failed-visible[b-4b9pm1028y],
.components-rejoining-animation[b-4b9pm1028y] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-retrying[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-failed[b-4b9pm1028y],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4b9pm1028y] {
    display: block;
}


#components-reconnect-modal[b-4b9pm1028y] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-4b9pm1028y 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-4b9pm1028y 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4b9pm1028y 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-4b9pm1028y]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-4b9pm1028y 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-4b9pm1028y {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-4b9pm1028y {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-4b9pm1028y {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-4b9pm1028y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-4b9pm1028y] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-4b9pm1028y] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-4b9pm1028y] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-4b9pm1028y] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-4b9pm1028y] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-4b9pm1028y] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4b9pm1028y 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-4b9pm1028y] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-4b9pm1028y {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/BettingAbout.razor.rz.scp.css */
.about-hero[b-ei99ddrdt3] { display: none; }

/* Team Banner */
.team-banner-section[b-ei99ddrdt3] { background: transparent; padding: 0; }

.team-banner-wrapper[b-ei99ddrdt3] { position: relative; overflow: hidden; width: 100%; }

.team-banner-image[b-ei99ddrdt3] {
    width: 100%; height: 560px;
    background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80');
    background-size: cover; background-position: center;
    position: relative; display: flex; align-items: center; justify-content: center;
}

.team-banner-image[b-ei99ddrdt3]::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(6,13,24,0.85) 0%, rgba(12,19,34,0.75) 100%);
    z-index: 1;
}

.team-banner-text[b-ei99ddrdt3] {
    position: relative; z-index: 2;
    text-align: center; color: white; padding: 2.5rem;
}

.team-banner-text h1[b-ei99ddrdt3] {
    color: white;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.team-banner-text p[b-ei99ddrdt3] {
    color: rgba(255,255,255,0.65);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

.about-content[b-ei99ddrdt3] {
    background: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
}

.about-content[b-ei99ddrdt3]::after {
    content: '';
    position: absolute;
    top: 20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(30, 107, 255, 0.015) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-content[b-ei99ddrdt3]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.about-content .card[b-ei99ddrdt3] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-text-dark);
    border-radius: var(--radius-xl);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.about-content .card:hover[b-ei99ddrdt3] {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.about-content h2[b-ei99ddrdt3] {
    color: var(--color-text-dark);
    font-weight: 600;
    position: relative;
    padding-bottom: 0.75rem;
}

.about-content h2[b-ei99ddrdt3]::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 32px; height: 2px;
    background: var(--color-blue);
    border-radius: 2px;
}

.about-content p[b-ei99ddrdt3] { color: var(--color-text-body); line-height: 1.8; }
.about-content .text-primary[b-ei99ddrdt3] { color: var(--color-accent) !important; }

.about-content .list-unstyled li[b-ei99ddrdt3] {
    color: var(--color-text-body);
    transition: transform 0.2s ease;
}

.about-content .list-unstyled li:hover[b-ei99ddrdt3] { transform: translateX(4px); }

.team-members-section[b-ei99ddrdt3] {
    background: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
}

.team-members-section[b-ei99ddrdt3]::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -8%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(30, 107, 255, 0.015) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.team-members-section[b-ei99ddrdt3]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.team-members-section h2[b-ei99ddrdt3] { color: var(--color-text-dark) !important; }

.team-member-card[b-ei99ddrdt3] {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.team-member-card:hover[b-ei99ddrdt3] {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.team-member-image[b-ei99ddrdt3] {
    width: 100%; height: 250px;
    background-size: cover; background-position: center;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.team-member-card:hover .team-member-image[b-ei99ddrdt3] { transform: scale(1.04); }

.team-member-info[b-ei99ddrdt3] {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-member-info h3[b-ei99ddrdt3] { color: var(--color-text-dark); font-weight: 600; }

.team-member-title[b-ei99ddrdt3] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-accent) !important;
}

.team-member-description[b-ei99ddrdt3] {
    color: var(--color-text-body);
    font-size: 0.9rem;
    line-height: 1.7;
    flex: 1;
}

/* Four cards across from lg up, matching the team grid on the home page, so with seven people the
   row lands 4 + 3. That is narrower than the three-up layout these cards were sized for, so the
   photo and the padding come down a notch to keep them in proportion. */
@media (min-width: 992px) {
    .team-member-image[b-ei99ddrdt3] { height: 220px; }
    .team-member-info[b-ei99ddrdt3] { padding: 1.4rem; }
    .team-member-description[b-ei99ddrdt3] { font-size: 0.86rem; line-height: 1.65; }
}

@media (max-width: 768px) {
    .team-banner-image[b-ei99ddrdt3] { height: 400px; }
    .team-member-image[b-ei99ddrdt3] { height: 200px; }
    .team-member-card:hover[b-ei99ddrdt3] { transform: translateY(-3px); }
    .team-member-info[b-ei99ddrdt3] { padding: 1.5rem; }
    .team-member-description[b-ei99ddrdt3] { font-size: 0.85rem; }
}

/* Prose links only. A .btn brings its own colours, and the accent applied here used to paint the
   label the same lime as the button's background, leaving an apparently empty CTA. */
.about-content a:not(.btn)[b-ei99ddrdt3] {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(197, 235, 76, 0.35);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.about-content a:not(.btn):hover[b-ei99ddrdt3] {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
}
/* Full-body shot: sits low enough to show the seat, not just the wall above. */
.team-photo-tall[b-ei99ddrdt3] {
    background-position: center 55%;
}

/* Square close-ups: crop from near the top so the head is not cut off. */
.team-photo-head-top[b-ei99ddrdt3] {
    background-position: center 8%;
}

/* Square close-up: halfway between head-top and center. */
.team-photo-head-mid[b-ei99ddrdt3] {
    background-position: center 29%;
}

/* Wide shot: pull in so the face carries the same weight as the other cards. */
.team-photo-zoom[b-ei99ddrdt3] {
    background-size: 150%;
    background-position: center 6%;
}

/* Intro line under the "Our Team" heading. */
.team-intro[b-ei99ddrdt3] {
    color: var(--color-text-body);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Closing CTA. Sits on the same dark ground as the team section above it, so the panel itself
   carries the contrast rather than a second background colour. */
.about-cta-section[b-ei99ddrdt3] {
    background: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(80px, 10vw, 130px) !important;
}

.about-cta-section[b-ei99ddrdt3]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.about-cta[b-ei99ddrdt3] {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 3.5rem);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-xl);
}

.about-cta h2[b-ei99ddrdt3] {
    color: var(--color-text-dark);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.about-cta-text[b-ei99ddrdt3] {
    color: var(--color-text-body);
    line-height: 1.8;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
/* /Components/Pages/BettingHome.razor.rz.scp.css */
.hero-banner[b-8289syfb7m] {
    background: var(--color-primary-dark);
    color: white;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-banner[b-8289syfb7m]::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 70%;
    height: 180%;
    background: radial-gradient(ellipse, rgba(30, 107, 255, 0.025) 0%, transparent 65%);
    pointer-events: none;
    animation: heroGlow-b-8289syfb7m 10s ease-in-out infinite;
}

.hero-banner[b-8289syfb7m]::after {
    display: none;
}

@keyframes heroGlow-b-8289syfb7m {
    0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
    50% { opacity: 0.8; transform: translate(-10px, 5px) scale(1.02); }
}

.hero-content[b-8289syfb7m] {
    position: relative;
    z-index: 10;
    animation: fadeInUp 0.8s ease both;
}

.hero-eyebrow[b-8289syfb7m] {
    display: inline-block;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.hero-content h1[b-8289syfb7m] {
    color: white;
    font-size: clamp(3.2rem, 7vw, 5.8rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 2.5rem;
}

.hero-content p[b-8289syfb7m] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.15rem;
    line-height: 1.85;
    max-width: 600px;
}

.hero-content .lead[b-8289syfb7m] {
    color: rgba(255, 255, 255, 0.65) !important;
}

.hero-content .btn[b-8289syfb7m],
.hero-content .cta-button[b-8289syfb7m] {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
}

.hero-content .cta-button[b-8289syfb7m] {
    padding: 1.1rem 3rem;
    font-size: 13px;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
}

/* Hero Mockup Carousel */
.hero-mockup-carousel[b-8289syfb7m] {
    position: relative;
    z-index: 10;
    height: 480px;
    margin-top: 0;
    animation: fadeInUp 0.8s ease 0.3s both;
    perspective: 1000px;
}

.mockup-slide[b-8289syfb7m] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mockup-slide.active[b-8289syfb7m] { opacity: 1; }

/* The hero shows our own product screenshots and team photo, which are portrait. They are sized by
   height so every slide occupies the same vertical space and its width simply follows the source
   ratio: the phone shots land around 220px wide, the founders photo a little wider. drop-shadow
   rather than box-shadow, because the phone PNGs carry their own rounded bezel in the alpha
   channel and a rectangular shadow behind them would show through the transparent corners. */
.mockup-shot[b-8289syfb7m] {
    height: 90%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
    transform: rotateY(-3deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The founders photo is a JPEG with square corners, so it needs the rounding the phone shots
   already have baked in. */
.mockup-shot-photo[b-8289syfb7m] {
    border-radius: var(--radius-xl);
}

.mockup-slide.active .mockup-shot:hover[b-8289syfb7m] {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

.mockup-label[b-8289syfb7m] {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-image-wrapper[b-8289syfb7m] { display: none; }
.hero-overlay[b-8289syfb7m] { display: none; }
.hero-content-image[b-8289syfb7m] { display: none; }
.hero-icon[b-8289syfb7m] { display: none; }

.cta-section[b-8289syfb7m] {
    background: var(--color-primary-dark);
    color: white;
}

.cta-section h2[b-8289syfb7m], .cta-section p[b-8289syfb7m] { color: white; }

.cta-button[b-8289syfb7m] {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cta-button:hover[b-8289syfb7m] {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(197, 235, 76, 0.15);
}

.hero-banner .container[b-8289syfb7m],
.services-section .container[b-8289syfb7m],
.testimonials-section .container[b-8289syfb7m] {
    max-width: 1400px;
}

.services-section[b-8289syfb7m] {
    background: var(--color-light-bg);
    position: relative;
    padding: clamp(100px, 12vw, 160px) 0;
    overflow: hidden;
}

.services-section[b-8289syfb7m]::before {
    display: none;
}

.services-section[b-8289syfb7m]::after {
    display: none;
}

.services-section h2[b-8289syfb7m] {
    color: var(--color-light-text);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-intro-text[b-8289syfb7m] {
    color: var(--color-light-text-body);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Use cases ---------- */

/* Dark band between the two light ones, which also lets the phone frames from app.css
   (built for the dark service pages) be reused here without restyling them. */
.use-cases-section[b-8289syfb7m] {
    background: var(--color-primary-dark);
    padding: clamp(100px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}

.use-cases-section[b-8289syfb7m]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.use-cases-section .container[b-8289syfb7m] {
    max-width: 1400px;
    position: relative;
    z-index: 1;
}

.use-cases-section h2[b-8289syfb7m] {
    color: var(--color-text-dark);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.use-cases-intro[b-8289syfb7m] {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.use-cases-intro-text[b-8289syfb7m] {
    color: var(--color-text-body);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 640px;
    margin: 0 auto;
}

/* The whole block is the link, so the phone, the copy and "View case" all react together. */
.use-case-card[b-8289syfb7m] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--color-surface), rgba(255, 255, 255, 0.02));
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.use-case-card:hover[b-8289syfb7m] {
    transform: translateY(-6px);
    border-color: var(--color-border-accent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.use-case-visual[b-8289syfb7m] {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.use-case-visual .phone-frame[b-8289syfb7m] {
    width: 100%;
    max-width: 236px;
}

/* Same width as the mock frame it sits beside: the shot's own bezel is about as thick as the
   frame's padding, so the screens inside line up and the cards' phones stay within ~20px of the
   same height. They share a top edge, and .use-case-body pins the text to the bottom of the card,
   so the small difference lands in the whitespace between the two. */
.use-case-visual .device-shot[b-8289syfb7m] {
    max-width: 236px;
}

.use-case-card:hover .phone-frame[b-8289syfb7m] {
    transform: translateY(-4px);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55);
}

.use-case-body[b-8289syfb7m] {
    text-align: center;
    margin-top: auto;
}

.use-case-title[b-8289syfb7m] {
    color: var(--color-text-dark);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.use-case-text[b-8289syfb7m] {
    color: var(--color-text-body);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.use-case-link[b-8289syfb7m] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.use-case-link span[b-8289syfb7m] {
    display: inline-block;
    transition: transform var(--transition-base);
}

.use-case-card:hover .use-case-link span[b-8289syfb7m] {
    transform: translateX(4px);
}

.testimonials-section[b-8289syfb7m] {
    background: var(--color-light-bg-alt);
    padding: clamp(100px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}

.testimonials-section[b-8289syfb7m]::before {
    display: none;
}

.testimonials-section[b-8289syfb7m]::after {
    display: none;
}

.testimonials-section h2[b-8289syfb7m] {
    color: var(--color-light-text);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.testimonials-section .section-header-with-nav[b-8289syfb7m] {
    text-align: left;
}

.testimonials-section .section-header-with-nav h2[b-8289syfb7m] {
    text-align: left;
    margin-bottom: 0;
}

.testimonial-card[b-8289syfb7m] {
    background: var(--color-light-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--color-light-text);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow: none;
    padding: 2rem !important;
}

.testimonial-card[b-8289syfb7m]::before {
    content: '\201C';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: rgba(30, 107, 255, 0.08);
    line-height: 1;
    pointer-events: none;
    transition: color 0.4s ease;
}

.testimonial-card:hover[b-8289syfb7m]::before {
    color: rgba(30, 107, 255, 0.15);
}

.testimonial-card:hover[b-8289syfb7m] {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    background: var(--color-light-bg) !important;
}

.testimonial-card blockquote p[b-8289syfb7m] {
    color: var(--color-light-text-body);
    font-style: normal;
    font-size: 15px;
    line-height: 1.85;
}

.testimonial-card cite[b-8289syfb7m] {
    color: var(--color-blue-deep);
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

/* Attribution line: who said it, and for which company. The logo sits on the right so the
   three cards line up even when a name or job title wraps. */
.testimonial-meta[b-8289syfb7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.testimonial-person[b-8289syfb7m] {
    min-width: 0;
}

.testimonial-name[b-8289syfb7m] {
    display: block;
}

.testimonial-job-title[b-8289syfb7m] {
    color: var(--color-light-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.15rem;
}

.testimonial-company[b-8289syfb7m] {
    color: var(--color-light-text);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

/* Dashed while it holds a text placeholder; swap in .testimonial-logo-img for the real file. */
.testimonial-logo[b-8289syfb7m] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 46px;
    padding: 0.4rem;
    border: 1px dashed rgba(0, 0, 0, 0.14);
    border-radius: var(--radius-sm);
    background: var(--color-light-surface);
}

.testimonial-logo-text[b-8289syfb7m] {
    color: var(--color-light-text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.testimonial-logo-img[b-8289syfb7m] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Partner logos */
.partner-logo[b-8289syfb7m] {
    max-height: 100px;
    background: var(--color-light-bg);
    padding: 20px;
    border-radius: var(--radius-md);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 200px;
    border: 1px solid var(--color-light-border);
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.partner-logo:hover[b-8289syfb7m] {
    transform: translateY(-3px);
    border-color: var(--color-light-border-hover);
}

.partner-logo .placeholder-text[b-8289syfb7m] {
    color: var(--color-light-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 768px) {
    .testimonials-container .row[b-8289syfb7m] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .testimonials-container .row[b-8289syfb7m]::-webkit-scrollbar { height: 4px; }
    .testimonials-container .row[b-8289syfb7m]::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 2px; }
    .testimonials-container .row[b-8289syfb7m]::-webkit-scrollbar-thumb { background: rgba(30, 107, 255, 0.3); border-radius: 2px; }

    .testimonials-container .col-md-4[b-8289syfb7m] {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: start;
    }
}

@media (max-width: 991px) {
    .hero-content[b-8289syfb7m] {
        text-align: center !important;
        margin-bottom: 2rem;
    }
    .hero-content p[b-8289syfb7m] { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
    .hero-banner[b-8289syfb7m] { padding: 40px 0 40px; min-height: 70vh; }
    .hero-mockup-carousel[b-8289syfb7m] { height: 280px; margin-top: 1rem; perspective: 600px; }
    .mockup-shot[b-8289syfb7m] { transform: none; }
}
/* /Components/Pages/BettingServices.razor.rz.scp.css */

.services-overview[b-nhf0pd8wol] {
    background: var(--color-light-bg);
    padding: 140px 0 clamp(100px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}

.services-overview h1[b-nhf0pd8wol] { color: var(--color-light-text); }

.services-overview[b-nhf0pd8wol]::after {
    display: none;
}

.services-overview[b-nhf0pd8wol]::before {
    display: none;
}

.services-overview .container[b-nhf0pd8wol] {
    max-width: 1400px;
}

.services-overview h2[b-nhf0pd8wol] { color: var(--color-light-text); }

.services-overview-intro[b-nhf0pd8wol] {
    color: var(--color-light-text-body);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 640px;
}

@media (max-width: 768px) {
    .services-overview[b-nhf0pd8wol] { padding: 100px 0 60px 0; }
    .service-detail-card[b-nhf0pd8wol] { margin-bottom: 1.5rem; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---------- Hero ---------- */

.landing-hero[b-0pyudedpgr] {
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding: clamp(90px, 12vw, 150px) 0 clamp(50px, 6vw, 80px);
    position: relative;
    overflow: hidden;
}

.landing-hero[b-0pyudedpgr]::before {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(30, 107, 255, 0.030) 0%, transparent 62%);
    pointer-events: none;
    animation: heroGlow-b-0pyudedpgr 10s ease-in-out infinite;
}

@keyframes heroGlow-b-0pyudedpgr {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.03); }
}

.landing-hero .container[b-0pyudedpgr] {
    max-width: 1400px;
    position: relative;
    z-index: 10;
}

.landing-hero-content[b-0pyudedpgr] {
    animation: fadeInUp 0.8s ease both;
}

.landing-hero-content h1[b-0pyudedpgr] {
    color: var(--color-white);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.landing-hero-content p[b-0pyudedpgr] {
    color: rgba(255, 255, 255, 0.60);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Branch choice ---------- */

.branch-choice[b-0pyudedpgr] {
    background: var(--color-primary-dark);
    padding: 0 0 clamp(90px, 11vw, 150px);
    position: relative;
    overflow: hidden;
}

.branch-choice .container[b-0pyudedpgr] {
    max-width: 1400px;
}

/* The two branches are the main choice on this page, so they get room to breathe
   rather than sitting shoulder to shoulder. */
.branch-choice .row[b-0pyudedpgr] {
    --bs-gutter-x: clamp(2rem, 6vw, 5.5rem);
    --bs-gutter-y: clamp(2rem, 6vw, 3rem);
}

.branch-card[b-0pyudedpgr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 3.25rem 3rem;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s ease,
                background 0.4s ease,
                box-shadow 0.4s ease;
}

.branch-card[b-0pyudedpgr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(30, 107, 255, 0.35);
    transition: background 0.4s ease;
}

.branch-card:hover[b-0pyudedpgr] {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.055);
    border-color: var(--color-border-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.branch-card:hover[b-0pyudedpgr]::before {
    background: var(--color-blue);
}

.branch-card:focus-visible[b-0pyudedpgr] {
    outline: 2px solid var(--color-blue);
    outline-offset: 4px;
}

.branch-card-icon[b-0pyudedpgr] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: rgba(30, 107, 255, 0.10);
    border: 1px solid rgba(30, 107, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}

.branch-card-icon .material-symbols-rounded[b-0pyudedpgr] {
    font-size: 2rem;
    color: var(--color-accent);
}

.branch-card:hover .branch-card-icon[b-0pyudedpgr] {
    transform: scale(1.06);
    background: rgba(30, 107, 255, 0.16);
}

.branch-card-title[b-0pyudedpgr] {
    color: var(--color-text-dark);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* Grow to absorb the height difference between the two intros so both cards
   start their bullet list on the same line. */
.branch-card-text[b-0pyudedpgr] {
    color: var(--color-text-body);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 1.75rem;
    flex-grow: 1;
}

.branch-card-list[b-0pyudedpgr] {
    margin-bottom: 2.25rem;
}

.branch-card-list li[b-0pyudedpgr] {
    color: var(--color-text-body);
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 0.65rem;
}

.branch-card-list .material-symbols-rounded[b-0pyudedpgr] {
    font-size: 1.05rem;
    color: var(--color-accent);
    margin-right: 0.65rem;
    flex-shrink: 0;
}

.branch-card-cta[b-0pyudedpgr] {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.branch-card-cta .material-symbols-rounded[b-0pyudedpgr] {
    font-size: 1.15rem;
    transition: transform var(--transition-base);
}

.branch-card:hover .branch-card-cta .material-symbols-rounded[b-0pyudedpgr] {
    transform: translateX(5px);
}

/* ---------- About ---------- */

.landing-about[b-0pyudedpgr] {
    background: var(--color-secondary-dark);
    padding: clamp(90px, 11vw, 150px) 0;
    position: relative;
    overflow: hidden;
}

.landing-about[b-0pyudedpgr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.landing-about[b-0pyudedpgr]::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(30, 107, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
}

.landing-about .container[b-0pyudedpgr] {
    max-width: 1400px;
    position: relative;
    z-index: 1;
}

.landing-about h2[b-0pyudedpgr] {
    color: var(--color-text-dark);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.landing-about-lead[b-0pyudedpgr] {
    color: var(--color-text-body);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* ---------- Strengths ---------- */

.strength-item[b-0pyudedpgr] {
    padding: 2.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 190px;
}

.strength-item[b-0pyudedpgr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(30, 107, 255, 0.15);
    transform: scaleX(1);
    transition: background 0.4s ease, opacity 0.4s ease;
    transform-origin: left;
}

.strength-item:hover[b-0pyudedpgr]::before {
    background: var(--color-blue);
}

.strength-item:hover[b-0pyudedpgr] {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.strength-icon-large[b-0pyudedpgr] {
    font-size: 2.5rem;
    color: var(--color-accent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.strength-item:hover .strength-icon-large[b-0pyudedpgr] {
    transform: scale(1.1);
}

.strength-item h3[b-0pyudedpgr] {
    color: var(--color-text-dark);
    font-weight: 600;
}

.strength-item p[b-0pyudedpgr] {
    color: var(--color-text-body);
    line-height: 1.5;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.strengths-carousel-indicators[b-0pyudedpgr] {
    display: none;
}

/* ---------- Team ---------- */

.team-heading[b-0pyudedpgr] {
    color: var(--color-text-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    margin: clamp(3.5rem, 7vw, 5rem) 0 2.25rem;
}

.team-member-wrapper[b-0pyudedpgr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.team-photo-thumbnail[b-0pyudedpgr] {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    margin-bottom: 0.85rem;
}

/* Framing per photo: the thumbnail is landscape, so portrait and square
   sources need their own focal point to keep the head fully in frame. */

/* Full-body shot: sits low enough to show the seat, not just the wall above. */
.team-photo-tall[b-0pyudedpgr] {
    background-position: center 55%;
}

/* Square close-ups: crop from near the top so the head is not cut off. */
.team-photo-head-top[b-0pyudedpgr] {
    background-position: center 8%;
}

/* Square close-up: halfway between head-top and center. */
.team-photo-head-mid[b-0pyudedpgr] {
    background-position: center 29%;
}

/* Wide shot: pull in so the face carries the same weight as the other tiles. */
.team-photo-zoom[b-0pyudedpgr] {
    background-size: 150%;
    background-position: center 6%;
}

.team-member-wrapper:hover .team-photo-thumbnail[b-0pyudedpgr] {
    transform: translateY(-4px);
    border-color: var(--color-border-accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.team-member-name[b-0pyudedpgr] {
    color: var(--color-text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.team-member-role[b-0pyudedpgr] {
    font-size: 0.7rem;
    color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-top: 0.2rem;
}

.team-member-credibility[b-0pyudedpgr] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin-top: 0.4rem;
}

@media (min-width: 768px) {
    .strengths-row[b-0pyudedpgr] { display: flex; align-items: stretch; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .strength-slide[b-0pyudedpgr] { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 991px) {
    .branch-card[b-0pyudedpgr] { padding: 2.25rem; }
}

@media (max-width: 768px) {
    .landing-hero[b-0pyudedpgr] { padding: 60px 0 40px; }
    .branch-choice[b-0pyudedpgr] { padding-bottom: 60px; }
    .branch-card[b-0pyudedpgr] { padding: 1.75rem; border-radius: var(--radius-lg); }
    .branch-card-icon[b-0pyudedpgr] { width: 52px; height: 52px; margin-bottom: 1.25rem; }
    .branch-card-icon .material-symbols-rounded[b-0pyudedpgr] { font-size: 1.6rem; }

    .strength-icon-large[b-0pyudedpgr] { font-size: 2rem; }

    .strength-item[b-0pyudedpgr] {
        padding: 1rem 1.25rem;
        margin-bottom: 0.75rem;
        min-height: auto;
        background: rgba(30, 107, 255, 0.10) !important;
        border: 1px solid rgba(30, 107, 255, 0.25) !important;
        border-radius: var(--radius-md);
        text-align: left !important;
    }

    .strength-item-mobile[b-0pyudedpgr] { width: 100%; }

    .strength-icon-large-mobile[b-0pyudedpgr] {
        font-size: 1.5rem;
        color: var(--color-accent) !important;
        flex-shrink: 0;
    }

    .strength-content-mobile h3[b-0pyudedpgr] {
        color: var(--color-text-dark) !important;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.25rem !important;
    }

    .strength-content-mobile p[b-0pyudedpgr] {
        color: var(--color-text-body) !important;
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 0 !important;
    }

    .strength-item h3[b-0pyudedpgr] { font-size: 0.95rem; margin-bottom: 0.5rem !important; }
    .strength-item p[b-0pyudedpgr] { font-size: 0.8rem; line-height: 1.4; }
    .strength-icon-large.mb-3[b-0pyudedpgr] { margin-bottom: 0.5rem !important; }

    .strengths-carousel-wrapper[b-0pyudedpgr] { position: relative; }
    .strengths-carousel-container[b-0pyudedpgr] { overflow: hidden; position: relative; }

    .strengths-row[b-0pyudedpgr] {
        display: flex;
        /* .row (Bootstrap) sets flex-wrap: wrap, which would stack all 4 cards into a
           column instead of a single sliding track -- the indicator dots would then just
           shove that stacked block sideways instead of switching cards. */
        flex-wrap: nowrap;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0;
        will-change: transform;
    }

    .strength-slide[b-0pyudedpgr] { flex: 0 0 100%; max-width: 100%; padding: 0 0.5rem; }

    .strengths-carousel-indicators[b-0pyudedpgr] {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding: 0;
    }

    .strength-indicator[b-0pyudedpgr] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background-color: rgba(197, 235, 76, 0.3);
        cursor: pointer;
        padding: 0;
        transition: all var(--transition-fast);
    }

    .strength-indicator:hover[b-0pyudedpgr] { background-color: rgba(197, 235, 76, 0.4); transform: scale(1.2); }
    .strength-indicator.active[b-0pyudedpgr] { background-color: var(--color-accent); transform: scale(1.4); }

    .team-photo-thumbnail[b-0pyudedpgr] { height: 150px; }
    .team-member-credibility[b-0pyudedpgr] { font-size: 0.65rem; }
}
/* /Components/Pages/SoftwareAbout.razor.rz.scp.css */
.about-hero[b-k67oxpf7ph] { display: none; }

/* Team Banner */
.team-banner-section[b-k67oxpf7ph] { background: transparent; padding: 0; }

.team-banner-wrapper[b-k67oxpf7ph] { position: relative; overflow: hidden; width: 100%; }

.team-banner-image[b-k67oxpf7ph] {
    width: 100%; height: 560px;
    background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80');
    background-size: cover; background-position: center;
    position: relative; display: flex; align-items: center; justify-content: center;
}

.team-banner-image[b-k67oxpf7ph]::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(6,13,24,0.85) 0%, rgba(12,19,34,0.75) 100%);
    z-index: 1;
}

.team-banner-text[b-k67oxpf7ph] {
    position: relative; z-index: 2;
    text-align: center; color: white; padding: 2.5rem;
}

.team-banner-text h1[b-k67oxpf7ph] {
    color: white;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.team-banner-text p[b-k67oxpf7ph] {
    color: rgba(255,255,255,0.65);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

.about-content[b-k67oxpf7ph] {
    background: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
}

.about-content[b-k67oxpf7ph]::after {
    content: '';
    position: absolute;
    top: 20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(30, 107, 255, 0.015) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-content[b-k67oxpf7ph]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.about-content .card[b-k67oxpf7ph] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--color-text-dark);
    border-radius: var(--radius-xl);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.about-content .card:hover[b-k67oxpf7ph] {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.about-content h2[b-k67oxpf7ph] {
    color: var(--color-text-dark);
    font-weight: 600;
    position: relative;
    padding-bottom: 0.75rem;
}

.about-content h2[b-k67oxpf7ph]::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 32px; height: 2px;
    background: var(--color-blue);
    border-radius: 2px;
}

.about-content p[b-k67oxpf7ph] { color: var(--color-text-body); line-height: 1.8; }
.about-content .text-primary[b-k67oxpf7ph] { color: var(--color-accent) !important; }

.about-content .list-unstyled li[b-k67oxpf7ph] {
    color: var(--color-text-body);
    transition: transform 0.2s ease;
}

.about-content .list-unstyled li:hover[b-k67oxpf7ph] { transform: translateX(4px); }

.team-members-section[b-k67oxpf7ph] {
    background: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
}

.team-members-section[b-k67oxpf7ph]::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -8%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(30, 107, 255, 0.015) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.team-members-section[b-k67oxpf7ph]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.team-members-section h2[b-k67oxpf7ph] { color: var(--color-text-dark) !important; }

.team-member-card[b-k67oxpf7ph] {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.team-member-card:hover[b-k67oxpf7ph] {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.team-member-image[b-k67oxpf7ph] {
    width: 100%; height: 250px;
    background-size: cover; background-position: center;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.team-member-card:hover .team-member-image[b-k67oxpf7ph] { transform: scale(1.04); }

.team-member-info[b-k67oxpf7ph] {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-member-info h3[b-k67oxpf7ph] { color: var(--color-text-dark); font-weight: 600; }

.team-member-title[b-k67oxpf7ph] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-accent) !important;
}

.team-member-description[b-k67oxpf7ph] {
    color: var(--color-text-body);
    font-size: 0.9rem;
    line-height: 1.7;
    flex: 1;
}

/* Four cards across from lg up, matching the team grid on the home page, so with seven people the
   row lands 4 + 3. That is narrower than the three-up layout these cards were sized for, so the
   photo and the padding come down a notch to keep them in proportion. */
@media (min-width: 992px) {
    .team-member-image[b-k67oxpf7ph] { height: 220px; }
    .team-member-info[b-k67oxpf7ph] { padding: 1.4rem; }
    .team-member-description[b-k67oxpf7ph] { font-size: 0.86rem; line-height: 1.65; }
}

@media (max-width: 768px) {
    .team-banner-image[b-k67oxpf7ph] { height: 400px; }
    .team-member-image[b-k67oxpf7ph] { height: 200px; }
    .team-member-card:hover[b-k67oxpf7ph] { transform: translateY(-3px); }
    .team-member-info[b-k67oxpf7ph] { padding: 1.5rem; }
    .team-member-description[b-k67oxpf7ph] { font-size: 0.85rem; }
}

/* Prose links only. A .btn brings its own colours, and the accent applied here used to paint the
   label the same lime as the button's background, leaving an apparently empty CTA. */
.about-content a:not(.btn)[b-k67oxpf7ph] {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(197, 235, 76, 0.35);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.about-content a:not(.btn):hover[b-k67oxpf7ph] {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
}

/* Full-body shot: keep the face in frame instead of centring on the torso. */
.team-photo-tall[b-k67oxpf7ph] {
    background-position: center 30%;
}

/* Square close-up: crop from near the top so the head is not cut off. */
.team-photo-head-top[b-k67oxpf7ph] {
    background-position: center 8%;
}

/* Square close-up: halfway between head-top and center. */
.team-photo-head-mid[b-k67oxpf7ph] {
    background-position: center 29%;
}

/* Wide shot: pull in so the face carries the same weight as the other cards. */
.team-photo-zoom[b-k67oxpf7ph] {
    background-size: 150%;
    background-position: center 6%;
}

/* Intro line under the "Our Team" heading. */
.team-intro[b-k67oxpf7ph] {
    color: var(--color-text-body);
    font-size: 1rem;
    line-height: 1.8;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Closing CTA. Sits on the same dark ground as the team section above it, so the panel itself
   carries the contrast rather than a second background colour. */
.about-cta-section[b-k67oxpf7ph] {
    background: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(80px, 10vw, 130px) !important;
}

.about-cta-section[b-k67oxpf7ph]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

.about-cta[b-k67oxpf7ph] {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 3.5rem);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-xl);
}

.about-cta h2[b-k67oxpf7ph] {
    color: var(--color-text-dark);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.about-cta-text[b-k67oxpf7ph] {
    color: var(--color-text-body);
    line-height: 1.8;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* "What matters to us": four principles, each a heading plus a line of explanation. Laid out as a
   2x2 grid on desktop and stacked on phones. */
.principle-grid[b-k67oxpf7ph] {
    margin-top: 0.5rem;
}

.principle-item[b-k67oxpf7ph] {
    height: 100%;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.principle-item:hover[b-k67oxpf7ph] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.principle-icon[b-k67oxpf7ph] {
    color: var(--color-accent);
    font-size: 1.6rem;
    display: block;
    margin-bottom: 0.75rem;
}

.about-content .principle-title[b-k67oxpf7ph] {
    color: var(--color-text-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.about-content .principle-text[b-k67oxpf7ph] {
    color: var(--color-text-body);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0;
}
/* /Components/Pages/SoftwareHome.razor.rz.scp.css */
.hero-banner[b-kkwmgu5ekh] {
    background: var(--color-primary-dark);
    color: white;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-banner[b-kkwmgu5ekh]::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 70%;
    height: 180%;
    background: radial-gradient(ellipse, rgba(30, 107, 255, 0.025) 0%, transparent 65%);
    pointer-events: none;
    animation: heroGlow-b-kkwmgu5ekh 10s ease-in-out infinite;
}

.hero-banner[b-kkwmgu5ekh]::after {
    display: none;
}

@keyframes heroGlow-b-kkwmgu5ekh {
    0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
    50% { opacity: 0.8; transform: translate(-10px, 5px) scale(1.02); }
}

.hero-content[b-kkwmgu5ekh] {
    position: relative;
    z-index: 10;
    animation: fadeInUp 0.8s ease both;
}

.hero-eyebrow[b-kkwmgu5ekh] {
    display: inline-block;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.hero-content h1[b-kkwmgu5ekh] {
    color: white;
    font-size: clamp(3.2rem, 7vw, 5.8rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 2.5rem;
}

.hero-content p[b-kkwmgu5ekh] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.15rem;
    line-height: 1.85;
    max-width: 600px;
}

.hero-content .lead[b-kkwmgu5ekh] {
    color: rgba(255, 255, 255, 0.65) !important;
}

.hero-content .btn[b-kkwmgu5ekh],
.hero-content .cta-button[b-kkwmgu5ekh] {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
}

.hero-content .cta-button[b-kkwmgu5ekh] {
    padding: 1.1rem 3rem;
    font-size: 13px;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
}

/* Hero Mockup Carousel */
.hero-mockup-carousel[b-kkwmgu5ekh] {
    position: relative;
    z-index: 10;
    height: 480px;
    margin-top: 0;
    animation: fadeInUp 0.8s ease 0.3s both;
    perspective: 1000px;
}

.mockup-slide[b-kkwmgu5ekh] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mockup-slide.active[b-kkwmgu5ekh] { opacity: 1; }

.mockup-image[b-kkwmgu5ekh] {
    width: 100%;
    height: 90%;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    border: none;
    transform: rotateY(-3deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mockup-slide.active .mockup-image:hover[b-kkwmgu5ekh] {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}

.mockup-label[b-kkwmgu5ekh] {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-image-wrapper[b-kkwmgu5ekh] { display: none; }
.hero-overlay[b-kkwmgu5ekh] { display: none; }
.hero-content-image[b-kkwmgu5ekh] { display: none; }
.hero-icon[b-kkwmgu5ekh] { display: none; }

.cta-section[b-kkwmgu5ekh] {
    background: var(--color-primary-dark);
    color: white;
}

.cta-section h2[b-kkwmgu5ekh], .cta-section p[b-kkwmgu5ekh] { color: white; }

.cta-button[b-kkwmgu5ekh] {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cta-button:hover[b-kkwmgu5ekh] {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(197, 235, 76, 0.15);
}

.hero-banner .container[b-kkwmgu5ekh],
.services-section .container[b-kkwmgu5ekh],
.testimonials-section .container[b-kkwmgu5ekh] {
    max-width: 1400px;
}

.services-section[b-kkwmgu5ekh] {
    background: var(--color-light-bg);
    position: relative;
    padding: clamp(100px, 12vw, 160px) 0;
    overflow: hidden;
}

.services-section[b-kkwmgu5ekh]::before {
    display: none;
}

.services-section[b-kkwmgu5ekh]::after {
    display: none;
}

.services-section h2[b-kkwmgu5ekh] {
    color: var(--color-light-text);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-intro-text[b-kkwmgu5ekh] {
    color: var(--color-light-text-body);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 640px;
    margin: 0 auto;
}

.testimonials-section[b-kkwmgu5ekh] {
    background: var(--color-light-bg-alt);
    padding: clamp(100px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}

.testimonials-section[b-kkwmgu5ekh]::before {
    display: none;
}

.testimonials-section[b-kkwmgu5ekh]::after {
    display: none;
}

.testimonials-section h2[b-kkwmgu5ekh] {
    color: var(--color-light-text);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.testimonials-section .section-header-with-nav[b-kkwmgu5ekh] {
    text-align: left;
}

.testimonials-section .section-header-with-nav h2[b-kkwmgu5ekh] {
    text-align: left;
    margin-bottom: 0;
}

.testimonial-card[b-kkwmgu5ekh] {
    display: flex;
    flex-direction: column;
    background: var(--color-light-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--color-light-text);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow: none;
    padding: 2rem !important;
}

.testimonial-card[b-kkwmgu5ekh]::before {
    content: '\201C';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: rgba(30, 107, 255, 0.08);
    line-height: 1;
    pointer-events: none;
    transition: color 0.4s ease;
}

.testimonial-card:hover[b-kkwmgu5ekh]::before {
    color: rgba(30, 107, 255, 0.15);
}

.testimonial-card:hover[b-kkwmgu5ekh] {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    background: var(--color-light-bg) !important;
}

.testimonial-card blockquote p[b-kkwmgu5ekh] {
    color: var(--color-light-text-body);
    font-style: normal;
    font-size: 15px;
    line-height: 1.85;
}

.testimonial-card cite[b-kkwmgu5ekh] {
    display: block;
    color: var(--color-blue-deep);
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

.testimonial-job-title[b-kkwmgu5ekh] {
    color: var(--color-light-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Partner logos */
.partner-logo[b-kkwmgu5ekh] {
    max-height: 100px;
    background: var(--color-light-bg);
    padding: 20px;
    border-radius: var(--radius-md);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 200px;
    border: 1px solid var(--color-light-border);
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.partner-logo:hover[b-kkwmgu5ekh] {
    transform: translateY(-3px);
    border-color: var(--color-light-border-hover);
}

.partner-logo .placeholder-text[b-kkwmgu5ekh] {
    color: var(--color-light-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 768px) {
    .testimonials-container .row[b-kkwmgu5ekh] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .testimonials-container .row[b-kkwmgu5ekh]::-webkit-scrollbar { height: 4px; }
    .testimonials-container .row[b-kkwmgu5ekh]::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 2px; }
    .testimonials-container .row[b-kkwmgu5ekh]::-webkit-scrollbar-thumb { background: rgba(30, 107, 255, 0.3); border-radius: 2px; }

    .testimonials-container .col-md-4[b-kkwmgu5ekh] {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: start;
    }
}

@media (max-width: 991px) {
    .hero-content[b-kkwmgu5ekh] {
        text-align: center !important;
        margin-bottom: 2rem;
    }
    .hero-content p[b-kkwmgu5ekh] { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
    .hero-banner[b-kkwmgu5ekh] { padding: 40px 0 40px; min-height: 70vh; }
    .hero-mockup-carousel[b-kkwmgu5ekh] { height: 280px; margin-top: 1rem; perspective: 600px; }
    .mockup-image[b-kkwmgu5ekh] { transform: none; }
}

/* ---------- How we work ---------- */

.process-section[b-kkwmgu5ekh] {
    background: var(--color-primary-dark);
    padding: clamp(100px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}

.process-section[b-kkwmgu5ekh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.process-section[b-kkwmgu5ekh]::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(30, 107, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
}

.process-section .container[b-kkwmgu5ekh] {
    max-width: 1400px;
    position: relative;
    z-index: 1;
}

.process-section h2[b-kkwmgu5ekh] {
    color: var(--color-text-dark);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.process-intro[b-kkwmgu5ekh] {
    color: var(--color-text-body);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: 640px;
    margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}

.process-step[b-kkwmgu5ekh] {
    padding: 2.25rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step[b-kkwmgu5ekh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(30, 107, 255, 0.15);
    transition: background 0.4s ease;
}

.process-step:hover[b-kkwmgu5ekh] {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.process-step:hover[b-kkwmgu5ekh]::before {
    background: var(--color-blue);
}

.process-step-number[b-kkwmgu5ekh] {
    display: block;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}

.process-step h3[b-kkwmgu5ekh] {
    color: var(--color-text-dark);
    font-weight: 600;
}

.process-step p[b-kkwmgu5ekh] {
    color: var(--color-text-body);
    line-height: 1.6;
    font-size: 0.875rem;
}

/* Client logo, name and role sit on one row under the quote; the logo is a fixed square tile so
   wordmarks and icon marks of different proportions all line up across the cards. */
.testimonial-author[b-kkwmgu5ekh] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: auto;
    padding-top: 1.5rem;
}

.testimonial-logo[b-kkwmgu5ekh] {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.testimonial-logo img[b-kkwmgu5ekh] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.testimonial-logo-placeholder[b-kkwmgu5ekh] {
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.18);
    background: transparent;
    color: var(--color-light-text-muted);
}

.testimonial-logo-placeholder .material-symbols-rounded[b-kkwmgu5ekh] {
    font-size: 1.4rem;
}

.testimonial-author-meta[b-kkwmgu5ekh] {
    min-width: 0;
}

/* Placeholder testimonials — remove this rule once real quotes are in. */
.testimonial-placeholder blockquote p[b-kkwmgu5ekh],
.testimonial-placeholder cite[b-kkwmgu5ekh],
.testimonial-placeholder .testimonial-job-title[b-kkwmgu5ekh] {
    opacity: 0.55;
    font-style: italic;
}

@media (max-width: 768px) {
    .process-step[b-kkwmgu5ekh] { padding: 1.5rem; }
}
/* /Components/Shared/FlagIcon.razor.rz.scp.css */
.flag-icon[b-pmlj3prmtd] {
    display: inline-block;
    height: 0.75em;
    width: auto;
    margin-left: 0.4em;
    vertical-align: baseline;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.language-switcher[b-8dhbf34685] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.lang-link[b-8dhbf34685] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.lang-link:hover[b-8dhbf34685] {
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.06);
}

.lang-link.active[b-8dhbf34685] {
    opacity: 1;
}

/* Override FlagIcon's inline-with-text sizing (tuned for team-member name rows) with a size
   that reads clearly as its own clickable control in the navbar. ::deep is needed because the
   svg only carries FlagIcon's own scope attribute, not this component's. */
.language-switcher[b-8dhbf34685]  .flag-icon {
    height: 16px;
    margin-left: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

@media (max-width: 991px) {
    .language-switcher[b-8dhbf34685] {
        margin: 0 0 0.5rem;
        padding-bottom: 0.5rem;
    }

    .lang-link[b-8dhbf34685] {
        padding: 0.4rem 0.6rem;
    }

    .language-switcher[b-8dhbf34685]  .flag-icon {
        height: 18px;
    }
}