/* ============================================================
   GEO Optimizer — Prelaunch Color & Style Overrides
   Loaded LAST to override ShowcaseAI CSS variables and styles
   ============================================================ */

/* 1. Typography — match JV page (Bricolage Grotesque + DM Sans) */
body,
body * {
    font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.sc_banner_top_heading,
.sc_banner_main_heading,
.sc_webinar_bullets_heading,
.sc_subscribe_top_heading,
.sc_subscribe_main_heading,
.sc_innerform h2,
.sc_innerform h3,
.geo-stat-number,
.fontSyne,
.fontPlus {
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

/* Gradient text — matches JV page */
.grad-text {
    background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 40%, #fcd34d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Heading sizes */
.sc_banner_main_heading {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    /* Reset ShowcaseAI background-clip so it doesn't interfere */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
}

/* Gradient span — font-weight 900 compensates for lighter antialiasing on transparent fill */
.sc_banner_main_heading .grad-text {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 40%, #fcd34d 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.sc_banner_top_heading {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sc_webinar_bullets_heading {
    font-size: clamp(1rem, 2vw, 1.4rem) !important;
    font-weight: 800 !important;
}

.sc_innerform h2 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: unset !important;
}

.sc_innerform h2 .grad-text {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 800 !important;
}

.sc_innerform h3 {
    margin: 20px 0px 30px 0px !important;
}

.sc_subscribe_top_heading {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem) !important;
    font-weight: 800 !important;
}

.sc_subscribe_main_heading {
    font-size: clamp(1rem, 2vw, 1.3rem) !important;
    font-weight: 700 !important;
}

/* Body text */
body {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.sc_banner_sub_heading {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem) !important;
    font-weight: 500 !important;
}

.sc_webinar_bullets_list ul li p {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

.geo-stat-number {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
}

/* 2. Launch badge — matches JV page .launch-badge */
.geo-launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    color: #fff;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 28px;
    border-radius: 100px;
    margin-top: 20px;
    margin-bottom: 22px;
    box-shadow: 0 0 32px rgba(99, 102, 241, 0.45);
}

.geo-launch-badge svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    flex-shrink: 0;
}

/* 3. Hero sub-heading — matches JV page .hero-sub */
.geo-hero-sub {
    color: #dbeafe;
    font-size: 22px;
    font-weight: 400;
    max-width: 700px;
    margin: 16px auto 60px;
    line-height: 1.7;
    /* Remove ShowcaseAI dark pill styling */
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* 4. Align video and form to top */
.form-box {
    align-items: flex-start !important;
}

/* 2. Hero banner — background + section spacing */
.sc_prelaunch_banner_wrapper {
    background-position: center calc(100% + 120px);
    background-color: #0A0F1E;
    padding: 60px 0 60px !important;
}

/* Logo bottom gap */
.sc_pre_logo {
    margin-bottom: 28px;
}


/* Headline bottom gap before sub-text */
.sc_banner_main_heading {
    margin-bottom: 24px !important;
}

/* Sub-text top gap */
.geo-hero-sub {
    margin-top: 0;
}

/* 2. Override brand color variables */
:root {
    --primary-color: #0A66FF;
    --secondary-color: #0A0F1E;
    --dark-bg: #0A0F1E;
}

/* 2. Scrollbar thumb to blue */
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

/* 3. Video box — swap pink/purple gradient border to blue/indigo */
.sc_videoBox {
    background: linear-gradient(180deg, #0A66FF 7.48%, #6C47FF 38.66%, rgba(10, 15, 30, 0) 70.45%);
}

/* 4. Kill backdrop-filter — prevents white sections below bleeding through on scroll */
.sp_innerFormBox {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sc_innerform {
    background: #0A0F1E !important;
}

/* 4. Form box border — swap pink/purple to blue/indigo */
.sp_innerFormBox::before {
    background: linear-gradient(180deg, #0A66FF 10.85%, #6C47FF 37.97%, rgba(10, 15, 30, 0) 65.62%) border-box;
    box-shadow: 0px 0px 200px 0px rgba(108, 71, 255, 0.25);
}

/* 5. Subscribe section border — swap pink/purple to blue/indigo */
.sc_subscribe_main_parent::before {
    background: linear-gradient(180deg, #0A66FF 10.85%, #6C47FF 37.97%, rgba(10, 15, 30, 0) 150%);
}

/* 6. Button hover — cursor spotlight only, no background change */
.sc_primary_btn::before {
    background: radial-gradient(circle closest-side, rgba(255,255,255,0.18), transparent) !important;
}

/* 7. Form inputs & button sizing */
.sc_innerform .sc_pre_input_group {
    margin-bottom: 16px;
}

.sc_innerform .sc_pre_input_group input {
    height: 56px !important;
    font-size: 15px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
}

.sc_innerform .sc_primary_btn {
    height: 56px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}

.sc_pre_input_group input:focus-visible {
    border-color: var(--primary-color);
}

/* 7. Bullet section heading pill */
.sc_webinar_bullets_heading {
    background: var(--primary-color);
}

/* 8. Stats section */
.geo-stats-section {
    padding: 60px 0 40px;
}

.geo-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 36px;
}

.geo-stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 3px solid var(--primary-color);
    padding-left: 20px;
}

.geo-stat-number {
    font-size: 48px;
    font-weight: 800;
    font-family: "Syne", sans-serif;
    color: #fff;
    line-height: 1;
}

.geo-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
}

.geo-stat-label em {
    font-style: normal;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

.geo-stat-footer {
    font-size: 16px;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.geo-stat-footer strong {
    color: #fff;
}

@media (max-width: 768px) {
    .geo-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 9. Footer layout fix — override ShowcaseAI negative margins that cause overlap */
.sc_footer_top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: static !important;
}

.sc_footer_top .sc_placehold_logo {
    position: static !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto 24px !important;
}

/* jv-style.css pulls the paragraph up with margin-top: -45px — reset it */
.sc_footer_top > p {
    margin-top: 0 !important;
    font-size: 15px !important;
}

.sc_footer_copyright::before {
    display: none !important;
}

.sc_footer_copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Footer copyright + legal — match JV page style */
.sc_footer_copyright {
    flex-direction: column !important;
    gap: 16px !important;
    padding-top: 32px !important;
}

.sc_footer_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.sc_footer_copyright p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.sc_footer_copyright p a {
    font-size: 14px !important;
    color: #4e8fff !important;
    text-decoration: none !important;
}

.sc_footer_copyright p a:hover {
    color: #ffffff !important;
}

.sc_footer_legal_pages {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 20px !important;
    padding-top: 0 !important;
}

.sc_footer_legal_pages a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.sc_footer_legal_pages a:hover {
    color: #ffffff !important;
}

/* 10. Safety: hide heading elements if they are truly empty */
.sc_banner_main_heading:empty,
.sc_banner_sub_heading:empty,
.sc_innerform h3:empty,
.sc_subscribe_main_heading:empty {
    display: none;
}

/* ===================================================================
   BELOW-HERO LIGHT SECTIONS
   =================================================================== */

/* -- Tokens --------------------------------------------------------- */
:root {
    --color-bg-light:      #fdfaff;
    --color-surface-light: #ffffff;
    --color-lavender:      #f0f4ff;
    --color-border-light:  #eef0f6;
    --color-text-dark:     #09090b;
    --color-text-muted:    #666666;
    --grad-rainbow:        linear-gradient(64deg, #2887ff 4.4%, #22cfff 40.3%, #ffd106 62.1%, #ff6a35 106.3%);
    --grad-btn-light:      linear-gradient(81deg, #2067f3 4.4%, #2887ff 55.9%, #1a56d6 88%);
    --shadow-card-light:   0px 2px 12px rgba(0, 0, 0, 0.07);
}

/* -- Shared layout -------------------------------------------------- */
.geo-section {
    width: 100%;
    padding: 100px 0;
}

.geo-section--learn  { background: var(--color-surface-light); }
.geo-section--for    { background: var(--color-bg-light); }
.geo-section--bonuses { background: #09090b; }
.geo-section--form   { background: var(--color-lavender); }

.geo-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* -- Section header ------------------------------------------------- */
.geo-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 52px;
}

.geo-section-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    border-radius: 60px;
    background: linear-gradient(84deg, rgba(40,135,255,0.06), rgba(34,207,255,0.06));
    border: 1.5px solid #2887ff;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-dark);
    white-space: nowrap;
}

.geo-section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(34px, 3.5vw, 52px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.02em;
    margin: 0;
}

.geo-section-title--light { color: #ffffff; }


.geo-section-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-muted);
    max-width: 580px;
    line-height: 1.6;
    margin: 0;
}

.geo-section-sub--dark { color: rgba(255, 255, 255, 0.5); }

.geo-grad-text {
    background: var(--grad-rainbow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 800;
}

/* -- Section 1: Persona Cards --------------------------------------- */
.geo-persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 100%;
}

.geo-persona-card {
    background: var(--color-surface-light);
    border-radius: 14px;
    padding: 32px 26px;
    box-shadow: var(--shadow-card-light);
    border-left: 3px solid #2887ff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.geo-persona-card--cyan   { border-left-color: #22cfff; color: #22cfff; }
.geo-persona-card--yellow { border-left-color: #ffd106; color: #f59e0b; }
.geo-persona-card--orange { border-left-color: #ff6a35; color: #ff6a35; }

/* Default (blue) icon colour */
.geo-persona-card:not([class*="--"]) .geo-persona-card__icon svg,
.geo-persona-card .geo-persona-card__icon svg { color: #2887ff; }
.geo-persona-card--cyan   .geo-persona-card__icon svg { color: #22cfff; }
.geo-persona-card--yellow .geo-persona-card__icon svg { color: #f59e0b; }
.geo-persona-card--orange .geo-persona-card__icon svg { color: #ff6a35; }

.geo-persona-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 24px rgba(40, 135, 255, 0.12);
}

.geo-persona-card__icon {
    line-height: 1;
    color: inherit;
    margin-bottom: 10px;
}

.geo-persona-card__icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.75;
}

.geo-persona-card__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.geo-persona-card__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* -- Section 2: Numbered Learn Grid --------------------------------- */
.geo-learn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-border-light);
    border-radius: 16px;
    overflow: hidden;
    max-width: 100%;
}

.geo-learn-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 38px 38px;
    background: var(--color-bg-light);
    will-change: transform;
}

.geo-learn-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #2887ff;
    flex-shrink: 0;
    line-height: 1.3;
    min-width: 32px;
    margin-top: 5px;
}

.geo-learn-num--2 { color: #166eff; }
.geo-learn-num--3 { color: #0061ff; }
.geo-learn-num--4 { color: #004fdb; }

.geo-learn-item p {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.geo-learn-item p strong {
    color: var(--color-text-dark);
    font-weight: 600;
}

/* -- Section 3: Dark Bonus Strip ------------------------------------ */
.geo-bonuses-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffd106;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.geo-amber-text { color: #ffd106; font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif !important; }

.geo-bonus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 100%;
}

.geo-bonus-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    will-change: transform;
    transition: background 0.25s ease;
}

.geo-bonus-card:hover {
    background: rgba(255, 255, 255, 0.09);
}

.geo-bonus-card--wide {
    grid-column: unset;
    max-width: 100%;
    margin: 0;
}

.geo-bonus-card__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffd106;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.geo-bonus-card__title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.geo-bonus-card__desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* -- Section 4: Registration Form ----------------------------------- */
.geo-form-box {
    max-width: 100%;
    text-align: center;
}

.geo-form__fields {
    display: flex;
    gap: 12px;
    align-items: center;
}

.geo-form__input {
    flex: 1;
    min-width: 0;
    height: 56px;
    border: 1.5px solid #dde3f0;
    border-radius: 10px;
    padding: 0 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--color-text-dark);
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s ease;
}

.geo-form__input:focus {
    border-color: #2887ff;
}

/* Override sc_primary_btn to match hero button exactly */
.geo-form__btn,
.geo-form__btn:focus,
.geo-form__btn:active {
    flex-shrink: 0;
    width: auto !important;
    height: 56px !important;
    padding: 0 32px !important;
    border-radius: 10px !important;
    background: #0A66FF !important;
    background-image: none !important;
    color: #ffffff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: -3px -3px 4px 0px #FFFFFF66 inset !important;
    transition: none !important;
}

/* Cursor spotlight matches hero — ::before tracks --x/--y via ButtonEffect JS */
.geo-form__btn::before {
    background: radial-gradient(circle closest-side, rgba(255,255,255,0.18), transparent) !important;
}

.geo-form__trust {
    margin-top: 48px;
    text-align: center;
}

.geo-form__trust-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-dark);
    letter-spacing: 0.03em;
    margin: 0 0 10px;
}

.geo-form__trust-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    color: #666;
    line-height: 1.7;
    max-width: 660px;
    margin: 0 auto;
}

/* -- Responsive ----------------------------------------------------- */
@media (max-width: 768px) {
    .geo-persona-grid  { grid-template-columns: repeat(2, 1fr); }
    .geo-learn-grid    { grid-template-columns: 1fr; }
    .geo-bonus-card--wide { max-width: 100%; }
    .geo-container     { padding: 0 16px; }
    .geo-section       { padding: 70px 0; }
}

@media (max-width: 480px) {
    .geo-persona-grid  { grid-template-columns: 1fr; }
    .geo-form__fields  { flex-direction: column; }
    .geo-form__input,
    .geo-form__btn     { width: 100% !important; }
}