/* ============================================================
   INTELIZEST — FULLY FLUID RESPONSIVE (MERGED FINAL)
   File: intelizest-fullfix-merged.css
   Version: 4.0 FINAL

   Merged from:
   - intelizest-fullfix.css (v3.0)
   - intelizest-screenfit.css

   PHILOSOPHY — ZERO hardcoded max-widths anywhere.
   Uses only %, vw, cqw, clamp(), fr so it scales to every
   screen automatically: mobile → tablet → laptop → 21" →
   27" → 4K → 8K → TV.
   ============================================================ */


/* ============================================================
   0. BASE RESET
   ============================================================ */

html {
    font-size:       16px !important;
    scroll-behavior: smooth;
    width:           100%;
    max-width:       100%;
}

html, body {
    margin:  0 !important;
    padding: 0 !important;
}

body {
    width:      100%;
    max-width:  100%;
    margin:     0;
    padding:    0;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

video,
canvas,
svg,
iframe {
    max-width: 100%;
}


/* ============================================================
   1. SECTION PADDING — scales proportionally on all screens
   ============================================================ */

body section,
body nav,
body footer,
body .hero,
body .page-hero,
body .cta-section,
body .ai-section,
body .customers-section,
body .industries-section,
body .products-section,
body .investor-section,
body .contact-section,
body .about-section,
body .solutions-section,
body .features-section,
body .overview-section,
body .why-section,
body .benefits-section,
body .demo-section,
#iz-p1 .hero,
#iz-p1 > div[style*="padding:0 5rem"] {
    padding-left:  clamp(12px, 2vw, 40px) !important;
    padding-right: clamp(12px, 2vw, 40px) !important;
    box-sizing:    border-box              !important;
}

#iz-p1 .hero,
body .hero {
    padding-top:    clamp(5.5rem, 8vh, 10rem) !important;
    padding-bottom: clamp(3rem, 5vh, 5rem)    !important;
    overflow:       hidden                     !important;
    box-sizing:     border-box                 !important;
}

#iz-p1 > div[style*="padding:0 5rem"] {
    padding-bottom: clamp(2.5rem, 4vh, 5rem) !important;
}

body .customers-section {
    max-width:      none                       !important;
    margin:         0                          !important;
    padding-top:    clamp(3rem, 5vh, 5rem)     !important;
    padding-bottom: clamp(2.5rem, 4vh, 4rem)   !important;
}


/* ============================================================
   2. ALL INNER CONTAINERS — 100% width, NO max-width cap
   ============================================================ */
/* 
body .customers-section,
body .hero-content,
body .hero-two-col,
body .hero-metrics,
body .ai-inner,
body .prod-layout,
body .industry-detail,
body .inv-grid,
body .inv-inner,
body .footer-grid,
body .footer-bottom,
body .prod-tabs,
body .prod-panel,
body .logo-scroll-wrap,
body .industries-scroll,
body .section-sub,
body .section-title,
body .section-tag,
body .carousel-shell,
body .carousel-viewport,
body .carousel-outer,
body .logo-grid,
body .customers-grid,
body .page-hero > *,
body .cta-section > *,
body section > .container,
body section > .wrapper,
body section > .inner,
#iz-p1 > div,
#iz-p1 > div > div,
#iz-p1 > div[style*="padding:0 5rem"] > div,
#iz-p1 > div[style*="padding:0 5rem"] > div > div {
    width:        100%       !important;
    max-width:    none       !important;
    margin-left:  0          !important;
    margin-right: 0          !important;
    box-sizing:   border-box !important;
} */


/* ============================================================
   3. HERO TWO-COLUMN LAYOUT
   ============================================================ */

body .hero .hero-two-col,
.hero-two-col {
    display:         flex                      !important;
    align-items:     center                    !important;
    justify-content: space-between             !important;
    gap:             clamp(16px, 3vw, 48px)    !important;
    width:           100%                      !important;
    flex-wrap:       nowrap                    !important;
}

/* Text column — grabs ALL remaining space */
body .hero .hero-content,
.hero .hero-content,
.hero-content {
    flex:           1 1 0        !important;
    min-width:      0            !important;
    max-width:      none         !important;
    width:          auto         !important;
    overflow:       visible      !important;
    box-sizing:     border-box   !important;
    position:       relative     !important;
    z-index:        1            !important;
    container-type: inline-size  !important;
    container-name: hero-content !important;
}

/* Image column — always 40% of row, scales on every screen */
body .hero .hero-img-col,
.hero .hero-img-col,
.hero-img-col {
    flex-shrink:     0                      !important;
    flex-grow:       0                      !important;
    flex-basis:      40%                    !important;
    width:           40%                    !important;
    max-width:       40%                    !important;
    min-width:       320px                  !important;
    display:         flex                   !important;
    align-items:     center                 !important;
    justify-content: center                 !important;
    box-sizing:      border-box             !important;
}

/* Carousel fills the 40% column always */
body .hero .hero-img-carousel,
.hero-img-carousel {
    width:         100%     !important;
    height:        auto     !important;
    aspect-ratio:  16 / 9   !important;
    min-height:    unset    !important;
    max-width:     none     !important;
    border-radius: 16px     !important;
    overflow:      hidden   !important;
    position:      relative !important;
    box-shadow:    0 20px 60px rgba(0,0,0,0.18) !important;
}

body .hero .hic-slide {
    position: absolute !important;
    inset:    0        !important;
}

body .hero .hic-slide img {
    width:         100%  !important;
    height:        100%  !important;
    object-fit:    cover !important;
    border-radius: 16px  !important;
    display:       block !important;
}


/* ============================================================
   4. HERO TYPOGRAPHY
   cqw = % of the text column width (NOT viewport).
   As screen grows → text column grows → font grows.
   Works on 13" laptop, 27" monitor, 4K TV, any future screen.
   ============================================================ */

body .hero h1 {
    font-size:      clamp(2rem, 4.2vw, 5.2rem) !important;
    line-height:    1.04                        !important;
    letter-spacing: -.04em                      !important;
    white-space:    normal                      !important;
    overflow-wrap:  anywhere                    !important;
    word-break:     normal                      !important;
    margin-bottom:  1.5rem                      !important;
}

body .hero h1 .hero-line {
    display:     block  !important;
    white-space: normal !important;
}

body .hero h1 .accent-green {
    display:     inline !important;
    white-space: nowrap !important;
}

body .hero h1 .accent-outline {
    display:     block  !important;
    white-space: normal !important;
}

body .hero .hero-sub {
    font-size:   clamp(0.95rem, 1.15vw, 1.35rem) !important;
    max-width:   none                             !important;
    line-height: 1.7                              !important;
}

body .hero .hero-badge {
    font-size: clamp(0.68rem, 0.8vw, 0.95rem) !important;
}

body .hero .hero-actions {
    display:   flex  !important;
    gap:       1rem  !important;
    flex-wrap: wrap  !important;
}


/* ============================================================
   5. HERO METRICS BAR
   ============================================================ */

body .hero-metrics {
    display:    flex                           !important;
    flex-wrap:  wrap                           !important;
    gap:        0                              !important;
    margin-top: 3rem                           !important;
    border-top: 1.5px solid var(--border)     !important;
    width:      100%                           !important;
    max-width:  none                           !important;
}

body .metric,
.metric {
    flex:         1 1 0                              !important;
    min-width:    0                                  !important;
    padding:      clamp(1rem, 1.8vw, 1.8rem)
                  clamp(12px, 1.6vw, 24px)           !important;
    border-right: 1.5px solid var(--border)          !important;
    box-sizing:   border-box                         !important;
}

body .metric:last-child,
.metric:last-child {
    border-right: none !important;
}

body .metric-val,
.metric-val {
    /* font-size: clamp(1.5rem, 2vw, 3.5rem) !important; */
    font-size: clamp(1.8rem, 2.5vw, 5rem) !important;
}

body .metric-label,
.metric-label {
    font-size: clamp(0.75rem, 0.9vw, 1.1rem) !important;
}


/* ============================================================
   6. BRAND BLOCK (canvas + text side by side)
   ============================================================ */

#iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] {
    display:    flex                         !important;
    align-items: center                      !important;
    gap:        clamp(16px, 3vw, 48px)       !important;
    flex-wrap:  nowrap                       !important;
    width:      100%                         !important;
    box-sizing: border-box                   !important;
}

/* Canvas column — 35% */
#iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:first-child {
    flex-shrink: 0   !important;
    flex-grow:   0   !important;
    flex-basis:  35% !important;
    width:       35% !important;
    max-width:   35% !important;
}

/* Text column — rest of space */
#iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:last-child {
    flex:           1 1 0      !important;
    min-width:      0          !important;
    max-width:      none       !important;
    container-type: inline-size;
    container-name: brand-text;
}

#iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:last-child > p {
    max-width: none !important;
}

#iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:last-child h3 {
    font-size:   clamp(1.6rem, 3vw, 4rem) !important;
    line-height: 1.15                     !important;
    white-space: normal                   !important;
}


/* ============================================================
   7. SECTION TITLES — vw based, scales on all screens
   ============================================================ */

body .section-title {
    font-size: 18px !important;
    max-width: none!important;
    font-weight: 600;
}

body .section-sub {
    font-size: clamp(0.95rem, 1.05vw, 1.4rem) !important;
    max-width: none                            !important;
}

body .section-tag {
    font-size: clamp(0.65rem, 0.8vw, 1rem) !important;
}


/* ============================================================
   8. AI SECTION
   ============================================================ */

body .ai-section {
    padding-top:    clamp(4rem, 7vh, 8rem) !important;
    padding-bottom: clamp(4rem, 7vh, 8rem) !important;
}

body .ai-inner {
    display:               grid                    !important;
    grid-template-columns: 55% 45%                 !important;
    gap:                   clamp(16px, 3vw, 48px)  !important;
    align-items:           center                  !important;
    width:                 100%                    !important;
}

body .ai-inner > div:first-child {
    width:          100%         !important;
    max-width:      none         !important;
    min-width:      0            !important;
    container-type: inline-size;
    container-name: ai-left;
}

body .ai-inner > div:last-child {
    min-width: 0 !important;
}

/* body .ai-title {
    font-size:   clamp(1.6rem, 2.5vw, 3.5rem) !important;
    line-height: 1.05                          !important;
    white-space: normal                        !important;
} */

body .ai-desc {
    font-size: clamp(0.9rem, 1vw, 1.2rem) !important;
}

body .ai-pillar h4 {
    font-size: clamp(1rem, 1.2vw, 1.8rem) !important;
}

body .ai-pillar p {
    font-size: clamp(0.9rem, 1vw, 1.2rem) !important;
}

.ai-nodes {
    width:  clamp(220px, 28vw, 560px) !important;
    height: clamp(220px, 28vw, 560px) !important;
}

.ai-visual {
    min-height: clamp(280px, 32vw, 720px) !important;
}


/* ============================================================
   9. PRODUCT SECTION
   ============================================================ */

body .prod-layout {
    display:               grid                   !important;
    grid-template-columns: 57% 43%                !important;
    gap:                   clamp(16px, 3vw, 48px) !important;
    align-items:           start                  !important;
    width:                 100%                   !important;
}

body .prod-layout > div:first-child {
    width:     100% !important;
    max-width: none !important;
    min-width: 0    !important;
}

body .prod-visual {
    width:     100% !important;
    max-width: none !important;
    min-width: 0    !important;
}

body .prod-tabs {
    display:   flex  !important;
    gap:       .4rem !important;
    flex-wrap: wrap  !important;
    width:     100%  !important;
}

body .prod-tab img {
    max-height: clamp(16px, 1.5vw, 36px) !important;
    width:      auto                      !important;
    object-fit: contain                   !important;
}

body .prod-name {
    font-size: clamp(1.6rem, 2.5vw, 3.5rem) !important;
}

body .prod-tagline {
    font-size: clamp(0.9rem, 1vw, 1.2rem) !important;
    max-width: none                        !important;
}

body .mod-body h5 {
    font-size: clamp(1rem, 1.2vw, 1.8rem) !important;
}

body .mod-body p {
    font-size: clamp(0.9rem, 1vw, 1.2rem) !important;
}

body .pstat-val,
body .istat-val {
    font-size: clamp(1.2rem, 1.6vw, 2.6rem) !important;
}

body .pstat-label,
body .istat-label {
    font-size: clamp(0.7rem, 0.8vw, 1rem) !important;
}


/* ============================================================
   10. INDUSTRY SECTION
   ============================================================ */

body .industry-detail {
    width:      100%       !important;
    max-width:  none       !important;
    margin-top: 2.2rem     !important;
    box-sizing: border-box !important;
}

body .industry-detail h3 {
    font-size: clamp(1.6rem, 2.5vw, 3.5rem) !important;
}

body .industry-detail p {
    font-size: clamp(0.9rem, 1vw, 1.2rem) !important;
}

body .istat-val {
    font-size: clamp(1.4rem, 2vw, 3.5rem) !important;
}

body .istat-label {
    font-size: clamp(0.65rem, 0.8vw, 1rem) !important;
}

body .industries-scroll {
    display:         flex   !important;
    gap:             .65rem !important;
    overflow-x:      auto   !important;
    padding-bottom:  .5rem  !important;
    scrollbar-width: none   !important;
    width:           100%   !important;
    margin-top:      2.2rem !important;
}

body .industries-scroll::-webkit-scrollbar {
    display: none !important;
}

body .ind-chip {
    font-size:   clamp(0.75rem, 0.9vw, 1.1rem) !important;
    white-space: nowrap                          !important;
}


/* ============================================================
   11. INVESTOR SECTION
   ============================================================ */

body .inv-inner {
    width:     100% !important;
    max-width: none !important;
}

body .inv-grid {
    display:               grid    !important;
    grid-template-columns: 50% 50% !important;
    gap:                   4vw     !important;
    align-items:           start   !important;
    width:                 100%    !important;
    margin-top:            3.5rem  !important;
}

body .inv-metrics {
    display:               grid    !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   1rem    !important;
}

body .inv-metric-val {
    font-size: clamp(1.5rem, 2.5vw, 5rem) !important;
}

body .inv-metric-label {
    font-size: clamp(0.7rem, 0.9vw, 1.2rem) !important;
}

body .inv-desc {
    font-size: clamp(0.88rem, 1.1vw, 1.5rem) !important;
}

body .inv-list li {
    font-size: clamp(0.85rem, 1vw, 1.3rem) !important;
}


/* ============================================================
   12. CTA SECTION
   ============================================================ */

body .cta-section {
    text-align: center !important;
}

body .cta-section h2 {
    font-size: clamp(2rem, 3.5vw, 6rem) !important;
}

body .cta-section p {
    font-size: clamp(1rem, 1.4vw, 2rem) !important;
}


/* ============================================================
   13. FOOTER
   ============================================================ */

body .footer-grid {
    display:               grid                !important;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
    gap:                   2.5vw               !important;
    width:                 100%                !important;
    margin-bottom:         3.5rem              !important;
}

body .footer-bottom {
    width:     100% !important;
    max-width: none !important;
}

body .footer-brand p,
body .footer-brand address {
    font-size: clamp(0.75rem, 0.9vw, 1.1rem) !important;
}

body .footer-col a,
body .footer-col span {
    font-size: clamp(0.75rem, 0.9vw, 1.1rem) !important;
}


/* ============================================================
   14. LOGO SCROLL STRIP
   ============================================================ */

.logo-scroll-wrap {
    overflow: hidden !important;
    width:    100%   !important;
}

.logo-scroll-track {
    display:        flex        !important;
    flex-direction: row         !important;
    flex-wrap:      nowrap      !important;
    align-items:    center      !important;
    width:          max-content !important;
    gap:            2.5vw       !important;
    animation:      logoScroll 40s linear infinite !important;
}

.logo-scroll-track:hover {
    animation-play-state: paused !important;
}

.logo-scroll-item {
    flex:            0 0 auto !important;
    width:           12vw      !important;
    height:          5.5vw    !important;
    min-width:       90px     !important;
    min-height:      62px     !important;
    padding:         0.8vw    !important;
    display:         flex     !important;
    align-items:     center   !important;
    justify-content: center   !important;
}

.logo-scroll-item img {
    width:      100%    !important;
    height:     100%    !important;
    object-fit: contain !important;
    display:    block   !important;
}


/* ============================================================
   15. REVEAL — always visible
   ============================================================ */

.reveal {
    opacity:    1    !important;
    transform:  none !important;
    transition: none !important;
}


/* ============================================================
   16. PAGEPILING LAYOUT
   ============================================================ */

#iz-pagepiling {
    width:  100% !important;
    height: 100% !important;
}

.iz-section {
    position: relative !important;
    width:    100%     !important;
    display:  block    !important;
    clear:    both     !important;
}

#iz-p1 {
    display:       flow-root         !important;
    margin-bottom: 2rem              !important;
    background:    var(--bg,#f0f2f8) !important;
    position:      relative          !important;
    z-index:       2                 !important;
}

#iz-p2 {
    background:  #0e1547  !important;
    margin-top:  0        !important;
    padding-top: 4rem     !important;
    position:    relative !important;
    z-index:     1        !important;
}

#iz-p3 { background: var(--bg, #f0f2f8) !important; }
#iz-p4 { background: var(--bg, #f0f2f8) !important; }
#iz-p5 { background: var(--bg, #f0f2f8) !important; }

#iz-p1 .hero {
    min-height: 100vh !important;
    padding-top: 6rem !important;
}

#iz-p2 .ai-section {
    min-height: 100vh !important;
    width:      100%  !important;
}


/* ============================================================
   17. CANVAS
   ============================================================ */

#c {
    width:   100%  !important;
    display: block !important;
}


/* ============================================================
   18. MOBILE NAV TOGGLE
   ============================================================ */

.iz-mobile-toggle {
    display: none !important;
}

@media (max-width: 960px) {
    .iz-mobile-toggle {
        display:         flex    !important;
        align-items:     center  !important;
        justify-content: center  !important;
        background:      none    !important;
        border:          none    !important;
        cursor:          pointer !important;
        padding:         .5rem   !important;
    }

    .nav-links {
        display: none !important;
    }
}


/* ============================================================
   19. FIXED WIDGETS
   ============================================================ */

.iz-progress-wrap {
    position: fixed   !important;
    right:    1.5rem  !important;
    bottom:   9rem    !important;
    z-index:  7999    !important;
    width:    36px    !important;
    height:   36px    !important;
    cursor:   pointer !important;
}

.theme-switcher {
    position:       fixed    !important;
    bottom:         2rem     !important;
    right:          2rem     !important;
    z-index:        500      !important;
    display:        flex     !important;
    flex-direction: column   !important;
    gap:            .5rem    !important;
    align-items:    flex-end !important;
}


/* ============================================================
   20. CUSTOMERS PAGE — vh-100 gap fix
   ============================================================ */

section.hero,
section#customer_success,
section#new_customer_enrollment,
section#referral_programs,
section#we_value_your_views {
    height:     auto  !important;
    min-height: unset !important;
}


/* ============================================================
   21. LARGE SCREEN — prevent giant side margins on 4K / TV
   ============================================================ */

@media (min-width: 1600px) {
    body section,
    body nav,
    body footer,
    body .hero,
    body .page-hero,
    body .cta-section,
    body .ai-section,
    body .customers-section,
    #iz-p1 .hero,
    #iz-p1 > div[style*="padding:0 5rem"] {
        padding-left:  clamp(16px, 1.5vw, 36px) !important;
        padding-right: clamp(16px, 1.5vw, 36px) !important;
    }
}

@media (min-width: 2400px) {
    body section,
    body nav,
    body footer,
    body .hero,
    body .page-hero,
    body .cta-section,
    body .ai-section,
    body .customers-section,
    #iz-p1 .hero,
    #iz-p1 > div[style*="padding:0 5rem"] {
        padding-left:  24px !important;
        padding-right: 24px !important;
    }
}


/* ============================================================
   22. TABLET — 960px and below
   ============================================================ */

@media (max-width: 960px) {

    body nav,
    body section,
    body .hero,
    body .page-hero,
    body footer,
    body .cta-section,
    body .ai-section,
    body .customers-section,
    #iz-p1 .hero,
    #iz-p1 > div[style*="padding:0 5rem"] {
        padding-left:  1.2rem !important;
        padding-right: 1.2rem !important;
    }

    /* Hero stack vertically */
    body .hero .hero-two-col,
    .hero-two-col,
    body .ai-inner,
    body .prod-layout,
    body .inv-grid,
    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] {
        display:               flex   !important;
        flex-direction:        column !important;
        grid-template-columns: 1fr   !important;
    }

    body .hero .hero-img-col,
    .hero-img-col,
    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:first-child,
    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:last-child {
        width:      100% !important;
        max-width:  100% !important;
        min-width:  0    !important;
        flex-basis: auto !important;
    }

    body .hero .hero-img-col {
        margin-top:      2rem   !important;
        justify-content: center !important;
    }

    body .hero .hero-img-carousel {
        width:        90%    !important;
        max-width:    100%   !important;
        margin:       0 auto !important;
        aspect-ratio: 16/9   !important;
        height:       auto   !important;
    }

    body .hero h1 {
        font-size: clamp(2rem, 7vw, 4rem) !important;
    }

    body .hero h1 .hero-line,
    body .hero h1 .accent-outline {
        white-space: normal !important;
    }

    body .hero .hero-sub {
        font-size: clamp(0.95rem, 2vw, 1.2rem) !important;
    }

    /* Brand block stack */
    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    body .prod-visual {
        position:  static !important;
        max-width: 100%   !important;
    }

    /* Footer 3 col */
    body .footer-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap:                   1.5rem      !important;
    }

    /* Metrics */
    body .hero-metrics {
        flex-direction: column !important;
        margin-top:     2.5rem !important;
    }

    body .metric,
    .metric {
        min-width:     calc(50% - 1px)           !important;
        border-right:  none                      !important;
        border-bottom: 1.5px solid var(--border) !important;
    }

    body .metric:last-child,
    .metric:last-child {
        border-bottom: none !important;
    }

    /* AI visual */
    .ai-visual { min-height: 280px !important; }
    .ai-nodes  { width: 52vw !important; height: 52vw !important; }
}


/* ============================================================
   23. MOBILE — 768px and below
   ============================================================ */

@media (max-width: 768px) {

    body section,
    body nav,
    body footer,
    body .hero,
    body .page-hero,
    body .cta-section,
    body .ai-section,
    body .customers-section,
    #iz-p1 .hero,
    #iz-p1 > div[style*="padding:0 5rem"] {
        padding-left:  5vw !important;
        padding-right: 5vw !important;
    }

    body .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap:                   1.2rem  !important;
    }

    body .footer-bottom {
        flex-direction: column !important;
        gap:            1rem   !important;
        text-align:     center !important;
    }

    /* Brand block stack */
    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] {
        flex-direction: column !important;
        gap:            1.5rem !important;
        padding:        1.5rem !important;
    }

    .ai-visual  { min-height: 240px !important; }
    .ai-nodes   { width: 55vw !important; height: 55vw !important; }

    body .inv-metrics {
        grid-template-columns: 1fr 1fr !important;
    }

    .theme-switcher {
        bottom: .7rem !important;
        right:  .7rem !important;
    }
}


/* ============================================================
   24. MOBILE — 600px and below
   ============================================================ */

@media (max-width: 600px) {

    body nav,
    body section,
    body .hero,
    body .page-hero,
    body footer,
    body .cta-section,
    body .ai-section,
    body .customers-section,
    #iz-p1 .hero,
    #iz-p1 > div[style*="padding:0 5rem"] {
        padding-left:  1rem !important;
        padding-right: 1rem !important;
    }

    body .hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    }

    body .hero .hero-sub,
    body .section-sub,
    body .ai-desc,
    body .prod-tagline,
    body .industry-detail p {
        font-size: 0.95rem !important;
    }

    body .section-title,
    /* body .ai-title, */
    body .prod-name,
    body .industry-detail h3 {
        font-size: clamp(1.5rem, 7vw, 2.3rem) !important;
    }

    body .hero-actions {
        flex-direction: column !important;
    }

    body .hero-actions a,
    body .hero-actions button {
        width:      100%   !important;
        text-align: center !important;
    }

    body .hero-metrics {
        flex-direction: column !important;
    }

    body .metric,
    .metric {
        width:         100%                      !important;
        border-right:  none                      !important;
        border-bottom: 1.5px solid var(--border) !important;
    }

    body .metric:last-child,
    .metric:last-child {
        border-bottom: none !important;
    }

    body .prod-stats,
    body .industry-stats,
    body .inv-metrics,
    body .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .reg-popup {
        width:      95%  !important;
        max-height: 92vh !important;
    }

    .iz-form-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   25. SMALL MOBILE — 480px and below
   ============================================================ */

@media (max-width: 480px) {

    body section,
    body nav,
    body .hero {
        padding-left:  5vw !important;
        padding-right: 5vw !important;
        padding-top:24px !important;
    }

    body .footer-grid {
        grid-template-columns: 1fr !important;
    }

    body .prod-stats,
    body .inv-metrics {
        grid-template-columns: 1fr 1fr !important;
    }
}