/* ============================================================
   INTELIZEST — COMBINED STYLESHEET
   Extracted from webinarregistration.aspx <style> blocks
   ============================================================ */


/* ══════════════════════════════════════════
   1. MOBILE NAV FIXES
   ══════════════════════════════════════════ */

html, body {
    width: 100%;
    overflow-x: hidden;
}

   @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

   

@media(max-width:960px) {
    .nav-links {
        display: none !important;
    }

    .iz-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: .4rem;
    }

    nav {
        padding: .85rem 1.2rem;
    }
}

/* ── Hero responsive ── */
@media(max-width:768px) {
    .hero {
        padding: 7rem 1.2rem 3rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .hero-sub {
        font-size: .92rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions a {
        text-align: center;
    }

    .hero-metrics {
        flex-direction: column;
    }

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

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

/* ── Hero brand strip responsive ── */
@media(max-width:768px) {
    #iz-p1>div[style*="padding:0 5rem"] {
        padding: 0 1rem 2.5rem !important;
    }

    #iz-p1>div>div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 1.5rem !important;
    }

    #iz-p1>div>div>div[style*="width:min(50%"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Section padding mobile ── */
@media(max-width:768px) {
    section {
        padding: 3.5rem 1.2rem;
    }

    .page-hero {
        padding: 7rem 1.2rem 2.5rem;
    }

    .cta-section {
        padding: 4rem 1.2rem;
    }

    footer {
        padding: 3rem 1.2rem 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

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

/* ── AI section mobile ── */
@media(max-width:768px) {
    .ai-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ai-visual {
        height: 280px;
    }

    .ai-nodes {
        width: 220px;
        height: 220px;
    }
}

/* ── Products mobile ── */
@media(max-width:768px) {
    .prod-layout {
        grid-template-columns: 1fr;
    }

    .prod-visual {
        position: static;
    }

    .prod-tabs {
        gap: .3rem;
    }

    .prod-tab {
        font-size: .7rem;
        padding: .4rem .75rem;
    }

    .prod-tab img {
        height: 16px;
    }

    .prod-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Industry detail mobile ── */
@media(max-width:768px) {
    .industry-detail {
        grid-template-columns: 1fr;
    }

    .industry-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Investor section mobile ── */
@media(max-width:768px) {
    .inv-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

/* ── Customers grid mobile ── */
@media(max-width:600px) {
    .customers-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .customer-logo img {
        max-width: 70px;
        object-fit: contain;
    }
}

/* ── Popup mobile ── */
@media(max-width:600px) {
    .reg-popup {
        width: 95%;
        max-height: 92vh;
    }

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

/* ── Theme switcher mobile ── */
@media(max-width:600px) {
    .theme-switcher {
        bottom: .7rem;
        right: .7rem;
    }
}

/* ── Canvas responsive ── */

/* ── Hero two-col layout ── */
.hero-two-col {
    display: flex;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
    width: 100%;
}


@media(max-width:960px) {
    .hero-two-col {
        flex-direction: column;
    }
}

@media (min-width: 1440px) {
    .hero-content {
        max-width: 900px;
    }
}

/* ── Popup overlay ── */
.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    backdrop-filter: blur(3px);
}

/* .reg-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
} */


/* .reg-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(92vw, 800px);
    height: 90vh !important;

    overflow-y: auto;

    background: #fff;
    border-radius: 18px;
    padding: 20px;
} */

/* new */

.reg-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(92vw, 800px);

    height: fit-content;        /* 92vh desktop → no scroll */
    max-height: 100vh !important;
    overflow: hidden;    /* remove scroll */

    background: #fff;
    border-radius: 18px;
    padding: 20px;
}
@media (max-width: 768px) {
    .reg-popup {
        max-height: 90vh;
        overflow-y: auto;   /* enable scroll only on small screens */
    }
}
body.popup-open {
    overflow: hidden;
}


/*  */



.popup-overlay.active,
.reg-popup.active {
    display: block;
}

/* ── Section tag / title / sub ── */
.section-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-light);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 1rem;
}

/* .section-title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .6rem;
    line-height: 1.25;
} */

.section-sub {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* ── Carousel outer ── */
.carousel-outer {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--white);
}

.carousel-track {
    display: flex;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
}

/* ── Logo grid ── */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 18px;
    height: 118px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background .18s;
}

.logo-cell:hover {
    background: var(--accent-light);
}

.logo-cell:nth-child(6n) {
    border-right: none;
}

.logo-cell:nth-last-child(-n+6) {
    border-bottom: none;
}

.logo-cell img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(.6);
    transition: filter .25s;
}

.logo-cell:hover img {
    filter: grayscale(0) opacity(1);
}

/* ── Progress bar ── */
.cs-progress {
    height: 3px;
    background: var(--border);
    overflow: hidden;
}

.cs-progress-bar {
    height: 100%;
    background: var(--accent);
    width: 25%;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    transform-origin: left center;
}

/* ── Carousel controls ── */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 1.4rem;
}

.cs-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-primary);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, transform .1s;
    line-height: 1;
    font-family: var(--font);
}

.cs-btn:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.cs-btn:active {
    transform: scale(.93);
}

.cs-dots {
    display: flex;
    gap: 7px;
    align-items: center;
}

.cs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.cs-dot.active {
    background: var(--accent);
    transform: scale(1.35);
}

/* ── Logo grid responsive ── */
@media (max-width: 900px) {
    .logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .logo-cell:nth-child(6n) {
        border-right: 1px solid var(--border);
    }

    .logo-cell:nth-child(4n) {
        border-right: none;
    }

    .logo-cell:nth-last-child(-n+6) {
        border-bottom: 1px solid var(--border);
    }

    .logo-cell:nth-last-child(-n+4) {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .logo-cell:nth-child(4n) {
        border-right: 1px solid var(--border);
    }

    .logo-cell:nth-child(3n) {
        border-right: none;
    }

    .logo-cell:nth-last-child(-n+4) {
        border-bottom: 1px solid var(--border);
    }

    .logo-cell:nth-last-child(-n+3) {
        border-bottom: none;
    }

    .logo-cell {
        height: 88px;
        padding: 14px 10px;
    }

    .logo-cell img {
        max-height: 38px;
    }
}

/* ── Customers section ── */
.customers-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 40px;
}

.carousel-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-viewport {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #d0d5e8;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    color: #555;
}

.nav-btn:hover {
    background: #4f6ef7;
    border-color: #4f6ef7;
    color: #fff;
    transform: scale(1.08);
}

.cust-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d5e8;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.cust-dot.active {
    background: #4f6ef7;
    transform: scale(1.3);
}

.cust-page-label {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: #aaa;
    font-weight: 500;
}


/* ============================================================
   2. THEME TOKENS
   ============================================================ */
[data-theme="indigo"] {
    --bg: #f0f2f8;
    --bg2: #e8ebf5;
    --bg3: #dde1f0;
    /* --ink: #0b1340; */
        --ink: #000;

    --ink2: #1e2d6b;
    /* --muted: #5a6490; */
        --muted: #000;

    --border: #d0d5e8;
    --card: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.92);
    /* --hero-text: #0b1340; */
        --hero-text: #000;

    --outline-stroke: #0b1340;
    --accent: #6b4fe0;
    --accent2: #00c9a7;
    --accent-dk: #5538cc;
    --ai-bg: #0e1547;
    --ai-text: #ffffff;
    --inv-bg: #0e1547;
    --footer-bg: #080e30;
    --shadow: 0 4px 24px rgba(107, 79, 224, 0.10);
    --shadow-lg: 0 12px 48px rgba(107, 79, 224, 0.18);
}

[data-theme="dark"] {
    --bg: #060a1f;
    --bg2: #0d1235;
    --bg3: #131a45;
    --ink: #e8ecff;
    --ink2: #b0badd;
    --muted: #7a87b8;
    --border: rgba(107, 79, 224, 0.18);
    --card: #0d1235;
    --nav-bg: rgba(6, 10, 31, 0.92);
    --hero-text: #e8ecff;
    --outline-stroke: rgba(232, 236, 255, 0.35);
    --accent: #7c6fff;
    --accent2: #00e8c4;
    --accent-dk: #a594ff;
    --ai-bg: #060a1f;
    --ai-text: #ffffff;
    --inv-bg: #030615;
    --footer-bg: #030615;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.65);
}

[data-theme="white"] {
    --bg: #ffffff;
    --bg2: #f7f8fa;
    --bg3: #eef0f5;
    --ink: #0b1340;
    --ink2: #374151;
    --muted: #6b7280;
    --border: #e5e7eb;
    --card: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.88);
    --hero-text: #0b1340;
    --outline-stroke: #0b1340;
    --accent: #6b4fe0;
    --accent2: #00c9a7;
    --accent-dk: #5538cc;
    --ai-bg: #0b1340;
    --ai-text: #ffffff;
    --inv-bg: #0b1340;
    --footer-bg: #080e30;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

p {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    line-height: 1.6;
        font-weight: 400;


}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    line-height: 1.65;
    transition: background .3s, color .3s;
     /* zoom: 0.9 !important; */
}


/* ============================================================
   4. THEME SWITCHER
   ============================================================ */

.theme-label {
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .2rem;
    text-align: right;
}

.theme-btns {
    display: flex;
    gap: .4rem;
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    outline: none;
}

.theme-btn:hover {
    transform: scale(1.15);
}

.theme-btn.active {
    box-shadow: 0 0 0 3px var(--accent);
}

.theme-btn.indigo {
    background: linear-gradient(135deg, #6b4fe0, #00c9a7);
}

.theme-btn.dark {
    background: linear-gradient(135deg, #060a1f, #7c6fff);
}

.theme-btn.white {
    background: #ffffff;
}


/* ============================================================
   5. PAGE ROUTER
   ============================================================ */
.page {
    display: none;
}

.page.active {
    display: block;
}


/* ============================================================
   6. UTILITIES & ANIMATIONS
   ============================================================ */

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    100% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes gridShift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 60px);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ── Buttons ── */
.btn-primary {
    background: var(--accent);
    color: #fff;
    padding: .85rem 2rem;
    border-radius: 100px;
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(107, 79, 224, .30);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(107, 79, 224, .45);
    color: #fff;

}

[data-theme="dark"] .btn-primary {
    box-shadow: 0 4px 20px rgba(124, 111, 255, .35);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 30px rgba(124, 111, 255, .5);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    padding: .85rem 2rem;
    border-radius: 100px;
    font-weight: 400;
    font-size: .92rem;
    text-decoration: none;
    border: 1.5px solid var(--border);
    display: inline-block;
    transition: border-color .2s, background .2s;
}

.btn-ghost:hover {
    border-color: var(--ink);
    /* background: rgba(0,0,0,.03); */
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255, 255, 255, .05);
}

.btn-inv {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    padding: .85rem 2rem;
    border-radius: 100px;
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, .2);
    display: inline-block;
    transition: background .2s;
}

.btn-inv:hover {
    background: rgba(255, 255, 255, .18);
}

/* ── Section base ── */
section {
    padding: 6.5rem 5rem;
    background: var(--bg);
    color: var(--ink);
}

@media (min-width: 1600px) {
    section {
        padding: 8rem 10rem;
    }
}

.section-tag {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.section-tag::before {
    content: '';
    width: 22px;
    height: 1.5px;
    background: var(--accent);
    display: inline-block;
}

.section-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.9rem !important;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: .9rem;
    color: var(--ink);
}

/* .section-sub {
    color: var(--muted);
    max-width: 540px;
    font-size: .97rem;
} */

.section-sub {
    color: var(--muted);
    font-size: clamp(.9rem, 1vw, 1.15rem);
    line-height: 1.5;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Only large desktop screens */
@media (min-width: 1600px) {
    .section-sub {
        white-space: nowrap;
    }
}
/* ============================================================
   7. NAV
   ============================================================ */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s, background .3s;
}

nav.scrolled {
    box-shadow: var(--shadow);
}

.nav-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -.04em;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.nav-logo span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    gap: 0;
    list-style: none;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-item>a,
.nav-item>span {
    color: var(--muted);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    padding: .5rem 1.2rem;
    cursor: pointer;
    transition: color .2s;
    display: block;
    white-space: nowrap;
     font-family: 'Manrope', sans-serif !important;
}

.nav-item:hover>a,
.nav-item:hover>span {
    color: var(--ink);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .75rem;
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 400;
}

.nav-dropdown.right {
    left: auto;
    right: 0;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: .5rem .9rem;
    color: var(--ink2);
    text-decoration: none;
    font-size: .875rem !important;
    border-radius: 8px;
    transition: background .15s, color .15s;
     font-family: 'Manrope', sans-serif !important;
}

.nav-dropdown a:hover {
    background: var(--bg2);
    color: var(--accent);
}

.nav-dropdown .dd-head {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .5rem .9rem .3rem;
    font-weight: 500;
}

.nav-sep {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: .4rem 0;
}

.nav-cta-btn {
    background: var(--accent);
    color: #fff !important;
    padding: .85rem 2rem;
    border-radius: 100px;
    font-weight: 500 !important;
    margin-left: .5rem;
    transition: opacity .2s !important;
}

[data-theme="dark"] .nav-cta-btn {
    background: var(--accent);
}

.nav-cta-btn:hover {
    opacity: .85;
}


/* ============================================================
   8. PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
    padding: 9rem 5rem 4rem;
    background: linear-gradient(160deg, var(--bg2) 0%, var(--bg) 60%);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

.page-hero-eyebrow {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.page-hero-eyebrow::before {
    content: '';
    width: 20px;
    height: 1.5px;
    background: var(--accent);
    display: inline-block;
}

.page-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin-bottom: 1rem;
    color: var(--ink);
}

.page-hero p {
    color: var(--muted);
    max-width: 600px;
    font-size: 1rem;
    line-height: 1.7;
}


/* ============================================================
   9. HERO (HOME)
   ============================================================ */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10rem 5rem 5rem;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(107, 79, 224, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 79, 224, .055) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridShift 25s linear infinite;
}

[data-theme="dark"] .hero-grid {
    background-image: linear-gradient(rgba(107, 79, 224, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 79, 224, .04) 1px, transparent 1px);
}

.hero-grid::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent, var(--bg));
}

.hero-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(107, 79, 224, .1) 0%, transparent 70%);
    top: -150px;
    right: -80px;
    z-index: 0;
    animation: pulse 8s ease-in-out infinite alternate;
}

.hero-glow2 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 201, 167, .07) 0%, transparent 70%);
    bottom: -80px;
    left: -60px;
    z-index: 0;
}


.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(107, 79, 224, .1);
    border: 1px solid rgba(107, 79, 224, .3);
    padding: .32rem .95rem;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-dk);
    margin-bottom: 2rem;
    animation: fadeInUp .6s ease both;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: blink 1.5s ease infinite;
}

.hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.8rem, 4vw, 6rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -.04em;
    margin-bottom: 1.7rem;
    color: var(--hero-text);
    animation: fadeInUp .6s .1s ease both;
}

.hero h1 .accent-green {
    color: var(--accent);
}

.hero h1 .accent-outline {
    -webkit-text-stroke: 2px var(--outline-stroke);
    color: transparent;
}

[data-theme="dark"] .hero h1 .accent-outline {
    -webkit-text-stroke: 2px rgba(245, 243, 238, 0.35);
}

.hero-sub {
    font-size: 1.08rem;
    /* color: var(--muted); */
    /* max-width: 570px; */
     max-width: fit-content;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    animation: fadeInUp .6s .2s ease both;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    animation: fadeInUp .6s .3s ease both;
}

.hero-metrics {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 4.5rem;
    border-top: 1.5px solid var(--border);
    animation: fadeInUp .6s .4s ease both;
}






/* ============================================================
   10. TICKER
   ============================================================ */
.ticker-wrap {
    overflow: hidden;
    border-top: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    padding: .9rem 0;
    background: var(--bg2);
}

.ticker-inner {
    display: flex;
    gap: 4rem;
    animation: ticker 32s linear infinite;
    white-space: nowrap;
}

.ticker-inner:hover {
    animation-play-state: paused;
}

.ticker-item {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.ticker-item .sep {
    color: var(--accent);
}


/* ============================================================
   11. AGENTIC AI SECTION
   ============================================================ */
.ai-section {
    background: var(--ai-bg);
    color: var(--ai-text);
    position: relative;
    overflow: hidden;
    padding: 6.5rem 3vw !important;
}

.ai-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(107, 79, 224, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 79, 224, .035) 1px, transparent 1px);
    background-size: 48px 48px;
}

.ai-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(720px, 1.15fr) minmax(420px, 0.85fr);
    gap: 4rem;
    align-items: center;
}

.ai-inner>div:first-child {
    width: 100%;
    max-width: 760px;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(107, 79, 224, .12);
    border: 1px solid rgba(107, 79, 224, .3);
    padding: .28rem .9rem;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.4rem;
}

.ai-title {
    /* font-family: 'Syne', sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 4.3rem);
    font-size: 30px;

    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin-bottom: 1.1rem; */




    font-family: 'Manrope', sans-serif;
    font-size: 30px !important;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.15;
    margin-bottom: .9rem;
}

.ai-title span {
    color: var(--accent);
}

.ai-desc {
    color: #fff;
    line-height: 1.75;
    margin-bottom: 1.8rem;
    max-width: 700px;
}

.ai-pillars {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.ai-pillar {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.4rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
    transition: border-color .2s;
}

.ai-pillar:hover {
    border-color: rgba(107, 79, 224, .3);
}

.ai-pillar-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    background: rgba(107, 79, 224, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.ai-pillar h4 {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: .18rem;
    color: #fff;
}

.ai-pillar p {
    font-size: 18px !important;
    /* color: rgba(255,255,255,.4); */
    line-height: 1.5;
}

/* AI Visual */
.ai-visual {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
}

.ai-nodes {
    position: relative;
    width: 380px;
    height: 380px;
    margin-top: 0;
}

.ai-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    z-index: 3;
    box-shadow: 0 0 50px rgba(107, 79, 224, .4);
    animation: float 4s ease-in-out infinite;
}

.ai-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(107, 79, 224, .2);
}

.ai-orbit:nth-child(2) {
    width: 180px;
    height: 180px;
    animation: spin 10s linear infinite;
}

.ai-orbit:nth-child(3) {
    width: 280px;
    height: 280px;
    animation: spin 18s linear infinite reverse;
}

.ai-orbit:nth-child(4) {
    width: 360px;
    height: 360px;
    animation: spin 26s linear infinite;
}

.ai-satellite {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ai-bg);
    border: 1.5px solid rgba(107, 79, 224, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
}

.ai-orbit:nth-child(2) .ai-satellite {
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
}

.ai-orbit:nth-child(3) .ai-satellite {
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
}

.ai-orbit:nth-child(4) .ai-satellite {
    top: 50%;
    right: -19px;
    transform: translateY(-50%);
}

.ai-label {
    position: absolute;
    font-size: .62rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .35);
    white-space: nowrap;
}

.ai-label-1 {
    top: 10%;
    left: 10%;
}

.ai-label-2 {
    top: 10%;
    right: 6%;
}

.ai-label-3 {
    bottom: 24%;
    left: 4%;
}

.ai-label-4 {
    bottom: 15%;
    right: 8%;
}

@media (min-width: 992px) {
    .ai-visual {
        min-height: 440px;
        align-items: flex-start;
        justify-content: flex-end;
        padding-top: 1.5rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1600px) {
    .ai-section {
        padding: 7rem 4vw !important;
    }

    .ai-inner {
        max-width: 1600px;
        grid-template-columns: minmax(820px, 1.2fr) minmax(460px, 0.8fr);
        gap: 5rem;
    }

    .ai-inner>div:first-child {
        max-width: 860px;
    }

    .ai-nodes {
        width: 420px;
        height: 420px;
    }
}

@media (max-width: 991px) {
    .ai-section {
        padding: 4.5rem 1.5rem !important;
    }

    .ai-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 100%;
    }

    .ai-inner>div:first-child {
        max-width: 100%;
    }

    .ai-visual {
        min-height: 320px;
    }

    .ai-nodes {
        width: 260px;
        height: 260px;
    }
}

/* ============================================================
   12. PRODUCTS
   ============================================================ */
.prod-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin: 2.2rem 0 2.8rem;
}

.prod-tab {
    padding: .55rem 1.3rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s;
    color: var(--muted);
    background: var(--bg);
}

.prod-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.prod-tab.active {
    color: #fff;
    border-color: var(--ink);
}

[data-theme="dark"] .prod-tab {
    background: var(--bg2);
}

[data-theme="dark"] .prod-tab.active {
    background: var(--accent);
    border-color: var(--accent);
}

.prod-panel {
    display: none;
    width: 100%;
}

.prod-panel.active {
    display: block;
}

.prod-layout {
    width: 100%;
    /* max-width: 1500px;*/
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(760px, 1.15fr) minmax(460px, 0.85fr);
    gap: 3rem;
    align-items: start;
}

.prod-layout>div:first-child {
    width: 100%;
    max-width: 100%;
}

.prod-eyebrow {
    font-size: .68rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .4rem;
}

.prod-name {
    font-family: 'Syne', sans-serif;
    font-size: 30px !important;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin-bottom: .8rem;
}

.prod-tagline {
    max-width: auto !important;
    font-size: 18px !important;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.ai-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding: .28rem .85rem;
    border-radius: 100px;
      background: rgba(107, 79, 224, .1);
    color: var(--accent-dk);
    
    font-size: .68rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .04em;
}

.prod-modules {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: 1.6rem;
}

.prod-module {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.prod-module:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(107, 79, 224, .08);
}

.mod-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.mod-body h5 {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: .2rem;
}

.mod-body p {
    font-size: 18px;
    /* color: var(--muted); */
    line-height: 1.6;
}

.mod-tags {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}

.mod-tag {
    display: inline-block;
    padding: .13rem .55rem;
    border-radius: 100px;
    background: rgba(107, 79, 224, .1);
    color: var(--accent-dk);
    font-size: .69rem;
    font-family: 'Manrope', sans-serif;
    letter-spacing: .04em;
}

.prod-visual {
    position: sticky;
    top: 7rem;
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: 0;
    border-radius: 22px;
    border: 1.5px solid var(--border);
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    padding: 2.3rem;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prod-visual-icon {
    margin-bottom: 1.3rem;
    animation: float 4s ease-in-out infinite;
}

.prod-visual-icon img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
    display: block;
}

.prod-visual h3 {
    font-family: 'Syne', sans-serif;
    font-size: 18px !important;
    font-weight: 600;
    letter-spacing: -.03em;
    margin-bottom: .6rem;
}

.prod-visual p {
    font-size: 16px !important;
    color: var(--muted);
    line-height: 1.6;
}

.prod-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.pstat {
    padding: 1.1rem;
    border-radius: 11px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    text-align: center;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pstat-val {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -.03em;
}

.pstat-label {
    font-size: .68rem;
    /* color: var(--muted); */
    margin-top: .2rem;
}


/* ============================================================
   13. TURBOZEST
   ============================================================ */
.turbozest-section {
    background: var(--bg2);
    border-top: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
}

.tz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: start;
    margin-top: 3rem;
}

.tz-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tz-card {
    padding: 1.7rem;
    border-radius: 15px;
    background: var(--card);
    border: 1.5px solid var(--border);
    transition: box-shadow .2s, border-color .2s;
}

.tz-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.tz-card:first-child {
    grid-column: span 2;
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.tz-icon {
    font-size: 1.5rem;
    margin-bottom: .9rem;
}

.tz-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .45rem;
}

.tz-card:first-child h4 {
    color: #fff;
}

.tz-card p {
    font-size: .8rem;
    line-height: 1.6;
    /* color: var(--muted); */
}

.tz-card:first-child p {
    color: rgba(255, 255, 255, .45);
}

.tz-stats {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.tz-stat-row {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    padding: 1.3rem 1.6rem;
    border-radius: 13px;
    background: var(--card);
    border: 1.5px solid var(--border);
}

.tz-stat-val {
    font-family: 'Syne', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.04em;
    flex-shrink: 0;
    min-width: 75px;
}

.tz-stat-info h5 {
    font-family: 'Syne', sans-serif;
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: .18rem;
}

.tz-stat-info p {
    font-size: .78rem;
    /* color: var(--muted); */
}


/* ============================================================
   14. ZESTLINK
   ============================================================ */
.zl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: start;
    margin-top: 3rem;
}

.zl-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.zl-block {
    padding: 1.6rem;
    border-radius: 15px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s;
}

.zl-block:hover {
    border-color: var(--accent2);
}

.zl-block-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.zl-block-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.zl-block h4 {
    font-family: 'Syne', sans-serif;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.zl-block p {
    font-size: .8rem;
    /* color: var(--muted); */
    line-height: 1.6;
}

.zl-visual {
    border-radius: 18px;
    background: var(--inv-bg);
    padding: 2.2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.zl-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(0, 201, 167, .15), transparent 60%);
}

.zl-visual h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.3rem;
    position: relative;
}

.zl-protocols {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    position: relative;
}

.zl-proto {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.1rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .8rem;
}

.zl-proto-badge {
    padding: .18rem .55rem;
    border-radius: 6px;
    background: rgba(107, 79, 224, .15);
    color: var(--accent);
    font-family: 'DM Mono', monospace;
    font-size: .63rem;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.zl-proto span {
    color: rgba(255, 255, 255, .45);
    font-size: .78rem;
}


/* ============================================================
   15. INDUSTRIES
   ============================================================ */
.industries-scroll {
    display: flex;
    gap: .65rem;
    margin-top: 2.2rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
}

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

.ind-chip {
    flex-shrink: 0;
    padding: .55rem 1.3rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    font-size: .8rem;
    /* color: var(--muted); */
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    background: var(--bg);
}

.ind-chip:hover,
.ind-chip.active {
    border-color: var(--accent);
    color: var(--accent-dk);
    background: rgba(107, 79, 224, .07);
}

/* .industry-detail {
    margin-top: 2.2rem;
    padding: 2.2rem 2.8rem;
    border-radius: 18px;
    border: 1.5px solid var(--border);
    background: var(--card);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    align-items: center;
} */

.industry-detail {
    margin-top: 2.2rem;
    padding: 2.2rem 2.8rem;
    border-radius: 18px;
    border: 1.5px solid var(--border);
    background: var(--card);
    display: block;
}

.industry-detail h3 {
    font-family: 'Syne', sans-serif;
    font-size: 20px !important;
    font-weight: 600;
    letter-spacing: -.03em;
    margin-bottom: .8rem;
}

.industry-detail p {
    /* color: var(--muted); */
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 1.3rem;
}

.industry-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

.istat {
    padding: 1.3rem;
    border-radius: 13px;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    text-align: center;
}

.istat-val {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -.03em;
}

.istat-label {
    font-size: .7rem;
    /* color: var(--muted); */
    margin-top: .25rem;
}


/* ============================================================
   16. CUSTOMERS (page)
   ============================================================ */
.success-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.success-card-tag {
    font-size: .68rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .6rem;
}

.success-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    letter-spacing: -.02em;
}

.success-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.6;
}

.success-stat {
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.04em;
    margin-top: 1rem;
}

.success-stat-label {
    font-size: .75rem;
    /* color: var(--muted); */
}

.enrol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

.enrol-card {
    padding: 2rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
}

.enrol-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .7rem;
}

.enrol-card p {
    font-size: .85rem;
    /* color: var(--muted); */
    line-height: 1.6;
    margin-bottom: 1.2rem;
}


/* ============================================================
   17. ABOUT PAGE
   ============================================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}

.about-text p {
    font-size: .95rem;
    /* color: var(--muted); */
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.about-visual {
    border-radius: 20px;
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.about-stat {
    text-align: center;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--card);
    border: 1.5px solid var(--border);
}

.about-stat-val {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.04em;
}

.about-stat-lbl {
    font-size: .75rem;
    /* color: var(--muted); */
    margin-top: .3rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2.5rem;
}

.value-card {
    padding: 1.8rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s;
}

.value-card:hover {
    border-color: var(--accent);
}

.value-icon {
    font-size: 1.8rem;
    margin-bottom: .9rem;
}

.value-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.value-card p {
    font-size: .81rem;
    /* color: var(--muted); */
    line-height: 1.6;
}

.pillar-section {
    margin-top: 4rem;
}

.pillar-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2rem;
}

.pillar-card {
    padding: 1.8rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
}

.pillar-card-num {
    font-family: 'Syne', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .06em;
    margin-bottom: .8rem;
}

.pillar-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.pillar-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.6;
}


/* ============================================================
   18. LEADERSHIP
   ============================================================ */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.leader-card {
    padding: 2rem;
    border-radius: 18px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: box-shadow .2s, border-color .2s;
    text-align: center;
}

.leader-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.leader-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 auto 1.2rem;
}

.leader-card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.leader-card .role {
    font-size: .78rem;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: .7rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .04em;
}

.leader-card p {
    font-size: .8rem;
    /* color: var(--muted); */
    line-height: 1.6;
}


/* ============================================================
   19. CAREERS
   ============================================================ */
.why-work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 2.5rem;
}

.why-work-card {
    padding: 1.8rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s;
}

.why-work-card:hover {
    border-color: var(--accent);
}

.why-work-icon {
    font-size: 1.6rem;
    margin-bottom: .8rem;
}

.why-work-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .45rem;
}

.why-work-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.6;
}

.job-listings {
    margin-top: 3rem;
}

.job-listings h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -.03em;
}

.job-cards {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.8rem;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
}

.job-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.job-info h4 {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.job-info .job-meta {
    display: flex;
    gap: .8rem;
}

.job-badge {
    font-size: .68rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .04em;
    padding: .2rem .6rem;
    border-radius: 6px;
}

.job-badge.dept {
    background: rgba(107, 79, 224, .1);
    color: var(--accent-dk);
}

.job-badge.type {
    background: rgba(0, 201, 167, .08);
    color: var(--accent2);
}

.job-badge.loc {
    background: var(--bg3);
    /* color: var(--muted); */
}

.job-arrow {
    /* color: var(--muted); */
    font-size: 1.1rem;
    transition: color .2s;
}

.job-card:hover .job-arrow {
    color: var(--accent);
}


/* ============================================================
   20. PARTNERS
   ============================================================ */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.partner-card {
    padding: 2rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s, box-shadow .2s;
}

.partner-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.partner-icon {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.partner-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.partner-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.partner-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1.2rem;
}

.partner-benefits li {
    font-size: .8rem;
    /* color: var(--muted); */
    display: flex;
    align-items: center;
    gap: .5rem;
}

.partner-benefits li::before {
    content: '✓';
    color: var(--accent);
    font-weight: 700;
}


/* ============================================================
   21. DEVELOPERS
   ============================================================ */
.dev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
    margin-top: 2.5rem;
}

.dev-card {
    padding: 1.8rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s;
}

.dev-card:hover {
    border-color: var(--accent);
}

.dev-card-icon {
    font-size: 1.7rem;
    margin-bottom: .9rem;
}

.dev-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .45rem;
}

.dev-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.6;
    margin-bottom: 1rem;
}

.code-block {
    background: var(--inv-bg);
    color: #aef0d6;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    line-height: 1.7;
    overflow: auto;
}

[data-theme="white"] .code-block,
[data-theme="indigo"] .code-block {
    background: #1a2035;
}


/* ============================================================
   22. NEWS & BLOG
   ============================================================ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
    margin-top: 2.5rem;
}

.news-card {
    border-radius: 16px;
    border: 1.5px solid var(--border);
    overflow: hidden;
    background: var(--card);
    transition: box-shadow .2s, border-color .2s;
}

.news-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.news-img {
    height: 160px;
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.news-body {
    padding: 1.5rem;
}

.news-tag {
    font-size: .67rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}

.news-body h4 {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .5rem;
    line-height: 1.35;
}

.news-body p {
    font-size: .8rem;
    /* color: var(--muted); */
    line-height: 1.6;
    margin-bottom: .9rem;
}

.news-date {
    font-size: .72rem;
    /* color: var(--muted); */
    font-family: 'DM Mono', monospace;
}


/* ============================================================
   23. CSR
   ============================================================ */
.csr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
    margin-top: 2.5rem;
}

.csr-card {
    padding: 2rem;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    transition: border-color .2s;
}

.csr-card:hover {
    border-color: var(--accent);
}

.csr-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.csr-card h4 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.csr-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.6;
}

.volunteers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-top: 2rem;
}

.volunteer-card {
    padding: 1.5rem;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    text-align: center;
    transition: border-color .2s;
}

.volunteer-card:hover {
    border-color: var(--accent);
}

.volunteer-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    margin: 0 auto .8rem;
}

.volunteer-card h5 {
    font-family: 'Syne', sans-serif;
    font-size: .85rem;
    font-weight: 700;
}

.volunteer-card p {
    font-size: .75rem;
    /* color: var(--muted); */
}


/* ============================================================
   24. CONTACT
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form-group label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink2);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    transition: border-color .2s;
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.contact-info-card {
    padding: 1.5rem;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(107, 79, 224, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-info-card h5 {
    font-family: 'Syne', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.contact-info-card p {
    font-size: .82rem;
    /* color: var(--muted); */
    line-height: 1.5;
}


/* ============================================================
   25. INVESTOR SECTION
   ============================================================ */
.investor-section {
    background: var(--inv-bg);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.investor-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(107, 79, 224, .08) 0%, transparent 60%);
}

.inv-inner {
    position: relative;
    z-index: 1;
}

.inv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem;
    align-items: start;
    margin-top: 3.5rem;
}

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

.inv-metric {
    padding: 1.8rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.inv-metric-val {
    font-family: 'Syne', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.04em;
    margin-bottom: .3rem;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.inv-metric-label {
    font-size: .75rem;
    /* color: rgba(255, 255, 255, .38); */
}

.inv-text .section-tag {
    color: var(--accent);
}

.inv-text .section-title {
    color: #fff;
}

.inv-desc {
    /* color: rgba(255, 255, 255, .48); */
    color: #fff;
    font-size: .93rem;
    line-height: 1.75;
    margin-bottom: 1.8rem;
}

.inv-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2.2rem;
}

.inv-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 18px;
    /* color: rgba(255, 255, 255, .62); */
    color: #fff;

}

.inv-list li::before {
    content: '→';
    /* color: var(--accent); */
       color: #fff;

}


/* ============================================================
   26. CTA
   ============================================================ */
.cta-section {
    background: linear-gradient(160deg, var(--bg2) 0%, var(--bg3) 100%);
    text-align: center;
    padding: 7.5rem 5rem;
    border-top: 1.5px solid var(--border);
}

.cta-section h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.3rem, 4.2vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin-bottom: 1.2rem;
}

.cta-section p {
    /* color: var(--muted); */
    margin-bottom: 2.8rem;
    font-size: .97rem;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ============================================================
   27. FOOTER
   ============================================================ */
footer {
    background: var(--footer-bg);
    color: #fff;
    padding: 4.5rem 5rem 2.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}

.footer-brand .nav-logo {
    color: #fff;
}

.footer-brand .nav-logo span {
    color: var(--accent);
}

.footer-brand .nav-logo-img img {
    height: 44px;
    filter: brightness(0) invert(1);
}

.footer-brand p {
    color: #fff;
    font-size: .82rem;
    margin-top: .9rem;
    /* max-width: 260px; */
    line-height: 1.65;
}

.footer-brand address {
    /* color: rgba(255, 255, 255, .62); */
        color: #fff;

    font-size: .75rem;
    margin-top: .8rem;
    font-style: normal;
    line-height: 1.6;
}

.footer-col h5 {
    font-size: 19px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.1rem;
    font-weight: 500;
    font-family: 'Syne', sans-serif;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.footer-col a,
.footer-col span {
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    transition: color .2s;
    cursor: pointer;
    display: block;
}

.footer-col a:hover,
.footer-col span:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 18px ;
    /* color: rgba(255, 255, 255, .18); */
    color:#fff;
}

.footer-socials {
    display: flex;
    gap: .7rem;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .32);
    text-decoration: none;
    font-size: .75rem;
    transition: all .2s;
}

.social-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}


/* ============================================================
   28. MAIN RESPONSIVE BREAKPOINTS
   ============================================================ */
@media(max-width:960px) {
    section {
        padding: 5rem 1.8rem;
    }

    nav {
        padding: .9rem 1.8rem;
    }

    .nav-links {
        display: none;
    }

    .hero {
        padding: 8.5rem 1.8rem 4.5rem;
    }

    .hero-metrics {
        flex-direction: column;
    }

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

    .ai-inner,
    .prod-layout,
    .tz-grid,
    .zl-grid,
    .inv-grid,
    .industry-detail,
    .about-grid,
    .contact-grid,
    .enrol-grid {
        grid-template-columns: 1fr;
    }

    .tz-cards,
    .values-grid,
    .pillar-cards,
    .success-cards,
    .partners-grid,
    .csr-grid,
    .dev-grid,
    .news-grid,
    .leadership-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .prod-visual {
        position: static;
    }

    .page-hero {
        padding: 8rem 1.8rem 3rem;
    }

    .why-work-grid {
        grid-template-columns: 1fr;
    }

    .volunteers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .theme-switcher {
        bottom: 1rem;
        right: 1rem;
    }
}

@media(max-width:600px) {

    .tz-cards,
    .values-grid,
    .success-cards,
    .partners-grid,
    .csr-grid,
    .dev-grid,
    .news-grid,
    .leadership-grid {
        grid-template-columns: 1fr;
    }

    .tz-cards .tz-card:first-child {
        grid-column: span 1;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   29. PAGEPILING LAYOUT
   ============================================================ */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}











.hero-brand-wrapper {
    background: var(--bg);
    padding: 0 5rem 5rem;
}

/*@media (max-width: 768px) {
  .hero-brand-wrapper { padding: 0 1.5rem 3rem; }
  .hero-brand-container { gap: 2rem !important; padding: 1.5rem !important; }
}*/

@media (max-width: 768px) {
    .hero h1 {
        font-size: clamp(2rem, 9vw, 3.2rem);
        line-height: 1.08;
        word-break: break-word;
    }

    .hero h1 span {
        white-space: normal !important;
    }

    .hero-content {
        max-width: 100%;
    }
}

/* ── Mobile toggle ── */

@media(max-width:960px) {
    .iz-mobile-toggle {
        display: flex !important;
    }
}

/* ── Talk to sales widget ── */
.iz-tts {
    position: fixed;
    right: 1.5rem;
    bottom: 5rem;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.iz-tts a {
    text-decoration: none;
    color: inherit;
}

.iz-tts h4 {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink, #0b1340);
    margin: 0;
}

.iz-tts-icons {
    display: flex;
    gap: .4rem;
}

.iz-tts-icons img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* ── Scroll to top ── */

/* ── Popup overlay ── */
.iz-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.iz-popup-overlay.open {
    display: flex;
}

.iz-popup-box {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 640px;
    width: 90%;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
}

.iz-popup-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    color: #fe0606;
    text-decoration: none;
    line-height: 1;
}

.iz-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.iz-form-grid label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .35rem;
    color: #0b1340;
}

.iz-form-grid input,
.iz-form-grid select {
    width: 100%;
    padding: .65rem 1rem;
    border: 1.5px solid #d0d5e8;
    border-radius: 10px;
    font-size: .88rem;
    outline: none;
    box-sizing: border-box;
}

.iz-form-grid input:focus,
.iz-form-grid select:focus {
    border-color: #6b4fe0;
}

.iz-submit-btn {
    margin-top: 1.2rem;
    width: 100%;
    padding: .9rem;
    background: #6b4fe0;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
}

.iz-submit-btn:hover {
    background: #5538cc;
}


/* ============================================================
   30. LOGO SCROLL
   ============================================================ */



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


.logo-scroll-item {
    flex: 0 0 auto;
    width: 130px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px 16px;
}

.logo-scroll-item img {
    height: 110px;
    width: auto;
    object-fit: contain;
}

.logo-scroll-item:hover img {
    filter: grayscale(0) opacity(1);
}

@keyframes logoScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Each Logo Item ── */
.logo-scroll-item {
    flex: 0 0 auto;
    width: clamp(100px, 8vw, 200px);
    /* scales with screen */
    height: clamp(70px, 6vw, 150px);
    /* scales with screen */
    padding: clamp(8px, 1vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Laptop 1440px ── */
@media (min-width: 1440px) {
    .logo-scroll-item {
        width: 160px;
        height: 110px;
        padding: 14px 18px;
    }

    .logo-scroll-item img {
        max-height: 90px;
    }
}

/* ── Full HD TV 1920px (65 inch) ── */
@media (min-width: 1920px) {
    .logo-scroll-item {
        width: 220px;
        height: 150px;
        padding: 20px 28px;
    }

    .logo-scroll-item img {
        max-height: 130px;
        max-width: 200px;
    }

    .logo-scroll-track {
        gap: 3.5rem;
        animation-duration: 55s;
    }

    .logo-scroll-wrap {
        padding: 2.5rem 0;
    }
}

/* ── 4K TV 2560px ── */
@media (min-width: 2560px) {
    .logo-scroll-item {
        width: 300px;
        height: 200px;
        padding: 28px 40px;
    }

    .logo-scroll-item img {
        max-height: 180px;
        max-width: 280px;
    }

    .logo-scroll-track {
        gap: 5rem;
        animation-duration: 70s;
    }
}


/* ============================================================
   31. HERO IMAGE CAROUSEL
   ============================================================ */
.hero-img-carousel {
    position: relative;
    width: 340px;
    height: 320px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hic-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.hic-slide.active {
    opacity: 1;
}

.hic-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.hic-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.hic-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.hic-dot.active {
    background: #fff;
    transform: scale(1.35);
}

@media(max-width:960px) {
    .hero-img-carousel {
        width: 100%;
        max-width: 320px;
        height: 240px;
    }
}





html {
    font-size: 16px;
    /* default */
}

@media (min-width: 1440px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 20px;
    }
}


.ai-satellite .material-icons-round {
    font-size: 22px !important;
    color: #ffffff !important;
}



.ai-center-node .material-icons-round {
    font-size: 36px !important;
    color: #ffffff !important;
}

.material-symbols-outlined {
    font-size: 28px;
    color: white;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.industries-scroll {
    cursor: grab;
    user-select: none;
}

.industries-scroll.dragging {
    cursor: grabbing;
}


/* ============================================================
   MERGED FROM intelizest-fullfix.css
   ============================================================ */

/* ============================================================
   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-family:    'Syne', sans-serif             !important;
    font-size:      clamp(1.8rem, 2.5vw, 5rem)    !important;
    font-weight:    700                            !important;
    color:          var(--accent)                  !important;
    letter-spacing: -.03em                         !important;
    line-height:    1                              !important;
    margin-bottom:  .3rem                          !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;
    margin-top:    2rem                         !important;
    padding:       1.2rem 0                     !important;
    border-top:    1px solid var(--border)      !important;
    border-bottom: 1px solid var(--border)      !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: 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;
    background: none    !important;
    border:     none    !important;
    cursor:     pointer !important;
    padding:    .5rem   !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;
    }
}