/* General Body Styles */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif;
    background-color: #E3EAF5;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

:root {
    --bs-body-font-family: 'Inter', sans-serif;
    --color-grey-1000: #131313;
    --color-grey-900: #272727;
    --color-grey-800: #3A3A3A;
    --color-grey-700: #4E4E4E;
    --color-primary-500: #6B4CF3; /* Default primary/CTA color */
    --color-primary-700: #8C50F4;
    --color-primary-800: #884CF3; /* Button/Card background */
    --color-primary-900: #4F2598; /* Dark purple background/shadow */
    --color-accent-purple: #7C3AED; /* Primary card background */
    --color-accent-purple-light: #6A1EEC; /* Gradient start for seamless integration */
    --color-light-purple: #C5A3F4;
    --color-off-white: #E3EAF5; /* Light text on dark bg */
    --color-off-white-darker: #EBF0F6; /* Slightly darker light text */
    --color-card-border: #DEDEDE;
    --bg-color: #F8F9FB;
    --color-dark-purple: #4F2598;
    --color-section5-text-light: #E3EAF5;
    /* Added missing variables to resolve linter errors used elsewhere in the stylesheet */
    --color-light-grey: #DEDEDE;
    --color-grey-600: #6B6B6B;
    --color-grey-500: #7C7C7C;
}

/* Main Container */
.landing-container {
    width: 100%;
    position: relative;
    background-image: url('../assets/img/Hero BG.png');
    background-size: cover;
    background-position: center top;
    /* Restored original fixed height from the Figma design so the hero's
       absolutely-positioned layout matches the intended composition. */
    height: 962px; /* Height from Figma design */
    min-height: 100vh;
    box-sizing: border-box;
}

/* Header/Menu Styles */
.main-menu {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 100;
}

.logo-holder .logo-img {
    width: 32px;
    height: 32px;
}

.menu-items {
    display: flex;
    gap: 40px;
}

.menu-items a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
}

.onboarding-actions {
    display: flex;
    gap: 24px;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn-login {
    background-color: transparent;
    color: #F3F3F3;
    border: 1px solid #F3F3F3;
}

.btn-login:hover {
    background-color: #F3F3F3;
    color: #773BF1;
}

.btn-signup {
    background-color: #F3F3F3;
    color: #773BF1;
    box-shadow: 0 0.6px 0 rgba(255, 255, 255, 0.4) inset;
}

.btn-signup:hover {
    background-color: #ddd;
}


/* Hero Section Styles */
.hero-section {
    position: absolute;
    top: 98px;
    left: 0;
    width: 100%;
    height: 864px; /* Adjusted height */
    overflow: hidden; /* original behavior - keeps the composition tidy */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Decorative Images */
.joystick-shadow, .joystick, .chart-shadow, .hero-chart {
    position: absolute;
    transition: opacity 0.5s ease-in-out;
}

.joystick-shadow {
    width: 562px;
    height: 619px;
    left: 0;
    top: 156px;
    mix-blend-mode: multiply;
}

.joystick {
    width: 481px;
    height: 563px;
    left: 0;
    top: 156px;
}

.chart-shadow {
    width: 482px;
    height: 617px;
    right: 0;
    top: 156px;
    mix-blend-mode: multiply;
}

.hero-chart {
    width: 472px;
    height: 473px;
    right: 0;
    top: 156px;
}

/* Hero Content Styles */
.hero-content {
    max-width: 954px;
    margin-top: 100px; /* Adjusted from top: 198px in Figma to be relative */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    z-index: 10;
}

.hero-badge {
    padding: 8px 32px;
    border-radius: 12px;
    border: 0.2px solid white;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #F2F6FD;
    font-size: 18px;
    font-weight: 700;
}

.analysis-icon {
    width: 21px;
    height: 24px;
}

.hero-headlines {
    width: 100%;
    /* allow overflow so scaled text isn't unintentionally clipped by parent */
    overflow: visible;
    text-align: center;
}

.hero-headlines h1 {
    color: #F2F6FD;
    font-size: clamp(24px, 3.5vw, 48px);
    font-weight: 700;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.hero-headlines h2 {
    color: rgba(242, 246, 253, 0.9);
    font-size: clamp(16px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 24px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.hero-description {
    max-width: 750px;
    color: rgba(249, 251, 255, 0.8);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}

.hero-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.btn-primary-cta, .btn-secondary-cta {
    width: 261px;
    height: 59px;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
}

.btn-primary-cta:hover, .btn-secondary-cta:hover {
    transform: translateY(-2px);
}

.btn-primary-cta {
    background: #F3F3F3;
    color: #6227ED;
    border: none;
}

.btn-secondary-cta {
    background: transparent;
    color: white;
    border: 1px solid white;
}

/* New utility class: applied when text overlaps decorative images */
/* REMOVED: opacity is now controlled dynamically by JS (inline style on the elements).
   If you prefer a class-based approach instead, we can keep this and have JS toggle it.
*/


/* Hero Content Styles */
.hero-content {
    max-width: 954px;
    margin-top: 100px; /* Adjusted from top: 198px in Figma to be relative */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    z-index: 20; /* ensure content (text & buttons) sits above decorative images */
    color: #F2F6FD; /* force white text color inside hero to prevent blending artifacts */
}

.hero-badge {
    padding: 8px 32px;
    border-radius: 12px;
    border: 0.2px solid white;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #F2F6FD;
    font-size: 18px;
    font-weight: 700;
}

.analysis-icon {
    width: 21px;
    height: 24px;
}

.hero-headlines {
    width: 100%;
    /* allow overflow so scaled text isn't unintentionally clipped by parent */
    overflow: visible;
    text-align: center;
}

/* START: Adjusted hero headline sizing so headings start smaller on large viewports
   and only scale down as the viewport narrows. The "max" value here is the starting
   size on wide screens; media queries below are kept equal-or-smaller so shrinking
   the viewport never increases the font. */
.hero-headlines h1 {
    color: #F2F6FD;
    /* Start smaller on large screens (max 48px) and scale down with viewport to a
       readable minimum (24px). */
    font-size: clamp(24px, 3.5vw, 48px);
    font-weight: 700;
    line-height: 1;
    margin: 0;
    white-space: nowrap; /* keep single-line per your previous request */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.hero-headlines h2 {
    color: rgba(242, 246, 253, 0.9);
    /* Start smaller on large screens (max 28px) and scale down with viewport to a
       readable minimum (16px). */
    font-size: clamp(16px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 24px;
    margin-bottom: 0;
    white-space: nowrap; /* keep single-line per your previous request */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}
/* END: Adjusted hero headline sizing */

/* Ensure media-query overrides don't reintroduce a larger max than the base */
@media (max-width: 1850px) {
    .hero-headlines h1 {
        font-size: clamp(24px, 3.5vw, 48px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-headlines h2 {
        /* allow wrapping instead of clipping */
        font-size: clamp(16px, 2.4vw, 28px);
        white-space: normal;
        overflow: visible;
    }

    .hero-description {
        font-size: 18px;
    }
}
@media (max-width: 1500px) {
    /* Restore the original dimming behavior: make decorative images slightly transparent */
    .joystick-shadow, .joystick, .chart-shadow, .hero-chart {
        opacity: 0.3; /* <-- restored behavior */
    }
}

/* For Tablets and smaller desktops */
@media (max-width: 1850px) {
    /* Restore the original dimming behavior: make decorative images slightly transparent */
    .joystick-shadow, .joystick, .chart-shadow, .hero-chart {
        opacity: 0.5; /* <-- restored behavior */
    }

    /* Keep H1 identical to base so it never increases when crossing this breakpoint */
    .hero-headlines h1 {
        font-size: clamp(24px, 3.5vw, 48px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-headlines h2 {
        /* allow wrapping instead of clipping */
        font-size: clamp(16px, 2.4vw, 28px);
        white-space: normal;
        overflow: visible;
    }

    .hero-description {
        font-size: 18px;
    }
}
@media (max-width: 1500px) {
    /* Restore the original dimming behavior: make decorative images slightly transparent */
    .joystick-shadow, .joystick, .chart-shadow, .hero-chart {
        opacity: 0.3; /* <-- restored behavior */
    }
}

/* For Tablets */
@media (max-width: 992px) {
    .menu-items {
        display: none; /* Hide menu items on tablets, could be replaced by a hamburger menu */
    }

    .hero-section {
        align-items: center;
        text-align: center;
    }

    .hero-content {
        margin-top: 0;
    }

    .joystick-shadow, .joystick, .chart-shadow, .hero-chart {
        display: none; /* Hide decorative images on smaller screens */
    }

    .hero-headlines h1 {
        font-size: clamp(24px, 3.5vw, 48px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-headlines h2 {
        font-size: clamp(16px, 3.5vw, 20px);
        white-space: normal;
        overflow: visible;
    }
}

/* For Mobile Phones */
@media (max-width: 768px) {
    .landing-container {
        height: auto;
        min-height: 100vh;
        padding-bottom: 50px;
    }

    .main-menu {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px;
    }

    .onboarding-actions {
        gap: 12px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 16px;
    }

    .hero-section {
        position: static;
        height: auto;
        padding-top: 120px;
    }

    .hero-badge {
        font-size: 14px;
        padding: 6px 16px;
    }

    .analysis-icon {
        width: 18px;
        height: 21px;
    }

    .hero-headlines h1 {
        font-size: clamp(18px, 5vw, 48px);
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 100%;
    }

    .hero-headlines h2 {
        /* Made the minimum smaller so h2 is clearly smaller than h1 at the smallest widths */
        font-size: clamp(12px, 4.5vw, 16px);
        line-height: 1.3;
        /* on very small screens, allow the h2 to wrap and occupy full width */
        white-space: normal;
        display: block;
        max-width: 100%;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-cta-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .btn-primary-cta, .btn-secondary-cta {
        width: 100%;
        max-width: 280px;
        font-size: 18px;
    }
}
/* Final override: ensure hero headlines never wrap and always truncate instead of
   growing or wrapping. Keeps behavior consistent regardless of earlier media-query rules. */
.hero-headlines h1,
.hero-headlines h2 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    color: #F2F6FD !important; /* ensure headline colors stay white even under blend modes */
}
/* --- Global & Base Styles --- */
/* --- Global & Base Styles --- */
:root {
    --color-grey-1000: #131313;
    --color-grey-900: #272727;
    --color-grey-800: #3A3A3A;
    --color-grey-700: #4E4E4E;
    --color-primary-500: #6B4CF3; /* Default primary/CTA color */
    --color-primary-700: #8C50F4;
    --color-primary-800: #884CF3; /* Button/Card background */
    --color-primary-900: #4F2598; /* Dark purple background/shadow */
    --color-accent-purple: #7C3AED; /* Primary card background */
    --color-accent-purple-light: #6A1EEC; /* Gradient start for seamless integration */
    --color-light-purple: #C5A3F4;
    --color-off-white: #E3EAF5; /* Light text on dark bg */
    --color-off-white-darker: #EBF0F6; /* Slightly darker light text */
    --color-card-border: #DEDEDE;
    --bg-color: #F8F9FB;
    --color-dark-purple: #4F2598;
    --color-section5-text-light: #E3EAF5;
    /* Added missing variables to resolve linter errors used elsewhere in the stylesheet */
    --color-light-grey: #DEDEDE;
    --color-grey-600: #6B6B6B;
    --color-grey-500: #7C7C7C;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

/* --- Section 2 Main Container --- */

.Section2 {
    width: 100%;
    /* Use max-width for content containment and padding for spacing */
    max-width: 1500px;
    margin: 0 auto;
    padding: 96px 24px; /* Reduced side padding for general screens */
    overflow: hidden;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 84px;
    box-sizing: border-box;
}

/* For larger screens, apply the original wide padding to the container */
@media (min-width: 1400px) {
    /* Normalized wide-screen gutters: use symmetric 24px gutters so the section stays centered
       (previously used very large asymmetric paddings which pushed content off-center). */
    .Section2 {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* --- Header Styles --- */

.Section2Header {
    width: 100%;
    max-width: 1051px; /* Original fixed width, now max-width */
    position: relative;
    /*height: 216px;*/
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.Section2HeaderTagline {
    /* Adjusted for flow instead of fixed absolute positioning */
    padding: 8px 26px;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* Added a light background for visibility, adjust as needed */
    background-color: rgba(107, 76, 243, 0.1);
    margin-bottom: 20px;
}

.YourAllInOneGameAnalyticsPowerhouse {
    color: var(--color-primary-500);
    font-size: 18px;
    font-weight: 700;
    white-space: normal; /* Prevent breaking the tagline */
}

.SeeWhatPlayersFeelPredictWhatTheyLlDo {
    color: var(--color-grey-1000);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1; /* Adjusted line-height to be a bit more flexible */
    max-width: 100%;
}

.BraintelligenceBringsEveryLayerOfHumanDrivenInsightIntoOneClearSystemFromMassScaleAnalyticsToTargetedPlaytestingAndNeuroCognitiveSignalsAllYourDataStreamsFeedOnePowerfulAiEngineDesignedToExplainWhatSHappeningWhyItSHappeningAndHowToFixIt {
    max-width: 978px;
    color: var(--color-grey-1000);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    margin-top: 16px;
    padding: 0 18px;
}

/* --- Content Map & Card Sections --- */

.Section2ContentMap {
    width: 100%;
    max-width: 1439px; /* Max width for the entire content map */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Gaps are handled within the card rows */
}

.section-cards {
    width: 100%;
    display: flex;
    justify-content: center; /* Center the cards when they wrap */
    align-items: stretch; /* Ensure cards stretch to the same height */
    gap: 16px;
    flex-wrap: wrap; /* CRITICAL: Allows cards to wrap on mobile */
    min-height: 364px; /* Maintain minimum height from original design */
}

/* Card General Styles */
.card {
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid var(--color-light-grey);
    padding: 14px; /* Space for image and text, replacing absolute positioning */
    display: flex;
    flex-direction: column;
    min-width: 300px;
    flex: 1 1 30%; /* Flexible basis for 3 cards per row */
    box-sizing: border-box;
}

.card-image {
    width: 100%;
    height: auto;
    max-height: 211px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
}

.card-text-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    padding: 0 2px; /* Small padding adjustment */
}

.card-tag {
    color: var(--color-primary-700);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.card-title {
    color: var(--color-grey-1000);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.card-description {
    color: var(--color-grey-600);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}


/* --- AI Engine Section --- */

.Section2AiEngine {
    width: 100%;
    height: 275px;
    position: relative;
    overflow: hidden;
    margin: 40px 0; /* Add margin to separate from card rows */
    display: flex;
    justify-content: center;
    align-items: center;
}

.AiBgConncetor {
    /* Scale the connector to 50% width while keeping its original fixed height
       so the visual height is preserved but the horizontal footprint is halved. */
    width: 50%;
    max-width: 1001px; /* allow original max when large */
    height: 275px; /* keep the original height */
    object-fit: contain; /* maintain image scaling behavior */
    position: absolute;
    top: -20px; /* moved 20px higher as requested */
    left: 50%;
    transform: translateX(-50%); /* center horizontally only */
    z-index: 0;
}

.AiEnginePictogram {
    width: 261px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    position: relative; /* Brings the content above the connector background */
    z-index: 1;
    text-align: center;
}

.AiEngineIcon {
    width: 156.5px;
    height: 144px;
}

.AiAnalysisEngine {
    color: #8548F3;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

.PredictiveEmotionEngine {
    color: var(--color-grey-1000);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

/* STRONG OVERRIDES: ensure the deck card and Section2 are truly centered */
.Section2, .Section2ContentMap, .Section2DeckCard {
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.Section2DeckCard {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(1280px, 95%) !important;
    max-width: 1280px !important;
    margin: 24px auto !important;
    /* Ensure the deck card sits above the hero's absolutely-positioned content
       (hero-content uses z-index:20). Use a neutral card background so it remains
       visible even if the surrounding page background is similar. */
    z-index: 30 !important;
    background-color: #EEF1F6 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Tighten vertical spacing between the two .section-cards rows and the AI band.
   - Remove margins above/below the AI band
   - Remove extra padding so top and bottom rows sit close to the connector
   - Keep connector height and the requested 20px upward offset already applied */
.Section2ContentMap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1100px !important;
}

/* rows of cards should not introduce vertical margins */
.Section2ContentMap > .section-cards {
    margin: 0 !important;
    gap: 8px !important; /* keep a tiny gap between cards themselves */
    align-items: stretch !important;
}

/* specifically remove space between card rows and the AI band */
.Section2ContentMap > .section-cards + .Section2AiEngine,
.Section2ContentMap > .Section2AiEngine + .section-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* remove internal padding from the AI band so the connector sits flush */
.Section2AiEngine {
    margin: 0 !important;
    padding: 0 !important;
    height: 275px !important; /* keep visual height */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* connector: keep width 50% and 20px upward shift */
.AiBgConncetor {
    width: 50% !important;
    max-width: 1001px !important;
    height: 275px !important;
    object-fit: contain !important;
    position: absolute !important;
    top: -20px !important; /* requested: 20px higher */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 0 !important;
}

/* pictogram should sit above the connector and not push layout */
.AiEnginePictogram {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* --- Restore tight spacing for Section 2 (cards + connector) --- */
.Section2 {
    padding-top: clamp(28px, 5.5vh, 52px) !important;
    padding-bottom: clamp(28px, 5.5vh, 52px) !important;
    gap: clamp(34px, 5.5vh, 56px) !important;
}

.section-cards {
    min-height: 335px !important; /* tighter rows than the 364px base */
}

.Section2AiEngine {
    height: clamp(155px, 14vh, 190px) !important;
    margin: 36px 0 8px !important;   /* top | left/right | bottom */
    padding: 0 !important;
}

.AiBgConncetor {
    height: 100% !important;     /* fill the band; ignore fixed 275px */
    top: -0px !important;            /* undo -20px lift that adds visual gap */
    transform: translateY(-10px);
}

/* keep rows snug to the connector */
.Section2ContentMap > .section-cards + .Section2AiEngine,
.Section2ContentMap > .Section2AiEngine + .section-cards {
    margin-top: 32px !important;
    margin-bottom: 0px !important;
}



/* Prevent absolutely positioned children from shifting layout */
.Section2DeckCard img, .Section2DeckCard .card {
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Fix the connector getting cut: stop clipping on the parents */
.Section2,
.Section2AiEngine,
.Section2DeckCard {
    overflow: visible !important;   /* was hidden on .Section2 and .Section2AiEngine */
}

/* Keep the connector slightly raised but fully visible */
.AiBgConncetor {
    top: -20px !important; /* moved 20px higher */
}

/* End final spacing/centering rules */

/* --- Media Queries for Responsiveness --- */

/* Tablet & Smaller Desktop */
@media (max-width: 1200px) {
    .card {
        flex: 1 1 calc(50% - 8px); /* 2 cards per row on tablets */
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .Section2 {
        padding: 48px 16px;
        gap: 48px;
    }

    .SeeWhatPlayersFeelPredictWhatTheyLlDo {
        font-size: 32px;
        line-height: 1.2;
    }

    .BraintelligenceBringsEveryLayerOfHumanDrivenInsightIntoOneClearSystemFromMassScaleAnalyticsToTargetedPlaytestingAndNeuroCognitiveSignalsAllYourDataStreamsFeedOnePowerfulAiEngineDesignedToExplainWhatSHappeningWhyItSHappeningAndHowToFixIt {
        font-size: 16px;
        line-height: 1.4;
    }

    .card {
        flex: 1 1 100%; /* 1 card per row on mobile */
        min-width: 100%;
    }

    .Section2AiEngine {
        height: 200px;
    }
}

/* --- Testimonial Section Styles --- */

.ClaraTestimony {
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.ClaraTestimonyCard {
    max-width: 1080px;
    width: 100%;
    padding: 34px 60px; /* Responsive side padding */
    background: white;
    box-shadow: 0 4px 16.8px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    border: 1px solid var(--color-light-purple);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

@media (min-width: 1000px) {
    .ClaraTestimonyCard {
        /* Re-apply wider padding on large screens to match original design intent */
        padding-left: 130px;
        padding-right: 130px;
    }
}

.ClaraTestimonyContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 36px;
}

.ClaraProfile {
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 50%; /* Perfect circle */
    flex-shrink: 0;
}

.ClaraJensen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ClaraTestimonyText {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
}

.FinallyAPlatformThatConnectsRawEmotionToRealMetricsBraintelligenceHelpedUsSeeWhyPlayersQuitNotJustWhere {
    align-self: stretch;
    color: var(--color-grey-800);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}

.ClaraJensenUxResearchLeadAvalancheStudios {
    color: var(--color-grey-500);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}

/* --- Media Queries for Responsiveness --- */

/* Tablet & Smaller Desktop */
@media (max-width: 1200px) {
    .card {
        flex: 1 1 calc(50% - 8px); /* 2 cards per row on tablets */
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .Section2 {
        padding: 48px 16px;
        gap: 48px;
    }

    .SeeWhatPlayersFeelPredictWhatTheyLlDo {
        font-size: 32px;
        line-height: 1.2;
    }

    .BraintelligenceBringsEveryLayerOfHumanDrivenInsightIntoOneClearSystemFromMassScaleAnalyticsToTargetedPlaytestingAndNeuroCognitiveSignalsAllYourDataStreamsFeedOnePowerfulAiEngineDesignedToExplainWhatSHappeningWhyItSHappeningAndHowToFixIt {
        font-size: 16px;
        line-height: 1.4;
    }

    .card {
        flex: 1 1 100%; /* 1 card per row on mobile */
        min-width: 100%;
    }

    .Section2AiEngine {
        height: 200px;
    }

    /* Mobile Testimonial Adjustments */
    .ClaraTestimonyCard {
        padding: 24px;
        border-radius: 12px;
    }
    .ClaraTestimonyContent {
        flex-direction: column; /* Stack image and text vertically */
        align-items: flex-start;
        gap: 20px;
    }
    .FinallyAPlatformThatConnectsRawEmotionToRealMetricsBraintelligenceHelpedUsSeeWhyPlayersQuitNotJustWhere {
        font-size: 18px;
    }
    .ClaraJensenUxResearchLeadAvalancheStudios {
        font-size: 16px;
    }
}

/* --- NEW: Section 3 Styles (Results/Impact) --- */

.Section3 {
    width: 100%;
    padding: 96px 24px; /* Responsive padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 54px;
    box-sizing: border-box;
    /* Background color inherited from body/parent, assuming same as before */
}

@media (min-width: 1400px) {
    /* Keep Section3 centered on very wide viewports by using small symmetric gutters. */
    .Section3 {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.Section3Header {
    width: 100%;
    max-width: 978px; /* Max-width from original element */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.Section3HeaderTagline {
    /* Reusing existing tagline style */
    padding: 8px 26px;
    border-radius: 12px;
    background-color: rgba(107, 76, 243, 0.1);
}

.MeasuredImpactVerifiedResults {
    color: var(--color-grey-1000);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.Section3HeaderDescription {
    width: 100%;
    color: var(--color-grey-700);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
    max-width: 978px;
}

/* --- Section 3 Content Cards (Results) --- */

.Section3ContentCards {
    width: 100%;
    max-width: 852px; /* Max-width from original element */
    display: flex;
    justify-content: center; /* Center cards in the container */
    align-items: stretch;
    gap: 18px;
    flex-wrap: wrap;
}

.ResultCard {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 1px solid var(--color-off-white);
    flex: 1 1 calc(50% - 9px); /* Two cards per row with 18px gap */
    min-width: 300px;
    padding: 30px; /* Internal padding */

    /* Use grid for controlled layout inside the card */
    display: grid;
    grid-template-areas:
        "metric title"
        "quote quote"
        "source source";
    grid-template-columns: auto 1fr;
    row-gap: 12px;
}

.ResultCard .metric {
    grid-area: metric;
    color: var(--color-primary-500);
    font-size: 48px;
    font-weight: 700;
    line-height: 1; /* Match the large number sizing */
    margin: 0;
    padding-right: 15px; /* Spacing between number and title */
}

.ResultCard .title {
    grid-area: title;
    color: var(--color-primary-500);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center; /* Vertically center with the metric number */
    margin: 0;
    white-space: nowrap;
}

.ResultCard .quote {
    grid-area: quote;
    color: var(--color-grey-700);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    padding-top: 5px; /* Additional vertical separation from title/metric */
}

.ResultCard .source {
    grid-area: source;
    color: var(--color-grey-1000);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    padding-top: 10px;
}


/* --- Media Queries for Responsiveness --- */

/* Tablet & Smaller Desktop (Existing adjustments and new card adjustments) */
@media (max-width: 1200px) {
    .card {
        flex: 1 1 calc(50% - 8px); /* 2 cards per row on tablets */
    }

    .ResultCard {
        /* Ensure 2 cards per row for the results section too */
        flex: 1 1 calc(50% - 9px);
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .Section2 {
        padding: 48px 16px;
        gap: 48px;
    }
    .Section3 {
        padding: 48px 16px;
        gap: 48px;
    }

    .SeeWhatPlayersFeelPredictWhatTheyLlDo {
        font-size: 32px;
        line-height: 1.2;
    }

    .MeasuredImpactVerifiedResults {
        font-size: 28px;
    }

    .Section3HeaderDescription {
        font-size: 16px;
    }

    .BraintelligenceBringsEveryLayerOfHumanDrivenInsightIntoOneClearSystemFromMassScaleAnalyticsToTargetedPlaytestingAndNeuroCognitiveSignalsAllYourDataStreamsFeedOnePowerfulAiEngineDesignedToExplainWhatSHappeningWhyItSHappeningAndHowToFixIt {
        font-size: 16px;
        line-height: 1.4;
    }

    .card {
        flex: 1 1 100%; /* 1 card per row on mobile */
        min-width: 100%;
    }

    .ResultCard {
        flex: 1 1 100%; /* 1 card per row on mobile */
    }

    .ResultCard .metric {
        font-size: 40px;
    }

    /* Mobile Testimonial Adjustments (Existing) */
    .ClaraTestimonyCard {
        padding: 24px;
        border-radius: 12px;
    }
    .ClaraTestimonyContent {
        flex-direction: column; /* Stack image and text vertically */
        align-items: flex-start;
        gap: 20px;
    }
    .FinallyAPlatformThatConnectsRawEmotionToRealMetricsBraintelligenceHelpedUsSeeWhyPlayersQuitNotJustWhere {
        font-size: 18px;
    }
    .ClaraJensenUxResearchLeadAvalancheStudios {
        font-size: 16px;
    }
}

/* --- NEW: Section 4 Styles (CTA/Pilot) --- */

.Section4 {
    width: 100%;
    padding: 96px 24px; /* Responsive padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 67px; /* Spacing between header, CTA, and cards */
    box-sizing: border-box;
    /* Using a light purple/grey background for contrast if needed */
    background-color: var(--bg-color);
}

@media (min-width: 1400px) {
    /* Keep Section4 centered on very wide viewports by using small symmetric gutters. */
    .Section4 {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.Section4Header {
    width: 100%;
    max-width: 978px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.FreePilotGuaranteedResults {
    color: var(--color-grey-1000); /* Adjusted from #121314 to use variable */
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.Section4HeaderDescription {
    width: 100%;
    max-width: 978px;
    color: var(--color-grey-700);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
}

/* --- CTA Buttons --- */

.CtaGroup {
    width: 100%;
    max-width: 533px; /* Original container width */
    display: flex;
    justify-content: center;
    gap: 12px; /* Spacing between buttons */
    flex-wrap: nowrap; /* Allow buttons to stack on mobile */
}

.Button-CTA-Primary, .Button-CTA-Secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 261px; /* Fixed width from original design */
    height: 59px;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 21; /* keep buttons above decorative elements */
}

.Button-CTA-Primary {
    background: var(--color-primary-800);
    color: white;
    border: 1px solid var(--color-primary-900); /* Darker outline for visual depth */
    box-shadow: 0 4px 6px rgba(136, 76, 243, 0.3);
}

.Button-CTA-Primary:hover {
    background: var(--color-primary-700);
    box-shadow: 0 6px 8px rgba(136, 76, 243, 0.4);
}

.Button-CTA-Secondary {
    background: white;
    color: var(--color-primary-800);
    border: 1px solid var(--color-primary-800);
}

.Button-CTA-Secondary:hover {
    background: var(--bg-color);
    border-color: var(--color-primary-700);
    color: var(--color-primary-700);
}

/* --- Guarantee Cards --- */

.FreePilotGuaranteedResultsCards {
    width: 100%;
    max-width: 1047px; /* Max-width to contain 3 cards + gaps */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to the top */
    gap: 32px;
    flex-wrap: wrap;
}

.GuaranteeCard {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    border: 1px solid var(--color-card-border);
    flex: 1 1 30%; /* Flexible basis for 3 cards per row */
    min-width: 300px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.GuaranteeTitleGroup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.GuaranteeTitle {
    color: var(--color-grey-900);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.GuaranteeDescription {
    color: var(--color-grey-700);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
}

.CheckIcon {
    /* Using a simple inline SVG checkmark for better control */
    fill: var(--color-primary-500);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}


/* --- Media Queries for Responsiveness --- */

/* Tablet & Smaller Desktop */
@media (max-width: 1080px) {
    .FreePilotGuaranteedResultsCards {
        /* Switch to 2 cards per row on smaller desktops/large tablets */
        gap: 24px;
    }
    .GuaranteeCard {
        flex: 1 1 calc(50% - 12px);
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .Section4 {
        padding: 48px 16px;
        gap: 40px;
    }

    .FreePilotGuaranteedResults {
        font-size: 32px;
        line-height: 1.2;
    }

    .Section4HeaderDescription {
        font-size: 16px;
    }

    .CtaGroup {
        flex-direction: column; /* Stack buttons vertically */
        gap: 16px;
    }
    .Button-CTA-Primary, .Button-CTA-Secondary {
        width: 100%; /* Full width for buttons on mobile */
    }

    .FreePilotGuaranteedResultsCards {
        gap: 18px;
    }
    .GuaranteeCard {
        flex: 1 1 100%; /* 1 card per row on mobile */
        min-width: 100%;
    }
}

/* --- NEW: Section 5 Styles (Neuro-Design Loop/Reports) --- */

.Section5 {
    width: 100%;
    padding-top: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--bg-color); /* Matches the outer page background */
}

.Section5Header {
    width: 100%;
    max-width: 978px;
    margin: 0 auto;
    padding: 0 24px 64px 24px; /* Padding for header content */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.FromObservationToEngineeringTheNeuroDesignLoop {
    color: var(--color-grey-1000);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.Section5HeaderDescription {
    width: 100%;
    color: var(--color-grey-700);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    margin-top: 16px;
}

.Section5ContentWrapper {
    /* This container spans full width and has the dark purple background */
    width: 100%;
    background-color: var(--color-dark-purple);
    padding: 80px 0; /* Vertical padding around the content */
}

.Section5ContentReports {
    width: 100%;
    max-width: 1920px; /* Use a wide max-width to allow the content blocks to stretch */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on mobile */
    align-items: stretch;
}

.ReportBlock {
    /* Half width on desktop, full width on mobile */
    flex: 1 1 50%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px; /* Horizontal padding for spacing inside the block */
    box-sizing: border-box;
}

.ReportTitle {
    color: var(--color-section5-text-light);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 24px;
    text-align: center;
}

.ReportSubNavigation {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ReportNavItem {
    color: var(--color-section5-text-light);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0.8;
}

.ReportImageContainer {
    width: 100%;
    max-width: 800px;
    /* Using descriptive placeholders for the laptop images */
    padding-bottom: 60%; /* Aspect ratio for visual placeholder */
    background: #2D2D2D; /* Dark placeholder color */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.ReportImage {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Use a visually distinct placeholder for the actual screen content */
}


/* --- Media Queries for Responsiveness --- */

/* Tablet & Smaller Desktop */
@media (max-width: 1080px) {
    .FreePilotGuaranteedResultsCards {
        /* Switch to 2 cards per row on smaller desktops/large tablets */
        gap: 24px;
    }
    .GuaranteeCard {
        flex: 1 1 calc(50% - 12px);
    }

    .ReportBlock {
        flex: 1 1 100%; /* Stack on tablets */
        padding-bottom: 40px; /* Space between stacked blocks */
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .Section4 {
        padding: 48px 16px;
        gap: 40px;
    }

    .FreePilotGuaranteedResults {
        font-size: 32px;
        line-height: 1.2;
    }

    .Section4HeaderDescription {
        font-size: 16px;
    }

    .CtaGroup {
        flex-direction: column; /* Stack buttons vertically */
        gap: 16px;
    }
    .Button-CTA-Primary, .Button-CTA-Secondary {
        width: 100%; /* Full width for buttons on mobile */
    }

    .FreePilotGuaranteedResultsCards {
        gap: 18px;
    }
    .GuaranteeCard {
        flex: 1 1 100%; /* 1 card per row on mobile */
        min-width: 100%;
    }

    .FromObservationToEngineeringTheNeuroDesignLoop {
        font-size: 32px;
    }

    .ReportSubNavigation {
        gap: 16px;
    }
}

/* --- NEW: Section 6 Styles (Continuous Insight at Scale) --- */

.Section6 {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-image: url('../assets/img/Globe bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 96px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Section6Header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 978px;
    padding: 0 20px;
}

.Section6HeaderTagline {
    display: inline-block;
    padding: 8px 26px;
    border-radius: 12px;
    margin-bottom: 20px;
    background-color: rgba(124, 58, 237, 0.1);
}

.Section6HeaderTagline p {
    margin: 0;
    color: #7C3AED;
    font-size: 18px;
    font-weight: 700;
}

.ContinuousInsightAtScale {
    color: #121314;
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 20px;
}

.Section6Description {
    color: #4E4E4E;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    max-width: 978px;
    margin: 0 auto;
}

/* Cards (Grounded in science & Seamless Integration) */
.Section6Cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.Section6Card {
    width: 450px;
    border-radius: 12px;
    padding: 51px 17px;
    display: flex;
    flex-direction: column;
    gap: 19px;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
}

.card-science {
    background-color: #7C3AED;
}

.card-integration {
    background: linear-gradient(118deg, #6A1EEC 0%, #884CF3 100%);
}

.Section6Card .CardIconBg {
    width: 159px;
    height: 159px;
    position: absolute;
    top: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.Section6Card .CardText {
    position: relative;
    z-index: 1;
}

.Section6Card .CardText h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.Section6Card .CardText p {
    margin: 0;
    color: #E3EAF5;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

/* Dark panel containing testers collage and text */
.Section6TestersCard {
    width: 100%;
    max-width: 1561px;
    background-color: #0B163C;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    color: #E3EAF5;
}

.TestersCollage {
    flex: 0 0 617px;
    max-width: 617px;
    aspect-ratio: 617 / 460;
    position: relative;
}

.TestersCollage .tester-img {
    position: absolute;
    object-fit: cover;
    border-radius: 8px;
}

/* Percentage-based positioning derived from original Figma measurements */
.EegGuy2 { width: 31.6%; height: 50.3%; left: 34.2%; top: 12.1%; }
.EegGuy3 { width: 31.6%; height: 8.9%; left: 0; top: 91.1%; }
.EegGirl2 { width: 31.6%; height: 50.3%; left: 0; top: 37.2%; }
.EegGirl3 { width: 31.6%; height: 34.1%; left: 34.2%; top: 65.9%; }
.EegGirl4 { width: 31.6%; height: 8.6%; left: 34.2%; top: 0; }
.EegGuy1 { width: 31.6%; height: 33.6%; left: 0; top: 0; }
.EegGirl1 { width: 31.6%; height: 48.0%; left: 68.4%; top: 52.0%; }
.EegGuy41 { width: 31.6%; height: 48.7%; left: 68.4%; top: 0; }

/* Testers information column */
.TestersInfo {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.TestersTitle {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #E3EAF5;
}

.TestersTitle img {
    width: 36px;
    height: 36px;
}

.TestersDescription {
    margin: 0;
    max-width: 839px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    color: #E3EAF5;
}

.TestersStats {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.TestersStats .Stat {
    text-align: center;
}

.TestersStats .StatValue {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: #EBF0F6;
}

.TestersStats .StatLabel {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: rgba(235, 240, 246, 0.79);
    margin-top: 4px;
}

/* Responsive rules for Section 6 */
@media (max-width: 1200px) {
    .Section6TestersCard {
        flex-direction: column;
        align-items: center;
    }
    .TestersCollage {
        flex: none;
        width: 100%;
        max-width: 617px;
    }
    .TestersInfo {
        align-items: center;
        text-align: center;
    }
    .TestersStats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .ContinuousInsightAtScale {
        font-size: 36px;
    }
    .Section6TestersCard {
        padding: 24px;
    }
    .TestersStats .StatValue {
        font-size: 36px;
    }
    .TestersTitle {
        font-size: 20px;
    }
    .Section6Card {
        width: 100%;
        padding: 40px 17px;
    }
}

/* --- NEW: Section 7 Styles (Final CTA) --- */

.Section7 {
    width: 100%;
    position: relative;
    padding: 96px 24px; /* Padding top/bottom and horizontal margin */
    overflow: hidden;
    background-color: var(--bg-color); /* Light background */
    text-align: center;
    box-sizing: border-box;
}

.Section7Header {
    max-width: 978px; /* Max width to center the content */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Default gap between elements */
}

.Section7Header .YourAllInOneGameAnalyticsPowerhouse {
    color: var(--color-accent-purple);
    font-size: 18px;
    font-weight: 700;
}

.Section7Header h2 {
    color: var(--color-grey-1000);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.Section7Header p {
    color: var(--color-grey-700);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
    max-width: 800px; /* Constrain description width */
    margin-bottom: 32px; /* Space before buttons */
}

/* --- CTA Buttons --- */

.Section7Cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; /* Gap between buttons */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-top: 40px; /* Space from description */
}

.ButtonCta {
    width: 261px;
    height: 59px;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    box-sizing: border-box;
}

.ButtonCtaPrimary {
    background: var(--color-primary-800); /* #884CF3 */
    color: white;
    border: 0.4px solid var(--color-primary-900); /* Darker border for depth */
}

.ButtonCtaPrimary:hover {
    background: var(--color-primary-700); /* Slightly lighter purple on hover */
}

.ButtonCtaSecondary {
    background: transparent;
    color: var(--color-primary-800);
    border: 1px solid var(--color-primary-800);
}

.ButtonCtaSecondary:hover {
    background: rgba(136, 76, 243, 0.05); /* Light hover effect */
}