/* ==========================================================================
   1. GLOBAL RESET & CORE SYSTEM VARIABLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --bg-dark: #000000;
    --bg-card: rgba(255, 255, 255, 0.06);
    --border-card: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #b3a7cb;
    --primary-grad: linear-gradient(135deg, #7a1264 0%, #1a0b36 100%);
    --accent-cyan: #00f2fe;
    --accent-magenta: #e0115f;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ==========================================================================
   2. FINAL COMPACT FLOATING CAPSULE NAVIGATION HEADER
   ========================================================================== */
header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* THE THINNER FIX: Dropped padding from 0.5rem to 0.4rem top/bottom for a sleek profile */
    padding: 0.4rem 1.2rem 0.4rem 2rem !important; 
    
    /* MODERN TECHWE THEME COLOR: Deep charcoal glass with an electric glow outline */
    background: rgba(10, 11, 18, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 140, 255, 0.2) !important; /* Premium neon indigo tint edge */
    border-radius: 50px !important; /* Continuous smooth capsule curvature */
    
    /* FLOATING COMPRESSION */
    position: fixed !important;
    width: 92% !important;
    max-width: 1000px !important;
    top: 20px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important; 
    z-index: 1000 !important; 
    
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 140, 255, 0.05) !important;
    box-sizing: border-box !important;
}

.site-logo {
    /* THE ABSOLUTE OVERRIDE: Scales up asset artwork coordinates directly */
    height: 55px !important; 
    width: auto !important; 
    object-fit: contain !important;
    display: block !important;
    
    /* THE VISIBILITY ENGAGEMENT FIX: Multiplies size profiles cleanly on screen */
  
    
    /* Layout structural alignment shifts */
    margin-left: 15px !important; /* Comfortable margin padding buffer to keep the enlarged logo off the capsule curve edge */
    filter: brightness(1.3) contrast(1.1) !important; /* Gives text graphics an extra light boost */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.site-logo:hover {
    transform: scale(1.05) !important;
}
@media (max-width: 980px) {

    .site-logo {
        height: 45px !important;
        margin-left: 0 !important;
    }

}

nav ul {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    gap: 2.2rem !important; /* Clean corporate breathing space */
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav ul li {
    white-space: nowrap !important;
}

nav a {
    color: rgba(255, 255, 255, 0.8) !important; 
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding: 4px 0 !important;
    letter-spacing: 0.3px !important;
}

/* PREMIUM UPGRADE: Smooth sliding dual-color gradient line under options */
nav a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #008cff, #e100ff) !important; 
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

nav a:hover::after, nav a.active::after {
    width: 100% !important;
}

nav a:hover, nav a.active {
    color: #008cff !important; /* Vibrant neon blue focus state */
}

/* RE-ENGINEERED: Premium linear gradient Register button */
.btn-nav {
    background: linear-gradient(135deg, #008cff, #e100ff) !important; 
    color: #ffffff !important; /* Clean crisp white text */
    padding: 0.5rem 1.5rem !important; /* Compressed button padding to respect thinner header */
    border-radius: 30px !important; 
    font-weight: 600 !important; 
    font-size: 13.5px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 140, 255, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-nav::after {
    display: none !important; /* Disables underline animation on button */
}

.btn-nav:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(225, 0, 255, 0.5) !important;
    color: #ffffff !important;
}
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

@media (max-width: 980px) {

        header{
        width:auto !important;
        max-width:none !important;

        top:20px !important;
        right:20px !important;
        left:auto !important;

        transform:none !important;

        padding:0 !important;

        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
    }

    .site-logo {
        display: none !important;
    }

    .mobile-menu-btn{
        display:flex !important;
        align-items:center;
        justify-content:center;

        width:58px;
        height:58px;

        border-radius:50%;

        background:rgba(10,11,18,.9);

        border:1px solid rgba(0,140,255,.3);

        color:white;

         font-size:32px;
    font-weight:300;
    line-height:1;

        box-shadow:
            0 10px 30px rgba(0,0,0,.4);

        cursor:pointer;
    }

 nav{
        display:none;
    }

    nav.active{
        display:flex !important;

        position:fixed;

        inset:0;

        background:#030712;

        z-index:9999;

        justify-content:center;
        align-items:center;
    }

    nav.active ul{
        display:flex !important;
        flex-direction:column !important;

        gap:2rem !important;

        text-align:center;
    }

    nav.active a{
        font-size:1.4rem !important;
    }

}
.close-menu-btn{
    display:none;
}

@media(max-width:980px){

    nav.active .close-menu-btn{
        display:block;
        position:absolute;
        top:25px;
        right:25px;
        background:none;
        border:none;
        color:white;
        font-size:40px;
        z-index:10000;
    }

}
/* ==========================================================================
   3. CONTENT LAYOUT ADJUSTMENT BUFFER & HERO WORKSPACE
   ========================================================================== */
.hero {
    margin-top: 130px !important; /* Pushes content down safely below thinner capsule menu */
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    background: radial-gradient(circle at 80% 20%, rgba(122, 18, 100, 0.25) 0%, transparent 50%);
}

.hero-content {
    max-width: 550px;
}

.tagline {
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.cta-btn {
    text-decoration: none;
    background-color: black;
    color: #f6f6f6;
    border: none;
    padding: 14px 70px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    transition: 0.5s;
    margin-top: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.5);
    position: relative;
    margin-left: -5px;
}

.cta-btn::after {
    content: '';
    position: absolute;
    height: 102%;
    width: 103%;
    border-radius: 1000px;
    background-image: linear-gradient(to bottom right, #008cff, #e100ff);
    z-index: -1;
}

.cta-btn:hover {
    background-image: linear-gradient(to bottom right, #008cff, #e100ff);
    color: #000;
    box-shadow: 0 0 20px #d0c9d2;
}

/* ==========================================================================
   4. FULL SCREEN VIDEO CANVAS LAYERS
   ========================================================================== */
.back-video {
    position: fixed; /* full screen background */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* fill screen */
    object-position: center center; /* keep the true center visible */
    z-index: -1;
}

@media (min-aspect-ratio: 16/9) {
    .back-video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    .back-video {
        width: auto;
        height: 100%;
    }
}

.back-video::-webkit-media-controls {
    display: none !important;
}

.back-video::-moz-media-controls {
    display: none !important;
}

/* ==========================================================================
   5. GEMINI SPEC AI CHATINPUT BAR OVERLAYS
   ========================================================================== */
.tech-query-section {
    width: 100%;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: 2;
}

.query-container {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
}

.query-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}

.glowing-chatinput-box {
    display: flex !important;
    flex-direction: row !important; /* Forces items side-by-side */
    align-items: center !important;
    background-color: #000000 !important; /* Solid opaque backplate masks the center colors */
    border-radius: 24px !important;
    padding: 6px 14px !important;
    width: 100% !important;
    max-width: 450px !important;
    position: relative !important;
    z-index: 1 !important;
    
    /* THE ULTIMATE FIX: The animated rainbow border gradient lives right here natively */
    border: 2px solid transparent !important;
    background-image: linear-gradient(#000, #000), linear-gradient(90deg, #ff0055, #ff5500, #ffcc00, #00ffcc, #008cff, #e100ff, #ff0055) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 200% 200% !important;
    
    /* Triggers the smooth horizontal flowing rainbow border motion */
    animation: geminiBorderMove 4s linear infinite !important; 
    overflow: visible !important; 
}

.glowing-chatinput-box::after {
    content: '' !important;
    position: absolute !important;
    
    /* Perfectly contains the shadow aura just around the perimeter */
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 28px !important;
    z-index: -1 !important;
    
    /* Matching flow spectrum profile */
    background: linear-gradient(90deg, #ff0055, #ff5500, #ffcc00, #00ffcc, #008cff, #e100ff, #ff0055) !important;
    background-size: 200% 200% !important;
    
    /* Smooths the light out into a beautiful radiating neon halo aura */
    filter: blur(16px) !important;
    opacity: 0.55 !important; /* Elegant resting cloud brightness */
    
    /* Synchronizes the halo motion seamlessly with the border line above */
    animation: geminiBorderMove 4s linear infinite !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.glowing-chatinput-box:focus-within::after {
    opacity: 0.85 !important;
    filter: blur(22px) !important;
}

.glowing-chatinput-box input {
    flex: 1 !important; /* Takes up all space on the left */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    padding: 8px 4px !important;
    position: relative !important;
    z-index: 5 !important;
}

.glowing-chatinput-box input::placeholder {
    color: #a0a0a0 !important;
}

.glowing-chatinput-box button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ff007f !important; 
    border: none !important;
    cursor: pointer !important;
    
    /* These force the button to remain a small box on the right side */
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50% !important; /* Makes it a clean circle */
    flex-shrink: 0 !important; /* Prevents stretching */
    margin-left: 8px !important;
    position: relative !important;
    z-index: 5 !important;
}

.glowing-chatinput-box button:hover {
    background-color: #e100ff !important;
}

.glowing-chatinput-box button svg {
    width: 16px !important;
    height: 16px !important;
    fill: #00ffff !important; 
}

@keyframes geminiBorderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 980px) {
    .query-container {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    .query-text {
        white-space: normal !important;
    }
}
/* ==========================================================================
   6. ADVANCED TECH MATRIX CONSTELLATION GRAPHIC SYSTEM
   ========================================================================== */
.hero-grid-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}

.hero-graphic-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 450px;
    position: relative;
}

.matrix-mesh-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 380px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.096);
    overflow: hidden;
}

.matrix-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

.network-node {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 10;
}

.network-node span {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: nodeGlowPulse 2.5s infinite ease-in-out;
}

.core-alpha { top: 25%; left: 25%; color: #008cff; box-shadow: 0 0 20px #008cff; }
.core-beta { top: 70%; left: 45%; color: #e100ff; box-shadow: 0 0 20px #e100ff; }
.core-gamma { top: 35%; left: 75%; color: #00ffff; box-shadow: 0 0 20px #00ffff; }

.vector-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,140,255,0.2), rgba(225,0,255,0.2));
    transform-origin: left center;
    z-index: 5;
}

.line-ab { top: 27%; left: 27%; width: 220px; transform: rotate(59deg); }
.line-bc { top: 72%; left: 47%; width: 160px; transform: rotate(-43deg); }
.line-ca { top: 37%; left: 77%; width: 230px; transform: rotate(170deg); background: linear-gradient(90deg, rgba(0,ffff,0.2), rgba(0,140,255,0.2)); }

.data-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 6;
    filter: blur(1px);
}

.signal-1 { background: #00ffff; box-shadow: 0 0 10px #00ffff; animation: routeSignal1 4s infinite linear; }
.signal-2 { background: #e100ff; box-shadow: 0 0 10px #e100ff; animation: routeSignal2 3.5s infinite linear; }
.signal-3 { background: #008cff; box-shadow: 0 0 10px #008cff; animation: routeSignal3 5s infinite linear; }

@keyframes nodeGlowPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.4; }
    50% { transform: scale(1.4); opacity: 1; }
}
@keyframes routeSignal1 {
    0% { top: 25%; left: 25%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 70%; left: 45%; opacity: 0; }
}
@keyframes routeSignal2 {
    0% { top: 70%; left: 45%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 35%; left: 75%; opacity: 0; }
}
@keyframes routeSignal3 {
    0% { top: 35%; left: 75%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 25%; left: 25%; opacity: 0; }
}

@media (max-width: 980px){

    .hero{
        min-height: auto !important;
        padding: 40px 6% !important;

        display:block !important;
    }

    .hero-grid-container{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:40px !important;
    }

    .hero-graphic-block{
        order:2;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;

        width:100% !important;
        height:380px !important;
        min-height:380px !important;

        margin-top:20px !important;
    }

    .matrix-mesh-container{
        transform:none !important;
        width:100% !important;
        max-width:350px !important;
        height:350px !important;
    }
}
/*==================================================================
   7. PARTNERS CAROUSEL RUNTIME SLIDERS
   ========================================================================== */
.partners-section {
    width: 100%;
    padding: 60px 6% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.partners-glass-container {
    max-width: 1400px; 
    width: 100%;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 40px 0;
    overflow: hidden;
    position: relative;
}

.partners-header {
    margin-bottom: 50px;
    text-align: center;
}

.partners-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

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

.partners-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

.marquee-track-window {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

.marquee-scroller-engine {
    display: flex !important;
    flex-direction: row !important;
    gap: 6rem !important; 
    width: max-content;
    padding-left: 6rem; 
    animation: streamPartnerLogos 24s linear infinite !important; 
}

.marquee-track-window:hover .marquee-scroller-engine {
    animation-play-state: paused !important;
}

.partner-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 85px !important; 
    width: 220px !important; 
    flex-shrink: 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.partner-logo-item img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    opacity: 0.88; 
    transition: all 0.3s ease !important;
}

.partner-logo-item img.dark-logo {
    filter: brightness(0) invert(1) !important; 
}

.partner-logo-item:hover {
    transform: scale(1.08) translateY(-3px) !important;
}

.partner-logo-item:hover img {
    opacity: 1;
}

.partner-logo-item:hover img.dark-logo {
    filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(0, 140, 255, 0.5)) !important;
}

@keyframes streamPartnerLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 980px) {
    .partners-title { font-size: 1.8rem; }
    .partner-logo-item { height: 50px !important; width: 140px !important; } 
    .marquee-scroller-engine { gap: 3.5rem !important; padding-left: 3.5rem; }
    @keyframes streamPartnerLogos {
        100% { transform: translateX(calc(-50% - 1.75rem)); } 
    }
}

/* ==========================================================================
   8. CONTENT SECTION STRUCTURAL BLOCKS & ASYMMETRIC GRID
   ========================================================================== */
section {
    padding: 5rem 10%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    perspective: 1000px;
}

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

.tilt-edge {
    display: inline-block; 
    transform-style: preserve-3d;
    color: #ffffff; 
    animation: edge3DTilt 5s ease-in-out infinite;
}

@keyframes edge3DTilt {
    0% { transform: rotateY(0deg) rotateX(0deg) skewX(0deg); }
    15% { transform: rotateY(28deg) rotateX(12deg) skewX(-14deg); text-shadow: -8px 8px 15px rgba(0, 0, 0, 0.5); }
    35% { transform: rotateY(0deg) rotateX(0deg) skewX(0deg); text-shadow: none; }
    50% { transform: rotateY(-28deg) rotateX(-12deg) skewX(14deg); text-shadow: 8px -8px 15px rgba(0, 0, 0, 0.5); }
    75%, 100% { transform: rotateY(0deg) rotateX(0deg) skewX(0deg); text-shadow: none; }
}

.split-layout-wrapper {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important; 
    gap: 2.5rem !important;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.grid-container.small-blocks-mode {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 1.5rem !important; 
}

.grid-container.small-blocks-mode .card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 1.5rem 1.25rem !important; 
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 190px; 
    display: flex;
    flex-direction: column;
}

.grid-container.small-blocks-mode .card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 242, 254, 0.45);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 242, 254, 0.05);
    background: rgba(255, 255, 255, 0.03); 
}

.grid-container.small-blocks-mode .card-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 0.75rem !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 242, 254, 0.08) !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
    color: var(--accent-cyan) !important; 
    transition: all 0.3s ease !important;
}

.grid-container.small-blocks-mode .card:hover .card-icon {
    background: var(--accent-cyan) !important;
    color: #000000 !important;
    box-shadow: 0 0 15px var(--accent-cyan) !important;
    border-color: transparent !important;
}

.grid-container.small-blocks-mode .card-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important; 
}

.grid-container.small-blocks-mode .card h3 {
    font-size: 1.05rem !important; 
    margin-bottom: 0.4rem !important;
    font-weight: 700;
}

.grid-container.small-blocks-mode .card p {
    font-size: 0.82rem !important; 
    line-height: 1.4;
}
/* PREMIUM GLASS MAP CONSOLE COMPONENT STYLING */
.location-map-block {
    width: 100%;
    display: flex;
}

.map-inner-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    gap: 1rem;
}

.map-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.map-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Standard map iframe layout frame tracking */
.map-inner-card iframe {
    width: 100%;
    flex: 1;
    min-height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    filter: invert(90%) hue-rotate(180deg) grayscale(10%) contrast(110%); /* High-end dark theme overlay tracking for raw map elements */
}

/* Mobile Responsive Matrix Safety Alignment Layer */
@media (max-width: 968px) {
    .split-layout-wrapper {
        grid-template-columns: 1fr !important; /* Collapses columns into single column stack */
        gap: 2rem !important;
    }
    .grid-container.small-blocks-mode {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}




.grid-container.small-blocks-mode
/* ==========================================================================
   5. ENTERPRISE ASYMMETRIC ABOUT COMPANY SECTION 
   ========================================================================== */
.about-section {
    width: 100%;
    padding: 90px 6% !important;
    position: relative;
    z-index: 2; 
}

.about-grid-container {
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important; 
    gap: 5rem !important;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    align-items: center;
}

/* LEFT COLUMN: INTERACTIVE VISUAL CANVAS GRAPHICS */
.about-visual-block {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 30px 0;
}

.about-image-wrapper {
    position: relative;
    width: 85%;
    border-radius: 20px;
    overflow: visible; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 19px;
    object-fit: cover;
}

/* Interactive Floating Kinetic Play Button Component */
.about-play-btn {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #008cff, #e100ff) !important; 
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 15;
    box-shadow: 0 10px 25px rgba(225, 0, 255, 0.4), 0 0 0 0 rgba(0, 140, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: playButtonPulse 2s infinite; 
}

.about-play-btn svg {
    width: 26px;
    height: 26px;
    fill: #ffffff !important;
    margin-left: 4px; 
    transition: transform 0.3s ease;
}

.about-play-btn:hover {
    transform: scale(1.1) rotate(15deg) !important;
    box-shadow: 0 15px 30px rgba(225, 0, 255, 0.6), 0 0 20px rgba(0, 140, 255, 0.3);
}

/* DECORATIVE ARTWORK ELEMENTS BACKGROUND CORES */
.decor-dot-grid {
    position: absolute;
    top: -10px;
    right: 5%;
    width: 140px;
    height: 180px;
    background-image: radial-gradient(rgba(0, 242, 254, 0.2) 1.5px, transparent 1.5px);
    background-size: 15px 15px;
    z-index: -1;
}

.decor-accent-orb {
    position: absolute;
    bottom: -40px;
    left: 40%;
    width: 24px;
    height: 24px;
    background: #ff007f;
    border-radius: 50%;
    opacity: 0.6;
    filter: blur(1px);
    z-index: -1;
}

/* RIGHT COLUMN: BRAND INFORMATION TEXT GRID PANELS */
.about-content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.badge-tag {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    color: #e100ff !important; 
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.about-content-block h2 {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 2rem;
}

.about-content-block h2 span {
    color: var(--accent-cyan); 
}

.bordered-quote-box {
    border-left: 3px solid #008cff; 
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
    max-width: 540px;
}

.bordered-quote-box p {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* Rounded Stadium Read More Button Accent Handle */
.about-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #008cff, #e100ff) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 12px 32px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 140, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.about-read-more-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.about-read-more-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(225, 0, 255, 0.45);
}

.about-read-more-btn:hover svg {
    transform: translateX(5px); 
}

/* ==========================================================================
   VIDEO DISPLAY OVERLAY MODAL INTERFACE WINDOWS
   ========================================================================== */
.video-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(3, 7, 18, 0.9) !important; 
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 20000 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.video-modal-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* THE REEL MATRIX RE-ENGINEERING CORE */
.video-modal-window.vertical-reel-mode {
    position: relative;
    width: 100%;
    max-width: 360px !important; 
    height: 80vh !important; 
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 50px rgba(0, 140, 255, 0.1);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px;
}

.video-modal-overlay.active .video-modal-window {
    transform: scale(1) !important;
}

.modal-close-btn {
    position: absolute;
    top: -45px;
    right: 0;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 36px;
    cursor: pointer !important;
    line-height: 1;
    transition: color 0.2s ease !important;
    opacity: 0.8;
}

.modal-close-btn:hover {
    color: #ff007f !important;
    opacity: 1;
}

.video-responsive-frame {
    position: relative;
    width: 100%;
    height: 100%; 
    border-radius: 14px;
    overflow: hidden;
}

.video-responsive-frame video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    background: #000000;
}

@keyframes playButtonPulse {
    0% { box-shadow: 0 10px 25px rgba(225, 0, 255, 0.4), 0 0 0 0 rgba(0, 140, 255, 0.5); }
    70% { box-shadow: 0 10px 25px rgba(225, 0, 255, 0.4), 0 0 0 20px rgba(0, 140, 255, 0); }
    100% { box-shadow: 0 10px 25px rgba(225, 0, 255, 0.4), 0 0 0 0 rgba(0, 140, 255, 0); }
}

@media (max-width: 968px) {
    .about-grid-container {
        grid-template-columns: 1fr !important;
        gap: 3.5rem !important;
    }
    .about-visual-block {
        justify-content: center;
    }
    .about-content-block {
        align-items: center;
        text-align: center;
    }
    .bordered-quote-box {
        border-left: none;
        border-top: 2px solid #008cff;
        padding-left: 0;
        padding-top: 1rem;
    }
    .about-content-block h2 {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   6. PREMIUM HIGH-TECH 3D LAYERED GLASSMORPHIC TESTIMONIAL SYSTEM
   ========================================================================== */
.testimonials-section {
    width: 100% !important;
    padding: 120px 6% !important; 
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
}

.testimonials-grid-container {
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important;
    gap: 5rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    align-items: center !important;
}

.testimonials-info-block {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.testimonials-info-block h2 {
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    letter-spacing: -1px !important;
    margin-bottom: 1.5rem !important;
}

.testimonials-info-block h2 span {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonials-subtitle {
    color: var(--text-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    max-width: 450px !important;
    opacity: 0.85;
}

.testimonials-card-block {
    perspective: 1200px !important;
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2rem !important;
}

/* Master Glass Container Structure */
.testimonial-glass-card {
    position: relative !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 24px !important;
    padding: 3rem !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    overflow: visible !important; 
    z-index: 5 !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    transform-style: preserve-3d;
}

/* THE 3D SCROLL SWEEP TRANSITIONS (COMPATIBLE MODE LOGIC) */
.testimonial-glass-card.card-hide-state {
opacity: 0 !important;transform: scale(0.88) translateX(-120%) rotateY(-10deg) !important;}.testimonial-glass-card.card-enter-prepare {transition: none !important;opacity: 0 !important;transform: scale(0.88) translateX(120%) rotateY(10deg) !important;}.testimonial-glass-card.slide-next-matrix {opacity: 0 !important;transform: translateY(-25px) scale(0.97) !important;}.testimonial-glass-card.slide-prev-matrix {opacity: 0 !important;transform: translateY(25px) scale(0.97) !important;}/* ==========================================================================THE 3D FLOATING PROFILE CIRCLES CORE PROPERTIES========================================================================== */.floating-3d-avatar {position: absolute !important;border-radius: 50% !important;overflow: hidden !important;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);background: #000000;border: 2px solid rgba(255, 255, 255, 0.15);transition: transform 0.4s ease;}.floating-3d-avatar img {width: 100% !important;height: 100% !important;object-fit: cover !important;}.avatar-left-wing {width: 110px !important;height: 110px !important;left: -55px !important;top: 15% !important;z-index: 10 !important;animation: avatarFloatLeft 6s ease-in-out infinite !important;}.avatar-top-crown {width: 90px !important;height: 90px !important;top: -45px !important;left: 55% !important;z-index: -2 !important;opacity: 0.6;animation: avatarFloatTop 7s ease-in-out infinite !important;}.avatar-right-wing {width: 75px !important;height: 75px !important;right: -35px !important;bottom: 25% !important;z-index: -2 !important;opacity: 0.4;animation: avatarFloatRight 8s ease-in-out infinite !important;}.quote-mark-icon {position: absolute;top: 20px;right: 35px;font-size: 6rem;font-family: serif;line-height: 1;color: var(--accent-cyan);opacity: 0.12;pointer-events: none;user-select: none;}.star-rating-row {color: #ffb800 !important;font-size: 1.1rem !important;letter-spacing: 4px !important;margin-bottom: 1.5rem !important;display: flex !important;}.testimonial-quote {color: #e2e8f0 !important;font-size: 1.02rem !important;line-height: 1.75 !important;margin-bottom: 2rem !important;font-style: italic !important;text-align: left !important;}.card-separator {width: 100%;height: 1px;background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);margin-bottom: 1.5rem;}.testimonial-author {width: 100% !important;text-align: left !important;}.testimonial-author h3 {font-size: 1.4rem !important;font-weight: 700 !important;color: #ffffff !important;margin-bottom: 0.2rem !important;}.testimonial-author p {font-size: 0.9rem !important;color: var(--text-muted) !important;}.testimonial-author p span {color: var(--accent-magenta) !important;font-weight: 600;}
/* ==========================================================================
   CAROUSEL NAV INTERFACE CONTROLS & BREATHING KEYFRAMES
   ========================================================================== */
.testimonial-slider-controls {
    display: flex !important;
    gap: 16px !important;
}

.slider-arrow-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.slider-arrow-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
}

.slider-arrow-btn:hover {
    background: #ffffff !important; 
    color: #030712 !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.25);
}

@keyframes avatarFloatLeft {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); } 
}

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

@keyframes avatarFloatRight {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px) translateX(-3px); } 
}

.testimonial-glass-card:hover .avatar-left-wing { animation-play-state: paused !important; transform: translate(-8px, -8px) scale(1.04) !important; }
.testimonial-glass-card:hover .avatar-top-crown { animation-play-state: paused !important; transform: translate(6px, -5px) !important; opacity: 0.8 !important; }
.testimonial-glass-card:hover .avatar-right-wing { animation-play-state: paused !important; transform: translate(5px, 6px) !important; opacity: 0.6 !important; }

@media (max-width: 968px) {
    .testimonials-grid-container {
        grid-template-columns: 1fr !important;
        gap: 5rem !important;
    }
    .testimonials-info-block { align-items: center !important; text-align: center !important; }
    .testimonials-info-block h2 { font-size: 2.3rem !important; }
    .testimonials-card-block { align-items: center !important; }
    .avatar-left-wing { width: 70px !important; height: 70px !important; left: -20px !important; top: -35px !important; animation: avatarFloatLeftMobile 5s ease-in-out infinite !important; }
    .avatar-top-crown { width: 60px !important; height: 60px !important; top: -30px !important; left: 75% !important; animation: avatarFloatTopMobile 6s ease-in-out infinite !important; }
    .avatar-right-wing { display: none !important; } 
    .star-rating-row { justify-content: center !important; }
    .testimonial-author { text-align: center !important; }
    
    @keyframes avatarFloatLeftMobile { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -4px); } }
    @keyframes avatarFloatTopMobile { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, 3px); } }
}
  
.contact-section {
    width: 100% !important;
    padding: 60px 6% !important; /* Slightly thinner padding to keep the vertical frame compact */
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    min-height: auto !important; 
}

/* BACKGROUND CANVAS IMAGE */
.contact-bg-media {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    width: 100% !important;
    height: 100% !important;
}

.contact-bg-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.25) contrast(1.1); /* Slightly deepened to maximize typography readability */
}

/* STACKED CONTAINER FRAME */
.contact-center-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Stacks the content vertically: Text blocks on top, box on bottom */
    align-items: flex-start; /* Forces the text to stay on the left edge */
    gap: 2.2rem; /* Comfortable vertical separation spacing link between blocks */
}

.contact-info-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* THE LEFT FIX: Forces text nodes to stay left-aligned */
    text-align: left;
    width: 100%;
}

.badge-tag {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 5px 14px !important; /* Slightly tighter badge padding metrics */
    border-radius: 30px !important;
    color: #e100ff !important; 
    font-size: 12px; /* Made the tag text slightly smaller */
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.contact-info-panel h2 {
    /* THE SMALLER FIX: Reduced size from 2.6rem down to 2.1rem for a clean look */
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 0.8rem !important;
    max-width: 600px; /* Prevents the heading line from spreading too far wide */
}

.contact-info-panel h2 span {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-subtitle {
    color: var(--text-muted) !important;
    /* THE SMALLER FIX: Scaled text down to an elegant 0.92rem size */
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    max-width: 540px !important;
    margin-bottom: 0px !important; /* Reset margin constraints to respect the column layout tracking */
}

/* LENS COMMS CONTAINER */
.lens-comms-box {
    position: relative !important;
    width: 100%;
    
    /* THE COMPRESSION FIX: Shrunk layout bounds down to 400px to make it smaller */
    max-width: 400px; 
    
    /* THE MIDDLE FIX: Aligns the entire box perfectly in the center horizontally */
    margin: 0 auto !important; 
    
    background: rgba(3, 7, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    
    /* THE SMALLER FIX: Tighter interior box space saving limits */
    padding: 1.6rem !important; 
    
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Snug spacing gaps inside the rows */
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.55);
    overflow: hidden !important;
    text-align: left; 
}

.comms-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.comms-icon {
    /* THE SMALLER FIX: Scaled icon grids down from 44px to a compact 36px bounding footprint */
    width: 36px;
    height: 36px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.2);
    color: var(--accent-cyan);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.comms-icon svg {
    width: 16px; /* Slightly tighter internal vector layout paths */
    height: 16px;
}

.comms-label {
    font-size: 0.75rem; /* Compact print size label scale */
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1px;
}

.comms-digits {
    /* THE SMALLER FIX: Scaled phone/email string tags from 1.25rem down to 1.1rem */
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.2px;
    transform-origin: left center;
    display: inline-block;
}

/* ACTIVE SCROLL ANIMATION EFFECTS TIED NATIVELY TO TRIGGER HANDLES */
.animate-now .comms-digits {
    animation: smoothLensZoom 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

.scanning-lens-element {
    position: absolute !important;
    width: 90px;
    height: 90px;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.18) 0%, transparent 75%);
    border: 2px solid var(--accent-cyan) !important;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.45), inset 0 0 15px rgba(0, 242, 254, 0.3);
    z-index: 5 !important;
    pointer-events: none;
    top: 20px;
    left: -120px; 
    opacity: 0;
}

.animate-now .scanning-lens-element {
    animation: smoothLensGlide 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ==========================================================================
   ULTRA-SMOOTH ANIMATION MATRICES (SCALED FOR TIGHTER BOUNDS)
   ========================================================================== */
@keyframes smoothLensGlide {
    0% {
        left: -120px;
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    /* Adjusted centering loop offsets to fit your tighter box width limits */
    40%, 65% {
        left: 100px;
        opacity: 1;
        transform: scale(1.05);
    }
    88%, 100% {
        left: 420px;
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes smoothLensZoom {
    0%, 35% {
        transform: scale(1);
        color: #ffffff;
    }
    40%, 65% {
        transform: scale(1.1); /* Comfortable micro zoom asset scale */
        color: var(--accent-cyan);
        text-shadow: 0 0 15px rgba(0, 242, 254, 0.35);
    }
    72%, 100% {
        transform: scale(1);
        color: #ffffff;
        text-shadow: none;
    }
}

/* Mobile Responsive Matrix Core Safety Fallback Grid Layers */
@media (max-width: 980px) {
    .contact-info-panel { align-items: center !important; text-align: center !important; }
    .contact-info-panel h2 { font-size: 1.8rem !important; }
    .scanning-lens-element { display: none !important; } 
    .animate-now .comms-digits { animation: none !important; }
}
/* Glassmorphic Banner Container */
.banner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 50px;
  border-radius: 16px;
  
  /* Glassmorphism effects */
  background: rgba(255, 255, 255, 0.05); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 1100px;
  margin: 40px auto;
}

/* Text Content Styling */
.banner-content h2 {
  color: #ffffff;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.banner-content p {
  color: #e0e0e0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

/* Animated Call-to-Action Button */
.cta-button {
  background-color: #e22b8b;
  color: white;
  text-decoration: none;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 rgba(226, 43, 139, 0.7);
}

/* Pulse and Glow Animation on Hover */
.cta-button:hover {
  background-color: #ff3c9e;
  transform: translateY(-2px);
  box-shadow: 0 0 15px 5px rgba(226, 43, 139, 0.4);
}

/* Click feedback effect */
.cta-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 5px 2px rgba(226, 43, 139, 0.4);
}
:root {
    --bg-global: #030712;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --bg-card: rgba(255, 255, 255, 0.02);
    --border-card: rgba(255, 255, 255, 0.05);
    --header-blur-bg: rgba(10, 11, 18, 0.75);
    
    /* Pre-existing brand accent links */
    --accent-cyan: #00f2fe;
    --accent-magenta: #ff007f;
}

/* 2. Light Theme Overrides (Activated smoothly via JavaScript injection root mapping) */
[data-theme="light"] {
    --bg-global: #f9fafb;
    --text-main: #111827;
    --text-muted: #4b5563;
    --bg-card: rgba(0, 0, 0, 0.03);
    --border-card: rgba(0, 0, 0, 0.08);
    --header-blur-bg: rgba(243, 244, 246, 0.85);
}

/* 3. Global Structural Mapping Binding (Ensures your page respects theme switches) */
body {
    background-color: var(--bg-global) !important;
    color: var(--text-main) !important;
    transition: background-color 0.4s ease, color 0.4s ease !important;
}

/* Adds high-end hardware visibility protection layers to video loops on light mode */
[data-theme="light"] .back-video,
[data-theme="light"] .contact-bg-media img {
    filter: brightness(0.95) contrast(0.9) grayscale(0.2) opacity(0.15) !important; /* Softens back-media into a clean light canvas print texture */
}

/* ==========================================================================
   THE CRITICAL FIX: EXPLICIT LIGHT MODE TEXT OVERRIDES
   ========================================================================== */

/* Flips ALL webpage headings, titles, and section names to high-contrast dark gray */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .section-title,
[data-theme="light"] .query-text,
[data-theme="light"] .card h3 {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

/* Smoothly shifts paragraph copy inside features, descriptions, and blocks to readable slate */
[data-theme="light"] p,
[data-theme="light"] .card p,
[data-theme="light"] .contact-subtitle {
    color: var(--text-muted) !important;
}

/* Inverts your four A, B, C, D glass cards into clean dark-bordered tiles */
[data-theme="light"] .card,
[data-theme="light"] .grid-container.small-blocks-mode .card,
[data-theme="light"] .lens-comms-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* Gives the background numbering elements a clean, readable light gray print shade */
[data-theme="light"] .card-num {
    color: rgba(0, 0, 0, 0.04) !important;
}

/* Inverts your Google Map map element from dark mode back to normal light mode colors */
[data-theme="light"] .map-inner-card,
[data-theme="light"] .map-inner-card iframe {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    filter: none !important; /* Strips out the dark mode color inversion layer entirely */
}

/* ==========================================================================
   HIGH-TECH SLIDER CONTROL UI ARCHITECTURE
   ========================================================================== */
.theme-switch-wrapper {
    display: inline-flex !important;
    align-items: center !important;
}

.theme-switch-container {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    cursor: pointer;
}

/* Fully hides the primitive base checkbox input field graphic */
.theme-switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The structural pill-shaped track path */
.slider-track-pill {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 34px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

/* The small round physical moving switch knob */
.slider-knob-ball {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background: linear-gradient(135deg, #008cff, #e100ff);
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Glyph Graphic Indicators Sizing adjustments */
.slider-track-pill svg {
    width: 12px;
    height: 12px;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.icon-sun { color: #ffaa00; opacity: 0.3; }
.icon-moon { color: #a855f7; opacity: 1; }

/* --- INTERACTIVE STATE TRANSITIONS --- */

/* Switches knob alignment when user checks the element */
.theme-switch-container input:checked + .slider-track-pill .slider-knob-ball {
    transform: translateX(26px); /* Moves knob smoothly to the right edge */
    background: linear-gradient(135deg, #ffaa00, #ff5500); /* Warm solar configuration color map shift */
}

.theme-switch-container input:checked + .slider-track-pill {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Inverts opacity variables inside the glyph vector clusters based on checked status values */
.theme-switch-container input:checked + .slider-track-pill .icon-sun { opacity: 1; }
.theme-switch-container input:checked + .slider-track-pill .icon-moon { opacity: 0.3; }

/* Updates capsule header styles globally during active light theme operations */
[data-theme="light"] header {
    background: var(--header-blur-bg) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] nav a {
    color: #374151 !important; /* Dark charcoal text readability upgrade */
}
[data-theme="light"] nav a:hover, [data-theme="light"] nav a.active {
    color: #008cff !important;
}
/* ==========================================================================
   EXPLICIT TESTIMONIAL CARD LIGHT MODE CONTRAST FIX
   ========================================================================== */

/* 1. Turns the card layout container into a solid crisp white box */
[data-theme="light"] .review-card-content,
[data-theme="light"] .review-card-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Forces the white faded review description text to turn dark gray */
[data-theme="light"] .review-quote-text,
[data-theme="light"] .review-card-content p,
[data-theme="light"] blockquote {
    color: #374151 !important; /* Deep readable charcoal slate */
}

/* 3. Inverts the customer names (Elena Rostova) to bold dark black */
[data-theme="light"] .author-name,
[data-theme="light"] .review-card-content h3 {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* 4. Softens the description role line labels */
[data-theme="light"] .author-role {
    color: #6b7280 !important;
}

/* 5. Keeps the background watermark quote symbol extremely faint */
[data-theme="light"] .quote-bg-glyph {
    color: rgba(0, 0, 0, 0.03) !important;
}

/* 6. Fixes the avatar bubble outlines to contrast against white backgrounds */
[data-theme="light"] .avatar-bubble {
    border-color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .reviews-section *[class*="swiper"],
[data-theme="light"] .reviews-section *[class*="slick"],
[data-theme="light"] .reviews-section *[class*="owl"],
[data-theme="light"] .reviews-section button,
[data-theme="light"] .reviews-section i,
[data-theme="light"] .reviews-section span[class*="arrow"] {
    background-color: #111827 !important; /* Elegant dark charcoal background */
    color: #ffffff !important;            /* Crisp white arrow icon color */
    fill: #ffffff !important;             /* Direct SVG vector layer coloring override */
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;                /* Restores full visibility */
}
/* ==========================================================================
   TESTIMONIAL AUTO-CAROUSEL BUTTONS LIGHT MODE COLOR INVERSION
   ========================================================================== */

/* 1. Inverts the button track backplates to true solid black */
[data-theme="light"] .testimonials-card-block .slider-arrow-btn,
[data-theme="light"] .testimonial-slider-controls .slider-arrow-btn {
    background: #000000 !important; /* Pitch black background capsule */
    color: #ffffff !important;      /* Crisp white internal icon strokes */
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    opacity: 1 !important;          /* Keeps it completely solid and visible */
}

/* 2. Forces individual internal SVG icons to maintain high-contrast white visibility */
[data-theme="light"] .testimonials-card-block .slider-arrow-btn svg,
[data-theme="light"] .testimonial-slider-controls .slider-arrow-btn svg {
    stroke: #ffffff !important; /* Vivid white path line tracking */
    fill: none !important;
}

/* 3. Interactive state transition profile loop when hovered by user mouse cursor */
[data-theme="light"] .testimonials-card-block .slider-arrow-btn:hover,
[data-theme="light"] .testimonial-slider-controls .slider-arrow-btn:hover {
    background: linear-gradient(135deg, #008cff, #e100ff) !important; /* Swaps into your signature purple gradient */
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 25px rgba(0, 140, 255, 0.45) !important;
    transform: translateY(-2px) scale(1.05);
}
/* ==========================================================================
/* ==========================================================================
   3D RETRO SPLIT-FLAP ENGINE (SINGLE ROW GRID ADJUSTMENT)
   ========================================================================== */
.stats-section {
    width: 100% !important;
    padding: 60px 6% !important;
    position: relative !important;
    z-index: 2 !important;
}

.stats-grid-container {
    display: grid !important;
    /* THE ROW FIX: Decreased minmax width parameter to fit all 4 tiles in one line */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1.5rem !important; /* Slightly tighter layout gap path */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.stat-counter-card {
    background: rgba(10, 11, 18, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 2rem 1rem !important; /* Sleek, snug container space metrics */
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Master Digit Row Alignment Row Container */
.split-flap-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-bottom: 1.25rem;
}

/* Individual Mechanical Digit Box Housing */
.flap-digit-box {
    position: relative !important;
    width: 38px !important;  /* Snugger card width bounds for single row fitting */
    height: 52px !important; /* Scaled down layout bounds proportionally */
    background-color: #1a1a1a !important; 
    border-radius: 6px !important;
    perspective: 300px !important; 
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(0,0,0,0.8);
    border: 1px solid #111111;
}

/* Base rules for the split folding halves */
.flap-panel {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    overflow: hidden !important;
    background-color: #222222 !important; 
    display: flex !important;
    justify-content: center !important;
    backface-visibility: hidden !important; 
    -webkit-backface-visibility: hidden !important;
}

/* Precise Text Layout Splitting Calculations */
.num-text {
    font-size: 2.8rem !important; /* Re-scaled typography mapping font dimensions */
    font-weight: 800 !important;
    color: #ffffff !important; 
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    line-height: 52px !important; /* Perfectly centers characters inside smaller boxes */
}

/* Top Plate Constraints */
.top-half {
    top: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
}
.top-half .num-text {
    top: 0 !important;
}

/* Bottom Plate Constraints */
.bottom-half {
    bottom: 0 !important;
    border-radius: 0 0 4px 4px !important;
}
.bottom-half .num-text {
    bottom: 0 !important;
}

/* THE MECHANICAL HINGE FLIP PLATE LAYERS */
.flip-hinge-plate {
    top: 0 !important;
    transform-origin: center bottom !important; 
    border-radius: 4px 4px 0 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    z-index: 3 !important;
}
.flip-hinge-plate .num-text {
    top: 0 !important;
}

/* ACTIVE CLASS: Injects the aggressive downward mechanical flip rotation pulse track */
.flap-digit-box.is-flipping .flip-hinge-plate {
    animation: mechanicalFlapDown 0.12s linear forwards !important; /* Accelerated flip time for snappiness */
}

.flap-static-suffix {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent-cyan);
    margin-left: 2px;
}

.stat-label-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px;
    margin-bottom: 0.4rem !important;
}

.stat-sub-desc {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.4;
}

/* ==========================================================================
   THEME SWITCHER LIGHT MODE COMPATIBILITY OVERRIDES
   ========================================================================== */
[data-theme="light"] .stat-counter-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .flap-digit-box {
    background-color: #e5e7eb !important; 
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), inset 0 0 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .flap-panel {
    background-color: #f3f4f6 !important; 
}
[data-theme="light"] .num-text {
    color: #111827 !important; 
}
[data-theme="light"] .stat-label-title { color: #111827 !important; }
[data-theme="light"] .stat-sub-desc { color: #4b5563 !important; }

/* 3D MECHANICAL ROTATION TIMELINE */
@keyframes mechanicalFlapDown {
    0% { transform: rotateX(0deg); background-color: #222222 !important; }
    50% { background-color: #111111 !important; }
    100% { transform: rotateX(-180deg); background-color: #222222 !important; }
}

[data-theme="light"] .mechanical-flap-animations {
    /* Scoped animations can't be declared with a selector before @keyframes in CSS.
       Define a namespaced keyframes and apply it where needed for light theme. */
}

@keyframes mechanicalFlapDown-light {
    0% { transform: rotateX(0deg); background-color: #f3f4f6 !important; }
    100% { transform: rotateX(-180deg); background-color: #f3f4f6 !important; }
}
/* ==========================================================================
   HIGH-TECH INTEGRATED CYBER CLOUD CANVAS DISPLAY CONSOLE
   ========================================================================== */
.cloud-canvas-block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.canvas-glass-console {
    width: 100%;
    max-width: 540px; /* Snug width footprint to sit next to cards perfectly */
    height: 420px; /* Fixed vertical drawing bounding canvas box */
    background: rgba(5, 12, 10, 0.4); /* Subtle deep green-tinted charcoal core plate */
    border: 1px solid rgba(0, 255, 128, 0.1); /* Thin cybernetic circuit edge border line */
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 255, 128, 0.03);
    position: relative;
    overflow: hidden;
}

#cyberCloudCanvas {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent; /* Allows your background video loop to peek through */
}

/* ==========================================================================
   THEME SWITCHER LIGHT MODE COMPATIBILITY OVERRIDES
   ========================================================================== */
[data-theme="light"] .canvas-glass-console {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
}
@media (max-width:980px){

    .hero{
        margin-top:100px !important;
        min-height:auto !important;

        padding:40px 20px 80px !important;
        text-align:center !important;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    .hero-grid-container{
        display:flex !important;
        flex-direction:column !important;
        gap:40px !important;
    }

    .hero-text-block{
        width:100%;
        max-width:380px;
    margin:auto;

    }

    .hero-tagline{
        font-size:0.95rem !important;
        line-height:1.6 !important;
        margin-bottom:20px !important;
    }

    .hero h1{
           font-size:clamp(2.4rem, 9vw, 3rem) !important;
        line-height:1.05 !important;
        margin-bottom:20px !important;
        letter-spacing:-1px;
    }

    .hero p{
        font-size:1.05rem !important;
        line-height:1.8 !important;
        max-width:100% !important;
        margin-bottom:32px !important;
    }

    .cta-btn{
        width:100% !important;
        max-width:320px !important;

        padding:18px 24px !important;

        font-size:1.15rem !important;

        margin:0 auto !important;
    }

    .hero-graphic-block{
        display:none !important;
    }

}
/* =========================
   CONTACT MOBILE FIX
   ========================= */
@media (max-width:980px){

    .contact-section{
        display:flex !important;
        flex-direction:column !important;

        padding:40px 20px !important;
        gap:25px !important;

        min-height:auto !important;
    }

    .contact-center-container{
        width:100% !important;
        max-width:100% !important;

        align-items:center !important;
        text-align:center !important;
    }

    .contact-info-panel{
        width:100% !important;
        align-items:center !important;
        text-align:center !important;
    }

    .contact-info-panel h2{
        font-size:2rem !important;
        line-height:1.2 !important;
        max-width:100% !important;
    }

    .contact-subtitle{
        max-width:100% !important;
        font-size:1rem !important;
        padding:0 10px !important;
    }

    .lens-comms-box{
        width:100% !important;
        max-width:100% !important;

        padding:20px !important;
        margin-top:15px !important;
    }

    .comms-row{
        align-items:flex-start !important;
        text-align:left !important;
    }

    .comms-digits{
        font-size:1rem !important;
        word-break:break-word !important;
    }

    /* MAP FIX */
    .location-map-block{
        width:100% !important;
        max-width:100% !important;

        position:relative !important;
        right:auto !important;
        left:auto !important;
        top:auto !important;

        margin-top:25px !important;
    }

    .map-inner-card{
        width:100% !important;
        max-width:100% !important;
    }

    .map-header h3{
        font-size:1.6rem !important;
    }

    .map-inner-card iframe{
        width:100% !important;
        height:300px !important;
        border-radius:16px !important;
    }

}
/* =========================
   CAREER BANNER MOBILE FIX
   ========================= */
@media (max-width: 980px){

    .banner-container{
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;

        padding: 30px 20px !important;
        gap: 20px !important;

        margin: 25px 15px !important;
    }

    .banner-content{
        width: 100% !important;
    }

    .banner-content h2{
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .banner-content p{
        font-size: 1rem !important;
    }

    .cta-button{
        width: 100% !important;
        max-width: 320px !important;

        text-align: center !important;

        padding: 14px 16px !important;

        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;

        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

}
@media (max-width:980px){

    .hero{
        margin-top: 1px !important;

        background:
            radial-gradient(
                circle at top center,
                rgba(225,0,255,.15) 0%,
                rgba(0,140,255,.08) 30%,
                transparent 70%
            ),
            radial-gradient(
                circle at 80% 20%,
                rgba(122,18,100,.25) 0%,
                transparent 50%
            );
    }

}