/* ==========================================================================
   SWATI GROUP - PREMIUM CORPORATE ECOSYSTEM LANDING PAGE
   Warm Light Yellow Cream / Champagne Ivory Luxury Palette with Vivid Spot Accents
   ========================================================================== */

/* --- 1. DESIGN TOKENS & VARIABLES --- */
:root {
    /* Color Palette - #1E3847 Page Background with Crisp White Cards */
    --color-bg-darker: #132632;
    --color-bg: #1E3847;
    --color-bg-alt: #172E3C;
    --color-bg-card: #FFFFFF;
    --color-surface: rgba(255, 255, 255, 0.08);
    --color-surface-border: rgba(255, 255, 255, 0.15);
    --color-surface-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);

    --color-text-main: #FFFFFF;
    --color-text-muted: #CBDCE6;
    --color-text-dim: #95B0C2;

    /* Swati Switchgears Spot Colors (Power Vertical - Electric Cyan/Blue) */
    --color-blue-primary: #00D2FF;
    --color-blue-accent: #0072FF;
    --color-blue-dark: #0A192F;
    --color-blue-light: rgba(0, 210, 255, 0.12);
    --color-blue-glow: rgba(0, 210, 255, 0.35);

    /* Swati Switchgears Spot Colors (Power Vertical - Deep Crimson Red #c60016) */
    --color-orange-primary: #c60016;
    --color-orange-accent: #e5001a;
    --color-orange-dark: #3a0006;
    --color-orange-light: rgba(198, 0, 22, 0.15);
    --color-orange-glow: rgba(198, 0, 22, 0.4);

    /* Swati Green Spot Colors (Sustainable Energy Vertical - Eco Emerald Green) */
    --color-green-primary: #00E676;
    --color-green-accent: #00B050;
    --color-green-dark: #002B14;
    --color-green-light: rgba(0, 230, 118, 0.12);
    --color-green-glow: rgba(0, 230, 118, 0.35);

    /* Active Ambient Spot Tint */
    --ambient-tint-color: rgba(0, 210, 255, 0.15);

    /* Typography - Unique Luxury Architectural Font System */
    --font-heading: 'Outfit', -apple-system, sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;

    /* Transitions & Easing */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.4s ease;
    --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --navbar-height: 85px;
    --container-max-width: 1320px;
}

/* --- 2. RESET & BASE --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
}

body {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden !important;
    background-color: var(--color-bg);
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.loading {
    overflow: hidden;
}

/* Custom Selection */
::selection {
    background: var(--color-blue-primary);
    color: #ffffff;
}

/* Typography Base */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-main);
    line-height: 1.15;
    font-weight: 700;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.relative-z {
    position: relative;
    z-index: 2;
}

.text-center {
    text-align: center;
}

/* --- 4. PAGE LOADER --- */
.page-loader {
    position: fixed;
    inset: 0;
    background-color: var(--color-bg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-cinematic), visibility 0.8s ease;
}

.page-loader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.official-loader-logo {
    width: 125px;
    height: 125px;
    object-fit: contain;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
    animation: loaderLogoPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards, loaderPulse 2.5s ease-in-out infinite 0.8s;
}

.loader-brand-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-text {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: 10px;
    display: inline-block;
    background: linear-gradient(to right, var(--color-text-main) 0%, var(--color-text-main) 50%, transparent 50%, transparent 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: writeInText 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

@keyframes writeInText {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0% 0;
    }
}

.loader-lines {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6px;
    width: 100%;
    margin-top: 14px;
    position: relative;
    gap: 6px;
}

.loader-lines .line {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

.loader-lines .line-blue {
    background: var(--color-blue-primary);
    box-shadow: 0 2px 10px var(--color-blue-glow);
}

.loader-lines .line-orange {
    background: var(--color-orange-primary);
    box-shadow: 0 2px 10px var(--color-orange-glow);
}

.loader-lines .line-green {
    background: var(--color-green-primary);
    box-shadow: 0 2px 10px var(--color-green-glow);
}

.loader-subtext {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 12px;
    color: var(--color-text-muted);
    margin-top: 15px;
    opacity: 0;
    transition: opacity 0.5s ease 0.8s;
}

.loader-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(28, 24, 20, 0.05);
}

.loader-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-blue-primary), var(--color-orange-primary), var(--color-green-primary));
    transition: width 0.4s ease-out;
}

@keyframes loaderLogoPop {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

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

@keyframes loaderPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

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

/* --- 5. AMBIENT GLOW & GRID --- */
.ambient-glow-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background-color: var(--color-bg);
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.18;
    transition: transform 10s ease-in-out, opacity 1s ease;
}

.orb-blue {
    top: -10%;
    left: -10%;
    width: 65vw;
    height: 65vw;
    background: radial-gradient(circle, var(--color-blue-primary) 0%, transparent 70%);
}

.orb-orange {
    top: 30%;
    right: -15%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, var(--color-orange-primary) 0%, transparent 70%);
}

.orb-green {
    bottom: -10%;
    left: 20%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--color-green-primary) 0%, transparent 70%);
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(230, 220, 207, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230, 220, 207, 0.4) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, transparent 80%);
}

.noise-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
    opacity: 0.5;
}

/* --- 6. NAVBAR --- */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 76px !important;
    z-index: 1000 !important;
    background-color: rgba(13, 26, 36, 0.94) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease !important;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00D2FF 0%, #c60016 50%, #00E676 100%);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.65);
    z-index: 1001;
}

.navbar.scrolled {
    background-color: rgba(10, 20, 28, 0.96) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 210, 255, 0.15) !important;
}

.nav-container {
    max-width: var(--container-max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.official-nav-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.45));
    transition: filter 0.4s ease;
}

.nav-brand:hover .official-nav-logo {
    filter: drop-shadow(0 0 16px rgba(198, 0, 22, 0.65));
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.brand-name strong {
    font-weight: 800;
    background: linear-gradient(135deg, #00D2FF 0%, #c60016 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    padding: 4px 6px;
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06);
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    position: relative;
    padding: 7px 16px;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.nav-link::after {
    display: none;
}

.nav-link:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.nav-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.22), rgba(198, 0, 22, 0.18)) !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.3) !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.nav-socials {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 0.82rem;
    transition: all 0.3s ease;
}

.nav-social-btn.instagram:hover {
    color: #c60016 !important;
    border-color: rgba(198, 0, 22, 0.6) !important;
    box-shadow: 0 0 14px rgba(198, 0, 22, 0.4) !important;
    background: rgba(198, 0, 22, 0.2) !important;
}

.nav-social-btn.linkedin:hover {
    color: #00D2FF !important;
    border-color: rgba(0, 210, 255, 0.6) !important;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.4) !important;
    background: rgba(0, 210, 255, 0.2) !important;
}

.nav-social-btn.youtube:hover {
    color: #FF3333 !important;
    border-color: rgba(255, 51, 51, 0.6) !important;
    box-shadow: 0 0 14px rgba(255, 51, 51, 0.4) !important;
    background: rgba(255, 51, 51, 0.2) !important;
}

.nav-cta-btn,
a.nav-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0.65rem 1.6rem !important;
    background: linear-gradient(135deg, #00D2FF 0%, #0072FF 50%, #c60016 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 40px !important;
    font-family: var(--font-heading) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(0, 210, 255, 0.4), 0 0 15px rgba(198, 0, 22, 0.3) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.nav-cta-btn:hover,
.nav-cta-btn:active,
.nav-cta-btn:focus,
a.nav-cta-btn:hover,
a.nav-cta-btn:active,
a.nav-cta-btn:focus {
    background: linear-gradient(135deg, #00D2FF 0%, #0072FF 50%, #c60016 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 6px 28px rgba(0, 210, 255, 0.55), 0 0 20px rgba(198, 0, 22, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
}

@media (max-width: 992px) {
    .navbar {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 30px;
    height: 24px;
    justify-content: center;
    z-index: 1001;
}

.mobile-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--color-text-main);
    transition: var(--transition-fast);
}

/* --- 7. HERO SECTION - Asymmetric Architectural Layout --- */
.brand-text-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-tagline-sm {
    font-family: var(--font-heading);
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px;
    color: #AABCC5 !important;
    -webkit-text-fill-color: #AABCC5 !important;
    display: block;
}

.nav-icon-btn.search-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-icon-btn.search-btn:hover {
    color: #00CFFF !important;
    border-color: rgba(0, 207, 255, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 207, 255, 0.3) !important;
    background: rgba(0, 207, 255, 0.15) !important;
}

.btn-arrow {
    margin-left: 4px;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav-cta-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   LUXURY ARCHITECTURAL & INTERIOR DESIGN STUDIO HERO SECTION
   ========================================================================== */
.interior-arch-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: #061824;
    overflow: hidden;
    padding-top: 7.5rem;
    padding-bottom: 4rem;
}

.arch-spotlight-glow {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 207, 255, 0.22) 0%, rgba(6, 24, 36, 0) 70%);
    filter: blur(130px);
    pointer-events: none;
    z-index: 1;
    transition: background 0.8s ease;
}

.arch-spotlight-glow.spot-red {
    background: radial-gradient(circle, rgba(198, 0, 22, 0.25) 0%, rgba(6, 24, 36, 0) 70%);
}

.arch-spotlight-glow.spot-cyan {
    background: radial-gradient(circle, rgba(0, 207, 255, 0.25) 0%, rgba(6, 24, 36, 0) 70%);
}

.arch-spotlight-glow.spot-green {
    background: radial-gradient(circle, rgba(32, 232, 155, 0.25) 0%, rgba(6, 24, 36, 0) 70%);
}

.arch-hero-container {
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* TOP EYEBROW BAR */
.arch-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.2rem;
}

.arch-eyebrow-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.arch-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00CFFF;
    box-shadow: 0 0 12px #00CFFF;
    animation: archPulse 2s infinite;
}

@keyframes archPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

.arch-tag-text {
    font-family: var(--font-heading);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    color: #00CFFF;
}

.arch-est-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #AABCC5;
}

.dot-sep {
    color: #00CFFF;
}

/* MAIN EDITORIAL GRID */
.arch-main-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}

.arch-content-left {
    display: flex;
    flex-direction: column;
}

.arch-editorial-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.8vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    color: #FFFFFF;
    margin-bottom: 1.4rem;
    letter-spacing: -0.5px;
}

.arch-title-highlight {
    color: #00CFFF;
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.arch-title-gradient {
    background: linear-gradient(135deg, #00CFFF 0%, #20E89B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: opacity 0.4s ease;
}

.arch-editorial-desc {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    color: #AABCC5;
    line-height: 1.7;
    margin-bottom: 2.2rem;
    max-width: 560px;
    transition: opacity 0.4s ease;
}

/* DUAL BUTTON CTAS */
.arch-cta-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.8rem;
    flex-wrap: wrap;
}

.arch-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.95rem 2.4rem;
    border-radius: 40px;
    background: linear-gradient(135deg, #00CFFF 0%, #0072FF 100%);
    color: #FFFFFF !important;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-decoration: none;
    box-shadow: 0 0 28px rgba(0, 207, 255, 0.4);
    transition: all 0.35s ease;
}

.arch-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 38px rgba(0, 207, 255, 0.65);
}

.arch-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 2.2rem;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    color: #AABCC5;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    cursor: pointer;
    transition: all 0.35s ease;
}

.arch-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

/* NUMBERED ARCHITECTURAL DIVISION TABS (01 / 02 / 03) */
.arch-project-tabs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 580px;
}

.arch-tab-item {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 14px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.arch-tab-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 207, 255, 0.3);
    transform: translateX(6px);
}

.arch-tab-item.active {
    background: rgba(9, 38, 56, 0.95);
    border-color: rgba(0, 207, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 3px 0 0 #00CFFF;
}

.arch-tab-item.active[data-color="red"] {
    border-color: rgba(198, 0, 22, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 3px 0 0 #FF4D5E;
}

.arch-tab-item.active[data-color="green"] {
    border-color: rgba(32, 232, 155, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 3px 0 0 #20E89B;
}

.tab-num {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 900;
    color: #AABCC5;
    transition: color 0.3s ease;
}

.arch-tab-item.active .tab-num {
    color: #00CFFF;
}

.arch-tab-item.active[data-color="red"] .tab-num { color: #FF4D5E; }
.arch-tab-item.active[data-color="green"] .tab-num { color: #20E89B; }

.tab-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tab-label {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #FFFFFF;
}

.tab-sub {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: #AABCC5;
}

.tab-progress-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: #00CFFF;
    transition: width 0.3s ease;
}

.arch-tab-item.active .tab-progress-line {
    width: 100%;
}

/* RIGHT SIDE: ASYMMETRIC DUAL VISUAL SHOWCASE FRAME */
.arch-showcase-container {
    position: relative;
    width: 100%;
}

.arch-primary-frame {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 40px 12px 40px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.75);
}

.arch-frame-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.arch-frame-img.active {
    opacity: 0.85;
    transform: scale(1);
}

.arch-frame-img.img-switchgear {
    background-image: url('./assets/1.JPG');
}

.arch-frame-img.img-epc {
    background-image: url('./SWATI EPC Projects Logo.png');
}

.arch-frame-img.img-green {
    background-image: url('./swatigreen.png');
}

.arch-frame-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 24, 36, 0.3) 0%, rgba(6, 24, 36, 0.88) 100%);
    pointer-events: none;
}

/* FLOATING GLASS CHIPS */
.arch-glass-chip {
    position: absolute;
    z-index: 5;
    background: rgba(6, 24, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
}

.chip-top-rating {
    top: 24px;
    left: 24px;
}

.chip-top-plant {
    top: 24px;
    right: 24px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #FFFFFF;
}

.chip-star-box {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #FFC107;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.chip-rating-text {
    display: flex;
    flex-direction: column;
}

.r-title {
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 800;
    color: #FFFFFF;
}

.r-sub {
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: #AABCC5;
}

.chip-icon-cyan {
    color: #00CFFF;
    font-size: 0.95rem;
}

/* SECONDARY OVERLAPPING FLOATING PROJECT CARD */
.arch-offset-project-card {
    position: absolute;
    bottom: -24px;
    left: -30px;
    z-index: 6;
    width: 310px;
    background: rgba(9, 38, 56, 0.94);
    border: 1px solid rgba(0, 207, 255, 0.35);
    border-radius: 24px;
    padding: 20px;
    backdrop-filter: blur(24px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 207, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.35s ease;
}

.arch-offset-project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 207, 255, 0.6);
}

.offset-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offset-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00E676;
    box-shadow: 0 0 10px #00E676;
}

.offset-badge-text {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00CFFF;
}

.offset-project-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
}

.offset-project-desc {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: #AABCC5;
    line-height: 1.5;
}

.offset-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00CFFF;
    text-decoration: none;
    margin-top: 4px;
    transition: gap 0.3s ease;
}

.offset-action-link:hover {
    gap: 12px;
}

/* BOTTOM EDITORIAL STATISTICAL BAR */
.arch-editorial-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 38, 56, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    padding: 1.1rem 2.4rem;
    backdrop-filter: blur(24px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    margin-top: 1rem;
}

.arch-stat-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.arch-stat-number {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.arch-stat-caption {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #AABCC5;
}

.arch-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.14);
}

.arch-stat-box.highlight-box .arch-stat-number {
    background: linear-gradient(135deg, #00CFFF 0%, #20E89B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* RESPONSIVE MEDIA QUERIES FOR INTERIOR ARCH HERO */
@media (max-width: 1024px) {
    .arch-main-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .arch-primary-frame {
        height: 400px;
    }

    .arch-offset-project-card {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 1.5rem;
    }
}

@media (max-width: 768px) {
    .interior-arch-hero {
        padding-top: 6.5rem;
    }

    .arch-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .arch-editorial-title {
        font-size: 2.3rem;
    }

    .arch-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .arch-btn-main, .arch-btn-outline {
        justify-content: center;
        width: 100%;
    }

    .arch-editorial-stats-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
        text-align: center;
    }

    .arch-stat-divider {
        display: none;
    }

    .chip-top-plant {
        display: none;
    }
}

.slat-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: grayscale(40%) brightness(0.7);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slat-bg-img.img-switchgear {
    background-image: url('./assets/1.JPG');
}

.slat-bg-img.img-epc {
    background-image: url('./SWATI EPC Projects Logo.png');
}

.slat-bg-img.img-green {
    background-image: url('./swatigreen.png');
}

.arch-slat.active .slat-bg-img {
    opacity: 0.55;
    filter: brightness(0.9);
    transform: scale(1.04);
}

.slat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 29, 43, 0.85) 0%, rgba(6, 29, 43, 0.4) 50%, rgba(6, 29, 43, 0.92) 100%);
    pointer-events: none;
}

.slat-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.slat-num {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 900;
    color: #00CFFF;
}

.slat-cyan .slat-num { color: #00CFFF; }
.slat-red .slat-num { color: #FF4D5E; }
.slat-green .slat-num { color: #20E89B; }

.slat-title-box {
    display: flex;
    flex-direction: column;
}

.slat-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #FFFFFF;
    line-height: 1.25;
}

.slat-subtitle {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: #AABCC5;
    margin-top: 4px;
}

.slat-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.slat-cyan .slat-icon-box { color: #00CFFF; border-color: rgba(0, 207, 255, 0.4); }
.slat-red .slat-icon-box { color: #FF4D5E; border-color: rgba(198, 0, 22, 0.4); }
.slat-green .slat-icon-box { color: #20E89B; border-color: rgba(32, 232, 155, 0.4); }

.slat-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.arch-slat.active .slat-body {
    opacity: 1;
    transform: translateY(0);
}

.slat-metric-tag {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00CFFF;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pulse-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00E676;
    box-shadow: 0 0 10px #00E676;
    display: inline-block;
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.slat-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: #AABCC5;
    line-height: 1.55;
}

.slat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 6px;
    transition: color 0.3s ease, gap 0.3s ease;
}

.slat-cyan .slat-action-btn:hover { color: #00CFFF; gap: 12px; }
.slat-red .slat-action-btn:hover { color: #FF4D5E; gap: 12px; }
.slat-green .slat-action-btn:hover { color: #20E89B; gap: 12px; }

/* LEFT SIDE: TYPOGRAPHY CONTENT */
.hero-content-left {
    position: relative;
    z-index: 3;
    width: 48%;
    max-width: 740px;
    padding-left: clamp(2rem, 5.5vw, 6rem);
    display: flex;
    flex-direction: column;
}

.arch-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(0, 207, 255, 0.08);
    border: 1px solid rgba(0, 207, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 207, 255, 0.15);
}

.badge-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00CFFF;
    box-shadow: 0 0 10px #00CFFF;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.badge-live-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #00CFFF;
}

.arch-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
}

.title-line-1 {
    color: #FFFFFF !important;
    display: block;
}

.title-rotator {
    color: #00CFFF;
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.title-line-gradient {
    background: linear-gradient(135deg, #00CFFF 0%, #00E676 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    transition: opacity 0.4s ease;
}

.arch-hero-desc {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    color: #AABCC5 !important;
    line-height: 1.7;
    margin-bottom: 2.2rem;
    max-width: 520px;
    transition: opacity 0.4s ease;
}

/* DUAL CTAS */
.arch-cta-group {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.arch-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.85rem 2.2rem;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(0, 207, 255, 0.25), rgba(0, 114, 255, 0.3));
    border: 1.5px solid rgba(0, 207, 255, 0.6);
    color: #FFFFFF !important;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-decoration: none;
    box-shadow: 0 0 25px rgba(0, 207, 255, 0.3);
    transition: all 0.35s ease;
}

.arch-btn-primary:hover {
    background: #00CFFF;
    color: #061D2B !important;
    border-color: #00CFFF;
    box-shadow: 0 0 35px rgba(0, 207, 255, 0.6);
    transform: translateY(-2px);
}

.arch-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.85rem 2rem;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: #AABCC5 !important;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    cursor: pointer;
    transition: all 0.35s ease;
}

.arch-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

/* COMMAND STAT RIBBON */
.arch-stats-ribbon {
    position: absolute;
    bottom: 1.5rem;
    left: clamp(2rem, 5.5vw, 6rem);
    right: clamp(2rem, 5.5vw, 6rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 32, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 0.8rem 2rem;
    backdrop-filter: blur(24px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.arch-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.a-count {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.a-label {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #AABCC5;
}

.a-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
}

.highlight-stat .a-count {
    background: linear-gradient(135deg, #00CFFF, #00E676);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.block-red .block-icon {
    color: #c60016;
    box-shadow: 0 0 12px rgba(198, 0, 22, 0.25);
}

.block-cyan .block-icon {
    color: #00CFFF;
    box-shadow: 0 0 12px rgba(0, 207, 255, 0.25);
}

.block-green .block-icon {
    color: #20E89B;
    box-shadow: 0 0 12px rgba(32, 232, 155, 0.25);
}

.block-turquoise .block-icon {
    color: #00D2FF;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.25);
}

.block-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.block-title {
    font-family: var(--font-heading);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #FFFFFF !important;
    line-height: 1.25;
}

.block-sub {
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: #AABCC5 !important;
    line-height: 1.25;
}

.block-accent-line {
    height: 3px;
    width: 24px;
    border-radius: 3px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.line-red { background: #c60016; box-shadow: 0 0 8px rgba(198, 0, 22, 0.6); }
.line-cyan { background: #00CFFF; box-shadow: 0 0 8px rgba(0, 207, 255, 0.6); }
.line-green { background: #20E89B; box-shadow: 0 0 8px rgba(32, 232, 155, 0.6); }
.line-turquoise { background: #00D2FF; box-shadow: 0 0 8px rgba(0, 210, 255, 0.6); }

.vertical-block-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    align-self: stretch;
}

.vertical-block:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.06);
}

.vertical-block:hover .block-icon {
    transform: scale(1.15) rotate(6deg);
}

.vertical-block:hover .block-accent-line,
.vertical-block.active .block-accent-line {
    width: 100%;
}

/* RESPONSIVE MEDIA QUERIES FOR ACCORDION HERO */
@media (max-width: 1024px) {
    .accordion-hero {
        flex-direction: column;
        min-height: auto;
        padding-top: 7.5rem;
        padding-bottom: 4rem;
    }

    .hero-content-left {
        width: 100%;
        max-width: 100%;
        padding-left: clamp(1.5rem, 4vw, 3rem);
        padding-right: clamp(1.5rem, 4vw, 3rem);
        margin-bottom: 2.5rem;
    }

    .arch-accordion-container {
        position: relative;
        width: 100%;
        height: 380px;
        clip-path: none;
        padding: 0 clamp(1.5rem, 4vw, 3rem);
    }

    .arch-slat {
        padding: 2rem 1.5rem;
    }

    .arch-stats-ribbon {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 2.5rem clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 4vw, 3rem);
        flex-wrap: wrap;
        gap: 1.2rem;
        justify-content: space-around;
    }

    .a-sep {
        display: none;
    }
}

@media (max-width: 768px) {
    .arch-accordion-container {
        flex-direction: column;
        height: auto;
        gap: 12px;
    }

    .arch-slat {
        width: 100%;
        height: 140px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding: 1.2rem;
    }

    .arch-slat.active {
        height: 220px;
    }

    .arch-hero-title {
        font-size: 2.2rem;
    }

    .arch-cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .arch-btn-primary, .arch-btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .arch-stats-ribbon {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
        text-align: center;
    }
}

/* RIGHT SIDE OVERLAY CONTROLS */
.hero-right-overlay-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.hero-vertical-controls {
    position: absolute;
    right: 2.2rem;
    top: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    pointer-events: auto;
}

.scroll-vertical-lbl {
    font-family: var(--font-heading);
    writing-mode: vertical-rl;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #AABCC5;
    transform: rotate(180deg);
}

.scroll-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0, 207, 255, 0.5);
    background: rgba(6, 29, 43, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00CFFF;
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(0, 207, 255, 0.25);
    animation: bounceDown 2.2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.scroll-circle-btn:hover {
    background: #00CFFF;
    color: #061D2B;
    box-shadow: 0 0 25px rgba(0, 207, 255, 0.6);
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.hero-pagination-dots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0.8rem;
}

.hero-pagination-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-pagination-dots .dot.active {
    background: #00CFFF;
    box-shadow: 0 0 10px #00CFFF;
    transform: scale(1.3);
}

/* FLOATING GLASS STATISTICS BAR */
.floating-stats-glass-bar {
    position: absolute;
    bottom: 1.5rem;
    left: clamp(2rem, 5.5vw, 6rem);
    right: clamp(2rem, 5.5vw, 6rem);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 32, 46, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 0.8rem 1.6rem;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.glass-stat-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
}

.stat-icon {
    font-size: 1.4rem;
    color: #00CFFF;
    filter: drop-shadow(0 0 8px rgba(0, 207, 255, 0.5));
}

.stat-meta {
    display: flex;
    flex-direction: column;
}

.stat-count {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.stat-desc {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #AABCC5;
}

.glass-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.12);
}

.glass-stat-box.highlight-box .stat-count {
    background: linear-gradient(135deg, #00CFFF, #00E676);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-pagination-dots .dot.active {
    background: #00CFFF;
    box-shadow: 0 0 12px #00CFFF;
    height: 18px;
    border-radius: 10px;
}

/* FLOATING SMART SHOWCASE & VIRTUAL TOUR CARD (Bottom Right) */
.floating-showcase-card {
    position: absolute;
    right: clamp(1.5rem, 3vw, 3rem);
    bottom: 2.2rem;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(9, 43, 58, 0.88);
    border: 1px solid rgba(0, 207, 255, 0.28);
    border-radius: 20px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 207, 255, 0.12);
    width: 290px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    cursor: pointer;
    z-index: 10;
}

.floating-showcase-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(0, 207, 255, 0.6);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 207, 255, 0.3);
}

.showcase-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 3px 10px;
    background: rgba(0, 207, 255, 0.1);
    border: 1px solid rgba(0, 207, 255, 0.25);
    border-radius: 20px;
}

.showcase-status-badge:empty {
    display: none !important;
}

.pulse-status-dot {
    width: 7px;
    height: 7px;
    background-color: #20E89B;
    border-radius: 50%;
    box-shadow: 0 0 10px #20E89B;
    animation: pulseGlow 1.8s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.status-lbl {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00CFFF;
    text-transform: uppercase;
}

.showcase-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
}

.showcase-icon-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-pulse-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(0, 207, 255, 0.45);
    border-radius: 50%;
    animation: radarSpin 12s linear infinite;
}

@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.showcase-play-btn {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00CFFF 0%, #0088CC 100%);
    border: none;
    color: #061D2B;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.floating-showcase-card:hover .showcase-play-btn {
    transform: scale(1.12);
    background: #FFFFFF;
    color: #061D2B;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
}

.showcase-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.showcase-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #AABCC5;
    text-transform: uppercase;
}

.showcase-title {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    color: #FFFFFF !important;
    line-height: 1.2;
}

.showcase-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #00CFFF !important;
    cursor: pointer;
    margin-top: 4px;
}

.showcase-action-btn i {
    transition: transform 0.3s ease;
}

.floating-showcase-card:hover .showcase-action-btn i {
    transform: translateX(5px);
}

/* CORPORATE VIDEO SHOWCASE MODAL */
.video-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(6, 29, 43, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 20px;
}

.video-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #092B3A;
    border: 1px solid rgba(0, 207, 255, 0.3);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 207, 255, 0.2);
    transform: scale(0.92);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal-overlay.active .video-modal-container {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.video-modal-close:hover {
    background: #00CFFF;
    color: #061D2B;
    transform: rotate(90deg);
}

.video-modal-header {
    margin-bottom: 20px;
}

.modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #00CFFF;
    margin-bottom: 6px;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.video-wrapper video,
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* FLOATING GLASS STATISTICS BAR (Across Bottom Left) */
.floating-stats-glass-bar {
    position: absolute;
    left: clamp(2rem, 5vw, 5.5rem);
    bottom: 2rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1rem 2rem;
    background: rgba(9, 43, 58, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    max-width: calc(100% - 390px);
}

.glass-stat-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.glass-stat-box .stat-icon {
    font-size: 1.25rem;
    color: #00CFFF;
}

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

.stat-count {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    color: #FFFFFF !important;
    display: block;
    line-height: 1;
}

.stat-desc {
    font-family: var(--font-heading);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #AABCC5 !important;
    display: block;
}

.glass-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
}

.glass-stat-box.highlight-box .stat-icon,
.glass-stat-box.highlight-box .stat-count {
    color: #20E89B !important;
}

/* Responsive Scaling for Hero Section */
@media (max-width: 1400px) {
    .floating-stats-glass-bar {
        max-width: calc(100% - 360px);
        padding: 0.85rem 1.4rem;
        gap: 1rem;
    }
    .hero-verticals-bar {
        padding: 1rem 1.2rem;
        gap: 0.8rem;
    }
    .vertical-block {
        min-width: 120px;
    }
}

@media (max-width: 1200px) {
    .hero-architectural {
        flex-direction: column;
        min-height: auto;
        padding-bottom: 2rem;
    }
    .hero-architectural-mask {
        position: relative;
        width: 100%;
        height: 450px;
        clip-path: none;
        order: 2;
    }
    .hero-content-left {
        width: 100%;
        max-width: 100%;
        padding-right: clamp(2rem, 5vw, 5.5rem);
        order: 1;
    }
    .floating-stats-glass-bar {
        position: relative;
        left: 0;
        bottom: 0;
        margin: 2rem clamp(2rem, 5vw, 5.5rem);
        max-width: calc(100% - 4rem);
        flex-wrap: wrap;
        order: 3;
    }
    .floating-showcase-card {
        position: relative;
        right: 0;
        bottom: 0;
        margin: 1rem clamp(2rem, 5vw, 5.5rem);
        width: auto;
        max-width: calc(100% - 4rem);
        order: 4;
    }
    .handwritten-overlay {
        display: none;
    }
}

.triad-label {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-text-muted);
}

@keyframes pulse {

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

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

/* --- 8. INTERACTIVE THREE-BUSINESS SECTION --- */
.businesses-section {
    position: relative;
    width: 100%;
    padding: 6.5rem 0 4.5rem;
    z-index: 2;
    background-color: var(--color-bg);
}

.section-header-compact {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0 1.5rem;
}

.section-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--color-blue-primary);
    margin-bottom: 0.5rem;
}

.section-title-sm {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
}

.section-subtext {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Telemetry Badges */
.panel-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}

.badge-blue {
    background: var(--color-blue-light);
    color: var(--color-blue-primary);
    border: 1px solid rgba(0, 85, 255, 0.2);
}

.badge-orange {
    background: var(--color-orange-light);
    color: var(--color-orange-primary);
    border: 1px solid rgba(230, 92, 0, 0.2);
}

.badge-green {
    background: var(--color-green-light);
    color: var(--color-green-primary);
    border: 1px solid rgba(0, 135, 90, 0.2);
}

.status-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: pulse 1.8s infinite;
}

.pulse-blue {
    background: var(--color-blue-primary);
}

.pulse-orange {
    background: var(--color-orange-primary);
}

.pulse-green {
    background: var(--color-green-primary);
}

/* Modern 3 Vertical Cards Grid Layout */
.vertical-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.vertical-card {
    position: relative;
    background: #1E3847;
    border-radius: 28px;
    padding: 3rem 2.2rem 2.2rem;
    border: 1px solid var(--color-surface-border);
    box-shadow: 0 15px 40px -10px rgba(87, 79, 70, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s var(--ease-cinematic), box-shadow 0.4s ease, border-color 0.4s ease;
}

.vertical-card:hover {
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.card-blue-theme:hover {
    border-color: rgba(0, 85, 255, 0.3);
}

.card-orange-theme:hover {
    border-color: rgba(230, 92, 0, 0.3);
}

.card-green-theme:hover {
    border-color: rgba(0, 135, 90, 0.3);
}

/* Top Right Ribbon Badge */
.card-ribbon-badge {
    position: relative;
    align-self: flex-start;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 1.5rem;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 3;
}

.ribbon-blue {
    background: linear-gradient(135deg, var(--color-blue-primary), var(--color-blue-accent));
}

.ribbon-orange {
    background: linear-gradient(135deg, var(--color-orange-primary), var(--color-orange-accent));
}

.ribbon-green {
    background: linear-gradient(135deg, var(--color-green-primary), var(--color-green-accent));
}

/* Translucent Outline Watermark (1988, EPC, SOLAR) */
.card-watermark {
    position: absolute;
    right: -10px;
    bottom: 20px;
    font-family: var(--font-heading);
    font-size: 7.5rem;
    font-weight: 900;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.5px #FFFFFF !important;
    opacity: 0.22 !important;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    z-index: 1;
}

/* Transparent Logo Container (Behind box removed, increased logo size) */
.card-icon-square {
    width: auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.card-company-logo {
    width: auto;
    max-width: 210px;
    height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s ease;
    transform: scale(1.15);
    transform-origin: left center;
}

.vertical-card:hover .card-company-logo {
    transform: scale(1.15);
}

.node-company-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.14));
}

/* Custom Size Adjustment for Swati Green Logo */
.card-green-theme .card-company-logo {
    height: 88px;
    max-width: 230px;
    transform: scale(1.24);
    transform-origin: left center;
}

.card-green-theme:hover .card-company-logo {
    transform: scale(1.24);
}

.icon-box-blue,
.icon-box-orange,
.icon-box-green {
    background: transparent !important;
}

/* Title & Underline */
.vertical-card-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.card-title-line {
    height: 4px;
    width: 48px;
    border-radius: 2px;
    margin-bottom: 1.4rem;
    position: relative;
    z-index: 2;
}

.line-blue {
    background: var(--color-blue-primary);
}

.line-orange {
    background: var(--color-orange-primary);
}

.line-green {
    background: var(--color-green-primary);
}

/* Description */
.vertical-card-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: 1.8rem;
    position: relative;
    z-index: 2;
}

/* Feature Star Capsules List */
.feature-star-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.2rem;
    position: relative;
    z-index: 2;
}

.star-capsule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    transition: transform 0.2s ease, background 0.2s ease;
}



.capsule-blue {
    background: var(--color-blue-light);
    border: 1px solid rgba(0, 85, 255, 0.18);
    color: var(--color-blue-dark);
}

.capsule-orange {
    background: var(--color-orange-light);
    border: 1px solid rgba(230, 92, 0, 0.18);
    color: var(--color-orange-dark);
}

.capsule-green {
    background: var(--color-green-light);
    border: 1px solid rgba(0, 135, 90, 0.18);
    color: var(--color-green-dark);
}

.star-icon {
    font-size: 0.9rem;
    font-weight: 800;
}

.capsule-blue .star-icon {
    color: var(--color-blue-primary);
}

.capsule-orange .star-icon {
    color: var(--color-orange-primary);
}

.capsule-green .star-icon {
    color: var(--color-green-primary);
}

/* CTA Button */
.card-cta-wrapper {
    position: relative;
    z-index: 2;
}

.vertical-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 40px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-btn-blue {
    background: linear-gradient(135deg, var(--color-blue-primary), var(--color-blue-accent));
    box-shadow: 0 6px 20px rgba(0, 85, 255, 0.25);
}

.cta-btn-orange {
    background: linear-gradient(135deg, var(--color-orange-primary), var(--color-orange-accent));
    box-shadow: 0 6px 20px rgba(230, 92, 0, 0.25);
}

.cta-btn-green {
    background: linear-gradient(135deg, var(--color-green-primary), var(--color-green-accent));
    box-shadow: 0 6px 20px rgba(0, 135, 90, 0.25);
}

.vertical-card-cta:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

/* --- 9. CONNECTING SCHEMATIC SECTION --- */
.schematic-section {
    position: relative;
    width: 100%;
    padding: 8rem 0;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-surface-border);
    border-bottom: 1px solid var(--color-surface-border);
    z-index: 2;
    overflow: hidden;
}

.schematic-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.svg-schematic-wrapper {
    width: 100%;
    max-width: 950px;
}

.schematic-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.schematic-text-content {
    text-align: center;
    max-width: 750px;
}

.schematic-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
}

.highlight-text {
    background: linear-gradient(90deg, var(--color-blue-primary), var(--color-orange-primary), var(--color-green-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.schematic-copy {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}

/* --- 10. UNIQUE SYNERGY MATRIX HUB SECTION --- */
.synergy-section {
    position: relative;
    width: 100%;
    padding: 7rem 0;
    background-color: var(--color-bg);
    z-index: 2;
}

.matrix-tab-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.matrix-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.9rem 2rem;
    border-radius: 40px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-surface-border);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    box-shadow: 0 4px 12px rgba(87, 79, 70, 0.04);
    transition: var(--transition-fast);
}

.tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-blue {
    background: var(--color-blue-primary);
}

.dot-orange {
    background: var(--color-orange-primary);
}

.dot-green {
    background: var(--color-green-primary);
}

.matrix-tab-btn:hover,
.matrix-tab-btn.active {
    background: #1E3847;
    color: var(--color-text-main);
    border-color: rgba(28, 24, 20, 0.2);
    box-shadow: 0 8px 25px rgba(87, 79, 70, 0.1);
}

.synergy-content-wrapper {
    max-width: 1050px;
    margin: 0 auto;
}

.synergy-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}

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

.synergy-card-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.synergy-info-card {
    background: #1E3847;
    border: 1px solid var(--color-surface-border);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: var(--color-surface-shadow);
}

.card-tag {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 1rem;
}

.card-blue .card-tag {
    color: var(--color-blue-primary);
}

.card-orange .card-tag {
    color: var(--color-orange-primary);
}

.card-green .card-tag {
    color: var(--color-green-primary);
}

.synergy-info-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.synergy-info-card p {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.synergy-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.synergy-checklist li {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.synergy-stats-card {
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-surface-border);
}

.card-blue-sub {
    background: var(--color-blue-light);
    border-color: rgba(0, 85, 255, 0.2);
}

.card-orange-sub {
    background: var(--color-orange-light);
    border-color: rgba(230, 92, 0, 0.2);
}

.card-green-sub {
    background: var(--color-green-light);
    border-color: rgba(0, 135, 90, 0.2);
}

.stat-box {
    margin-bottom: 1.5rem;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.card-blue-sub .stat-number {
    color: var(--color-blue-primary);
}

.card-orange-sub .stat-number {
    color: var(--color-orange-primary);
}

.card-green-sub .stat-number {
    color: var(--color-green-primary);
}

.stat-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    display: block;
    margin-top: 4px;
}

.synergy-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.6rem;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #FFFFFF;
    transition: var(--transition-fast);
}

.synergy-link-btn.btn-blue {
    background: var(--color-blue-primary);
}

.synergy-link-btn.btn-orange {
    background: var(--color-orange-primary);
}

.synergy-link-btn.btn-green {
    background: var(--color-green-primary);
}

.synergy-link-btn:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- 11. FUTURISTIC ORBITAL ECOSYSTEM SECTION --- */
.ecosystem-section {
    position: relative;
    width: 100%;
    padding: 7rem 0;
    z-index: 2;
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-surface-border);
}

.section-header.center {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 5rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.section-desc {
    font-size: 1.05rem;
    color: var(--color-text-muted);
}

.orbital-system-wrapper {
    position: relative;
    width: 650px;
    height: 650px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbital-lines-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.core-hub-node {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #1E3847;
    border: 1px solid var(--color-surface-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 40px rgba(87, 79, 70, 0.12);
    z-index: 3;
}

.official-core-logo {
    width: 85px;
    height: 85px;
    object-fit: contain;
    margin-bottom: 4px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.15));
    z-index: 4;
}

.core-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    inset: -12px;
    border: 2px stroke var(--color-blue-primary);
    animation: spinSlow 20s linear infinite;
}

.ring-2 {
    inset: -24px;
    border: 2px stroke var(--color-orange-primary);
    animation: spinSlow 35s linear infinite reverse;
}

.core-content {
    text-align: center;
}

.core-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 2px;
    display: block;
    color: var(--color-text-main);
}

.core-subtitle {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--color-text-muted);
    display: block;
}

/* Orbiting Satellite Nodes */
.orbit-node {
    position: absolute;
    width: 220px;
    padding: 1.25rem;
    background: #1E3847;
    border: 1px solid var(--color-surface-border);
    border-radius: 18px;
    box-shadow: var(--color-surface-shadow);
    backdrop-filter: blur(12px);
    cursor: pointer;
    z-index: 4;
    transition: transform 0.3s var(--ease-cinematic), border-color 0.3s ease, box-shadow 0.3s ease;
}

.node-power {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.node-infra {
    bottom: 60px;
    right: 20px;
}

.node-energy {
    bottom: 60px;
    left: 20px;
}

.node-power:hover {
    border-color: var(--color-blue-primary);
    box-shadow: 0 12px 35px var(--color-blue-glow);
}

.node-infra:hover {
    border-color: var(--color-orange-primary);
    box-shadow: 0 12px 35px var(--color-orange-glow);
}

.node-energy:hover {
    border-color: var(--color-green-primary);
    box-shadow: 0 12px 35px var(--color-green-glow);
}

.node-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.node-category {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    display: block;
}

.node-company {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.node-tooltip {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

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

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

/* --- 12. KINETIC IMPACT & PILLARS SECTION --- */
.impact-section {
    position: relative;
    width: 100%;
    padding: 7rem 0 9rem;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-surface-border);
    z-index: 2;
    overflow: hidden;
}

.marquee-wrapper {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.08;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-text {
    font-family: var(--font-display);
    font-size: 9rem;
    font-weight: 800;
    letter-spacing: 4px;
    white-space: nowrap;
    -webkit-text-stroke: 2px #1E3847;
    color: transparent;
}

.marquee-text .arr {
    -webkit-text-stroke: 0;
    color: #FFFFFF;
    margin: 0 2rem;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
    align-items: stretch !important; /* Force boxes to align perfectly at the top and stretch to the same height */
}

.pillar-card {
    background: #1E3847;
    border: 1px solid var(--color-surface-border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: var(--color-surface-shadow);
    transition: transform 0.4s var(--ease-cinematic), border-color 0.4s ease, box-shadow 0.4s ease;
    height: 100% !important; /* Force the box itself to stretch perfectly */
    margin-top: 0 !important;
}

.pillar-card:hover {
    border-color: rgba(28, 24, 20, 0.2);
    box-shadow: 0 15px 40px rgba(87, 79, 70, 0.1);
}

.pillar-num {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-blue-primary);
    margin-bottom: 1.5rem;
}

.pillar-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 0.85rem;
    min-height: 3.5rem; /* Forces consistent height so descriptions perfectly align horizontally */
    display: flex;
    align-items: flex-start;
}

.pillar-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

@keyframes marquee {
    from {
        transform: translateX(150px);
    }

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

/* --- 13. CINEMATIC FINAL CTA SECTION --- */
.final-cta-section {
    position: relative;
    width: 100%;
    padding: 9rem 0;
    background: #1E3847;
    overflow: hidden;
    z-index: 2;
}

.cta-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 70vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(0, 85, 255, 0.08) 0%, rgba(230, 92, 0, 0.06) 40%, rgba(0, 135, 90, 0.08) 70%, transparent 100%);
    filter: blur(100px);
    pointer-events: none;
    animation: ctaGlowPulse 5s ease-in-out infinite;
}

@keyframes ctaGlowPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.22);
        opacity: 1;
    }
}

.final-cta-title {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--color-text-main);
    margin: 1.5rem 0 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ── Each title line: clip-path wipe reveal ── */
.cta-line {
    display: block;
    overflow: hidden;
    opacity: 0;
    padding: 0.04em 0;
    /* prevent clip eating descenders */
    clip-path: inset(0 100% 0 0);
}

.final-cta-section.cta-active .cta-line {
    animation: ctaLineWipe 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.final-cta-section.cta-active .cta-line-1 {
    animation-delay: 0.1s;
}

.final-cta-section.cta-active .cta-line-2 {
    animation-delay: 0.28s;
}

.final-cta-section.cta-active .cta-line-3 {
    animation-delay: 0.46s;
}

@keyframes ctaLineWipe {
    0% {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
    }
}

/* ── Gradient shimmer on ONE VISION. ── */
.cta-gradient-text {
    background: linear-gradient(90deg,
            var(--color-blue-primary) 0%,
            var(--color-orange-primary) 40%,
            var(--color-green-primary) 70%,
            var(--color-blue-primary) 100%);
    background-size: 250% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShimmer 3.5s ease-in-out infinite;
    animation-play-state: paused;
}

.final-cta-section.cta-active .cta-gradient-text {
    animation-play-state: running;
    animation-delay: 0.4s;
}

@keyframes gradientShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.final-cta-sub {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: 3.5rem;
    opacity: 0;
    transform: translateY(16px);
}

.final-cta-section.cta-active .final-cta-sub {
    animation: ctaFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.62s forwards;
}

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

/* Section tag: slide from left */
.final-cta-section .section-tag {
    opacity: 0;
    transform: translateX(-22px);
}

.final-cta-section.cta-active .section-tag {
    animation: ctaTagSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.02s forwards;
}

@keyframes ctaTagSlide {
    to {
        opacity: 1;
        transform: translateX(150px);
    }
}

/* ── Final CTA buttons: spring-overshoot bounce ── */
.tri-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 1.15rem 2.2rem;
    border-radius: 50px;
    background: #1E3847;
    border: 1px solid var(--color-surface-border);
    box-shadow: 0 4px 15px rgba(87, 79, 70, 0.06);
    transition: transform 0.3s var(--ease-cinematic), border-color 0.3s ease, box-shadow 0.3s ease;
    /* Start hidden for cta-active system */
    opacity: 0;
    transform: translateY(45px) scale(0.82);
}

.final-cta-section.cta-active .tri-btn {
    animation: ctaBtnSpring 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.final-cta-section.cta-active .tri-force-buttons .tri-btn:nth-child(1) {
    animation-delay: 0.72s;
}

.final-cta-section.cta-active .tri-force-buttons .tri-btn:nth-child(2) {
    animation-delay: 0.87s;
}

.final-cta-section.cta-active .tri-force-buttons .tri-btn:nth-child(3) {
    animation-delay: 1.02s;
}

@keyframes ctaBtnSpring {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.82);
    }

    55% {
        opacity: 1;
        transform: translateY(-8px) scale(1.05);
    }

    78% {
        transform: translateY(4px) scale(0.98);
    }

    92% {
        transform: translateY(-2px) scale(1.01);
    }

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

.btn-brand {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--color-text-main);
}

.tri-force-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.btn-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-blue:hover {
    border-color: var(--color-blue-primary);
    box-shadow: 0 10px 30px var(--color-blue-glow);
}

.btn-blue:hover .btn-arrow {
    color: var(--color-blue-primary);
}

.btn-orange:hover {
    border-color: var(--color-orange-primary);
    box-shadow: 0 10px 30px var(--color-orange-glow);
}

.btn-orange:hover .btn-arrow {
    color: var(--color-orange-primary);
}

.btn-green:hover {
    border-color: var(--color-green-primary);
    box-shadow: 0 10px 30px var(--color-green-glow);
}

.btn-green:hover .btn-arrow {
    color: var(--color-green-primary);
}

/* ── Final CTA section scroll-reveal stagger ── */
.final-cta-section .section-tag.reveal-up {
    transition-delay: 0s;
}

.final-cta-section .final-cta-title.reveal-up {
    transition-delay: 0.12s;
}

.final-cta-section .final-cta-sub.reveal-up {
    transition-delay: 0.24s;
}

/* Buttons: pop-in with a slight scale */
.tri-btn.reveal-up {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.tri-btn.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tri-force-buttons .tri-btn:nth-child(1).reveal-up {
    transition-delay: 0.3s;
}

.tri-force-buttons .tri-btn:nth-child(2).reveal-up {
    transition-delay: 0.42s;
}

.tri-force-buttons .tri-btn:nth-child(3).reveal-up {
    transition-delay: 0.54s;
}

/* --- 14. MINIMAL PREMIUM FOOTER --- */
.footer {
    position: relative;
    width: 100%;
    background: var(--color-bg-darker);
    border-top: 1px solid var(--color-surface-border);
    padding: 5rem 0 3rem;
    z-index: 2;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 0;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.official-footer-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
}

.footer-tagline {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.footer-head {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-text-dim);
    display: block;
    margin-bottom: 1.25rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.footer-links a:hover {
    color: var(--color-text-main);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2.5rem;
}

.copyright {
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

.floating-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary, #007bff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.floating-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-back-to-top:hover {
    background-color: var(--color-primary-dark, #0056b3);
    color: white;
}

/* --- CONTACT SECTION --- */
.contact-section {
    padding: 8rem 0;
    background-color: var(--color-bg);
    position: relative;
    overflow: hidden;
}

/* Faint watermark behind the header (removed as per user request) */
.contact-section::before {
    display: none;
}

@keyframes typeSmoothly {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* Scale down the section header text in contact only */
.contact-section .section-title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin-bottom: 0.6rem;
    color: #FFFFFF;
}

.contact-section .section-tag {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: #00D2FF;
    font-weight: 800;
}

.contact-section .section-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #CBDCE6;
}

.contact-section .section-header {
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
}

/* Scroll-reveal animation states */
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger delays for contact section children */
.contact-section .section-tag.reveal-up {
    transition-delay: 0s;
}

.contact-section .section-title.reveal-up {
    transition-delay: 0.1s;
}

.contact-section .section-desc.reveal-up {
    transition-delay: 0.2s;
}

.contact-section .c-card.reveal-up:nth-child(1) {
    transition-delay: 0.05s;
}

.contact-section .c-card.reveal-up:nth-child(2) {
    transition-delay: 0.15s;
}

.contact-section .c-card.reveal-up:nth-child(3) {
    transition-delay: 0.25s;
}

.contact-section .c-card.reveal-up:nth-child(4) {
    transition-delay: 0.35s;
}


.unique-contact-wrapper {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
    margin-top: 3.5rem;
    align-items: flex-start;
}

/* Contact Cards (Left Side) */
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
}

.c-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.35rem 1.75rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-surface-border);
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.35s var(--ease-cinematic);
}

.c-card:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 210, 255, 0.4);
}

/* Icon circle */
.c-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00D2FF;
    transition: transform 0.35s ease, background 0.35s ease;
    margin-top: 2px;
}

.c-card:hover .c-card-icon {
    background: rgba(0, 210, 255, 0.2);
    color: #FFFFFF;
}

.c-card-icon svg {
    width: 22px;
    height: 22px;
}

/* Card text */
.c-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.c-card-content h3 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0;
    letter-spacing: 0.3px;
}

.c-card-content p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Email card: individually clickable rows */
.c-card-email {
    align-items: flex-start;
    cursor: default;
}

.c-email-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.c-email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.c-email-row:hover {
    background: rgba(0, 210, 255, 0.1);
}

.c-email-label {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-dim);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.c-email-addr {
    font-family: var(--font-body);
    font-size: 0.855rem;
    color: var(--color-text-muted);
    text-align: right;
    word-break: break-all;
    transition: color 0.2s ease;
}

.c-email-row:hover .c-email-addr {
    color: #00D2FF;
}

.c-email-row:hover .c-email-label {
    color: #FFFFFF;
}


/* Glassmorphism Form (Right Side) */
.contact-form-glass {
    background: var(--color-bg-alt);
    padding: 3rem 3.5rem;
    border-radius: 24px;
    border: 1px solid var(--color-surface-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.contact-form-glass h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: #FFFFFF !important;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
}

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

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

.contact-form input,
.contact-form textarea,
.form-select {
    width: 100%;
    padding: 1.1rem 1.4rem;
    background: #132632;
    border: 1px solid var(--color-surface-border);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #95B0C2 !important;
    opacity: 1;
}

.contact-form textarea {
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    resize: vertical;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300D2FF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem top 50%;
    background-size: 0.65rem auto;
}

.form-select option {
    background-color: #132632 !important;
    color: #FFFFFF !important;
    padding: 10px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #00D2FF;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.2);
    background: #172E3C;
}

.contact-btn {
    align-self: flex-start;
    padding: 1.1rem 2.8rem;
    background: linear-gradient(135deg, #00D2FF 0%, #0072FF 100%) !important;
    color: #0A192F !important;
    border: none !important;
    border-radius: 40px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.3);
    transition: box-shadow 0.3s ease !important;
    transform: none !important;
}

.contact-btn span {
    position: relative;
    z-index: 2;
    color: #0A192F !important;
    font-weight: 800;
}

.contact-btn::before {
    display: none !important;
}

.contact-btn:hover,
.contact-btn:active,
.contact-btn:focus {
    background: linear-gradient(135deg, #00D2FF 0%, #0072FF 100%) !important;
    color: #0A192F !important;
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.3) !important;
    outline: none !important;
    transform: none !important;
}

.contact-btn:hover span,
.contact-btn:active span,
.contact-btn:focus span {
    color: #0A192F !important;
}

/* Enforce absolute zero hover movement in contact section */
.contact-section *:hover,
.contact-section .c-card:hover,
.contact-section .c-card-icon:hover {
    transform: none !important;
}

/* ============================================================
   15. RESPONSIVE MEDIA QUERIES — FULL MULTI-BREAKPOINT SYSTEM
   Breakpoints:
     ≤ 1280px  — Tablet Landscape / Small Laptop
     ≤ 1024px  — Tablet Portrait / iPad
     ≤  768px  — Large Phone / Phablet
     ≤  480px  — Small Phone (iPhone SE, Galaxy A series)
     ≤  360px  — Extra Small Phone (budget devices)
   ============================================================ */

/* ─── 1280px: Tablet Landscape ─────────────────────────────── */
@media (max-width: 1280px) {

    :root {
        --navbar-height: 75px;
        --container-max-width: 1100px;
    }

    /* Navbar */
    .nav-menu {
        gap: 1.8rem;
    }

    .nav-link {
        font-size: 0.78rem;
        letter-spacing: 1.5px;
    }

    /* Hero */
    .classic-line {
        font-size: clamp(2.5rem, 6vw, 4.8rem);
        gap: 14px;
    }

    /* Business Cards: 3-col → keep but tighter */
    .vertical-cards-grid {
        gap: 1.5rem;
        padding: 0 1.5rem;
    }

    .vertical-card {
        padding: 2.5rem 1.8rem 1.8rem;
    }

    /* Orbital */
    .orbital-system-wrapper {
        width: 580px;
        height: 580px;
    }

    /* Synergy */
    .synergy-content-wrapper {
        max-width: 900px;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 2rem;
    }

    /* Contact */
    .unique-contact-wrapper {
        gap: 3rem;
    }
}

/* ─── 1024px: Tablet Portrait ───────────────────────────────── */
@media (max-width: 1024px) {

    :root {
        --navbar-height: 70px;
    }

    /* General */
    .container {
        padding: 0 1.5rem;
    }

    /* Sections: reduce vertical padding */
    .businesses-section {
        padding: 5rem 0 3.5rem;
    }

    .schematic-section {
        padding: 5rem 0;
    }

    .synergy-section {
        padding: 5rem 0;
    }

    .ecosystem-section {
        padding: 5rem 0;
    }

    .impact-section {
        padding: 5rem 0 6rem;
    }

    .final-cta-section {
        padding: 6rem 0;
    }

    .contact-section {
        padding: 6rem 0;
    }

    .footer {
        padding: 4rem 0 2.5rem;
    }

    /* Navbar */
    .nav-menu {
        gap: 1.5rem;
    }

    /* Hero */
    .hero-section {
        min-height: 640px;
    }

    .classic-line {
        font-size: clamp(2.2rem, 5.5vw, 4.2rem);
        gap: 12px;
    }

    .hero-badge {
        font-size: 0.68rem;
        letter-spacing: 2px;
        padding: 8px 18px;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle-classic {
        gap: 16px;
        margin-bottom: 2.5rem;
    }

    /* Business Cards: 3-col → 1-col */
    .vertical-cards-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .vertical-card {
        padding: 2.2rem 1.8rem 1.8rem;
    }

    .card-watermark {
        font-size: 5rem;
    }

    /* Synergy Matrix */
    .synergy-card-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .matrix-tab-bar {
        gap: 0.75rem;
        margin-bottom: 2.5rem;
    }

    .matrix-tab-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.75rem;
    }

    /* Orbital */
    .orbital-system-wrapper {
        width: 100%;
        max-width: 520px;
        height: 520px;
    }

    .core-hub-node {
        width: 155px;
        height: 155px;
    }

    .official-core-logo {
        width: 65px;
        height: 65px;
    }

    .orbit-node {
        width: 185px;
        padding: 1rem;
    }

    .node-power {
        top: 20px;
    }

    .node-infra {
        bottom: 45px;
        right: 10px;
    }

    .node-energy {
        bottom: 45px;
        left: 10px;
    }

    /* Impact pillars */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Contact */
    .unique-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info-cards {
        align-items: stretch;
    }
}

/* ─── 768px: Large Phone / Phablet ──────────────────────────── */
@media (max-width: 768px) {

    :root {
        --navbar-height: 65px;
    }

    /* General */
    .container {
        padding: 0 1.25rem;
    }

    /* Sections: further reduce padding */
    .businesses-section {
        padding: 4rem 0 3rem;
    }

    .schematic-section {
        padding: 3.5rem 0;
    }

    .synergy-section {
        padding: 4rem 0;
    }

    .ecosystem-section {
        padding: 4rem 0;
    }

    .impact-section {
        padding: 4rem 0 5rem;
    }

    .final-cta-section {
        padding: 5rem 0;
    }

    .contact-section {
        padding: 5rem 0;
    }

    /* Navbar: slide-in mobile drawer */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #0D1D28 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 0 2.5rem;
        gap: 2rem;
        z-index: 999;
        transition: right 0.4s var(--ease-cinematic);
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-link {
        font-size: 1.1rem !important;
        letter-spacing: 2px !important;
        color: #FFFFFF !important;
    }

    .mobile-toggle {
        display: flex;
    }

    .nav-brand .brand-name {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }

    .official-nav-logo {
        width: 44px;
        height: 44px;
    }

    /* Ambient glow — tone down for perf */
    .glow-orb {
        opacity: 0.1;
        filter: blur(80px);
    }

    /* Hero */
    .hero-section {
        min-height: 580px;
        padding-top: var(--navbar-height);
    }

    .hero-content {
        padding: 0 1.25rem;
    }

    .hero-title-avant {
        margin-top: 6rem;
    }

    /* Hero title — Avant responsive */
    .avant-line {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }

    .avant-line:nth-child(2) {
        padding-left: 2rem;
    }

    .avant-line:nth-child(3) {
        padding-left: 4rem;
    }

    .avant-verb,
    .avant-noun {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
    }

    .hero-subtitle-classic {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 2rem;
    }

    .classic-divider {
        display: none;
    }

    .hero-color-triad {
        display: none;
    }

    /* Floating words - smaller so they don't overflow */
    .float-word {
        font-size: clamp(3rem, 18vw, 8rem);
        opacity: 0.04;
    }

    .word-engineering {
        right: -8%;
    }

    /* Section headers */
    .section-header-compact {
        padding: 0 1rem;
        margin-bottom: 2rem;
    }

    .section-header.center {
        margin-bottom: 3rem;
    }

    .section-title-sm {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .section-title {
        font-size: clamp(1.6rem, 5vw, 2.4rem);
    }

    .section-desc {
        font-size: 0.95rem;
    }

    /* Business Cards */
    .vertical-cards-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 1.25rem;
        gap: 1.25rem;
    }

    .vertical-card {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 22px;
    }

    .card-watermark {
        font-size: 4rem;
    }

    .vertical-card-title {
        font-size: 1.55rem;
    }

    /* Schematic */
    .svg-schematic-wrapper {
        display: none;
    }

    .schematic-section {
        padding: 3rem 0;
    }

    /* Synergy */
    .synergy-card-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .matrix-tab-bar {
        gap: 0.5rem;
    }

    .matrix-tab-btn {
        padding: 0.65rem 1.1rem;
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    .synergy-info-card {
        padding: 2rem;
    }

    .synergy-info-card h3 {
        font-size: 1.4rem;
    }

    .synergy-info-card p {
        font-size: 0.95rem;
    }

    .synergy-stats-card {
        padding: 1.75rem;
    }

    .stat-number {
        font-size: 2.2rem;
    }

    /* Orbital */
    .orbital-system-wrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        max-width: 100%;
    }

    .orbital-lines-svg {
        display: none;
    }

    .core-hub-node {
        position: relative;
        width: 140px;
        height: 125px;
        margin: 0 auto 1rem;
    }

    .official-core-logo {
        width: 58px;
        height: 58px;
    }

    .core-title {
        font-size: 1rem;
    }

    .core-subtitle {
        font-size: 0.7rem;
    }

    .orbit-node {
        position: relative;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }



    /* Impact */
    .marquee-text {
        font-size: 5.5rem;
    }

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

    .pillar-card {
        padding: 2rem 1.5rem;
    }

    /* Final CTA */
    .final-cta-title {
        font-size: clamp(2rem, 7vw, 3.2rem);
    }

    .final-cta-sub {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }

    .tri-force-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .tri-btn {
        justify-content: space-between;
        padding: 1rem 1.8rem;
    }

    /* Contact */
    .unique-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-top: 2.5rem;
    }

    .c-card {
        padding: 1.25rem 1.5rem;
        border-radius: 16px;
        gap: 1rem;
    }

    .c-card-icon {
        width: 48px;
        height: 48px;
    }

    .c-card-content h3 {
        font-size: 1rem;
    }

    .c-card-content p {
        font-size: 0.85rem;
    }

    .contact-form-glass {
        padding: 2rem 1.5rem;
        border-radius: 18px;
    }

    .contact-form-glass h3 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

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

    .contact-form {
        gap: 1.2rem;
    }

    .contact-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 1.1rem 2rem;
    }

    /* Footer */
    .footer {
        padding: 3.5rem 0 2rem;
    }

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

    /* Back-to-top */
    .floating-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* ─── 480px: Small Phone ────────────────────────────────────── */
@media (max-width: 480px) {

    :root {
        --navbar-height: 60px;
    }

    /* General */
    .container {
        padding: 0 1rem;
    }

    html {
        font-size: 15px;
    }

    /* Sections: tight padding */
    .businesses-section {
        padding: 3.5rem 0 2.5rem;
    }

    .schematic-section {
        padding: 2.5rem 0;
    }

    .synergy-section {
        padding: 3.5rem 0;
    }

    .ecosystem-section {
        padding: 3.5rem 0;
    }

    .impact-section {
        padding: 3.5rem 0 4rem;
    }

    .final-cta-section {
        padding: 4rem 0;
    }

    .contact-section {
        padding: 4rem 0;
    }

    .footer {
        padding: 3rem 0 1.75rem;
    }

    /* Navbar */
    .official-nav-logo {
        width: 38px;
        height: 38px;
    }

    .nav-brand .brand-name {
        font-size: 0.95rem;
        letter-spacing: 1.5px;
    }

    .nav-container {
        padding: 0 1rem;
    }

    /* Loader */
    .official-loader-logo {
        width: 90px;
        height: 90px;
    }

    .loader-text {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
        letter-spacing: 6px;
    }

    /* Hero */
    .hero-section {
        min-height: 520px;
    }

    .hero-content {
        padding: 0 1rem;
    }

    /* Hero title — Avant mobile */
    .avant-line:nth-child(2) {
        padding-left: 1rem;
    }

    .avant-line:nth-child(3) {
        padding-left: 1rem;
    }

    .avant-verb,
    .avant-noun {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }

    .hero-subtitle-classic {
        display: none;
    }

    /* Floating words: near-invisible on tiny screens */
    .float-word {
        opacity: 0.03;
        font-size: clamp(2.5rem, 20vw, 6rem);
    }

    .word-engineering {
        right: -15%;
        top: 35%;
    }

    /* Section headers */
    .section-tag {
        font-size: 0.68rem;
        letter-spacing: 2px;
    }

    .section-title-sm {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }

    .section-title {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    .section-desc,
    .section-subtext {
        font-size: 0.88rem;
    }

    .section-header.center {
        margin-bottom: 2.5rem;
    }

    /* Business Cards */
    .vertical-cards-grid {
        padding: 0 1rem;
        gap: 1rem;
    }

    .vertical-card {
        padding: 1.75rem 1.25rem 1.25rem;
        border-radius: 18px;
    }

    .card-watermark {
        font-size: 3.5rem;
        bottom: 10px;
    }

    .card-ribbon-badge {
        font-size: 0.68rem;
        padding: 8px 16px;
        letter-spacing: 1px;
    }

    .card-icon-square {
        height: 54px;
        margin-bottom: 1.2rem;
    }

    .card-company-logo {
        height: 54px;
        max-width: 130px;
    }

    .card-green-theme .card-company-logo {
        height: 66px;
        max-width: 160px;
    }

    .vertical-card-title {
        font-size: 1.35rem;
    }

    .vertical-card-desc {
        font-size: 0.88rem;
        margin-bottom: 1.25rem;
    }

    .star-capsule {
        padding: 8px 14px;
        font-size: 0.78rem;
    }

    .feature-star-list {
        gap: 0.6rem;
        margin-bottom: 1.5rem;
    }

    .vertical-card-cta {
        padding: 0.9rem 1.2rem;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    /* Synergy Matrix */
    .matrix-tab-bar {
        gap: 0.4rem;
        padding: 0 0.5rem;
    }

    .matrix-tab-btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.65rem;
        letter-spacing: 0.5px;
        gap: 6px;
    }

    .tab-dot {
        width: 6px;
        height: 6px;
    }

    .synergy-info-card {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .synergy-info-card h3 {
        font-size: 1.2rem;
    }

    .synergy-info-card p {
        font-size: 0.88rem;
        margin-bottom: 1.25rem;
    }

    .synergy-checklist li {
        font-size: 0.82rem;
    }

    .synergy-stats-card {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.68rem;
    }

    .synergy-link-btn {
        padding: 0.85rem 1.3rem;
        font-size: 0.75rem;
    }

    /* Orbital */
    .core-hub-node {
        width: 120px;
        height: 120px;
    }

    .official-core-logo {
        width: 50px;
        height: 50px;
    }

    .core-title {
        font-size: 0.85rem;
        letter-spacing: 1.5px;
    }

    .core-subtitle {
        font-size: 0.6rem;
        letter-spacing: 3px;
    }

    .orbit-node {
        border-radius: 14px;
        padding: 1rem 1.25rem;
    }

    .node-icon {
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
    }

    .node-company-logo {
        width: 30px;
        height: 30px;
    }

    .node-category {
        font-size: 0.58rem;
    }

    .node-company {
        font-size: 0.85rem;
    }

    .node-tooltip {
        font-size: 0.75rem;
    }

    /* Impact */
    .marquee-wrapper {
        top: 30px;
    }

    .marquee-text {
        font-size: 4rem;
        -webkit-text-stroke: 1.5px #1E3847;
    }

    .pillar-card {
        padding: 1.75rem 1.25rem;
        border-radius: 16px;
    }

    .pillar-num {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .pillar-title {
        font-size: 1.2rem;
    }

    .pillar-desc {
        font-size: 0.88rem;
    }

    /* Final CTA */
    .final-cta-section {
        padding: 3.5rem 0;
    }

    .final-cta-title {
        font-size: clamp(1.7rem, 8vw, 2.5rem);
        letter-spacing: -0.5px;
        margin: 1rem 0 1rem;
    }

    .final-cta-sub {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    .tri-btn {
        padding: 0.95rem 1.5rem;
        border-radius: 40px;
    }

    .btn-brand {
        font-size: 0.82rem;
        letter-spacing: 1px;
    }

    /* Contact */
    .c-card {
        padding: 1.1rem 1.25rem;
        border-radius: 14px;
        gap: 1rem;
    }

    .c-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .c-card-content h3 {
        font-size: 0.88rem;
    }

    .c-card-content p {
        font-size: 0.82rem;
    }

    .c-email-row {
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.45rem 0.6rem;
        margin: 0 -0.6rem;
    }

    .c-email-addr {
        text-align: left;
    }

    .contact-form-glass {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }

    .contact-form-glass h3 {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }

    .contact-form input,
    .contact-form textarea,
    .form-select {
        padding: 1rem 1.2rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    /* Footer */
    .footer-tagline {
        font-size: 0.85rem;
    }

    .footer-links a {
        font-size: 0.85rem;
    }

    .official-footer-logo {
        width: 40px;
        height: 40px;
    }

    .footer-logo .brand-name {
        font-size: 1rem;
    }
}

/* ─── 360px: Extra Small Phone ──────────────────────────────── */
@media (max-width: 360px) {

    html {
        font-size: 14px;
    }

    .container {
        padding: 0 0.85rem;
    }

    /* Navbar */
    .nav-brand .brand-name {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .official-nav-logo {
        width: 34px;
        height: 34px;
    }

    /* Hero */
    .classic-line {
        font-size: clamp(1.3rem, 9vw, 2.2rem);
        gap: 6px;
    }

    .hero-badge {
        display: none;
    }

    .hero-title-classic {
        margin-bottom: 1.25rem;
    }

    /* Business cards */
    .vertical-card {
        padding: 1.5rem 1rem 1rem;
        border-radius: 16px;
    }

    .vertical-card-title {
        font-size: 1.2rem;
    }

    .star-capsule {
        padding: 7px 12px;
        font-size: 0.74rem;
    }

    .vertical-card-cta {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }

    /* Synergy tabs */
    .matrix-tab-btn {
        padding: 0.5rem 0.7rem;
        font-size: 0.6rem;
        letter-spacing: 0;
    }

    .matrix-tab-btn span:last-child {
        display: none;
    }

    .matrix-tab-btn::after {
        content: attr(data-synergy);
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }

    /* Final CTA */
    .final-cta-title {
        font-size: clamp(1.5rem, 9vw, 2rem);
    }

    .tri-btn {
        padding: 0.9rem 1.25rem;
    }

    .btn-brand {
        font-size: 0.78rem;
    }

    /* Contact */
    .c-card {
        padding: 1rem;
        border-radius: 12px;
    }

    .contact-form-glass {
        padding: 1.25rem 1rem;
    }

    .contact-form input,
    .contact-form textarea,
    .form-select {
        padding: 0.9rem 1rem;
        font-size: 0.85rem;
    }

    /* Orbital */
    .core-hub-node {
        width: 105px;
        height: 105px;
    }

    .official-core-logo {
        width: 44px;
        height: 44px;
    }

    /* Marquee */
    .marquee-text {
        font-size: 3rem;
    }

    /* Pillar cards */
    .pillar-card {
        padding: 1.5rem 1rem;
    }

    /* Footer */
    .footer {
        padding: 2.5rem 0 1.5rem;
    }
}

/* --- CONTINUOUS IMAGE SLIDER --- */
.slider-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 12px;
}

.slider-track {
    display: flex;
    width: 400%;
    animation: swipe 10s linear infinite;
}

.slider-img {
    width: 25%;
    height: 100%;
    object-fit: cover;
}

@keyframes swipe {
    0% {
        transform: translateX(150px);
    }

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

/* --- FULL SCREEN KEN BURNS SLIDER --- */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: kenburns 12s infinite;
}

.hero-bg-img:nth-child(1) {
    animation-delay: 0s;
}

.hero-bg-img:nth-child(2) {
    animation-delay: 6s;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.76);
    /* Softer transparent overlay */
    z-index: 1;
}

@keyframes kenburns {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
        /* Zoom in by 10% */
    }
}

/* Override for single image zoom */
.hero-bg-img.single-image-zoom {
    opacity: 1;
    animation: single-kenburns 20s ease-in-out infinite alternate;
}

@keyframes single-kenburns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
        /* Zoom in by 15% */
    }
}

/* Natural headline finish */
.dash-headline span {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    -webkit-text-stroke: 0;
    filter: none;
}

.headline-kicker {
    font-size: 0.42em;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 0.2rem;
}

.headline-strength {
    font-size: 0.9em;
    font-weight: 500 !important;
}

.dash-headline .gradient-one {
    margin: 0;
    font-size: 1em;
    font-weight: 700 !important;
    line-height: 1;
    letter-spacing: 0.02em;
}

.headline-brighter {
    font-size: 0.9em;
    font-weight: 500 !important;
    color: var(--color-text-main);
    margin-left: 0;
}

.headline-tomorrow {
    font-size: 1em;
    font-weight: 600 !important;
}

/* Professional statistics alignment */
.dash-bottom-bar {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto minmax(360px, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
    padding: 1.75rem clamp(2rem, 5vw, 5rem);
}

.dash-stats,
.dash-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: clamp(1rem, 3vw, 3rem);
    align-items: start;
}

.stat-item,
.feature-item {
    min-width: 0;
    gap: 0.35rem;
    align-items: flex-start;
    text-align: left;
}

.stat-num {
    white-space: nowrap;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-lbl,
.feature-item span {
    font-size: 0.68rem;
    line-height: 1.5;
    letter-spacing: 0.12em;
}

.feature-item i {
    display: none;
}

.feature-item {
    align-items: flex-start;
}

.dash-center-text {
    display: none;
}

@media (max-width: 900px) {
    .dash-bottom-bar {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 560px) {

    .dash-stats,
    .dash-features {
        gap: 0.75rem;
    }

    .stat-lbl,
    .feature-item span {
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }
}

/* Tighter sector card spacing */
.sector-col {
    min-height: 0;
    padding: 1rem 1rem 1.1rem;
}

.sector-tag {
    margin-bottom: 0.3rem;
}

.sector-title {
    min-height: 0;
    margin-top: 0.35rem;
    margin-bottom: 0.65rem;
    line-height: 1.15;
}

.sector-desc {
    line-height: 1.35;
}

/* Center statistics and feature content */
.dash-stats,
.dash-features {
    justify-items: center;
}

.stat-item,
.feature-item {
    align-items: center;
    text-align: center;
}

/* Keep sector cards close to their content */
.sector-col {
    justify-self: start;
    width: fit-content;
    min-width: 230px;
    max-width: 285px;
}

/* Balanced hero card alignment */
.dash-sectors {
    width: min(100% - 4rem, 1240px);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(2.5rem, 7vh, 5rem) 0 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
}

.sector-col {
    width: auto;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
}

@media (max-width: 700px) {
    .dash-sectors {
        width: min(100% - 2rem, 520px);
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-top: 2rem;
    }
}

/* Lower, tighter business cards */
.dash-sectors {
    padding-top: clamp(5rem, 12vh, 8rem);
}

.sector-title {
    font-size: clamp(0.95rem, 1.15vw, 1.08rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.sector-desc {
    margin-top: 0;
    line-height: 1.35;
}

/* Two-column content inside sector cards */
.sector-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1rem;
    align-content: start;
}

.sector-tag {
    grid-column: 1 / -1;
}

.sector-title {
    grid-column: 1;
    align-self: start;
    margin: 0.45rem 0 0;
}

.sector-desc {
    grid-column: 2;
    align-self: center;
    margin: 0.45rem 0 0;
}

@media (max-width: 700px) {
    .sector-col {
        display: block;
    }

    .sector-title {
        margin-top: 0.45rem;
        margin-bottom: 0.5rem;
    }
}

/* Position the business group in the lower hero area */
@media (min-width: 701px) {
    .dash-grid-container {
        position: relative;
    }

    .dash-sectors {
        position: absolute;
        top: 78%;
        left: 50%;
        width: min(100% - 4rem, 1240px);
        padding-top: 0;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 701px) {
    .sector-desc {
        white-space: nowrap;
    }
}

@media (min-width: 701px) {
    .dash-sectors {
        align-items: stretch;
    }

    .sector-col {
        height: 125px;
        min-height: 125px;
        box-sizing: border-box;
    }
}

.hero-tagline {
    position: absolute;
    left: 50%;
    bottom: 8.5rem;
    z-index: 3;
    width: min(90%, 900px);
    transform: translateX(-50%);
    text-align: center;
}

.hero-tagline h2 {
    margin: 0 0 0.7rem;
    color: var(--color-text-main);
    font-size: clamp(1rem, 1.7vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.hero-tagline p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: clamp(0.65rem, 0.9vw, 0.82rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-tagline p span {
    margin: 0 0.6rem;
    color: var(--color-orange-primary);
}

@media (max-width: 700px) {
    .hero-tagline {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 2rem);
        margin: 1.5rem auto;
        transform: none;
    }

    .hero-tagline p span {
        margin: 0 0.25rem;
    }
}

/* Animated hero tagline */
.hero-tagline {
    overflow: hidden;
}

.hero-tagline h2,
.hero-tagline p {
    opacity: 0;
    transform: translateY(18px);
    animation: taglineReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-tagline p {
    animation-delay: 0.18s;
}

.hero-tagline h2 {
    position: relative;
}

.hero-tagline h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 2px;
    margin: 0.75rem auto 0;
    background: linear-gradient(90deg, var(--color-blue-primary), var(--color-orange-primary), var(--color-green-primary));
    transform: scaleX(0);
    transform-origin: center;
    animation: taglineLineReveal 0.7s 0.45s ease-out forwards;
}

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

@keyframes taglineLineReveal {
    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-tagline h2,
    .hero-tagline p {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hero-tagline h2::after {
        transform: scaleX(1);
        animation: none;
    }
}

.hero-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hero-tagline h2,
.hero-tagline p {
    width: 100%;
    text-align: center;
}

@media (min-width: 701px) {
    .hero-tagline {
        top: 35%;
        bottom: auto;
        transform: translate(-50%, -50%);
    }
}

/* Align content consistently inside all sector cards */
@media (min-width: 701px) {
    .sector-col {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        grid-template-rows: auto 1fr;
        align-items: center;
    }

    .sector-tag {
        align-self: start;
        margin-bottom: 0;
    }

    .sector-title,
    .sector-desc {
        align-self: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    .sector-title {
        line-height: 1.2;
    }

    .sector-desc {
        line-height: 1.45;
    }
}

/* Distinctive statistics treatment */
.dash-bottom-bar {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -14px 35px rgba(20, 35, 45, 0.08);
}

.stat-item,
.feature-item {
    position: relative;
    padding-top: 0.7rem;
}

.stat-item::before,
.feature-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 3px;
    border-radius: 99px;
    background: var(--color-blue-primary);
    transform: translateX(-50%);
}

.stat-item:nth-child(2)::before,
.feature-item:nth-child(2)::before {
    background: var(--color-orange-primary);
}

.stat-item:nth-child(3)::before,
.feature-item:nth-child(3)::before {
    background: var(--color-green-primary);
}

.stat-num {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    background: linear-gradient(110deg, var(--color-blue-primary), var(--color-orange-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-lbl,
.feature-item span {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.feature-item span {
    color: var(--color-text-main);
}

/* Centered, consistent statistics typography */
.dash-bottom-bar {
    justify-items: center;
    text-align: center;
}

.dash-stats,
.dash-features {
    width: 100%;
    justify-items: center;
}

.stat-item,
.feature-item {
    width: 100%;
    max-width: 150px;
}

.stat-num {
    font-size: 1.55rem;
    line-height: 1.1;
}

.stat-lbl,
.feature-item span {
    font-size: 0.68rem;
    line-height: 1.45;
    letter-spacing: 0.12em;
}

@media (min-width: 901px) {
    .dash-bottom-bar {
        width: min(100% - 4rem, 1500px);
        margin: 0 auto;
        border-radius: 24px 24px 0 0;
    }
}

/* Compact centered stats row */
@media (min-width: 901px) {
    .dash-bottom-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(2rem, 5vw, 5rem);
        padding: 1.25rem 2rem;
    }

    .dash-stats,
    .dash-features {
        width: auto;
        display: flex;
        justify-content: center;
        gap: clamp(1.5rem, 3vw, 3rem);
    }

    .stat-item,
    .feature-item {
        width: 120px;
        max-width: 120px;
    }
}

@media (min-width: 901px) {
    .dash-bottom-bar {
        width: fit-content;
        max-width: calc(100% - 2rem);
    }
}

/* Animated ecosystem metrics */
.dash-bottom-bar .stat-item,
.dash-bottom-bar .feature-item {
    animation: dashBarItemReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both,
        metricFloat 4.5s ease-in-out 0.8s infinite;
}

.dash-bottom-bar .stat-item:nth-child(2),
.dash-bottom-bar .feature-item:nth-child(2) {
    animation-delay: 0.12s, 1s;
}

.dash-bottom-bar .stat-item:nth-child(3),
.dash-bottom-bar .feature-item:nth-child(3) {
    animation-delay: 0.24s, 1.2s;
}

@keyframes metricFloat {

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

    50% {
        transform: translateY(-5px) scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dash-bottom-bar .stat-item,
    .dash-bottom-bar .feature-item {
        animation: none;
    }
}

.dash-bottom-bar .stat-item::before,
.dash-bottom-bar .feature-item::before {
    animation: metricAccent 3.8s ease-in-out 1.2s infinite;
}

@keyframes metricAccent {

    0%,
    100% {
        width: 30px;
        opacity: 0.75;
    }

    50% {
        width: 48px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .dash-bottom-bar .stat-item::before,
    .dash-bottom-bar .feature-item::before {
        animation: none;
    }
}

/* Classic metric animation */
.dash-bottom-bar .stat-item,
.dash-bottom-bar .feature-item {
    animation: classicMetricReveal 0.75s ease-out both;
}

.dash-bottom-bar .stat-item:nth-child(2),
.dash-bottom-bar .feature-item:nth-child(2) {
    animation-delay: 0.12s;
}

.dash-bottom-bar .stat-item:nth-child(3),
.dash-bottom-bar .feature-item:nth-child(3) {
    animation-delay: 0.24s;
}

.dash-bottom-bar .stat-item::before,
.dash-bottom-bar .feature-item::before {
    animation: none;
}

@keyframes classicMetricReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .dash-bottom-bar .stat-item,
    .dash-bottom-bar .feature-item {
        animation: none;
    }
}

/* Distinctive business title typography */
.sector-title {
    font-family: inherit;
    font-size: clamp(1rem, 1.3vw, 1.22rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--color-text-main);
    text-wrap: balance;
}

.sector-tag {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sector-desc {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sector-desc {
    color: rgba(55, 65, 75, 0.78);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.1em;
}

/* Larger animated business titles */
.sector-tag {
    font-size: 0.88rem;
    animation: sectorTextReveal 0.6s ease-out both;
}

.sector-title {
    font-size: clamp(1.15rem, 1.65vw, 1.5rem);
    animation: sectorTextReveal 0.7s 0.1s ease-out both;
}

.sector-desc {
    animation: sectorTextReveal 0.7s 0.2s ease-out both;
}

.sector-blue .sector-tag,
.sector-blue .sector-title,
.sector-blue .sector-desc {
    animation-delay: 0.15s;
}

.sector-green .sector-tag,
.sector-green .sector-title,
.sector-green .sector-desc {
    animation-delay: 0.3s;
}

@keyframes sectorTextReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .sector-tag,
    .sector-title,
    .sector-desc {
        animation: none;
    }
}

/* Large animated section headings */
.section-header .section-tag,
.section-header-compact .section-tag,
.section-tag {
    animation: sectionHeadingReveal 0.7s ease-out both;
}

.section-title,
.section-title-sm {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    animation: sectionHeadingReveal 0.85s 0.12s ease-out both;
}

.section-title::after,
.section-title-sm::after {
    animation: sectionLineReveal 0.65s 0.4s ease-out both;
}

@keyframes sectionHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes sectionLineReveal {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@media (prefers-reduced-motion: reduce) {

    .section-tag,
    .section-title,
    .section-title-sm {
        animation: none;
    }
}

.section-header-compact .section-tag {
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    font-weight: 800;
    letter-spacing: 0.18em;
}

/* Consistent scale for all main titles */
.section-title,
.section-title-sm {
    font-size: clamp(2.2rem, 4.5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.04;
}

.sector-title {
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

.sector-title {
    font-size: clamp(0.98rem, 1.25vw, 1.18rem);
    line-height: 1.12;
}

.vertical-card-title {
    font-size: clamp(1.35rem, 1.8vw, 1.55rem);
    line-height: 1.1;
}

/* More compact business cards */
.vertical-card {
    padding: 2.3rem 1.8rem 1.6rem;
    border-radius: 24px;
}

.card-icon-square {
    height: 58px;
    margin-bottom: 1.1rem;
}

.card-company-logo {
    height: 58px;
}

.card-title-line {
    margin-bottom: 1rem;
}

/* Featured section labels */
.section-header .section-tag,
.final-cta-section>.container>.section-tag,
.contact-section .section-tag {
    display: inline-block;
    font-size: clamp(1.05rem, 1.8vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.2em;
    animation: featuredLabelReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.final-cta-section>.container>.section-tag {
    animation-delay: 0.12s;
}

.contact-section .section-tag {
    animation-delay: 0.24s;
}

@keyframes featuredLabelReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
        letter-spacing: 0.32em;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        letter-spacing: 0.2em;
    }
}

@media (prefers-reduced-motion: reduce) {

    .section-header .section-tag,
    .final-cta-section>.container>.section-tag,
    .contact-section .section-tag {
        animation: none;
    }
}

/* Distinct section label identities */
.section-header .section-tag {
    color: var(--color-blue-primary);
    text-shadow: 0 5px 18px rgba(0, 85, 255, 0.16);
}

.final-cta-section>.container>.section-tag {
    color: var(--color-orange-primary);
    text-shadow: 0 5px 18px rgba(230, 92, 0, 0.16);
}

.contact-section .section-tag {
    color: var(--color-green-primary);
    text-shadow: 0 5px 18px rgba(0, 135, 90, 0.16);
}

.section-header .section-tag::before,
.final-cta-section>.container>.section-tag::before,
.contact-section .section-tag::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 3px;
    margin: 0 0.7rem 0.25rem 0;
    border-radius: 99px;
    background: currentColor;
    animation: labelAccent 1.2s ease-out both;
}

@keyframes labelAccent {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 28px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .section-header .section-tag::before,
    .final-cta-section>.container>.section-tag::before,
    .contact-section .section-tag::before {
        animation: none;
    }
}

.final-cta-title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.05;
}

.final-cta-title {
    font-size: clamp(1.5rem, 3.8vw, 3.4rem);
}

/* Final responsive layout pass */
@media (max-width: 1100px) {
    .vertical-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .dash-bottom-bar {
        gap: 1.5rem;
    }

    .dash-stats,
    .dash-features {
        gap: 1rem;
    }
}

@media (max-width: 700px) {
    .dashboard-hero {
        min-height: auto;
        padding-bottom: 1rem;
    }

    .dash-grid-container {
        display: block;
        min-height: auto;
    }

    .dash-sectors {
        position: static;
        width: calc(100% - 2rem);
        margin: 0 auto;
        padding: 2rem 0 1rem;
        transform: none;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sector-col {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 1rem;
    }

    .sector-desc {
        white-space: normal;
    }

    .hero-tagline {
        position: static;
        width: calc(100% - 2rem);
        margin: 1.5rem auto;
        transform: none;
    }

    .hero-tagline h2 {
        font-size: 1rem;
        line-height: 1.35;
    }

    .hero-tagline p {
        font-size: 0.62rem;
        line-height: 1.7;
        letter-spacing: 0.1em;
    }

    .dash-bottom-bar {
        display: grid;
        grid-template-columns: 1fr;
        width: calc(100% - 1rem);
        max-width: none;
        margin: 0 auto;
        padding: 1.25rem 0.75rem;
        gap: 1.25rem;
        border-radius: 20px 20px 0 0;
    }

    .dash-stats,
    .dash-features {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .stat-item,
    .feature-item {
        width: 100%;
        max-width: none;
    }

    .stat-num {
        font-size: 1.25rem;
    }

    .stat-lbl,
    .feature-item span {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .vertical-cards-grid {
        grid-template-columns: 1fr;
        width: calc(100% - 2rem);
        padding: 0;
        gap: 1rem;
    }

    .vertical-card {
        padding: 2rem 1.25rem 1.35rem;
    }

    .section-title,
    .section-title-sm {
        font-size: clamp(1.8rem, 9vw, 2.8rem);
    }

    .final-cta-title {
        font-size: clamp(1.4rem, 8vw, 2.5rem);
    }

    .section-header,
    .section-header-compact {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 420px) {

    .dash-stats,
    .dash-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1rem;
    }

    .sector-col {
        grid-template-columns: 1fr;
    }

    .sector-tag,
    .sector-title,
    .sector-desc {
        grid-column: 1;
    }

    .sector-desc {
        margin-top: 0.5rem;
    }
}

/* Classic tagline reveal */
.hero-tagline h2 {
    animation: taglineClassicIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-tagline p {
    animation: taglineClassicIn 0.8s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes taglineClassicIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .hero-tagline h2,
    .hero-tagline p {
        animation: none;
    }
}

/* Consistent compact section heading scale */
.section-title,
.section-title-sm {
    font-size: clamp(1.65rem, 3vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

/* Unified smooth title animation */
.section-title,
.section-title-sm,
.vertical-card-title,
.pillar-title,
.final-cta-title,
.sector-title {
    animation: smoothTitleReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes smoothTitleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(3px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .section-title,
    .section-title-sm,
    .vertical-card-title,
    .pillar-title,
    .final-cta-title,
    .sector-title {
        animation: none;
    }
}

/* Hero business title sequence */
.dash-sectors .sector-title {
    animation: heroTitleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.dash-sectors .sector-blue .sector-title {
    animation-delay: 0.28s;
}

.dash-sectors .sector-green .sector-title {
    animation-delay: 0.44s;
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
        letter-spacing: 0.12em;
    }

    to {
        opacity: 1;
        transform: translateX(150px);
        letter-spacing: 0.025em;
    }
}

/* Signature orbital ecosystem styling */
.ecosystem-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(0, 102, 255, 0.08), transparent 22rem),
        linear-gradient(145deg, #f8fbff 0%, #ffffff 52%, #f4faf7 100%);
}

.ecosystem-section::before {
    content: "";
    position: absolute;
    inset: 18% 18%;
    border: 1px solid rgba(0, 102, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
    animation: ecosystemPulse 6s ease-in-out infinite;
}

.ecosystem-section .section-header.center {
    position: relative;
    z-index: 2;
}

.ecosystem-section .section-tag {
    color: var(--color-blue-primary);
    letter-spacing: 0.24em;
}

.ecosystem-section .section-title {
    background: linear-gradient(100deg, var(--color-text-main), var(--color-blue-primary), var(--color-green-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.orbital-system-wrapper {
    filter: drop-shadow(0 25px 45px rgba(15, 23, 42, 0.08));
}

.orbit-node {
    animation: orbitNodeFloat 5s ease-in-out infinite;
}

.node-infra {
    animation-delay: 0.8s;
}

.node-energy {
    animation-delay: 1.6s;
}

.core-hub-node {
    box-shadow: 0 0 0 12px rgba(0, 102, 255, 0.04), 0 20px 55px rgba(15, 23, 42, 0.16);
    animation: coreHubPulse 4s ease-in-out infinite;
}

@keyframes orbitNodeFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes coreHubPulse {

    0%,
    100% {
        box-shadow: 0 0 0 12px rgba(0, 102, 255, 0.04), 0 20px 55px rgba(15, 23, 42, 0.16);
    }

    50% {
        box-shadow: 0 0 0 22px rgba(0, 102, 255, 0.08), 0 25px 65px rgba(15, 23, 42, 0.2);
    }
}

@keyframes ecosystemPulse {

    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@media (max-width: 700px) {
    .ecosystem-section {
        padding: 4rem 0;
    }

    .orbital-system-wrapper {
        width: min(100vw - 2rem, 500px);
        height: min(100vw - 2rem, 500px);
        transform: scale(0.9);
        transform-origin: top center;
        margin-bottom: -3rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ecosystem-section::before,
    .orbit-node,
    .core-hub-node {
        animation: none;
    }
}

/* Animated orbital connections */
.orbital-lines-svg line {
    stroke-dasharray: 10 8;
    stroke-dashoffset: 0;
    animation: connectionFlow 2.8s linear infinite;
}

.orbital-lines-svg circle {
    stroke-dasharray: 6 10;
    animation: orbitRingFlow 12s linear infinite;
}

#beam-orange {
    animation-delay: 0.35s;
}

#beam-green {
    animation-delay: 0.7s;
}

@keyframes connectionFlow {
    to {
        stroke-dashoffset: -36;
    }
}

@keyframes orbitRingFlow {
    to {
        stroke-dashoffset: -120;
    }
}

@media (prefers-reduced-motion: reduce) {

    .orbital-lines-svg line,
    .orbital-lines-svg circle {
        animation: none;
    }
}

/* Unified Orbital Ecosystem title color */
.ecosystem-section .section-tag,
.ecosystem-section .section-title,
.ecosystem-section .section-desc {
    color: #17324d;
}

.ecosystem-section .section-title {
    background: none;
    -webkit-text-fill-color: #17324d;
}

/* Red-blue-green Orbital Ecosystem gradient */
.ecosystem-section .section-tag,
.ecosystem-section .section-title {
    background: linear-gradient(100deg, #1E3847 0%, #244D63 50%, #2C6277 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ecosystem-section .section-desc {
    color: #536474;
}

/* Unified premium gradient for all titles */
.section-title,
.section-title-sm,
.vertical-card-title,
.pillar-title,
.final-cta-title,
.sector-title,
.ecosystem-section .section-tag {
    background: linear-gradient(105deg, #1E3847 0%, #244D63 35%, #2C6277 70%, #3B7992 100%);
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: titleGradientFlow 8s ease-in-out infinite alternate;
}

@keyframes titleGradientFlow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .section-title,
    .section-title-sm,
    .vertical-card-title,
    .pillar-title,
    .final-cta-title,
    .sector-title,
    .ecosystem-section .section-tag {
        animation: none;
    }
}

.ecosystem-section .section-tag {
    background: none;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    animation: featuredLabelReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Black-only statistics */
.dash-stats .stat-num,
.dash-stats .stat-lbl {
    background: none;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* Black-only hero business headings */
.dash-sectors .sector-title {
    background: none;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* Smaller hero business boxes */
@media (min-width: 701px) {
    .dash-sectors {
        width: min(100% - 6rem, 1100px);
        max-width: 1100px;
        gap: 1.75rem;
    }

    .dash-sectors .sector-col {
        height: 120px;
        min-height: 120px;
        padding: 0.8rem 0.85rem;
    }
}

.dash-sectors .sector-desc {
    font-size: 0.6rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

.dash-sectors .sector-green .sector-title {
    white-space: nowrap;
}

.dash-sectors .sector-desc {
    font-size: 0.54rem;
    line-height: 1.35;
}

@media (min-width: 701px) {
    .hero-tagline {
        left: 50%;
        width: min(92%, 980px);
        text-align: center;
    }

    .hero-tagline h2,
    .hero-tagline p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

@media (min-width: 701px) {
    .hero-tagline {
        top: auto;
        bottom: 8rem;
        transform: translateX(-50%);
    }
}

@media (min-width: 701px) {
    .hero-tagline {
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
    }
}

@media (min-width: 701px) {
    .hero-tagline {
        bottom: 15rem;
    }
}

@media (min-width: 701px) {
    .hero-tagline {
        bottom: 20rem;
    }
}

@media (min-width: 701px) {
    .hero-tagline h2 {
        font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    }

    .hero-tagline p {
        font-size: clamp(0.7rem, 1vw, 0.9rem);
    }
}

/* Typing animation for hero tagline */
@media (min-width: 701px) {
    .hero-tagline h2 {
        width: 0;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        white-space: nowrap;
        border-right: 2px solid var(--color-orange-primary);
        animation: taglineTyping 3.2s steps(80, end) forwards,
            typingCursor 0.7s step-end infinite;
    }

    .hero-tagline p {
        opacity: 0;
        animation: taglineServicesIn 0.8s ease-out 3.25s forwards;
    }
}

@keyframes taglineTyping {
    from {
        width: 0;
    }

    to {
        width: 64ch;
    }
}

@keyframes typingCursor {
    50% {
        border-color: transparent;
    }
}

@keyframes taglineServicesIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 700px) {
    .hero-tagline h2 {
        animation: taglineClassicIn 0.9s ease-out both;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-tagline h2,
    .hero-tagline p {
        width: auto;
        opacity: 1;
        border-right: 0;
        animation: none;
        white-space: normal;
    }
}

/* Keep the complete tagline visible */
.hero-tagline h2 {
    width: auto;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    border-right: 0;
    animation: taglineClassicIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-tagline p {
    opacity: 0;
    animation: taglineServicesIn 0.8s ease-out 0.22s forwards;
}

/* Full-width typing reveal without clipping the final text */
@media (min-width: 701px) {
    .hero-tagline h2 {
        width: auto;
        overflow: visible;
        white-space: nowrap;
        clip-path: inset(0 100% 0 0);
        animation: taglineTypeReveal 3.2s steps(60, end) forwards;
    }

    .hero-tagline p {
        opacity: 0;
        animation: taglineServicesIn 0.8s ease-out 3.25s forwards;
    }
}

@keyframes taglineTypeReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-tagline h2 {
        clip-path: none;
        animation: none;
    }

    .hero-tagline p {
        opacity: 1;
        animation: none;
    }
}

/* Final classic tagline animation: always show full text */
.hero-tagline h2 {
    width: auto;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    clip-path: none;
    border: 0;
    animation: classicTaglineIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-tagline p {
    opacity: 0;
    animation: classicTaglineSubIn 0.8s 0.25s ease-out forwards;
}

@keyframes classicTaglineIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
        letter-spacing: 0.12em;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        letter-spacing: 0.04em;
    }
}

@keyframes classicTaglineSubIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .hero-tagline h2,
    .hero-tagline p {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

@media (min-width: 901px) {
    .nav-container .nav-brand {
        order: 2;
    }

    .nav-container .nav-menu {
        order: 1;
    }
}

@media (min-width: 901px) {
    .nav-container .nav-brand {
        order: initial;
        transform: translateX(80px);
    }

    .nav-container .nav-menu {
        order: initial;
    }
}

/* Creative premium header */
.navbar {
    padding: 0.75rem 1rem;
    height: auto;
    background: transparent;
}

.nav-container {
    position: relative;
    max-width: 1380px;
    min-height: 68px;
    padding: 0.55rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.64);
    backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 12px 35px rgba(28, 45, 60, 0.1);
}

.nav-container::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, rgba(211, 19, 42, 0.6), rgba(9, 105, 184, 0.55), rgba(0, 150, 94, 0.6));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.nav-brand {
    gap: 10px;
    transition: transform 0.35s ease;
}

.nav-brand:hover {
    transform: translateX(80px) translateY(-2px);
}

.nav-menu {
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.38);
}

.nav-link {
    position: relative;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    width: 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #1E3847, #244D63, #2C6277);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.72);
    transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 58%;
}

@media (max-width: 900px) {
    .navbar {
        padding: 0.5rem;
    }

    .nav-container {
        min-height: 60px;
        border-radius: 16px;
    }

    .nav-brand,
    .nav-brand:hover {
        transform: none;
    }
}

/* Tight full-width header spacing */
@media (min-width: 901px) {
    .nav-container {
        width: calc(100% - 1rem);
        max-width: none;
    }

    .nav-container .nav-brand,
    .nav-brand:hover {
        transform: translateX(150px);
    }
}

@media (min-width: 901px) {
    .navbar {
        padding: 0;
    }

    .nav-container {
        width: 100%;
        margin: 0;
        border-radius: 0 0 18px 18px;
    }
}

@media (min-width: 901px) {
    .navbar {
        padding: 0.75rem 2rem;
    }

    .nav-container {
        width: min(100%, 1500px);
        margin: 0 auto;
        border-radius: 24px;
    }

    .nav-container .nav-brand,
    .nav-brand:hover {
        transform: translateX(0);
    }
}

/* Rounded Top Corners for Bottom Stats Bar */
.dash-bottom-bar {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    overflow: hidden;
}

/* ==========================================================================
   UNIQUE FLOATING GLASSMORPHISM BOTTOM STATS BAR
   ========================================================================== */
.dash-bottom-bar {
    position: relative !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 32px 32px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-bottom: none !important;
    box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.1), inset 0 1.5px 0 rgba(255, 255, 255, 0.95) !important;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

/* Tri-color Brand Accent Top Border */
/* Remove top gradient line */
.dash-bottom-bar::before {
    display: none !important;
}

/* Stat Item Enhancements with decreased font size */
.dash-bottom-bar .stat-num {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #142733 30%, #1E3847 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transition: transform 0.3s ease !important;
}

.dash-bottom-bar .stat-item:hover .stat-num {
    transform: translateY(-2px) scale(1.05) !important;
}

.dash-bottom-bar .stat-lbl {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #CBDCE6 !important;
}

.dash-bottom-bar .feature-item {
    transition: transform 0.3s ease !important;
}

.dash-bottom-bar .feature-item span {
    font-size: 0.62rem !important;
}

.dash-bottom-bar .feature-item:hover {
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   FLOATING LUXURY CLASSIC GLASS CAPSULE NAVBAR
   ========================================================================== */
.navbar {
    position: fixed !important;
    top: 18px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 1.5rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-container {
    width: min(100%, 1280px) !important;
    margin: 0 auto !important;
    padding: 0.55rem 1.6rem !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09), inset 0 1.5px 0 #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.official-nav-logo {
    height: 38px !important;
    width: auto !important;
    transition: transform 0.35s ease !important;
}

.nav-brand:hover .official-nav-logo {
    transform: scale(1.06) rotate(-2deg) !important;
}

.brand-name {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    letter-spacing: 2px !important;
    color: #FFFFFF !important;
}

.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}

.nav-link {
    font-family: var(--font-body) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #CBDCE6 !important;
    padding: 0.5rem 1.1rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.nav-link:hover {
    color: #FFFFFF !important;
    background: rgba(28, 24, 20, 0.05) !important;
    transform: translateY(-1px) !important;
}

.nav-link.active {
    color: #FFFFFF !important;
    background: #1E3847 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    font-weight: 800 !important;
}

.nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 16px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #1E3847, #244D63, #2C6277) !important;
    border-radius: 2px !important;
}

/* Signature floating header treatment */
.nav-container {
    overflow: hidden;
}

.nav-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #1E3847, #244D63, #2C6277);
    background-size: 200% 100%;
    animation: headerGradientFlow 6s ease-in-out infinite alternate;
}

.nav-container::before {
    opacity: 0.9;
}

.nav-menu {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 5px 16px rgba(20, 40, 60, 0.05);
}

.nav-link.active {
    box-shadow: 0 5px 14px rgba(30, 80, 120, 0.08);
}

@keyframes headerGradientFlow {
    from {
        background-position: 0% 50%;
        opacity: 0.65;
    }

    to {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-container::after {
        animation: none;
    }
}

/* Transparent crystal header */
.nav-container {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    border-color: rgba(255, 255, 255, 0.52);
    box-shadow: 0 16px 42px rgba(20, 40, 60, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.nav-menu {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.42);
}

/* Fully transparent header bar */
.nav-container {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Restore original clean header */
.navbar {
    padding: 0;
    background: transparent;
}

.nav-container {
    width: 100%;
    max-width: var(--container-max-width);
    min-height: 0;
    padding: 0 2rem;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: visible;
}

.nav-container::before,
.nav-container::after {
    display: none;
}

.nav-menu {
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-link:hover,
.nav-link.active {
    background: transparent;
}

.nav-container .nav-brand,
.nav-brand:hover {
    transform: none;
}

/* Force fully transparent header in every state */
.navbar,
.navbar.scrolled,
.nav-container,
.nav-menu {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Creative transparent header bar */
.navbar {
    padding: 0.8rem 1.5rem;
}

.nav-container {
    position: relative;
    max-width: 1480px;
    padding: 0 1rem;
}

.nav-container::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -0.45rem;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #1E3847 20%, #244D63 50%, #2C6277 80%, transparent);
    background-size: 200% 100%;
    animation: transparentHeaderLine 6s ease-in-out infinite alternate;
}

.official-nav-logo {
    transition: transform 0.35s ease, filter 0.35s ease;
}

.nav-brand:hover .official-nav-logo {
    transform: rotate(8deg) scale(1.08);
    filter: drop-shadow(0 0 14px rgba(18, 104, 179, 0.35));
}

.nav-menu {
    gap: 1.8rem;
}

.nav-link {
    padding: 0.45rem 0;
    background: transparent !important;
}

.nav-link::after {
    bottom: -0.55rem;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #1E3847, #244D63, #2C6277);
    transition: width 0.35s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

@keyframes transparentHeaderLine {
    from {
        background-position: 0% 50%;
        opacity: 0.55;
    }

    to {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .navbar {
        padding: 0.5rem;
    }

    .nav-container::after {
        left: 0.5rem;
        right: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-container::after {
        animation: none;
    }
}

/* ==========================================================================
   HEADER SOCIAL MEDIA BUTTONS & UNIQUE ENHANCEMENTS
   ========================================================================== */
.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

.nav-socials {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding-left: 0.5rem !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.nav-social-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(28, 24, 20, 0.05) !important;
    color: #CBDCE6 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.nav-social-btn:hover {
    transform: translateY(-2px) scale(1.1) !important;
    color: #ffffff !important;
}

.nav-social-btn.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    box-shadow: 0 4px 14px rgba(220, 39, 67, 0.35) !important;
}

.nav-social-btn.facebook:hover {
    background: #1877F2 !important;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35) !important;
}

.nav-social-btn.youtube:hover {
    background: #FF0000 !important;
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.35) !important;
}

/* ==========================================================================
   HERO TAGLINE SPECIFIC BRAND COLORS
   ========================================================================== */
.tagline-red {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(198, 0, 22, 0.15) !important;
}

.tagline-blue {
    color: #244D63 !important;
    text-shadow: 0 2px 10px rgba(0, 75, 135, 0.15) !important;
}

.tagline-green {
    color: #2C6277 !important;
    text-shadow: 0 2px 10px rgba(0, 144, 75, 0.15) !important;
}

.sub-red {
    color: #2A4D62 !important;
    font-weight: 700 !important;
}

.sub-blue {
    color: #32627D !important;
    font-weight: 700 !important;
}

.sub-green {
    color: #3B7992 !important;
    font-weight: 700 !important;
}

.sub-divider {
    color: rgba(0, 0, 0, 0.25) !important;
    margin: 0 0.4rem !important;
}

/* Decreased opacity for white hero overlay */
.hero-bg-overlay {
    background: rgba(255, 255, 255, 0.55) !important;
}

/* ==========================================================================
   ULTRA-UNIQUE FLOATING DOUBLE-PILL HEADER LAYOUT
   ========================================================================== */
.navbar {
    position: fixed !important;
    top: 18px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 2rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-container {
    width: min(100%, 1320px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
}

/* 1. Left Pill: Logo Badge Module */
.nav-brand {
    padding: 0.6rem 1.6rem !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08), inset 0 1px 0 #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-brand::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #1E3847, #244D63, #2C6277) !important;
}

.nav-brand:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

/* 2. Right Pill: Menu & Actions Module */
.nav-right-pill {
    display: flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 0.45rem 1.4rem !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08), inset 0 1px 0 #ffffff !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-right-pill:hover {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

/* ==========================================================================
   DYNAMIC MOVING GRADIENT SPOTS (WHOLE WEBSITE)
   ========================================================================== */
.ambient-glow-field {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

.glow-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(120px) !important;
    opacity: 0.35 !important;
    mix-blend-mode: normal !important;
}

.orb-blue {
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(30, 56, 71, 0.4) 0%, rgba(198, 0, 22, 0) 70%) !important;
    top: -100px !important;
    left: -100px !important;
    animation: orbFloat1 22s ease-in-out infinite alternate !important;
}

.orb-orange {
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle, rgba(36, 77, 99, 0.4) 0%, rgba(0, 75, 135, 0) 70%) !important;
    top: 30% !important;
    right: -150px !important;
    animation: orbFloat2 26s ease-in-out infinite alternate !important;
}

.orb-green {
    width: 650px !important;
    height: 650px !important;
    background: radial-gradient(circle, rgba(44, 98, 119, 0.35) 0%, rgba(0, 144, 75, 0) 70%) !important;
    bottom: -100px !important;
    left: 20% !important;
    animation: orbFloat3 24s ease-in-out infinite alternate !important;
}

@keyframes orbFloat1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40vw, 30vh) scale(1.3);
    }

    100% {
        transform: translate(15vw, 60vh) scale(0.9);
    }
}

@keyframes orbFloat2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-45vw, 25vh) scale(1.25);
    }

    100% {
        transform: translate(-20vw, 55vh) scale(0.85);
    }
}

@keyframes orbFloat3 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(35vw, -35vh) scale(1.2);
    }

    100% {
        transform: translate(-10vw, -50vh) scale(1.1);
    }
}

/* ==========================================================================
   DYNAMIC MOVING DUAL-PILL HEADER WITH FLUID COLOR SHIFTING
   ========================================================================== */
.nav-brand,
.nav-right-pill {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1.5px solid transparent !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        linear-gradient(135deg, #1E3847, #244D63, #2C6277, #1E3847) !important;
    background-origin: border-box !important;
    -webkit-background-clip: padding-box, border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 100% 100%, 300% 300% !important;
    animation: headerGradientShift 8s linear infinite !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1) !important;
}

@keyframes headerGradientShift {
    0% {
        background-position: 0% 0%, 0% 50%;
    }

    50% {
        background-position: 0% 0%, 100% 50%;
    }

    100% {
        background-position: 0% 0%, 0% 50%;
    }
}

/* ==========================================================================
   ULTRA-SLEEK PROFESSIONAL ARCHITECTURAL NAVBAR
   ========================================================================== */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 78px !important;
    z-index: 1000 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05) !important;
    animation: none !important;
}

/* Fine Tri-Color Brand Accent Top Line */
.navbar::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #1E3847 0%, #244D63 50%, #2C6277 100%) !important;
    z-index: 1001 !important;
}

.nav-container {
    width: min(100%, 1440px) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 2.5rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.nav-brand {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.nav-brand::before {
    display: none !important;
}

.official-nav-logo {
    height: 42px !important;
}

.brand-name {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #FFFFFF !important;
}

.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
}

.nav-link {
    font-family: var(--font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #CBDCE6 !important;
    padding: 0.6rem 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: relative !important;
    transition: color 0.25s ease !important;
}

.nav-link:hover {
    color: #FFFFFF !important;
    background: transparent !important;
    transform: none !important;
}

.nav-link.active {
    color: #FFFFFF !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2.5px !important;
    background: #1E3847 !important;
    border-radius: 2px !important;
}

.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

.nav-socials {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-right: 1.2rem !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-left: none !important;
}

.nav-cta-btn {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #142733 0%, #1E3847 100%) !important;
    padding: 0.65rem 1.4rem !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 14px rgba(0, 75, 135, 0.2) !important;
}

.nav-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 75, 135, 0.35) !important;
    background: linear-gradient(135deg, #1E3847 0%, #244D63 100%) !important;
}

/* Remove white background shape from logo image */
.official-nav-logo {
    mix-blend-mode: normal !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* REMOVE ALL BACKGROUND SHAPES, SHADOWS, AND FILTERS ON NAV BRAND IN ALL STATES */
.nav-brand,
.nav-brand:hover,
.nav-brand:focus,
.nav-brand:active,
.nav-brand::before,
.nav-brand::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.official-nav-logo,
.official-nav-logo:hover,
.official-nav-logo:focus,
.official-nav-logo:active {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* LinkedIn Hover Style */
.nav-social-btn.linkedin:hover {
    background: #0A66C2 !important;
    box-shadow: 0 4px 14px rgba(10, 102, 194, 0.35) !important;
}

/* Solid non-transparent background for header bar */
.navbar,
.navbar.scrolled,
.navbar.scrolled .nav-container {
    background: #1E3847 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Bottom Tri-Color Brand Accent Line for Header Bar */
.navbar::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #1E3847 0%, #244D63 50%, #2C6277 100%) !important;
    z-index: 1001 !important;
}

/* FIX HEADER SIDE GAPS - ENSURE 100% FULL WIDTH HEADER WITHOUT SIDE GAPS OR CARDS */
.navbar {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #1E3847 !important;
}

.nav-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 2.5rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.nav-container::before,
.nav-container::after {
    display: none !important;
}

/* Align logo cleanly without hardcoded 150px margin offset */
.nav-brand {
    margin-left: 0 !important;
}

/* REMOVE ROUNDED BOX CONTAINER SHAPE AND BACKGROUND FROM DASH-BOTTOM-BAR */
.dash-bottom-bar {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* RESTORE ORIGINAL CLEAN WHITE BOTTOM STATS BAR */
.dash-bottom-bar {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.75rem 4rem !important;
    background: #1E3847 !important;
    border-top: 1px solid #eaeaea !important;
    border-radius: 0 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dash-bottom-bar::before,
.dash-bottom-bar::after {
    display: none !important;
}

.dash-bottom-bar .stat-num {
    font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.dash-bottom-bar .stat-lbl {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #CBDCE6 !important;
}

.dash-bottom-bar .feature-item span {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #CBDCE6 !important;
}

/* FLOATING WHITE CARD: BORDER ONLY ON TOP SIDE, EXTRA SIDE PARTS REMOVED */
.dash-bottom-bar {
    position: relative !important;
    z-index: 5 !important;
    width: min(90%, 1140px) !important;
    margin: 0 auto !important;
    padding: 1.25rem 2rem !important;
    background: #1E3847 !important;
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    border-top: 2.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(1rem, 2vw, 2.5rem) !important;
}

.dash-bottom-bar::before,
.dash-bottom-bar::after {
    display: none !important;
}

.dash-stats,
.dash-features {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: clamp(1rem, 2vw, 2.5rem) !important;
    flex: 1 !important;
}

.dash-bottom-bar .stat-num {
    font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.dash-bottom-bar .stat-lbl {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #CBDCE6 !important;
}

.dash-bottom-bar .feature-item span {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #CBDCE6 !important;
}

/* REMOVE CONTINUOUS UNDERLINE FROM GROUP AND NAV LINKS */
.nav-link::after,
.nav-link.active::after {
    display: none !important;
    content: none !important;
}

/* Align right-side nav-actions cleanly without hardcoded 150px margin offset */
.nav-actions {
    margin-right: 0 !important;
}

/* Energy lines converging into the Swati Group hub */
.orbital-lines-svg line {
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px currentColor);
    stroke-dasharray: 7 11;
    animation: energyFlow 2s linear infinite;
}

.orbital-lines-svg circle:first-child {
    stroke-dasharray: 5 12;
    animation: orbitPulse 10s linear infinite;
}

.core-hub-node {
    position: absolute;
}

.core-hub-node::before,
.core-hub-node::after {
    content: "";
    position: absolute;
    inset: -18px;
    border: 1px solid rgba(18, 104, 179, 0.35);
    border-radius: 50%;
    pointer-events: none;
    animation: hubEnergyPulse 2.8s ease-out infinite;
}

.core-hub-node::after {
    inset: -34px;
    border-color: rgba(0, 150, 94, 0.22);
    animation-delay: 1.1s;
}

@keyframes energyFlow {
    to {
        stroke-dashoffset: -36;
    }
}

@keyframes orbitPulse {
    to {
        stroke-dashoffset: -120;
    }
}

@keyframes hubEnergyPulse {
    0% {
        transform: scale(0.88);
        opacity: 0;
    }

    35% {
        opacity: 0.8;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .orbital-lines-svg line,
    .orbital-lines-svg circle:first-child,
    .core-hub-node::before,
    .core-hub-node::after {
        animation: none;
    }
}

.dash-stats .stat-num {
    font-size: 1.25rem;
    line-height: 1.1;
}

.hero-tagline h2,
.hero-tagline p {
    color: #FFFFFF;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.hero-tagline h2,
.hero-tagline p {
    background: none !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* Immediate orbital line connection */
.orbital-lines-svg line {
    animation-duration: 1.25s;
    animation-delay: 0s !important;
    animation-timing-function: linear;
}

.orbital-lines-svg circle {
    animation-duration: 6s;
    animation-delay: 0s !important;
}

.core-hub-node::before,
.core-hub-node::after {
    animation-delay: 0s;
}

/* Visible travelling energy along connected lines */
.orbital-lines-svg line {
    stroke-dasharray: 22 14 !important;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: visibleConnectionFlow 1.15s linear infinite !important;
}

#beam-blue {
    animation-delay: 0s !important;
}

#beam-orange {
    animation-delay: 0.18s !important;
}

#beam-green {
    animation-delay: 0.36s !important;
}

@keyframes visibleConnectionFlow {
    from {
        stroke-dashoffset: 0;
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }

    to {
        stroke-dashoffset: -72;
        opacity: 0.55;
    }
}

.core-hub-node {
    animation: hubConnectionGlow 1.8s ease-in-out infinite !important;
}

@keyframes hubConnectionGlow {

    0%,
    100% {
        box-shadow: 0 0 0 8px rgba(18, 104, 179, 0.06), 0 15px 40px rgba(15, 23, 42, 0.14);
    }

    50% {
        box-shadow: 0 0 0 18px rgba(18, 104, 179, 0.16), 0 0 32px rgba(0, 150, 94, 0.3);
    }
}

/* Slow-to-fast energy arrival */
.orbital-lines-svg line {
    animation: slowFastConnection 2.6s linear infinite !important;
}

@keyframes slowFastConnection {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.45;
    }

    68% {
        stroke-dashoffset: -28;
        opacity: 0.7;
    }

    86% {
        stroke-dashoffset: -64;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -96;
        opacity: 0.45;
    }
}

/* Pulse where each connection reaches the hub */
.connection-pulse {
    stroke: #ffffff;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: hubTouchPulse 1.8s ease-out infinite;
}

.connection-pulse.pulse-orange {
    animation-delay: 0.35s;
}

.connection-pulse.pulse-green {
    animation-delay: 0.7s;
}

@keyframes hubTouchPulse {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    25% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(3.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .connection-pulse {
        animation: none;
        opacity: 0.9;
    }
}

/* ==========================================================================
   MASTER RESPONSIVE ENGINE & FULL-WIDTH HEADER (ZERO SIDE GAPS)
   ========================================================================== */

/* Prevent horizontal overflow page-wide */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Force 100% Edge-to-Edge Floating Frosted Glass Header Bar */
.navbar,
.navbar.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(19, 38, 52, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    border: none !important;
    border-bottom: 1.5px solid rgba(0, 210, 255, 0.25) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 25px rgba(0, 210, 255, 0.12) !important;
    z-index: 1000 !important;
}

.nav-container,
.navbar.scrolled .nav-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 100% Full-Width Top Tri-Color Brand Accent Line (#00D2FF Cyan -> #FF7A00 Orange -> #00E676 Green) */
.navbar::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #00D2FF 0%, #FF7A00 50%, #00E676 100%) !important;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.6) !important;
    z-index: 1001 !important;
}

.navbar::after {
    display: none !important;
}

/* --- 1. DESKTOP HEADER (min-width: 1200px): LOGO MOVED IN 150PX --- */
@media (min-width: 1200px) {
    .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        height: 78px !important;
    }

    /* Move logo 150px in on desktop as requested */
    .nav-brand {
        margin-left: 150px !important;
        transform: none !important;
        padding: 6px 18px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 35px !important;
        backdrop-filter: blur(10px) !important;
        transition: margin 0.35s ease, background 0.35s ease, border-color 0.35s ease !important;
    }

    .nav-brand:hover {
        border-color: rgba(0, 210, 255, 0.35) !important;
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.2) !important;
    }

    /* Move right header actions 150px inward to the left for symmetry */
    .nav-actions {
        margin-right: 150px !important;
        transform: none !important;
        transition: margin 0.35s ease !important;
    }

    .nav-container .nav-menu {
        position: absolute !important;
        left: 52% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(1rem, 1.5vw, 2rem) !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-container .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: var(--font-heading) !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        line-height: 1 !important;
        padding: 0.55rem 1.1rem !important;
        border-radius: 20px !important;
        border: 1px solid transparent !important;
        color: #CBDCE6 !important;
        text-transform: uppercase !important;
        transition: all 0.3s ease !important;
    }

    .nav-container .nav-link:hover,
    .nav-container .nav-link.active {
        color: #00D2FF !important;
        background: rgba(0, 210, 255, 0.12) !important;
        border: 1px solid rgba(0, 210, 255, 0.3) !important;
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.25) !important;
    }
}

/* --- 2. MEDIUM DESKTOP (901px to 1199px): PROPORTIONAL LOGO INSET --- */
@media (min-width: 901px) and (max-width: 1199px) {
    .nav-container {
        width: 100% !important;
        padding: 0 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
    }

    .nav-brand {
        margin-left: clamp(20px, 4vw, 80px) !important;
    }

    .nav-actions {
        margin-right: 15px !important;
    }

    .nav-container .nav-menu {
        position: absolute !important;
        left: 54% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        gap: 1.2rem !important;
        white-space: nowrap !important;
    }

    .nav-container .nav-link {
        font-size: 0.76rem !important;
        letter-spacing: 1.5px !important;
    }
}

/* --- 3. MOBILE & TABLET (max-width: 900px): 100% FLUID RESPONSIVE HEADER --- */
@media (max-width: 900px) {
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 70px !important;
        padding: 0 1rem !important;
        background: #1E3847 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        z-index: 1000 !important;
    }

    .nav-container {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .nav-brand {
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        gap: 8px !important;
    }

    .official-nav-logo {
        height: 36px !important;
    }

    .brand-name {
        font-size: 0.95rem !important;
        letter-spacing: 1.5px !important;
    }

    .nav-actions {
        margin-right: 0 !important;
        gap: 0.5rem !important;
    }

    .nav-socials {
        display: none !important;
        /* Hide social icons on small header to prevent clutter */
    }

    .nav-cta-btn {
        padding: 0.45rem 0.9rem !important;
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
    }

    /* Slide-in Mobile Drawer */
    .nav-container .nav-menu {
        position: fixed !important;
        top: 70px !important;
        right: -100% !important;
        left: auto !important;
        transform: none !important;
        width: 82% !important;
        max-width: 320px !important;
        height: calc(100vh - 70px) !important;
        background: #1E3847 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 2.5rem 2rem !important;
        gap: 1.5rem !important;
        box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.12) !important;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 999 !important;
        border-left: 1px solid #eee !important;
    }

    .nav-container .nav-menu.open {
        right: 0 !important;
    }

    .nav-container .nav-link {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        letter-spacing: 2px !important;
        color: #FFFFFF !important;
        width: 100% !important;
        padding: 0.6rem 0 !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }
}

/* --- 4. HERO SECTION & TYPOGRAPHY RESPONSIVENESS --- */
@media (max-width: 768px) {
    .dashboard-hero {
        padding-top: 85px !important;
        min-height: auto !important;
    }

    .hero-tagline {
        padding: 1.5rem 1rem !important;
        text-align: center !important;
    }

    .hero-tagline h2 {
        font-size: clamp(1.3rem, 5.5vw, 2.2rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-tagline p {
        font-size: clamp(0.72rem, 3.2vw, 0.92rem) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        line-height: 1.5 !important;
    }

    .sub-divider {
        display: inline-block !important;
    }

    /* Floating bottom bar responsive tuning */
    .dash-bottom-bar {
        width: 94% !important;
        margin: 1.5rem auto 0 auto !important;
        padding: 1.25rem 1rem !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .dash-bottom-bar .stat-num {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
    }

    .dash-bottom-bar .stat-lbl,
    .dash-bottom-bar .feature-item span {
        font-size: 0.62rem !important;
        letter-spacing: 1px !important;
    }
}

/* --- 5. SCHEMATIC SECTION & GRIDS RESPONSIVENESS --- */
@media (max-width: 768px) {
    .schematic-section {
        padding: 3rem 1rem !important;
    }

    #schematicSvg {
        width: 100% !important;
        height: auto !important;
        max-height: 480px !important;
    }

    .verticals-grid,
    .pillars-grid,
    .ecosystem-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }

    .section-header- avant {
        padding: 0 1rem !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .navbar {
        height: 62px !important;
        padding: 0 0.75rem !important;
    }

    .nav-container .nav-menu {
        top: 62px !important;
        height: calc(100vh - 62px) !important;
        width: 88% !important;
    }

    .brand-name {
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
    }

    .official-nav-logo {
        height: 32px !important;
    }

    .nav-cta-btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.65rem !important;
    }

    .sub-divider {
        display: none !important;
        /* Hide vertical bars on small screens to wrap cleanly */
    }

    .hero-tagline p span {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0.2rem !important;
    }
}

/* ==========================================================================
   FOOTER SOCIAL MEDIA ICONS & STYLING
   ========================================================================== */
.footer-top {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
}

.footer-social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
}

.footer-social-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(28, 24, 20, 0.06) !important;
    color: #CBDCE6 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.footer-social-btn:hover {
    transform: translateY(-3px) scale(1.1) !important;
    color: #ffffff !important;
}

.footer-social-btn.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.35) !important;
}

.footer-social-btn.linkedin:hover {
    background: #0A66C2 !important;
    box-shadow: 0 5px 15px rgba(10, 102, 194, 0.35) !important;
}

.footer-social-btn.youtube:hover {
    background: #FF0000 !important;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.35) !important;
}

.footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 2rem !important;
    margin-top: 2.5rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.footer-bottom-socials {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.footer-bottom-social-link {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(28, 24, 20, 0.05) !important;
    color: #CBDCE6 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.footer-bottom-social-link:hover {
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.footer-bottom-social-link.instagram:hover {
    background: #E1306C !important;
}

.footer-bottom-social-link.linkedin:hover {
    background: #0A66C2 !important;
}

.footer-bottom-social-link.youtube:hover {
    background: #FF0000 !important;
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}

@media (max-width: 560px) {
    .footer-top {
        grid-template-columns: 1fr !important;
    }

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



/* --- OPPOSITE THEME: #1E3847 PAGE BG WITH CRISP WHITE CARDS --- */

html, body {
    background-color: #1E3847 !important;
    color: #FFFFFF !important;
}

.hero-section, .dashboard-hero {
    background: radial-gradient(circle at 50% 30%, #254556 0%, #1E3847 70%, #132632 100%) !important;
}

.hero-bg-overlay {
    background: rgba(19, 38, 50, 0.65) !important;
}

.navbar, .navbar.scrolled {
    background: rgba(19, 38, 50, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.brand-name {
    color: #FFFFFF !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.nav-link:hover, .nav-link.active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.nav-cta-btn {
    background: #FFFFFF !important;
    color: #1E3847 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

.nav-cta-btn:hover {
    background: #38BDF8 !important;
    color: #132632 !important;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.4) !important;
}

.sector-col {
    background: rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #38BDF8 !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
}

.sector-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.sector-desc {
    color: #CBDCE6 !important;
}

.dash-bottom-bar {
    background: rgba(19, 38, 50, 0.92) !important;
    border-top: 2.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.4) !important;
}

.dash-bottom-bar .stat-num {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.dash-bottom-bar .stat-lbl, .dash-bottom-bar .feature-item span {
    color: #CBDCE6 !important;
}

.dash-bottom-bar .feature-item i {
    color: #38BDF8 !important;
}

/* ==========================================================================
   REVERSE OPPOSITE THEME: CRISP WHITE CARDS ON #1E3847 DARK BACKGROUND
   ========================================================================== */
.vertical-card {
    background: #FFFFFF !important;
    border-radius: 28px !important;
    border: 1px solid #EAEAEA !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
    padding: 3rem 2.2rem 2.2rem !important;
}

.vertical-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45) !important;
    border-color: #D8E3E9 !important;
}

/* 100% Crisp Deep #1E3847 Card Title on White Card! */
.vertical-card-title {
    color: #1E3847 !important;
    -webkit-text-fill-color: #1E3847 !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* 100% Crisp Navy Gray Card Description */
.vertical-card-desc {
    color: #456070 !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

/* Feature Star Capsules inside White Card */
.star-capsule {
    background: #F4F8FA !important;
    border: 1px solid #D8E3E9 !important;
    color: #1E3847 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(30, 56, 71, 0.05) !important;
}

.star-capsule:hover {
    background: #EBF2F6 !important;
    border-color: #1E3847 !important;
    transform: translateX(6px) !important;
}

.capsule-blue .star-icon {
    color: #1E3847 !important;
}

.capsule-orange .star-icon {
    color: #244D63 !important;
}

.capsule-green .star-icon {
    color: #2C6277 !important;
}

/* Card Buttons (#1E3847 Deep Navy Buttons with White Text) */
.vertical-card-cta {
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    padding: 1.05rem 1.6rem !important;
    border-radius: 40px !important;
    color: #FFFFFF !important;
}

.cta-btn-blue {
    background: linear-gradient(135deg, #1E3847, #2A4D62) !important;
    box-shadow: 0 8px 24px rgba(30, 56, 71, 0.3) !important;
}

.cta-btn-orange {
    background: linear-gradient(135deg, #244D63, #32627D) !important;
    box-shadow: 0 8px 24px rgba(36, 77, 99, 0.3) !important;
}

.cta-btn-green {
    background: linear-gradient(135deg, #2C6277, #3B7992) !important;
    box-shadow: 0 8px 24px rgba(44, 98, 119, 0.3) !important;
}

.vertical-card-cta:hover {
    transform: none !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
    background: #142733 !important;
    color: #FFFFFF !important;
}

/* Ribbons on White Card */
.ribbon-blue {
    background: linear-gradient(135deg, #1E3847, #2A4D62) !important;
    color: #FFFFFF !important;
}

.ribbon-orange {
    background: linear-gradient(135deg, #244D63, #32627D) !important;
    color: #FFFFFF !important;
}

.ribbon-green {
    background: linear-gradient(135deg, #2C6277, #3B7992) !important;
    color: #FFFFFF !important;
}

/* Reset logo invert filter since cards are white now */
.card-company-logo {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12)) !important;
}

.tagline-red {
    color: #38BDF8 !important;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.tagline-blue {
    color: #38C7D2 !important;
    text-shadow: 0 0 20px rgba(56, 199, 210, 0.4) !important;
}

.tagline-green {
    color: #34D399 !important;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.4) !important;
}

.sub-red {
    color: #7DD3FC !important;
}

.sub-blue {
    color: #5EEAD4 !important;
}

.sub-green {
    color: #6EE7B7 !important;
}

.sub-divider {
    color: rgba(255, 255, 255, 0.3) !important;
}

.official-nav-logo {
    filter: drop-shadow(0 4px 15px rgba(255, 255, 255, 0.25)) !important;
}


/* ==========================================================================
   ALL TITLES PURE WHITE COLOR OVERRIDE
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-title-sm,
.vertical-card-title,
.pillar-title,
.final-cta-title,
.sector-title,
.brand-name,
.hero-tagline h2,
.dash-headline,
.ecosystem-section .section-title,
.ecosystem-section .section-tag,
.dash-sectors .sector-title,
.dash-bottom-bar .stat-num {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}



/* Dark #1E3847 Card Box Container for Pure White Titles */
.vertical-card {
    background: #1E3847 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.vertical-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.vertical-card-desc {
    color: #CBDCE6 !important;
}

.star-capsule {
    background: rgba(19, 38, 50, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
}

.star-capsule:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}



/* ==========================================================================
   GLOBAL ALL TEXT & DETAILS PURE WHITE COLOR OVERRIDE
   ========================================================================== */
*,
*::before,
*::after,
body,
p,
span,
a,
div,
h1, h2, h3, h4, h5, h6,
li,
label,
button,
td,
th,
.vertical-card-title,
.vertical-card-desc,
.star-capsule,
.star-capsule span,
.sector-title,
.sector-desc,
.sector-tag,
.section-title,
.section-title-sm,
.section-subtext,
.section-desc,
.pillar-title,
.final-cta-title,
.brand-name,
.nav-link,
.hero-tagline h2,
.hero-tagline p,
.dash-headline,
.dash-subtext,
.stat-num,
.stat-lbl,
.feature-item span,
.card-ribbon-badge,
.card-ribbon-badge span,
.footer-link,
.footer-desc,
.footer-bottom-text {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}



/* ==========================================================================
   UNIFIED SYNERGY OF THREE CORE DISCIPLINES SECTION
   ========================================================================== */
.synergy-section {
    position: relative;
    width: 100%;
    padding: 7rem 0 8rem;
    z-index: 5;
    background: radial-gradient(circle at 50% 20%, #173245 0%, #0D1E2B 65%, #08141D 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    overflow: hidden;
}

/* Ambient Orbs */
.synergy-glow-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.synergy-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
}

.synergy-orb.orb-1 {
    top: 10%;
    left: 15%;
    width: 450px;
    height: 450px;
    background: #00D2FF;
}

.synergy-orb.orb-2 {
    top: 40%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: #FF7A00;
}

.synergy-orb.orb-3 {
    bottom: 10%;
    left: 30%;
    width: 500px;
    height: 500px;
    background: #00E676;
}

.relative-z {
    position: relative;
    z-index: 2;
}

/* Section Header styling inside dark synergy section */
.synergy-section .section-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 1rem;
}

.synergy-section .section-desc {
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
}

.synergy-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.3);
    color: #38BDF8;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 1.25rem;
}

.synergy-badge .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00D2FF;
    box-shadow: 0 0 10px #00D2FF;
    animation: pulseGlow 2s infinite;
}

/* Matrix Tab Bar */
.matrix-tab-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 3.5rem auto 3rem;
    padding: 8px;
    background: rgba(15, 30, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 60px;
    backdrop-filter: blur(16px);
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.matrix-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 40px;
    background: transparent;
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.matrix-tab-btn .tab-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot-blue { background: #00D2FF; box-shadow: 0 0 8px #00D2FF; }
.dot-orange { background: #FF7A00; box-shadow: 0 0 8px #FF7A00; }
.dot-green { background: #00E676; box-shadow: 0 0 8px #00E676; }

.matrix-tab-btn .tab-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.matrix-tab-btn:hover {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08);
}

.matrix-tab-btn.active[data-synergy="power"] {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(0, 102, 255, 0.35)) !important;
    border-color: rgba(0, 210, 255, 0.6) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.25);
}

.matrix-tab-btn.active[data-synergy="infra"] {
    background: linear-gradient(135deg, rgba(255, 122, 0, 0.25), rgba(230, 80, 0, 0.35)) !important;
    border-color: rgba(255, 122, 0, 0.6) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(255, 122, 0, 0.25);
}

.matrix-tab-btn.active[data-synergy="energy"] {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.25), rgba(0, 180, 90, 0.35)) !important;
    border-color: rgba(0, 230, 118, 0.6) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(0, 230, 118, 0.25);
}

/* Tab Panels */
.synergy-content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.synergy-panel {
    display: none;
    animation: fadeInSynergy 0.45s ease forwards;
}

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

@keyframes fadeInSynergy {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.synergy-card-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

/* Glassmorphic Info Card */
/* Glassmorphic Info Card with Specific Brand Color Border Glows */
.synergy-info-card {
    background: rgba(20, 38, 52, 0.85) !important;
    border-radius: 28px !important;
    padding: 3rem !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.synergy-info-card.card-blue {
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.synergy-info-card.card-orange {
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.synergy-info-card.card-green {
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.card-tag-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 10px;
}

.card-tag {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
}

.tag-blue { background: rgba(0, 210, 255, 0.15); color: #00D2FF !important; -webkit-text-fill-color: #00D2FF !important; border: 1px solid rgba(0, 210, 255, 0.4); }
.tag-orange { background: rgba(198, 0, 22, 0.18); color: #c60016 !important; -webkit-text-fill-color: #c60016 !important; border: 1px solid rgba(198, 0, 22, 0.4); }
.tag-green { background: rgba(0, 230, 118, 0.15); color: #00E676 !important; -webkit-text-fill-color: #00E676 !important; border: 1px solid rgba(0, 230, 118, 0.4); }

.card-company-sub {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

.synergy-info-card h3 {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    margin-bottom: 1rem !important;
    line-height: 1.3;
}

.synergy-info-card p {
    font-size: 1.05rem !important;
    color: #CBD5E1 !important;
    -webkit-text-fill-color: #CBD5E1 !important;
    line-height: 1.75 !important;
    margin-bottom: 2rem !important;
}

.synergy-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.synergy-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #F1F5F9 !important;
    -webkit-text-fill-color: #F1F5F9 !important;
}

.synergy-checklist li i {
    font-size: 1.1rem;
}

.check-blue { color: #00D2FF !important; }
.check-orange { color: #c60016 !important; }
.check-green { color: #00E676 !important; }

/* Glassmorphic Stats Card with Specific Brand Color Border Glows */
.synergy-stats-card {
    background: rgba(16, 32, 45, 0.85) !important;
    border-radius: 28px !important;
    padding: 2.5rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(20px);
}

.card-blue-sub {
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.card-orange-sub {
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.card-green-sub {
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.stat-header {
    margin-bottom: 1.5rem;
}

.stat-badge {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stat-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
}

.card-blue-sub .stat-number { color: #00D2FF !important; -webkit-text-fill-color: #00D2FF !important; }
.card-orange-sub .stat-number { color: #c60016 !important; -webkit-text-fill-color: #c60016 !important; }
.card-green-sub .stat-number { color: #00E676 !important; -webkit-text-fill-color: #00E676 !important; }

.stat-number {
    font-family: var(--font-display);
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    display: block;
    margin-bottom: 4px;
}

.stat-label {
    font-family: var(--font-heading);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
    line-height: 1.3;
    display: block;
}

.synergy-cross-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #E2E8F0 !important;
    -webkit-text-fill-color: #E2E8F0 !important;
}

.card-blue-sub .synergy-cross-link i { color: #00D2FF !important; }
.card-orange-sub .synergy-cross-link i { color: #c60016 !important; }
.card-green-sub .synergy-cross-link i { color: #00E676 !important; }

.synergy-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    font-family: var(--font-heading);
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
    transform: none !important;
}

.btn-blue {
    background: linear-gradient(135deg, #00D2FF 0%, #0072FF 100%) !important;
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.35) !important;
}

.btn-blue span, .btn-blue i {
    color: #0A192F !important;
    -webkit-text-fill-color: #0A192F !important;
    font-weight: 800 !important;
}

.btn-orange {
    background: linear-gradient(135deg, #c60016 0%, #a00012 100%) !important;
    box-shadow: 0 8px 25px rgba(198, 0, 22, 0.4) !important;
}

.btn-orange span, .btn-orange i {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 800 !important;
}

.btn-green {
    background: linear-gradient(135deg, #00E676 0%, #00875A 100%) !important;
    box-shadow: 0 8px 25px rgba(0, 230, 118, 0.35) !important;
}

.btn-green span, .btn-green i {
    color: #0A192F !important;
    -webkit-text-fill-color: #0A192F !important;
    font-weight: 800 !important;
}

.synergy-link-btn:hover {
    transform: none !important;
}

.synergy-link-btn:hover i {
    transform: none !important;
}

/* Specific Active Matrix Tab Styling with Brand Color Glowing Borders */
.matrix-tab-btn[data-synergy="power"].active {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
}

.matrix-tab-btn[data-synergy="infra"].active {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
}

.matrix-tab-btn[data-synergy="energy"].active {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid #FFFFFF !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
}

/* Orbital System Hub Block */
.ecosystem-container-block {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ecosystem-sub-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 5.5rem;
}

.sub-header-tag {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #38BDF8 !important;
    -webkit-text-fill-color: #38BDF8 !important;
    display: block;
    margin-bottom: 0.75rem;
}

.ecosystem-sub-title {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    margin-bottom: 0.75rem !important;
}

.ecosystem-sub-desc {
    font-size: 1rem !important;
    color: #94A3B8 !important;
    -webkit-text-fill-color: #94A3B8 !important;
}

.orbital-system-wrapper {
    position: relative;
    width: 100%;
    max-width: 750px;
    height: 650px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbital-lines-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Core Hub Node */
.core-hub-node {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #0F2332 !important;
    border: 3px solid #00D2FF !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 210, 255, 0.35) !important;
    z-index: 3;
}

.official-core-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 4px;
    filter: drop-shadow(0 6px 15px rgba(0, 210, 255, 0.4));
}

.core-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    inset: -14px;
    border: 2px solid rgba(0, 210, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    animation: spinSlow 20s linear infinite;
}

.ring-2 {
    inset: -28px;
    border: 2px solid rgba(255, 122, 0, 0.35);
    box-shadow: 0 0 15px rgba(255, 122, 0, 0.2);
    animation: spinSlow 35s linear infinite reverse;
}

@keyframes spinSlow {
    100% { transform: rotate(360deg); }
}

.core-content {
    text-align: center;
}

.core-title {
    font-family: var(--font-display);
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px;
    display: block;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.core-subtitle {
    font-family: var(--font-heading);
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 4px;
    color: #38BDF8 !important;
    -webkit-text-fill-color: #38BDF8 !important;
    display: block;
}

/* Orbiting Nodes (Clickable Cards) */
.orbit-node {
    position: absolute;
    width: 270px;
    padding: 1.35rem 1.5rem;
    background: rgba(14, 30, 44, 0.94) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
    cursor: pointer;
    z-index: 4;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.node-header-flex {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    width: 100%;
}

.node-external-icon {
    margin-left: auto;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s ease;
}

.node-power {
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 4px solid #c60016 !important;
}

.node-infra {
    bottom: 30px;
    right: 25px;
    border-top: 4px solid #00D2FF !important;
}

.node-energy {
    bottom: 30px;
    left: 25px;
    border-top: 4px solid #00E676 !important;
}

.node-icon {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-blue,
.icon-orange,
.icon-green {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.node-company-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

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

.node-category {
    font-family: var(--font-heading);
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px;
}

.cat-blue { color: #00D2FF !important; -webkit-text-fill-color: #00D2FF !important; }
.cat-orange { color: #c60016 !important; -webkit-text-fill-color: #c60016 !important; }
.cat-green { color: #00E676 !important; -webkit-text-fill-color: #00E676 !important; }

.node-company {
    font-family: var(--font-heading);
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    line-height: 1.2;
}

.node-tooltip {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: #CBD5E1 !important;
    -webkit-text-fill-color: #CBD5E1 !important;
    line-height: 1.45;
}

.orbit-node:hover,
.orbit-node.active-node {
    transform: none;
}

.node-power:hover,
.node-power.active-node {
    transform: translateX(-50%);
    border: 1.5px solid #c60016 !important;
    box-shadow: 0 0 50px rgba(198, 0, 22, 0.55) !important;
}

.node-infra:hover,
.node-infra.active-node {
    transform: none;
    border: 1.5px solid #00D2FF !important;
    box-shadow: 0 0 50px rgba(0, 210, 255, 0.55) !important;
}

.node-energy:hover,
.node-energy.active-node {
    transform: none;
    border: 1.5px solid #00E676 !important;
    box-shadow: 0 0 50px rgba(0, 230, 118, 0.55) !important;
}

.node-power:hover .node-external-icon,
.node-power.active-node .node-external-icon {
    color: #c60016;
}

.node-infra:hover .node-external-icon,
.node-infra.active-node .node-external-icon {
    color: #00D2FF;
}

.node-energy:hover .node-external-icon,
.node-energy.active-node .node-external-icon {
    color: #00E676;
}

/* Responsive adjustments for Synergy Section */
@media (max-width: 992px) {
    .synergy-card-grid {
        grid-template-columns: 1fr;
    }
    .matrix-tab-bar {
        flex-direction: column;
        border-radius: 24px;
        padding: 12px;
    }
    .orbital-system-wrapper {
        height: 580px;
    }
    .orbit-node {
        width: 210px;
        padding: 1rem;
    }
}

@media (max-width: 640px) {
    .orbital-system-wrapper {
        height: 520px;
    }
    .core-hub-node {
        width: 140px;
        height: 140px;
    }
    .official-core-logo {
        width: 60px;
        height: 60px;
    }
    .orbit-node {
        width: 170px;
        padding: 0.85rem;
    }
    .node-company {
        font-size: 0.8rem !important;
    }
    .node-tooltip {
        display: none;
    }
}

/* RESPONSIVE STYLES FOR KINETIC 3D HERO SECTION */
@media (max-width: 1200px) {
    .kinetic-hero {
        padding-top: 6.5rem;
    }
    .hero-content-left {
        width: 55%;
        padding-left: 3rem;
    }
    .hero-3d-deck-wrapper {
        width: 50vw;
    }
    .kinetic-force-nav {
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 992px) {
    .kinetic-hero {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 6rem;
        padding-bottom: 3rem;
        min-height: auto;
    }
    .hero-content-left {
        width: 100%;
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 0;
    }
    .hero-architectural-mask {
        position: relative;
        width: 100%;
        height: 380px;
        clip-path: none;
        border-radius: 24px;
        margin-top: 2rem;
        filter: none;
    }
    .holo-badge {
        display: none;
    }
    .hero-verticals-bar {
        width: 100%;
        overflow-x: auto;
        padding: 0.8rem;
    }
    .vertical-block {
        min-width: 130px;
    }
    .floating-stats-glass-bar {
        position: relative;
        inset: auto;
        margin: 2rem 1.5rem 0 1.5rem;
        width: calc(100% - 3rem);
        flex-wrap: wrap;
        gap: 1rem;
    }
    .glass-stat-divider {
        display: none;
    }
    .hero-right-overlay-elements {
        display: none;
    }
}

/* RESPONSIVE STYLES FOR MINIMAL HERO SECTION */
@media (max-width: 1100px) {
    .minimal-hero {
        padding-top: 7rem;
    }
    .hero-content-left {
        width: 58%;
        padding-left: 2.5rem;
    }
    .hero-architectural-mask {
        width: 48vw;
    }
    .minimal-verticals-nav {
        max-width: 100%;
        overflow-x: auto;
        gap: 1.5rem;
    }
}

@media (max-width: 992px) {
    .minimal-hero {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 6.5rem;
        padding-bottom: 3rem;
        min-height: auto;
    }
    .hero-content-left {
        width: 100%;
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .hero-architectural-mask {
        position: relative;
        width: 100%;
        height: 360px;
        clip-path: none;
        border-radius: 20px;
        margin-top: 2.5rem;
    }
    .minimal-holo-badge {
        top: 15px;
        left: 15px;
    }
    .minimal-play-orb {
        bottom: 20px;
        right: 20px;
    }
    .minimal-verticals-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.8rem;
    }
    .minimal-stats-ribbon {
        position: relative;
        inset: auto;
        margin: 2.5rem 1.5rem 0 1.5rem;
        width: calc(100% - 3rem);
        flex-wrap: wrap;
        gap: 1.2rem;
    }
    .m-sep {
        display: none;
    }
}

@media (max-width: 576px) {
    .minimal-hero-title {
        font-size: 2.2rem;
    }
    .minimal-hero-desc {
        font-size: 0.95rem;
    }
    .minimal-cta-group {
        flex-direction: column;
        align-items: stretch;
    }
    .minimal-btn-primary,
    .minimal-btn-secondary {
        justify-content: center;
    }
    .hero-architectural-mask {
        height: 260px;
    }
    .minimal-v-item {
        white-space: nowrap;
    }
    .minimal-v-item {
        white-space: nowrap;
    }
}

/* ==========================================================================
   MINIMALIST FLOATING HERO SECTION (STYLECRAFT DESIGN INSPIRED)
   ========================================================================== */

/* The outer wrapper acts as the "page" background where the floating card sits */
.minimal-hero-section {
    width: 100%;
    min-height: 100vh;
    background-color: #E0E4E8; /* Light grey backdrop */
    padding: 40px; /* Space around the floating card */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-heading);
}

/* The floating card itself */
.minimal-hero-container {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 80px); /* 100vh minus top and bottom paddings */
    min-height: 700px;
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('assets/hero-bg.jpg'); /* Factory aerial image */
    background-size: cover;
    background-position: center;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* Nav Wrapper */
.minimal-hero-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 60px;
    z-index: 10;
}

/* Left Cutout (Logo Area) */
.minimal-nav-left {
    background-color: transparent;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
}

/* Corner Cutout Trick (Left) */
.nav-left-corner {
    display: none;
}

.minimal-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #223843;
}

.minimal-logo-img {
    height: 55px;
}

.minimal-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff !important;
}

/* Right Cutout (CTA Area) */
.minimal-nav-right {
    background-color: transparent;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
}

/* Corner Cutout Trick (Right) */
.nav-right-corner {
    display: none;
}

.minimal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 8px 24px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.minimal-nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.minimal-nav-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 210, 255, 0.2), 0 0 15px rgba(255, 255, 255, 0.1);
}

.minimal-nav-btn:hover::before {
    left: 100%;
}

.minimal-nav-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: #00D2FF;
    color: #000;
    border-radius: 50%;
    font-size: 0.85rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}

.minimal-nav-btn:hover .minimal-nav-arrow {
    transform: rotate(45deg);
    background: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* Center Links */
.minimal-nav-center {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0;
}

.minimal-nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    position: relative;
    transition: color 0.3s ease;
}

.minimal-nav-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Header Social Links */
.header-social-separator {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
    align-self: center;
}

.social-text-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
}

.social-text-link:hover {
    opacity: 0.7;
}

.social-text-link i {
    font-size: 1.1rem;
}

.social-text-link span {
    font-size: 0.9rem;
    font-weight: 400;
}

/* Main Hero Content */
.minimal-hero-content {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 800px;
    z-index: 5;
}

.minimal-hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    font-weight: 700;
}

.minimal-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}

.minimal-cta-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 14px 36px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.minimal-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.minimal-cta-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 210, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1);
}

.minimal-cta-btn:hover::before {
    left: 100%;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .minimal-hero-title {
        font-size: 3.5rem;
    }
    .minimal-nav-center {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .minimal-hero-section {
        padding: 20px;
    }
    .minimal-hero-container {
        border-radius: 30px;
        height: calc(100vh - 40px);
    }
    .minimal-nav-center {
        display: none; /* Hide links on mobile for simplicity */
    }
    .minimal-nav-left {
        padding: 15px 20px 15px 0;
        border-bottom-right-radius: 20px;
    }
    .nav-left-corner {
        right: -20px;
        width: 20px;
        height: 20px;
        border-top-left-radius: 20px;
        box-shadow: -10px -10px 0 10px #E0E4E8;
    }
    .minimal-nav-right {
        padding: 15px 0 15px 20px;
        border-bottom-left-radius: 20px;
    }
    .nav-right-corner {
        left: -20px;
        width: 20px;
        height: 20px;
        border-top-right-radius: 20px;
        box-shadow: 10px -10px 0 10px #E0E4E8;
    }
    .minimal-logo-text {
        display: none;
    }
    .minimal-nav-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    .minimal-hero-title {
        font-size: 2.5rem;
    }
    .minimal-hero-subtitle {
        font-size: 1rem;
        padding: 0 20px;
    }
}

/* ==========================================================================
   WATERMARK SECTION HEADERS
   ========================================================================== */
.section-watermark-header {
    position: relative;
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent massive text from breaking layout */
}

.watermark-bg {
    font-size: clamp(5rem, 18vw, 15rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    white-space: nowrap;
    text-transform: uppercase;
    pointer-events: none;
    letter-spacing: 5px;
    font-family: 'Outfit', sans-serif;
}

.watermark-fg {
    position: relative;
    z-index: 1;
}

.watermark-subtitle {
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: #00D2FF; /* Neon blue accent */
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.watermark-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #FFF;
    margin: 0;
    letter-spacing: 1px;
}

/* ==========================================================================
   CONVERGENCE SVG GRAPHIC
   ========================================================================== */
.convergence-graphic {
    background-color: rgba(20, 30, 40, 0.4); /* Dark glassmorphic backdrop */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 60px 40px;
    margin: 40px auto 60px auto;
    max-width: 1000px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.draw-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* Enhancements for Unique SVG Graphic */
.svg-fade-in {
    opacity: 0;
    animation: svgFadeIn 1s ease-out forwards;
}
@keyframes svgFadeIn {
    to { opacity: 1; }
}

.pulse-node-red { animation: nodePulseRed 2s infinite alternate; }
.pulse-node-blue { animation: nodePulseBlue 2s infinite alternate 0.6s; }
.pulse-node-green { animation: nodePulseGreen 2s infinite alternate 1.2s; }
.core-pulse-outer { animation: corePulse 3s infinite alternate; }

@keyframes nodePulseRed { from { r: 10; opacity: 0.1; } to { r: 18; opacity: 0.4; } }
@keyframes nodePulseBlue { from { r: 10; opacity: 0.1; } to { r: 18; opacity: 0.4; } }
@keyframes nodePulseGreen { from { r: 10; opacity: 0.1; } to { r: 18; opacity: 0.4; } }
@keyframes corePulse { from { r: 14; opacity: 0.2; } to { r: 24; opacity: 0.8; } }

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVENESS OVERHAUL
   ========================================================================== */
@media (max-width: 900px) {
    /* Vertical Cards Grid (Parallax Deck / Businesses) */
    .vertical-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vertical-card {
        height: auto;
        min-height: 300px;
        width: 100%;
        margin-bottom: 20px;
        transform: none !important; /* Disable parallax overlapping on mobile */
    }
    
    /* Synergy Matrix Grid */
    .synergy-grid {
        grid-template-columns: 1fr;
    }
    
    /* Pillars Grid */
    .pillar-grid {
        grid-template-columns: 1fr;
    }

    /* Footer Layout */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-links, .footer-social {
        justify-content: center;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    /* Hero Section Fixes */
    .minimal-hero-nav {
        flex-direction: column;
        align-items: center;
        background: rgba(20, 30, 40, 0.9) !important;
        backdrop-filter: blur(10px) !important;
        position: relative;
        padding: 15px;
        border-radius: 0;
        width: 100%;
    }
    .minimal-nav-left, .minimal-nav-right {
        clip-path: none !important;
        background: transparent !important;
        padding: 10px 0;
        border-radius: 0;
        width: 100%;
        justify-content: center;
    }
    .nav-left-corner, .nav-right-corner {
        display: none !important;
    }
    .minimal-nav-center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin: 15px 0;
    }
    .minimal-hero-content {
        padding: 60px 20px !important;
    }
    .minimal-hero-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }
    
    /* Convergence SVG Fixes */
    .convergence-graphic {
        padding: 30px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .convergence-graphic svg {
        min-width: 700px; /* Force horizontal scroll to preserve text legibility */
    }
}