/* ============================================================
   INTELIZEST — FULLY FLUID RESPONSIVE
   File: intelizest-fullfix.css
   Version: 3.0 FINAL

   PHILOSOPHY — ZERO hardcoded max-widths anywhere.
   Uses only %, vw, cqw, fr so it scales to every screen
   automatically: 13" laptop → 21" → 27" → 4K → 8K → TV.
   Client will never see left/right margins again.
   ============================================================ */


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

html {
    font-size: 16px !important;
}


/* ============================================================
   1. SECTION PADDING — vw so it scales proportionally
   ============================================================ */

body section,
body .ai-section,
body .cta-section,
body footer,
body nav {
    padding-left:  4vw        !important;
    padding-right: 4vw        !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;
    padding-left:   4vw                        !important;
    padding-right:  4vw                        !important;
    overflow:       hidden                     !important;
    box-sizing:     border-box                 !important;
}

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


/* ============================================================
   2. ALL INNER CONTAINERS — 100% width, NO max-width cap
   ============================================================ */

body .hero .hero-two-col,
body .hero .hero-metrics,
body .prod-tabs,
body .prod-panel,
body .industries-scroll,
body .industry-detail,
body .logo-scroll-wrap,
body .inv-inner,
body .footer-grid,
body .footer-bottom,
body .ai-inner,
body .prod-layout,
body .inv-grid,
body .section-title,
body .section-tag,
body .section-sub,
body .cta-section > * {
    max-width:    none       !important;
    width:        100%       !important;
    margin-left:  0          !important;
    margin-right: 0          !important;
    box-sizing:   border-box !important;
}

#iz-p1 > div[style*="padding:0 5rem"] > div {
    max-width:  none       !important;
    width:      100%       !important;
    margin:     0          !important;
    box-sizing: border-box !important;
}


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

body .hero .hero-two-col {
    display:     flex   !important;
    align-items: center !important;
    gap:         3vw    !important;
    flex-wrap:   nowrap !important;
    width:       100%   !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;
    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 {
    flex-shrink:     0          !important;
    flex-grow:       0          !important;
    flex-basis:      40%        !important;
    width:           40%        !important;
    max-width:       40%        !important;
    display:         flex       !important;
    align-items:     center     !important;
    box-sizing:      border-box !important;
}

/* Carousel fills the 40% column always */
body .hero .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:      8cqw   !important;
    line-height:    1.04   !important;
    letter-spacing: -.04em !important;
    white-space:    normal !important;
    overflow-wrap:  normal !important;
    word-break:     normal !important;
    margin-bottom:  1.5rem !important;
}

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

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

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

body .hero .hero-sub {
    font-size:   18px  !important;
    max-width:   none  !important;
    line-height: 1.7   !important;
}

body .hero .hero-badge {
    /* font-size: 1.1cqw !important; */
        font-size: 1.7cqw !important;

}

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

/* Tablet floor */
@media (max-width: 960px) {
    body .hero h1        { font-size: clamp(2rem,    7vw, 4rem)    !important; }
    body .hero .hero-sub { font-size: clamp(0.95rem, 2vw, 1.2rem)  !important; }
    body .hero .hero-badge { font-size: clamp(0.65rem, 1.5vw, 0.85rem) !important; }
}

/* Mobile floor */
@media (max-width: 640px) {
    body .hero h1        { font-size: clamp(1.8rem, 8vw, 2.8rem)  !important; }
    body .hero .hero-sub { font-size: clamp(0.88rem, 4vw, 1rem)   !important; }
}


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

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

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

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

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

.metric-label {
    font-size: clamp(0.75rem, 1vw, 1.4rem) !important;
}


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

#iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] {
    gap:        3vw        !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:   4cqw   !important;
    line-height: 1.15   !important;
    white-space: normal !important;
}


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

/* body .section-title {
    font-size: clamp(1.9rem, 3vw, 6rem) !important;
} */

body .section-sub {
    font-size:18px !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;
    padding-left:   4vw                    !important;
    padding-right:  4vw                    !important;
}

body .ai-inner {
    display:               grid    !important;
    grid-template-columns: 55% 45% !important;
    gap:                   3vw     !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:   4cqw   !important;
    line-height: 1.05   !important;
    white-space: normal !important;
} */
/* 
body .ai-desc {
    font-size: clamp(0.9rem, 1.1vw, 1.4rem) !important;
} */

/* body .ai-pillar h4 {
    font-size: clamp(1rem, 1.4vw, 2rem) !important;
} */

/* body .ai-pillar p {
    font-size: clamp(0.85rem, 1vw, 1.3rem) !important;
} */

/* .ai-nodes {
    width:  28vw !important;
    height: 28vw !important;
}

.ai-visual {
    min-height: 32vw !important;
} */


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

body .prod-layout {
    display:               grid    !important;
    grid-template-columns: 57% 43% !important;
    gap:                   3vw     !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: 2.4rem !important;
    flex-wrap: wrap;
    width: 100% !important;
    justify-content: center;
    align-items: center;
}

/* 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(2rem, 3.5vw, 6rem) !important;
} */

/* body .prod-tagline {
    font-size: clamp(0.9rem, 1.1vw, 1.4rem) !important;
    max-width: none                           !important;
} */

/* body .mod-body h5 {
    font-size: clamp(0.9rem, 1.4vw, 2rem) !important;
} */

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

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

body .pstat-label {
    font-size: clamp(0.65rem, 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.3rem, 2vw, 3rem) !important;
} */

/* body .industry-detail p {
    font-size: clamp(0.88rem, 1.1vw, 1.4rem) !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:           7vw      !important;
    height:          5vw      !important;
    min-width:       80px     !important;
    min-height:      55px     !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
   ============================================================ */

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

/*
#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: 0     !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. TABLET — 960px and below
   ============================================================ */

@media (max-width: 960px) {

    /* Hero stack vertically */
    body .hero .hero-two-col {
        flex-direction: column  !important;
        align-items:    stretch !important;
    }

    body .hero .hero-img-col {
        flex:            none   !important;
        width:           100%   !important;
        max-width:       100%   !important;
        flex-basis:      auto   !important;
        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 .hero-line,
    body .hero h1 .accent-outline {
        white-space: normal !important;
    }

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

    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:first-child {
        flex-basis: 100% !important;
        width:      100% !important;
        max-width:  100% !important;
    }

    /* All grids to single column */
    body .prod-layout,
    body .ai-inner,
    body .inv-grid,
    body .industry-detail {
        grid-template-columns: 1fr !important;
        gap:                   2rem !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 vertical */
    body .hero-metrics {
        flex-direction: column !important;
        margin-top:     2.5rem !important;
    }

    .metric {
        border-right:  none                      !important;
        border-bottom: 1.5px solid var(--border) !important;
    }

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

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


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

@media (max-width: 768px) {

    body section,
    body .ai-section,
    body .cta-section,
    body footer,
    body nav,
    #iz-p1 .hero,
    body .hero {
        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;
    }

    #iz-p1 > div[style*="padding:0 5rem"] > div > div[style*="display:flex"] > div:first-child {
        flex-basis: 100% !important;
        width:      100% !important;
        max-width:  100% !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;
    }
}


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

@media (max-width: 480px) {

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

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

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


/* ============================================================
   23. POPUP / FORM
   ============================================================ */

@media (max-width: 600px) {
    .reg-popup {
        width:      95%  !important;
        max-height: 92vh !important;
    }

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