namespace GameLimiterWeb.wwwroot.css
{
    public class b2binfo
    {
    }
}
/* ============================================================
   B2B Info Page
   b2binfo.css  |  GameLimiterWeb
   ============================================================ */

/* ---- Design tokens ---- */
:root {
    --b2b-purple: #530966;
    --b2b-purple-dark: #3a0647;
    --b2b-purple-rgb: 83, 9, 102;
    --b2b-gold: #C6A877;
    --b2b-gold-rgb: 198, 168, 119;
    --b2b-bg: #f8f6fb;
    --b2b-card: #ffffff;
    --b2b-border: #ede8f2;
    --b2b-text: #1a1026;
    --b2b-muted: #6b6880;
    --b2b-radius: 18px;
    --b2b-radius-sm: 10px;
    --b2b-shadow: 0 2px 20px rgba(var(--b2b-purple-rgb), 0.07);
    --b2b-shadow-hover: 0 14px 48px rgba(var(--b2b-purple-rgb), 0.16);
    --b2b-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Page wrapper — pushes content below fixed navbar
   ============================================================ */
.b2b-page {
    background: var(--b2b-bg);
    min-height: 100vh;
    padding-top: clamp(90px, 8vw, 130px);
    padding-bottom: 5rem;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes b2bFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes b2bHeaderSlide {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes b2bLineGrow {
    from {
        width: 0;
    }

    to {
        width: 72px;
    }
}

/* ============================================================
   Page header
   ============================================================ */
.b2b-page-header {
    text-align: center;
    padding: 2rem 1rem 0.5rem;
    animation: b2bHeaderSlide 0.6s var(--b2b-easing) both;
}

    .b2b-page-header::before {
        content: '✦  B2B INFORMATION  ✦';
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: var(--b2b-purple);
        opacity: 0.6;
        margin-bottom: 0.9rem;
    }

.b2b-page-title {
    display: inline-block;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--b2b-text);
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

    /* Animated underline accent */
    .b2b-page-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 72px;
        height: 4px;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--b2b-purple), var(--b2b-gold));
        animation: b2bLineGrow 0.8s 0.4s var(--b2b-easing) both;
    }

/* ============================================================
   Video section
   ============================================================ */
.b2b-video-section {
    max-width: 80%;
    margin: 2.5rem auto 3rem;
    animation: b2bFadeUp 0.6s 0.2s var(--b2b-easing) both;
}

    .b2b-video-section video {
        width: 100%;
        aspect-ratio: 16 / 9;
        display: block;
        border-radius: var(--b2b-radius);
        box-shadow: 0 6px 32px rgba(var(--b2b-purple-rgb), 0.12);
        object-fit: contain;
    }

/* ============================================================
   Text / content section
   ============================================================ */
.b2b-content-section {
    background: var(--b2b-card);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-radius);
    box-shadow: var(--b2b-shadow);
    padding: 2.5rem 3rem;
    margin-bottom: 2rem;
    animation: b2bFadeUp 0.55s 0.3s var(--b2b-easing) both;
}

.b2b-section-title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: var(--b2b-purple);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--b2b-border);
}

.b2b-text {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--b2b-text);
    margin-bottom: 1.25rem;
}

    .b2b-text:last-child {
        margin-bottom: 0;
    }

    .b2b-text strong {
        color: var(--b2b-text);
        font-weight: 600;
    }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .b2b-content-section {
        padding: 2rem 1.5rem;
        border-radius: var(--b2b-radius-sm);
    }
}

@media (max-width: 480px) {
    .b2b-content-section {
        padding: 1.5rem 1.1rem;
    }

    .b2b-text {
        font-size: 0.97rem;
    }
}