/* ===== DESIGN TOKENS ===== */
        :root {
            --navy: #0B1F2A;
            --navy-deep: #071318;
            --navy-mid: #0F2D3D;
            --navy-light: #1A3D50;
            --cyan: #38BDF8;
            --cyan-dim: #1E8CB8;
            --orange: #F97316;
            --orange-hover: #EA6C0E;
            --d-bg: #071318;
            --d-surface: #0B1F2A;
            --d-text: #F4F8FA;
            --d-muted: #B8CDD8;
            --d-faint: #5A7A8A;
            --d-border: rgba(56, 189, 248, 0.14);
            --l-bg: #F4F8FA;
            --l-surface: #FFFFFF;
            --l-text: #0B1F2A;
            --l-muted: #3A5A6A;
            --l-faint: #7A9AAA;
            --l-border: rgba(11, 31, 42, 0.08);
            --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
            --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
            --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
            --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
            --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
            --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
            --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
            --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);
            --sp2: .5rem;
            --sp3: .75rem;
            --sp4: 1rem;
            --sp5: 1.25rem;
            --sp6: 1.5rem;
            --sp8: 2rem;
            --sp10: 2.5rem;
            --sp12: 3rem;
            --sp16: 4rem;
            --sp20: 5rem;
            --sp24: 6rem;
            --rad-md: .5rem;
            --rad-lg: .75rem;
            --rad-xl: 1rem;
            --rad-2xl: 1.5rem;
            --rad-full: 9999px;
            --ease: 220ms cubic-bezier(0.16, 1, 0.3, 1);
            --w: 1200px;
            --font-d: var(--font-heading, serif);
            --font-b: var(--font-base, sans-serif);
        }

        #page-about-platform *,
        #page-about-platform *::before,
        #page-about-platform *::after {
            box-sizing: border-box;
        }

        #page-about-platform {
            font-family: var(--font-b);
            font-size: var(--text-base);
            color: var(--d-text);
            background: var(--d-bg);
            line-height: 1.65;
            overflow-x: hidden;
        }

        #page-about-platform img {
            display: block;
            max-width: 100%;
            height: auto
        }

        #page-about-platform h1,
        #page-about-platform h2,
        #page-about-platform h3,
        #page-about-platform h4 {
            text-wrap: balance;
            line-height: 1.12
        }

        #page-about-platform p,
        #page-about-platform li {
            text-wrap: pretty;
            max-width: 68ch
        }

        #page-about-platform a {
            color: inherit;
            text-decoration: none
        }

        #page-about-platform button {
            cursor: pointer;
            background: none;
            border: none;
            font: inherit;
            color: inherit
        }

        #page-about-platform ul[role=list] {
            list-style: none
        }

        /* ===== LAYOUT ===== */
        #page-about-platform .wrap {
            max-width: var(--w);
            margin-inline: auto;
            padding-inline: var(--sp6)
        }

        #page-about-platform .sec {
            padding-block: clamp(var(--sp16), 8vw, var(--sp24))
        }

        #page-about-platform .s-dark {
            background: var(--d-bg);
            color: var(--d-text)
        }

        #page-about-platform .s-dark2 {
            background: var(--d-surface);
            color: var(--d-text)
        }

        #page-about-platform .s-light {
            background: var(--l-bg);
            color: var(--l-text)
        }



        /* ===== INTENT SELECTOR (Hero) ===== */
        #page-about-platform .intent-bar {
            display: inline-flex;
            gap: 4px;
            background: rgba(255, 255, 255, 0.05) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: var(--rad-full);
            padding: 5px;
            margin-bottom: 2rem !important;
        }

        #page-about-platform .intent-btn {
            padding: 10px 24px;
            border-radius: var(--rad-full);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0;
            color: var(--d-muted);
            transition: all var(--ease);
            white-space: nowrap;
        }

        #page-about-platform .intent-btn.active {
            background: var(--cyan) !important;
            color: var(--navy-deep) !important;
            font-weight: 700;
        }

        #page-about-platform .intent-btn:hover:not(.active) {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        .intent-panel {
            display: none
        }

        .intent-panel.active {
            display: block
        }

        /* ===== HERO ===== */
        .hero {
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: var(--navy-deep);
            padding-top: 0;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 90% 70% at 65% 38%, rgba(56, 189, 248, 0.06) 0%, transparent 70%),
                radial-gradient(ellipse 55% 45% at 15% 85%, rgba(249, 115, 22, 0.04) 0%, transparent 60%),
                linear-gradient(155deg, #071318 0%, #0B1F2A 50%, #071318 100%);
        }

        .hero-photo {
            position: absolute;
            inset: 0;
            background-image: url('https://cdn.inspenet.com/oil-refinery-at-night-background.webp');
            background-size: cover;
            background-position: center 40%;
            opacity: 0.22;
            mix-blend-mode: luminosity;
        }

        .hero-photo-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, rgba(7, 19, 24, 0.97) 0%, rgba(7, 19, 24, 0.82) 45%, rgba(11, 31, 42, 0.6) 75%, rgba(11, 31, 42, 0.4) 100%);
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            opacity: 0.035;
            background-image: linear-gradient(rgba(56, 189, 248, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, .4) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            max-width: var(--w);
            margin-inline: auto;
            padding-inline: var(--sp6);
            padding-block: var(--sp12) var(--sp8);
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: var(--sp16);
            align-items: center;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: var(--sp2);
            font-size: var(--text-xs);
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--cyan);
            margin-bottom: 0 !important;
        }

        .hero-eyebrow::before {
            content: '';
            display: block;
            width: 28px;
            height: 1px;
            background: var(--cyan)
        }

        #page-about-platform .hero-h1 {
            font-size: clamp(3rem, 8vw, 6.5rem) !important;
            color: var(--d-text);
            letter-spacing: -0.01em;
            line-height: 0.9 !important;
            font-weight: 400;
            margin-top: 0 !important;
            margin-bottom: 0.1rem !important;
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
        }

        .hero-h1 .c {
            color: var(--cyan)
        }

        .hero-h1 .o {
            color: var(--orange)
        }

        .hero-sub {
            font-size: var(--text-xl);
            color: var(--d-muted);
            font-weight: 300;
            max-width: 48ch;
            margin-bottom: var(--sp8);
            line-height: 1.4
        }

        .hero-loc {
            display: inline-flex;
            align-items: center;
            gap: var(--sp2);
            font-size: var(--text-xs);
            color: var(--d-muted);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(56, 189, 248, 0.15);
            padding: var(--sp2) var(--sp4);
            border-radius: var(--rad-full);
            margin-bottom: var(--sp4)
        }

        .hero-loc svg {
            color: var(--orange)
        }

        .hero-ctas {
            display: flex;
            gap: var(--sp4);
            flex-wrap: wrap
        }

        /* ===== HERO MOBILE OPTIMIZATIONS ===== */
        @media (max-width: 1024px) {
            #page-about-platform .hero-inner {
                grid-template-columns: 1fr;
                gap: var(--sp12);
                padding-block: var(--sp16) var(--sp10);
            }

            #page-about-platform .hero-h1 {
                font-size: clamp(3rem, 12vw, 5.5rem) !important;
            }
        }

        @media (max-width: 640px) {
            #page-about-platform .intent-bar {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                width: calc(100% + var(--sp6));
                margin-left: calc(var(--sp6) * -1);
                padding-inline: var(--sp6);
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                gap: 4px;
                padding-block: 4px;
            }

            #page-about-platform .intent-bar::-webkit-scrollbar {
                display: none;
            }

            #page-about-platform .intent-btn {
                flex: 0 0 auto;
                padding: 8px 14px;
                font-size: 13px;
            }

            #page-about-platform .hero-h1 {
                font-size: clamp(2.5rem, 14vw, 4rem) !important;
                line-height: 0.9 !important;
                margin-bottom: var(--sp4) !important;
            }

            #page-about-platform .hero-sub {
                font-size: var(--text-lg);
            }
        }

        .btn-p {
            padding: var(--sp4) var(--sp8);
            background: var(--orange);
            color: #fff;
            font-weight: 600;
            border-radius: var(--rad-full);
            font-size: var(--text-base);
            transition: all var(--ease);
            display: inline-flex;
            align-items: center;
            gap: var(--sp2)
        }

        .btn-p:hover {
            background: var(--orange-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(249, 115, 22, .28)
        }

        .btn-o {
            padding: var(--sp4) var(--sp8);
            border: 1px solid rgba(56, 189, 248, 0.2);
            color: var(--d-muted);
            border-radius: var(--rad-full);
            font-size: var(--text-base);
            transition: all var(--ease);
            display: inline-flex;
            align-items: center;
            gap: var(--sp2);
            backdrop-filter: blur(8px)
        }

        .btn-o:hover {
            border-color: var(--cyan);
            color: var(--cyan);
            background: rgba(56, 189, 248, 0.05)
        }

        /* Hero right — quick-link card */
        .hero-card {
            background: rgba(11, 31, 42, 0.7);
            border: 1px solid rgba(56, 189, 248, 0.15);
            border-radius: var(--rad-2xl);
            padding: var(--sp8);
            backdrop-filter: blur(16px);
        }

        .hc-label {
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--cyan);
            margin-bottom: var(--sp5)
        }

        .hc-list {
            display: flex;
            flex-direction: column;
            gap: var(--sp3)
        }

        .hc-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--sp4) var(--sp5);
            border-radius: var(--rad-lg);
            border: 1px solid rgba(56, 189, 248, 0.08);
            background: rgba(255, 255, 255, 0.02);
            transition: all var(--ease);
            gap: var(--sp3);
            text-decoration: none;
        }

        .hc-item:hover {
            border-color: rgba(56, 189, 248, 0.25);
            background: rgba(56, 189, 248, 0.05);
            transform: translateX(3px)
        }

        .hc-meta {
            display: flex;
            flex-direction: column;
            gap: 2px
        }

        .hc-name {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--d-text)
        }

        .hc-desc {
            font-size: var(--text-xs);
            color: var(--d-faint)
        }

        .hc-arr {
            color: var(--d-faint);
            flex-shrink: 0;
            transition: all var(--ease)
        }

        .hc-item:hover .hc-arr {
            color: var(--cyan);
            transform: translateX(3px)
        }

        .hc-divider {
            height: 1px;
            background: rgba(56, 189, 248, 0.08);
            margin: var(--sp2) 0
        }

        .hc-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--sp2);
            padding: var(--sp4);
            background: rgba(249, 115, 22, 0.12);
            border: 1px solid rgba(249, 115, 22, 0.2);
            border-radius: var(--rad-lg);
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--orange);
            transition: all var(--ease);
            margin-top: var(--sp4)
        }

        .hc-cta:hover {
            background: rgba(249, 115, 22, 0.2);
            border-color: var(--orange)
        }

        .hero-scroll {
            position: absolute;
            bottom: var(--sp8);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--sp2);
            color: var(--d-faint);
            font-size: var(--text-xs);
            letter-spacing: 0.1em;
            text-transform: uppercase;
            animation: bounce 2.5s ease-in-out infinite
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateX(-50%) translateY(0)
            }

            50% {
                transform: translateX(-50%) translateY(6px)
            }
        }

        /* ===== SECTION LABELS ===== */
        .slabel {
            font-size: var(--text-xs);
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--cyan);
            display: flex;
            align-items: center;
            gap: var(--sp3);
            margin-bottom: var(--sp6)
        }

        .slabel::before {
            content: '';
            display: block;
            width: 24px;
            height: 1px;
            background: var(--cyan)
        }

        .s-light .slabel {
            color: var(--navy-mid)
        }

        .s-light .slabel::before {
            background: var(--navy-mid)
        }

        .stitle {
            font-family: var(--font-d);
            font-size: var(--text-3xl);
            letter-spacing: -0.02em;
            margin-bottom: var(--sp4);
            color: inherit
        }

        .stitle .ac {
            color: var(--cyan)
        }

        .s-light .stitle .ac {
            color: var(--cyan-dim)
        }

        .slead {
            font-size: var(--text-lg);
            font-weight: 300;
            max-width: 58ch;
            line-height: 1.6;
            margin-bottom: var(--sp10)
        }

        .s-dark .slead,
        .s-dark2 .slead {
            color: var(--d-muted)
        }

        .s-light .slead {
            color: var(--l-muted)
        }

        /* ===== MID-PAGE CTA STRIP ===== */
        .cta-strip {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(56, 189, 248, 0.06));
            border: 1px solid rgba(249, 115, 22, 0.18);
            border-radius: var(--rad-2xl);
            padding: var(--sp8) var(--sp10);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp8);
            margin-top: var(--sp10);
        }

        .cta-strip-text {
            font-size: var(--text-base);
            color: var(--d-muted);
            max-width: 44ch
        }

        .cta-strip-text strong {
            color: var(--d-text);
            display: block;
            font-size: var(--text-lg);
            font-family: var(--font-d);
            margin-bottom: 4px
        }

        /* ===== AUDIENCE SLIDER ===== */
        .slider-wrap {
            position: relative;
            overflow: hidden;
            border-radius: var(--rad-2xl);
            margin-top: var(--sp10)
        }

        .slider-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)
        }

        .slide {
            min-width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: var(--d-surface);
            border: 1px solid var(--d-border);
            border-radius: var(--rad-2xl);
            overflow: hidden;
        }

        .slide-img {
            position: relative;
            min-height: 420px;
            background-size: cover;
            background-position: center;
            filter: saturate(0.85) contrast(1.05);
        }

        .slide-img::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(7, 19, 24, 0.15) 0%, transparent 40%);
            z-index: 1
        }

        .slide-img::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 55%, var(--d-surface) 98%);
            z-index: 2
        }

        .slide-body {
            padding: var(--sp12) var(--sp10);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .slide-badge {
            display: inline-block;
            background: rgba(56, 189, 248, 0.12);
            border: 1px solid rgba(56, 189, 248, 0.2);
            color: var(--cyan);
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border-radius: var(--rad-full);
            padding: 4px 12px;
            margin-bottom: var(--sp5)
        }

        .slide-h {
            font-family: var(--font-d);
            font-size: var(--text-2xl);
            color: var(--d-text);
            letter-spacing: -0.02em;
            margin-bottom: var(--sp4);
            line-height: 1.15
        }

        .slide-p {
            font-size: var(--text-base);
            color: var(--d-muted);
            line-height: 1.7;
            margin-bottom: var(--sp8)
        }

        .slide-ul {
            display: flex;
            flex-direction: column;
            gap: var(--sp3)
        }

        .slide-li {
            display: flex;
            align-items: center;
            gap: var(--sp3);
            font-size: var(--text-sm);
            color: var(--d-muted)
        }

        .eco-ul {
            display: flex;
            flex-direction: column;
            gap: var(--sp2);
            margin-bottom: var(--sp4)
        }

        .eco-li {
            display: flex;
            align-items: flex-start;
            gap: var(--sp3);
            font-size: 11px;
            color: var(--d-muted);
            white-space: normal;
            line-height: 1.4
        }

        .eco-li::before {
            content: '';
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--orange);
            flex-shrink: 0;
            margin-top: 5px;
        }

        .slide-li::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--orange);
            flex-shrink: 0
        }

        .slide-link {
            display: inline-flex;
            align-items: center;
            gap: var(--sp2);
            color: var(--cyan);
            font-size: var(--text-sm);
            font-weight: 600;
            margin-top: var(--sp6);
            transition: gap var(--ease)
        }

        .slide-link:hover {
            gap: var(--sp3)
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: var(--sp3);
            margin-top: var(--sp6)
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(56, 189, 248, 0.2);
            border: none;
            transition: all var(--ease);
            cursor: pointer
        }

        .dot.active {
            background: var(--cyan);
            transform: scale(1.3)
        }

        .slider-arrows {
            position: absolute;
            bottom: var(--sp6);
            right: var(--sp8);
            display: flex;
            gap: var(--sp3)
        }

        .sarrow {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--d-border);
            background: rgba(11, 31, 42, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--d-muted);
            transition: all var(--ease)
        }

        .sarrow:hover {
            border-color: var(--cyan);
            color: var(--cyan);
            background: rgba(56, 189, 248, 0.08)
        }

        /* ===== ECOSYSTEM TABS ===== */
        .tab-nav {
            display: inline-flex;
            gap: 4px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(56, 189, 248, 0.15);
            border-radius: var(--rad-full);
            padding: 4px;
            margin-bottom: var(--sp8);
        }

        .tab-btn {
            padding: 10px 24px;
            border-radius: var(--rad-full);
            font-size: 14px;
            font-weight: 500;
            color: var(--d-muted);
            transition: all var(--ease);
            white-space: nowrap;
            cursor: pointer;
        }

        .tab-btn.active {
            background: var(--cyan);
            color: var(--navy-deep);
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
        }

        .tab-btn:hover:not(.active) {
            color: var(--d-text);
            background: rgba(255, 255, 255, 0.04)
        }

        .tab-panel {
            display: none;
            animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both
        }

        .tab-panel.active {
            display: grid
        }

        /* Eco grid inside tabs */
        .eco-grid-2 {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: var(--sp6);
            align-items: start
        }

        .eco-card {
            border-radius: var(--rad-2xl);
            padding: var(--sp8);
            border: 1px solid var(--d-border);
            background: rgba(255, 255, 255, 0.02);
            transition: all var(--ease);
            position: relative;
            overflow: hidden
        }

        .eco-card:hover {
            border-color: rgba(56, 189, 248, 0.25);
            transform: translateY(-3px)
        }

        .eco-card.featured-v {
            grid-row: span 2;
            display: flex;
            flex-direction: column;
            align-self: stretch
        }

        .eco-icon {
            width: 42px;
            height: 42px;
            border-radius: var(--rad-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--sp4);
            color: var(--cyan);
            background: rgba(56, 189, 248, 0.08);
            border: 1px solid rgba(56, 189, 248, 0.12)
        }

        .eco-name {
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--cyan);
            margin-bottom: var(--sp2)
        }

        .eco-tagline {
            font-family: var(--font-d);
            font-size: var(--text-lg);
            line-height: 1.3;
            margin-bottom: var(--sp3);
            color: var(--d-text)
        }

        .eco-body {
            font-size: var(--text-sm);
            color: var(--d-faint);
            line-height: 1.65
        }

        .eco-link {
            display: inline-flex;
            align-items: center;
            gap: var(--sp2);
            color: var(--cyan);
            font-size: var(--text-sm);
            font-weight: 600;
            margin-top: auto;
            padding-top: var(--sp6);
            border-top: 1px solid rgba(56, 189, 248, 0.08);
            transition: gap var(--ease)
        }

        .eco-link:hover {
            gap: var(--sp3)
        }

        .eco-format {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-top: var(--sp5)
        }

        .eco-fmt {
            display: flex;
            align-items: flex-start;
            gap: var(--sp3);
            font-size: 13px;
            color: var(--d-muted);
            white-space: normal;
            line-height: 1.4
        }

        .eco-fmt::before {
            content: '';
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--orange);
            flex-shrink: 0;
            margin-top: 7px;
        }

        /* Light eco variant (for tab 2,3) */
        .eco-card-l {
            background: var(--l-surface);
            border: 1px solid var(--l-border);
            box-shadow: 0 1px 4px rgba(11, 31, 42, .05);
            color: var(--l-text)
        }

        .eco-card-l:hover {
            box-shadow: 0 12px 32px rgba(11, 31, 42, .08);
            border-color: rgba(56, 189, 248, 0.2)
        }

        .eco-card-l .eco-name {
            color: var(--cyan-dim)
        }

        .eco-card-l .eco-tagline {
            color: var(--l-text)
        }

        .eco-card-l .eco-body {
            color: var(--l-muted)
        }

        .eco-card-l .eco-icon {
            background: rgba(56, 189, 248, 0.07);
            border-color: rgba(56, 189, 248, 0.12)
        }

        .eco-card-l .eco-link {
            color: var(--cyan-dim);
            border-top-color: rgba(11, 31, 42, .07)
        }

        /* ===== METRICS ===== */
        /* Metrics — two-tier layout */
        .metrics-tier {
            margin-bottom: var(--sp16)
        }

        .metrics-tier-label {
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(56, 189, 248, 0.45);
            margin-bottom: var(--sp5);
            display: flex;
            align-items: center;
            gap: var(--sp4)
        }

        .metrics-tier-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(56, 189, 248, 0.1)
        }

        .metrics-grid {
            display: grid;
            gap: var(--sp3);
            margin-bottom: var(--sp4)
        }

        .metrics-grid.tier-a {
            grid-template-columns: repeat(4, 1fr)
        }

        .metrics-grid.tier-b {
            grid-template-columns: repeat(3, 1fr)
        }

        .m-block {
            background: var(--d-surface);
            padding: var(--sp10) var(--sp8);
            text-align: center;
            transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
            border-radius: var(--rad-xl);
            border: 1px solid var(--d-border)
        }

        .m-block:hover {
            background: var(--navy-light);
            border-color: rgba(56, 189, 248, 0.18);
            box-shadow: 0 0 32px rgba(56, 189, 248, 0.08)
        }

        .m-block.tier-b-card {
            background: rgba(11, 31, 42, 0.6);
            border-color: rgba(56, 189, 248, 0.07)
        }

        .m-block.tier-b-card:hover {
            border-color: rgba(249, 115, 22, 0.2);
            box-shadow: 0 0 28px rgba(249, 115, 22, 0.06)
        }

        .m-num {
            font-family: var(--font-d);
            font-size: var(--text-3xl);
            color: var(--d-text);
            letter-spacing: -0.03em;
            line-height: 1;
            margin-bottom: var(--sp2)
        }

        .m-num .a {
            color: var(--cyan)
        }

        .tier-b-card .m-num {
            font-size: var(--text-2xl);
            color: var(--orange)
        }

        .m-label {
            font-size: var(--text-xs);
            color: var(--d-faint);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 600;
            margin-top: var(--sp2)
        }

        .m-sub {
            font-size: var(--text-xs);
            color: var(--d-faint);
            margin-top: var(--sp2)
        }

        .m-brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--sp2);
            margin-bottom: var(--sp4);
            opacity: 0.6
        }

        .m-brand svg {
            display: block
        }

        .m-brand-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--cyan)
        }

        .m-social-grid {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            gap: var(--sp4);
            margin-top: var(--sp5);
            padding-top: var(--sp4);
            border-top: 1px solid rgba(56, 189, 248, 0.08)
        }

        .m-social-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px
        }

        .m-social-item svg {
            opacity: 0.85
        }

        .m-social-count {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: rgba(255, 255, 255, 0.55);
            white-space: nowrap
        }

        @media(max-width:900px) {
            .metrics-grid.tier-a {
                grid-template-columns: 1fr 1fr
            }

            .metrics-grid.tier-b {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:540px) {

            .metrics-grid.tier-a,
            .metrics-grid.tier-b {
                grid-template-columns: 1fr
            }
        }

        .chip {
            padding: var(--sp2) var(--sp4);
            border-radius: var(--rad-full);
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.1em;
            transition: all var(--ease);
            display: inline-block;
            border: 1px solid rgba(56, 189, 248, 0.14);
            color: var(--d-muted);
            background: rgba(255, 255, 255, 0.02)
        }

        .chip:hover {
            border-color: var(--cyan);
            color: var(--cyan)
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: var(--sp3);
            margin-bottom: var(--sp6)
        }

        /* ===== PILLARS ===== */
        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--sp5)
        }

        .p-card {
            padding: var(--sp8);
            border-radius: var(--rad-2xl);
            background: var(--l-surface);
            border: 1px solid var(--l-border);
            box-shadow: 0 1px 4px rgba(11, 31, 42, .06);
            transition: all var(--ease);
            position: relative;
            overflow: hidden
        }

        .p-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(11, 31, 42, .1);
            border-color: rgba(56, 189, 248, .2)
        }

        .p-num {
            font-family: var(--font-d);
            font-size: clamp(3.5rem, 5.5vw, 6.5rem);
            line-height: 1;
            position: absolute;
            top: -6px;
            right: var(--sp4);
            color: rgba(11, 31, 42, 0.04);
            pointer-events: none
        }

        .p-label {
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--cyan-dim);
            margin-bottom: var(--sp3)
        }

        .p-title {
            font-family: var(--font-d);
            font-size: var(--text-lg);
            color: var(--l-text);
            margin-bottom: var(--sp3);
            line-height: 1.2
        }

        .p-body {
            font-size: var(--text-sm);
            color: var(--l-muted);
            line-height: 1.65;
            margin-bottom: var(--sp4)
        }

        .p-link {
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--cyan-dim);
            display: inline-flex;
            align-items: center;
            gap: var(--sp2);
            transition: gap var(--ease)
        }

        .p-link:hover {
            gap: var(--sp3)
        }

        /* ===== WHO WE SERVE ===== */
        .sectors-g {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--sp3);
            margin-bottom: var(--sp12)
        }

        .sector {
            display: flex;
            align-items: center;
            gap: var(--sp3);
            padding: var(--sp4) var(--sp5);
            border-radius: var(--rad-lg);
            font-size: var(--text-sm);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(56, 189, 248, 0.08);
            color: var(--d-muted);
            transition: all var(--ease)
        }

        .sector:hover {
            border-color: rgba(56, 189, 248, 0.22);
            color: var(--d-text)
        }

        .sdot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--cyan);
            flex-shrink: 0;
            opacity: .5
        }

        /* ===== CHALLENGES ===== */
        .ch-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--sp5)
        }

        .ch-card {
            padding: var(--sp8);
            border-radius: var(--rad-2xl);
            transition: all var(--ease);
            position: relative;
            overflow: hidden
        }

        .ch-c {
            background: rgba(56, 189, 248, 0.04);
            border: 1px solid rgba(56, 189, 248, 0.14);
            border-top: 2px solid var(--cyan)
        }

        .ch-c:hover {
            background: rgba(56, 189, 248, 0.07);
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(56, 189, 248, 0.08)
        }

        .ch-o {
            background: rgba(249, 115, 22, 0.04);
            border: 1px solid rgba(249, 115, 22, 0.12);
            border-top: 2px solid var(--orange)
        }

        .ch-o:hover {
            background: rgba(249, 115, 22, 0.07);
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(249, 115, 22, 0.08)
        }

        .ch-num {
            font-family: var(--font-d);
            font-size: clamp(2.8rem, 4.5vw, 5.5rem);
            line-height: 1;
            position: absolute;
            top: -4px;
            right: var(--sp4);
            font-weight: 400;
            pointer-events: none
        }

        .ch-c .ch-num {
            color: rgba(56, 189, 248, 0.07)
        }

        .ch-o .ch-num {
            color: rgba(249, 115, 22, 0.07)
        }

        .ch-label {
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: var(--sp3)
        }

        .ch-c .ch-label {
            color: var(--cyan)
        }

        .ch-o .ch-label {
            color: var(--orange)
        }

        .ch-title {
            font-family: var(--font-d);
            font-size: var(--text-lg);
            color: var(--d-text);
            margin-bottom: var(--sp2);
            line-height: 1.2
        }

        .ch-body {
            font-size: var(--text-sm);
            color: var(--d-faint);
            line-height: 1.6
        }

        /* ===== VALUES ===== */
        .val-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--sp5)
        }

        .val-card {
            padding: var(--sp10) var(--sp8);
            border-radius: var(--rad-2xl);
            background: var(--l-surface);
            border: 1px solid var(--l-border);
            box-shadow: 0 1px 4px rgba(11, 31, 42, .06);
            transition: all var(--ease);
            position: relative;
            overflow: hidden
        }

        .val-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--cyan), var(--orange));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--ease)
        }

        .val-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(11, 31, 42, .1)
        }

        .val-card:hover::after {
            transform: scaleX(1)
        }

        .val-icon {
            width: 40px;
            height: 40px;
            margin-bottom: var(--sp5);
            background: rgba(56, 189, 248, 0.08);
            border: 1px solid rgba(56, 189, 248, 0.12);
            border-radius: var(--rad-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--cyan-dim)
        }

        .val-name {
            font-size: var(--text-base);
            font-weight: 700;
            color: var(--l-text);
            margin-bottom: var(--sp3);
            letter-spacing: -0.01em
        }

        .val-def {
            font-size: var(--text-sm);
            color: var(--l-muted);
            line-height: 1.65
        }

        /* ===== VISION ===== */
        .vision {
            background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(56, 189, 248, 0.04) 0%, transparent 70%), var(--navy);
            text-align: center
        }

        .v-quote {
            font-family: var(--font-d);
            font-size: var(--text-2xl);
            color: var(--d-text);
            max-width: 24ch;
            margin-inline: auto;
            line-height: 1.25;
            letter-spacing: -0.02em;
            margin-bottom: var(--sp8)
        }

        .v-quote em {
            color: var(--cyan);
            font-style: normal
        }

        .v-body {
            font-size: var(--text-base);
            color: var(--d-muted);
            max-width: 54ch;
            margin-inline: auto;
            line-height: 1.75;
            font-weight: 300;
            margin-bottom: var(--sp4)
        }

        .v-close {
            font-size: var(--text-sm);
            color: var(--d-faint);
            letter-spacing: 0.05em;
            margin-top: var(--sp8)
        }

        .line-div {
            width: 48px;
            height: 2px;
            background: linear-gradient(90deg, var(--orange), var(--cyan));
            border-radius: 2px;
            margin-bottom: var(--sp8)
        }

        /* ===== CTA FINAL ===== */
        .cta-fin {
            background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
            border-top: 1px solid rgba(56, 189, 248, 0.08)
        }

        .cta-inner {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: var(--sp16);
            align-items: center
        }

        .cta-ttl {
            font-family: var(--font-d);
            font-size: var(--text-2xl);
            color: var(--d-text);
            letter-spacing: -0.02em;
            margin-bottom: var(--sp4)
        }

        .cta-sub {
            font-size: var(--text-base);
            color: var(--d-muted);
            max-width: 40ch;
            line-height: 1.6;
            margin-bottom: var(--sp8)
        }

        .cta-links {
            display: flex;
            flex-direction: column;
            gap: var(--sp3)
        }

        .cta-link-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--sp4) var(--sp5);
            border: 1px solid rgba(56, 189, 248, 0.12);
            border-radius: var(--rad-lg);
            background: rgba(255, 255, 255, 0.02);
            transition: all var(--ease)
        }

        .cta-link-item:hover {
            border-color: rgba(56, 189, 248, 0.28);
            background: rgba(56, 189, 248, 0.05)
        }

        .cli-left {
            display: flex;
            align-items: center;
            gap: var(--sp4)
        }

        .cli-icon {
            width: 38px;
            height: 38px;
            border-radius: var(--rad-md);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .cli-name {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--d-text)
        }

        .cli-desc {
            font-size: var(--text-xs);
            color: var(--d-faint)
        }

        .form-wrap {
            background: rgba(11, 31, 42, 0.6);
            border: 1px solid rgba(56, 189, 248, 0.2);
            border-radius: var(--rad-2xl);
            padding: var(--sp10);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .cta-form {
            display: flex;
            flex-direction: column;
            gap: var(--sp4)
        }

        .form-sel,
        .form-in {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(56, 189, 248, 0.14);
            color: var(--d-text);
            padding: var(--sp4) var(--sp5);
            border-radius: var(--rad-lg);
            font-size: var(--text-sm);
            font-family: var(--font-b);
            transition: border-color var(--ease);
            width: 100%
        }

        .form-sel:focus,
        .form-in:focus {
            outline: none;
            border-color: var(--cyan);
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1)
        }

        .form-sel option {
            background: var(--navy-deep)
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--sp4)
        }

        .form-sub {
            padding: var(--sp4) var(--sp8);
            background: var(--orange);
            color: #fff;
            font-weight: 700;
            border-radius: var(--rad-full);
            font-size: var(--text-base);
            transition: all var(--ease);
            align-self: flex-start;
            display: flex;
            align-items: center;
            gap: var(--sp2)
        }

        .form-sub:hover {
            background: var(--orange-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(249, 115, 22, .28)
        }

        /* ===== FOOTER ===== */
        .footer {
            background: var(--navy-deep);
            border-top: 1px solid rgba(56, 189, 248, 0.08);
            padding: var(--sp8) 0
        }

        .fi {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--sp4)
        }

        .fb {
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--d-text)
        }

        .fb span {
            color: var(--cyan)
        }

        .fc {
            font-size: var(--text-xs);
            color: var(--d-faint)
        }

        .fl {
            display: flex;
            gap: var(--sp6)
        }

        .fl a {
            font-size: var(--text-xs);
            color: var(--d-faint);
            transition: color var(--ease)
        }

        .fl a:hover {
            color: var(--cyan)
        }

        /* ===== QUOTE BLOCK ===== */
        .bq {
            border-left: 3px solid var(--orange);
            padding: var(--sp6) var(--sp8);
            border-radius: 0 var(--rad-lg) var(--rad-lg) 0;
            background: rgba(249, 115, 22, 0.04);
            max-width: 64ch;
            margin-top: var(--sp8)
        }

        .bq p {
            font-family: var(--font-d);
            font-size: var(--text-lg);
            color: var(--d-muted);
            line-height: 1.5
        }

        /* ===== STRIPE DIVIDERS ===== */
        .to-l {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.14), transparent)
        }

        .to-d {
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(11, 31, 42, 0.07), transparent)
        }

        /* ===== ANIMATIONS ===== */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(20px)
            }

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

        .ani {
            animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) both
        }

        .d1 {
            animation-delay: .1s
        }

        .d2 {
            animation-delay: .22s
        }

        .d3 {
            animation-delay: .34s
        }

        .d4 {
            animation-delay: .46s
        }

        .rv {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .6s ease, transform .6s ease
        }

        .rv.in {
            opacity: 1;
            transform: translateY(0)
        }

        .rv1 {
            transition-delay: .1s
        }

        .rv2 {
            transition-delay: .2s
        }

        .rv3 {
            transition-delay: .3s
        }

        /* ===== INDUSTRY CONNECTION ===== */
        .ind-header {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: var(--sp16);
            align-items: start;
            margin-bottom: var(--sp12);
        }

        .ind-intro {
            font-size: var(--text-base);
            color: var(--l-muted);
            line-height: 1.75;
            margin-bottom: var(--sp8);
            max-width: 52ch;
        }

        .ind-stats {
            display: flex;
            align-items: center;
            gap: var(--sp6);
        }

        .ind-stat {
            display: flex;
            flex-direction: column;
            gap: 3px
        }

        .ind-stat-num {
            font-family: var(--font-d);
            font-size: var(--text-xl);
            color: var(--l-text);
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .ind-stat-label {
            font-size: var(--text-xs);
            color: var(--l-faint);
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase
        }

        .ind-stat-divider {
            width: 1px;
            height: 36px;
            background: var(--l-border)
        }

        /* Why block */
        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--sp16);
            align-items: start
        }

        .why-left .slabel {
            margin-bottom: var(--sp5)
        }

        .why-left .stitle {
            font-size: var(--text-3xl);
            margin-bottom: 0
        }

        .why-right {
            padding-top: var(--sp2)
        }

        .why-p {
            font-size: var(--text-lg);
            font-weight: 300;
            line-height: 1.7;
            color: var(--d-muted);
            max-width: 54ch;
            margin-bottom: var(--sp6)
        }

        .why-p:last-child {
            margin-bottom: 0
        }

        .why-founder {
            border-left: 2px solid var(--cyan);
            padding-left: var(--sp5);
            color: var(--d-text)
        }

        .movement-line {
            color: var(--cyan) !important;
            font-style: italic;
            border-left: 2px solid var(--cyan);
            padding-left: var(--sp5);
            max-width: 64ch
        }

        @media(max-width:768px) {
            .why-grid {
                grid-template-columns: 1fr;
                gap: var(--sp8)
            }
        }

        /* Dark band */
        .ind-band {
            background: var(--navy-deep);
            padding: var(--sp16) 0 var(--sp10);
            border-top: 1px solid rgba(56, 189, 248, 0.07);
        }

        .ind-band-label {
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--d-faint);
            margin-bottom: var(--sp10);
            display: flex;
            align-items: center;
            gap: var(--sp4);
        }

        .ind-band-label::before,
        .ind-band-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(56, 189, 248, 0.1);
        }

        /* Premium prestige grid — more air, no dense borders */
        .ind-org-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--sp3);
            margin-bottom: var(--sp10);
        }

        .ind-org {
            background: rgba(11, 31, 42, 0.6);
            border: 1px solid rgba(56, 189, 248, 0.08);
            border-radius: var(--rad-lg);
            padding: var(--sp6) var(--sp5);
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .ind-org::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56, 189, 248, 0.07), transparent 70%);
            opacity: 0;
            transition: opacity 260ms ease;
        }

        .ind-org:hover {
            border-color: rgba(56, 189, 248, 0.22);
            background: rgba(11, 31, 42, 0.9);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
        }

        .ind-org:hover::after {
            opacity: 1
        }

        .ind-org-name {
            font-family: var(--font-d);
            font-size: var(--text-lg);
            font-weight: 400;
            color: var(--d-text);
            letter-spacing: -0.01em;
            line-height: 1;
        }

        .ind-org-sub {
            font-size: var(--text-xs);
            color: var(--d-faint);
            line-height: 1.35;
        }

        /* Bottom statements */
        .ind-stmts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--sp6);
            padding-top: var(--sp4);
        }

        .ind-stmt {
            display: flex;
            gap: var(--sp5);
            padding: var(--sp6);
            background: rgba(11, 31, 42, 0.5);
            border: 1px solid rgba(56, 189, 248, 0.07);
            border-radius: var(--rad-xl);
            align-items: flex-start;
            transition: border-color var(--ease);
        }

        .ind-stmt:hover {
            border-color: rgba(56, 189, 248, 0.15)
        }

        .ind-stmt-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            border-radius: var(--rad-lg);
            background: rgba(56, 189, 248, 0.08);
            border: 1px solid rgba(56, 189, 248, 0.15);
            color: var(--cyan);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ind-stmt-text {
            font-size: var(--text-sm);
            color: var(--d-muted);
            line-height: 1.7;
            max-width: none;
        }

        /* Responsive */
        @media(max-width:1000px) {
            .ind-header {
                grid-template-columns: 1fr;
                gap: var(--sp8)
            }

            .ind-org-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            .ind-stmts {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:640px) {
            .ind-org-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .ind-stats {
                flex-wrap: wrap;
                gap: var(--sp4)
            }
        }

        /* ===== RESPONSIVE ===== */
        @media(max-width:1000px) {
            .hero-inner {
                grid-template-columns: 1fr;
                gap: var(--sp8)
            }

            .hero-card {
                display: none
            }

            .eco-grid-2 {
                grid-template-columns: 1fr 1fr
            }

            .eco-card.featured-v {
                grid-column: span 2;
                grid-row: span 1
            }

            .pillars-grid,
            .val-grid {
                grid-template-columns: 1fr 1fr
            }

            .cta-inner {
                grid-template-columns: 1fr
            }

            .conn-g {
                grid-template-columns: 1fr
            }

            .ch-grid {
                grid-template-columns: 1fr 1fr
            }

            .slide {
                grid-template-columns: 1fr
            }

            .slide-img {
                min-height: 260px
            }
        }

        @media(max-width:640px) {
            .eco-grid-2 {
                grid-template-columns: 1fr !important;
            }

            .eco-card.featured-v {
                grid-column: span 1 !important;
            }

            .sectors-g {
                grid-template-columns: 1fr 1fr;
            }

            .pillars-grid,
            .val-grid,
            .metrics-grid {
                grid-template-columns: 1fr !important;
            }

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

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

            .nav-r .nlink {
                display: none;
            }

            .intent-bar {
                flex-wrap: nowrap !important;
                display: flex !important;
            }

            .tab-nav {
                display: flex !important;
                flex-wrap: nowrap !important;
                width: calc(100% + var(--sp6));
                margin-left: calc(var(--sp6) * -1);
                padding-inline: var(--sp6);
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                border-radius: 0;
                border-inline: none;
                background: transparent;
            }

            .tab-nav::-webkit-scrollbar {
                display: none;
            }

            .tab-btn {
                padding: 8px 16px;
                font-size: 13px;
            }

            .cta-strip {
                flex-direction: column;
                text-align: center;
            }
        }

        /* ===== FLUENT FORMS CUSTOM STYLING ===== */
        .fluentform-about-wrapper {
            max-width: 580px;
            margin-inline: auto;
            background: rgba(11, 31, 42, 0.4);
            border: 1px solid rgba(56, 189, 248, 0.12);
            border-radius: var(--rad-2xl);
            padding: var(--sp8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .fluentform-about-wrapper .fluentform {
            background: transparent !important;
        }

        /* Espaciado de filas y columnas */
        .fluentform-about-wrapper .ff-t-container {
            margin-bottom: 0 !important;
        }

        .fluentform-about-wrapper .ff-t-row {
            gap: 15px !important;
            /* Espacio entre columnas */
            margin-bottom: 15px !important;
            /* Espacio entre filas */
        }

        .fluentform-about-wrapper .ff-el-group {
            margin-bottom: 15px !important;
        }

        .fluentform-about-wrapper .ff-t-cell {
            padding: 0 !important;
        }

        /* Label styling */
        .fluentform-about-wrapper .ff-el-form-check-label,
        .fluentform-about-wrapper .ff-el-is-label {
            color: var(--d-muted) !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            margin-bottom: 6px !important;
        }

        /* Input / Select / Textarea styling */
        .fluentform-about-wrapper .ff-el-form-control {
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(56, 189, 248, 0.18) !important;
            border-radius: var(--rad-md) !important;
            color: #fff !important;
            padding: 14px 18px !important;
            font-size: 15px !important;
            transition: all var(--ease) !important;
            height: auto !important;
            width: 100% !important;
        }

        /* Fix for select dropdown options legibility */
        .fluentform-about-wrapper select.ff-el-form-control option {
            background-color: var(--navy-deep) !important;
            color: #fff !important;
            padding: 10px !important;
        }

        .fluentform-about-wrapper .ff-el-form-control::placeholder {
            color: rgba(255, 255, 255, 0.4) !important;
        }

        .fluentform-about-wrapper .ff-el-form-control:hover {
            border-color: rgba(56, 189, 248, 0.4) !important;
        }

        .fluentform-about-wrapper .ff-el-form-control:focus {
            border-color: var(--cyan) !important;
            background: rgba(56, 189, 248, 0.06) !important;
            box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1) !important;
            outline: none !important;
        }

        /* Submit Button */
        .fluentform-about-wrapper .ff-btn-submit {
            width: 100% !important;
            padding: 16px 32px !important;
            background: var(--orange) !important;
            border: none !important;
            border-radius: var(--rad-full) !important;
            color: #fff !important;
            font-weight: 700 !important;
            font-size: 16px !important;
            letter-spacing: 0.02em !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
            transition: all var(--ease) !important;
            margin-top: 10px !important;
            box-shadow: 0 8px 24px rgba(249, 115, 22, 0.2) !important;
        }

        .fluentform-about-wrapper .ff-btn-submit:hover {
            background: var(--orange-hover) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 30px rgba(249, 115, 22, 0.35) !important;
        }

        /* Success/Error Messages */
        .fluentform-about-wrapper .ff-message-success {
            background: rgba(34, 197, 94, 0.1) !important;
            border: 1px solid rgba(34, 197, 94, 0.3) !important;
            color: #4ade80 !important;
            border-radius: var(--rad-lg) !important;
            padding: 20px !important;
            font-weight: 500 !important;
        }

        .fluentform-about-wrapper .ff-errors-in-stack {
            background: rgba(239, 68, 68, 0.1) !important;
            border: 1px solid rgba(239, 68, 68, 0.3) !important;
            color: #f87171 !important;
            border-radius: var(--rad-lg) !important;
            padding: 15px !important;
            margin-bottom: 20px !important;
        }

        /* Mobile adjustments */
        @media (max-width: 640px) {
            .form-wrap {
                padding: var(--sp5) !important;
                border-radius: var(--rad-xl) !important;
            }

            .fluentform-about-wrapper {
                padding: 0 !important;
                /* Quitar padding interno redundante */
                background: transparent !important;
                border: none !important;
                backdrop-filter: none !important;
            }

            .fluentform-about-wrapper .ff-t-row {
                flex-direction: column !important;
                gap: 10px !important;
            }

            .fluentform-about-wrapper .ff-t-cell {
                width: 100% !important;
                max-width: 100% !important;
            }
        }