/* ==========================================================================
   GEMINI ASSOCIATES — HERO SECTION
   --------------------------------------------------------------------------
   Loaded after responsive-fixes.css. Scoped entirely to the homepage hero.

   Problems measured on the original hero (1440x900):
     - Subheadline was 266 chars / ~40 words — far past the 15-25 word range
       at which hero copy is actually read
     - KPI strip ended at 769px leaving 131px of dead space before the fold,
       with no cue that content continued
     - Both CTAs were visually identical, so neither read as primary
     - Static KPI numerals despite count-up support already existing
     - 15.6 MB video with no poster: hero painted empty until it buffered
   ========================================================================== */

/* ==========================================================================
   00. LEGACY LAYER REMOVAL
   --------------------------------------------------------------------------
   The old template shipped a full-viewport white overlay (#spinner) pinned at
   z-index:99999. It was never removed from the DOM — only faded — and its
   `visibility` transition was delayed 0.5s, so on every load it painted over
   the hero before disappearing. That is the "old design behind the new design".

   The markup is gone from header.php; these rules guarantee it stays gone even
   if a cached page or another include still emits it.
   ========================================================================== */
/* Scoped to #spinner only — .spinner-grow on its own is a generic Bootstrap
   class still used by the admin area, so it must not be blanket-hidden. */
#spinner,
#spinner.show,
#spinner .spinner-grow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* The hero owns its own stacking context so no stray fixed/absolute element
   from the legacy template can ever paint on top of it. */
.gemini-hero-container {
    isolation: isolate;
    z-index: 0;
}

/* ==========================================================================
   01. CONTAINER
   ========================================================================== */
.gemini-hero-container {
    /* svh avoids the iOS Safari toolbar jump that vh causes */
    min-height: 88vh;
    min-height: 88svh;
    /* Bottom padding reserves room for the absolutely-positioned scroll cue
       so it can never overlap the KPI strip. */
    padding: clamp(2.5rem, 6vh, 4.5rem) 1.25rem clamp(7rem, 13vh, 9.5rem);
}

/* Modern Fluid Moving Gradient Behind Frosted Glass */
.hero-moving-gradient-backdrop {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.hero-frosted-glass-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.gemini-hero-video,
.gemini-hero-overlay {
    display: none !important;
}

/* ==========================================================================
   02. HEADLINE
   Tighter tracking + optical sizing for large display type.
   ========================================================================== */
.gemini-hero-title {
    font-size: clamp(2.1rem, 5.1vw, 4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    font-weight: 700;
    text-wrap: balance;
    margin-bottom: 1rem !important;
}

.hero-gradient-text {
    background: linear-gradient(110deg, #38bdf8 0%, #a5f3fc 22%, #ffffff 42%, #38bdf8 62%, #00f0ff 82%, #0284c7 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroTextShimmer 4.5s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.45));
    /* Fallback for engines without background-clip:text */
    color: #38bdf8;
}

@keyframes heroTextShimmer {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-gradient-text { color: transparent; }
}

/* ==========================================================================
   03. LEAD PARAGRAPH
   Constrained measure so the eye does not travel too far per line.
   ========================================================================== */
.gemini-hero-lead {
    font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
    line-height: 1.62 !important;
    color: #cbd5e1 !important;
    max-width: 58ch !important;
    margin-inline: auto !important;
    text-wrap: pretty;
}

/* ==========================================================================
   03b. VERTICAL RHYTHM
   --------------------------------------------------------------------------
   Measured gaps before this block were 99 / 16 / 16 / 24 / 24 / 24 / 46px —
   an arbitrary sequence that made the stack feel unresolved. They are now
   driven by one scale, with deliberate grouping:

     badge  -> title   : tight  (they form one unit)
     title  -> lead    : tight
     lead   -> chips   : medium (new idea begins)
     chips  -> CTAs    : loose  (action break)
     CTAs   -> KPI     : loose  (proof block)

   Bootstrap's mb-* utilities on these elements are neutralised so a single
   system owns the spacing.
   ========================================================================== */
:root {
    --hero-gap-tight:  0.75rem;
    --hero-gap-medium: 1.5rem;
    --hero-gap-loose:  2.25rem;
    /* Shared measure so chips and the KPI strip share identical edges */
    --hero-block-width: 940px;
}

/* Values are tuned against MEASURED gaps, not nominal margins: the title and
   lead carry large line-height, so part of the visual gap is leading. The
   margins below compensate so the rendered rhythm lands on 24 / 24 / 36 / 36. */
.gemini-hero-content .hero-eyebrow-badge    { margin-bottom: 1.5rem !important; }
.gemini-hero-content .gemini-hero-title     { margin-bottom: 1.5rem !important; }
.gemini-hero-content .gemini-hero-lead      { margin-bottom: 2.25rem !important; }
.gemini-hero-content .hero-capability-chips { margin-bottom: 2.25rem !important; }
.gemini-hero-content .hero-cta-row          { margin-bottom: 2.25rem !important; }

/* ==========================================================================
   04. CAPABILITY CHIPS
   Holds the six specifics stripped out of the lead, in scannable form.
   ========================================================================== */
.hero-capability-chips {
    list-style: none;
    /* Matches the KPI strip exactly: previously 920 vs 940 read as a
       misalignment rather than a deliberate difference. */
    max-width: var(--hero-block-width);
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.hero-capability-chips .marquee-clone {
    display: none;
}

.hero-capability-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(148, 197, 231, 0.10);
    border: 1px solid rgba(148, 197, 231, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'Heebo', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #dbeafe;
    white-space: nowrap;
    transition: background 200ms ease, border-color 200ms ease;
}

.hero-capability-chips li:hover {
    background: rgba(148, 197, 231, 0.18);
    border-color: rgba(148, 197, 231, 0.4);
}

.hero-capability-chips i {
    font-size: 0.9rem;
    color: #7dd3fc;
}

/* ==========================================================================
   05. CTA HIERARCHY
   Primary is now the conversion action (quote) and is visually dominant;
   secondary is a quieter ghost button. Previously both looked identical.
   ========================================================================== */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
}

html .hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 34px !important;
    font-size: 1.04rem !important;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    /* AA-compliant gradient from responsive-fixes.css */
    box-shadow:
        0 10px 30px -8px rgba(2, 127, 168, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html .hero-btn-primary:hover {
    box-shadow:
        0 16px 40px -10px rgba(2, 127, 168, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Secondary intentionally lighter in weight */
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 28px !important;
    font-size: 0.98rem !important;
    font-weight: 500 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    color: #e2e8f0 !important;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   06. KPI STRIP
   ========================================================================== */
.hero-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: var(--hero-block-width);
    margin-inline: auto;
    padding: 1.35rem 1.5rem !important;
    border-radius: 20px !important;
    background: rgba(8, 23, 44, 0.58) !important;
    border: 1px solid rgba(125, 211, 252, 0.20) !important;
    box-shadow:
        0 24px 60px -24px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.hero-kpi-card {
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.kpi-value {
    font-size: clamp(1.3rem, 1.9vw, 1.75rem) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    /* Tabular figures stop the width jitter while counters animate */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.kpi-label {
    font-size: 0.85rem !important;
    font-weight: 600;
    color: #e2e8f0 !important;
}

.kpi-sub {
    font-size: 0.73rem !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   07. SCROLL CUE
   Fills the 131px of dead space measured between the KPI strip and the fold.
   ========================================================================== */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none !important;
    opacity: 0.88;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: opacity 220ms ease, transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 162, 211, 0.35);
}

.hero-scroll-cue-text {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff !important;
}

/* Precision Bootstrap chevron with gentle vertical bob */
.hero-scroll-chevron {
    font-size: 0.78rem;
    color: #38bdf8;
    display: inline-block;
    line-height: 1;
    animation: ga-scroll-bob 1.8s ease-in-out infinite;
}

@keyframes ga-scroll-bob {
    0%, 100% { transform: translateY(0);   opacity: 0.7; }
    50%      { transform: translateY(3px); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue-mouse::after {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   08. TABLET
   ========================================================================== */
@media (max-width: 991.98px) {
    .hero-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem 0 !important;
    }

    .hero-kpi-card:nth-child(2n) {
        border-right: none;
    }

    .hero-kpi-card:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        padding-bottom: 0.9rem;
    }
}

/* ==========================================================================
   09. MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
    .gemini-hero-container {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 4.5rem 1rem 5.5rem 1rem !important;
        position: relative !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .gemini-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 3 !important;
    }

    .hero-plasma-orb {
        filter: blur(50px);
        opacity: 0.5;
    }

    .hero-eyebrow-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.72rem !important;
        padding: 6px 14px !important;
        border-radius: 50px !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 1.25rem !important;
        max-width: 100% !important;
    }

    .gemini-hero-title {
        font-size: clamp(1.9rem, 7.8vw, 2.45rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
        color: #ffffff !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }

    .gemini-hero-lead {
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
        color: #cbd5e1 !important;
        text-align: center !important;
        max-width: 92% !important;
        margin-inline: auto !important;
        margin-bottom: 1.5rem !important;
    }

    /* Chips: horizontal swipe rail on mobile keeps them clean & tidy */
    .hero-capability-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 4px 1rem 8px !important;
        margin-inline: -1rem !important;
        margin-bottom: 1.5rem !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        list-style: none !important;
    }

    .hero-capability-chips::-webkit-scrollbar { display: none; }

    .hero-capability-chips .marquee-clone {
    display: none;
}

.hero-capability-chips li {
        scroll-snap-align: start;
        font-size: 0.74rem !important;
        padding: 6px 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 50px !important;
    }

    /* Full-width stacked CTAs centered */
    .hero-cta-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.7rem !important;
        width: 100% !important;
        max-width: 340px !important;
        margin-inline: auto !important;
        margin-bottom: 1.75rem !important;
    }

    html .hero-btn-primary,
    .hero-btn-secondary {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 13px 24px !important;
        font-size: 0.96rem !important;
        border-radius: 50px !important;
    }

    /* Single-column KPI strip — clean tabular alignment */
    .hero-kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0.4rem 1.25rem !important;
        border-radius: 18px !important;
        width: 100% !important;
        max-width: 350px !important;
        margin-inline: auto !important;
        overflow: hidden !important;
        background: rgba(10, 25, 48, 0.78) !important;
        border: 1px solid rgba(56, 189, 248, 0.22) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
    }

    .hero-kpi-card {
        display: grid !important;
        grid-template-columns: 90px 1fr !important;
        align-items: center !important;
        gap: 0 0.85rem !important;
        text-align: left !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 0.75rem 0 !important;
    }

    .hero-kpi-card:last-child {
        border-bottom: none !important;
        padding-bottom: 0.5rem !important;
    }

    .kpi-value {
        font-size: 1.25rem !important;
        color: #38bdf8 !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        text-align: left !important;
    }

    .kpi-label {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #f1f5f9 !important;
        line-height: 1.25 !important;
    }

    .kpi-sub {
        font-size: 0.7rem !important;
        color: #94a3b8 !important;
        line-height: 1.3 !important;
    }

    /* Scroll cue: strictly absolute at bottom center */
    .hero-scroll-cue {
        position: absolute !important;
        bottom: 1.25rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 5 !important;
        display: inline-flex !important;
        white-space: nowrap !important;
        padding: 6px 14px !important;
    }

    .hero-scroll-cue-text {
        font-size: 0.65rem !important;
        letter-spacing: 0.1em !important;
    }
}

@media (max-width: 400px) {
    .hero-kpi-card {
        grid-template-columns: 80px 1fr !important;
        gap: 0 0.6rem !important;
    }
    .kpi-value {
        font-size: 1.15rem !important;
    }
    .hero-scroll-cue {
        padding: 5px 12px !important;
    }
}