/* --- RESET & VARIABLES --- */
        :root {
            --primary-dark: #09284A; 
            --primary-light: #163a63;
            --accent-orange: #f97316; 
            --accent-orange-hover: #ea580c;
            --accent-blue: #38bdf8; 
            --led-blue: #00f3ff; 
            --text-grey: #94a3b8;
            --text-dark: #334155;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --transition: all 0.3s ease;
            --font-heading: 'Roboto Condensed', sans-serif;
            --font-body: 'Nunito', 'Open Sans', sans-serif;
            --font-mono: 'Courier New', monospace;
            --font-tech: 'Teko', sans-serif; 
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-light);
            color: var(--primary-dark);
            font-family: var(--font-body);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* --- UTILITIES --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-padding {
            padding: 100px 0;
        }

        .text-center { text-align: center; }
        .text-orange { color: var(--accent-orange); }
        .text-white { color: var(--white); }
	
		
		
		
        h1, h2, h3, h4, h12, h2orange {
            font-family: var(--font-heading);
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
	
        
        h2 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary-dark);
        }


        p {
            margin-bottom: 1rem;
            color: var(--text-dark);
            font-size: 1.1rem;
        }

        /* --- BUTTONS --- */
        .btn {
            display: inline-block;
            padding: 14px 35px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
            transition: var(--transition);
            cursor: pointer;
            border: none;
            letter-spacing: 1px;
        }

        .btn-primary {
            background-color: var(--accent-orange);
            color: var(--white);
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
        }

        .btn-primary:hover {
            background-color: var(--accent-orange-hover);
            transform: translateY(-2px);
        }

        .btn-outline {
            border: 2px solid var(--accent-orange);
            color: var(--accent-orange);
            background: transparent;
        }

        .btn-outline:hover {
            background-color: var(--accent-orange);
            color: var(--white);
        }

        /* --- BACK TO TOP BUTTON --- */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 45px;
            height: 45px;
            background-color: rgba(203, 213, 225, 0.5); 
            color: #475569;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0; 
            visibility: hidden;
            transition: all 0.4s ease;
            z-index: 999;
            border: none;
            backdrop-filter: blur(4px);
        }

        .back-to-top.show {
            opacity: 0.6; 
            visibility: visible;
        }

        .back-to-top:hover {
            background-color: var(--accent-orange);
            color: white;
            opacity: 1; 
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(249, 115, 22, 0.3);
        }

        .btt-triangle {
            width: 0; 
            height: 0; 
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 10px solid currentColor;
        }

        /* --- ANIMATIONS --- */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .fade-in-left {
            opacity: 0;
            transform: translateX(-100px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        .fade-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* --- NAVIGATION --- */
        header {
            background-color: transparent;
            padding: 15px 0; 
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.4s ease;
            border-bottom: 1px solid transparent;
        }

        header.scrolled {
            background-color: rgba(9, 40, 74, 0.95);
            backdrop-filter: blur(10px);
            padding: 10px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            border-bottom: 2px solid var(--accent-orange);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo img {
            height: 55px; 
            width: auto;
            display: block;
            transition: height 0.3s ease;
        }
        
        header.scrolled .logo img {
            height: 45px;
        }

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

        .nav-links a {
            color: #cbd5e1; 
            text-decoration: none;
            font-weight: 600;
            font-size: 1.05rem;
            transition: var(--transition);
            text-transform: uppercase;
            font-family: var(--font-heading);
            letter-spacing: 0.5px;
        }

        header.scrolled .nav-links a {
            color: var(--white);
        }

        .nav-links a:hover {
            color: var(--accent-orange) !important; 
        }

        /* DROPDOWN MENU STYLES */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: rgba(12, 54, 99, 0.95);
            backdrop-filter: blur(10px);
            min-width: 180px;
            list-style: none;
            padding: 10px 0;
            border-radius: 4px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            border-top: 2px solid var(--accent-orange);
        }

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

        .dropdown-menu li {
            padding: 0;
        }

        .dropdown-menu li a {
            display: block;
            padding: 10px 20px;
            font-size: 0.9rem;
            white-space: nowrap;
            color: #cbd5e1;
        }

        .dropdown-menu li a:hover {
            background-color: rgba(255,255,255,0.05);
            color: var(--accent-orange);
        }

        .mobile-menu-btn { display: none; color: white; font-size: 1.5rem; cursor: pointer; }

        /* --- HERO SECTION --- */
        .hero {
            min-height: 100vh;
            background: radial-gradient(circle at center, #163a63 0%, #09284A 70%, #020617 100%);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 80px;
        }

        .hero .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        .hero-content { 
            flex: 1;
            max-width: 600px;
            padding-right: 30px;
        }

        .hero-visual {
            flex: 1;
            height: 550px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* --- ORBIT SYSTEM --- */
        .hero-orbit-sys {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 800px; height: 800px; pointer-events: none; z-index: 0;
        }
        
        .orbit-track {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            border-radius: 50%; border: 1px solid rgba(255,255,255,0.03);
        }
        .ot-inner { width: 380px; height: 380px; }
        .ot-outer { width: 580px; height: 580px; }

        .orbit-ring {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            border-radius: 50%; border: 2px solid transparent;
        }

        .or-blue {
            width: 380px; height: 380px;
            border-top-color: var(--accent-blue);
            border-right-color: rgba(56, 189, 248, 0.3);
            animation: orbit-spin 18s linear infinite;
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
        }

        .or-orange {
            width: 580px; height: 580px;
            border-bottom-color: var(--accent-orange);
            border-left-color: rgba(249, 115, 22, 0.3);
            animation: orbit-spin 30s linear infinite reverse;
            box-shadow: 0 0 20px rgba(249, 115, 22, 0.15);
        }

        @keyframes orbit-spin {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }


        /* --- 3D STACKED CARDS --- */
        .stack-container {
            position: relative;
            width: 320px;
            height: 420px;
            perspective: 1000px;
            z-index: 10;
        }

        .stack-card {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Stack States */
        .stack-card.pos-1 { /* Front */
            z-index: 3;
            transform: translateX(0) translateY(0) scale(1);
            opacity: 1;
            border-top: 1px solid rgba(255,255,255,0.4);
        }
        
        .stack-card.pos-2 { /* Middle */
            z-index: 2;
            transform: translateX(20px) translateY(-30px) scale(0.92);
            opacity: 0.6;
            filter: brightness(0.7);
        }

        .stack-card.pos-3 { /* Back */
            z-index: 1;
            transform: translateX(40px) translateY(-60px) scale(0.84);
            opacity: 0.3;
            filter: brightness(0.5);
        }

        /* Shared Card Header */
        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex; justify-content: space-between; align-items: center;
            background: rgba(0,0,0,0.2);
        }
        .ch-title { font-size: 0.8rem; font-weight: 700; color: #cbd5e1; letter-spacing: 1px; text-transform: uppercase; }
        .ch-badge { font-size: 0.65rem; padding: 3px 8px; border-radius: 4px; font-weight: bold; background: rgba(255,255,255,0.1); color: white; }

        /* --- CARD 1: TACTICAL BOARD --- */
        .tactical-body {
            flex: 1; position: relative;
            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: 20px 20px;
            overflow: hidden;
        }
        .court-half {
            position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px;
            border: 2px solid rgba(255,255,255,0.2); border-bottom: none;
        }
        .court-key {
            position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 100px; height: 140px; border: 2px solid rgba(255,255,255,0.2); border-top: none;
        }
        .court-3pt {
            position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 240px; height: 180px; border: 2px solid rgba(255,255,255,0.2); border-top: none;
            border-radius: 0 0 120px 120px;
        }
        .court-hoop {
            position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
            width: 12px; height: 12px; border: 2px solid var(--accent-orange); border-radius: 50%;
        }
        .player-dot {
            position: absolute; width: 20px; height: 20px;
            background: var(--primary-light); border: 2px solid var(--accent-blue);
            border-radius: 50%; color: white; font-size: 9px; font-weight: bold;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
            z-index: 2;
            transition: all 0.3s;
        }
        .pd-1 { top: 220px; left: 50%; transform: translateX(-50%); } 
        .pd-2 { top: 180px; left: 15%; } 
        .pd-4 { top: 100px; left: 30%; } 
        .pd-5 { top: 100px; right: 30%; } 
        .pd-3 { 
            top: 180px; right: 15%; 
            animation: player-cut 3s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
            border-color: var(--accent-orange);
            background: var(--accent-orange);
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
        }
        .arrow-container {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        .cut-arrow-path {
            fill: none;
            stroke: var(--accent-orange);
            stroke-width: 3;
            stroke-dasharray: 6, 6; /* Medium dotted curve */
            opacity: 0.8;
            animation: arrow-draw 3s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        .arrow-head {
            fill: var(--accent-orange);
            animation: arrow-head-move 3s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        @keyframes player-cut {
            0% { top: 180px; right: 15%; } 
            20% { top: 180px; right: 15%; } 
            60% { top: 60px; right: 45%; } 
            80% { top: 60px; right: 45%; opacity: 1; }
            90% { opacity: 0; }
            100% { top: 180px; right: 15%; opacity: 0; } 
        }
        @keyframes arrow-draw {
            0% { stroke-dashoffset: 200; opacity: 0; }
            20% { opacity: 1; }
            60% { stroke-dashoffset: 0; opacity: 1; } 
            80% { opacity: 0; }
            100% { opacity: 0; }
        }
        @keyframes arrow-head-move {
            0% { transform: translate(230px, 180px) rotate(-135deg); opacity: 0; } 
            20% { transform: translate(230px, 180px) rotate(-135deg); opacity: 1; }
            60% { transform: translate(165px, 65px) rotate(-135deg); opacity: 1; } 
            80% { opacity: 0; }
            100% { opacity: 0; }
        }

        /* --- CARD 2: PIPM RADAR --- */
        .pipm-body {
            flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 20px; position: relative;
        }
        .radar-container {
            width: 200px; height: 200px; position: relative;
        }
        .radar-svg { width: 100%; height: 100%; overflow: visible; }
        .radar-grid {
            fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 1;
        }
        .radar-shape {
            fill: rgba(249, 115, 22, 0.3);
            stroke: var(--accent-orange);
            stroke-width: 3;
            animation: radar-pulse-intense 3s ease-in-out infinite;
            transform-origin: center;
        }
        @keyframes radar-pulse-intense {
            0%, 100% { 
                transform: scale(1); 
                opacity: 0.7; 
                filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.4));
            }
            50% { 
                transform: scale(1.15); 
                opacity: 1; 
                filter: drop-shadow(0 0 20px rgba(249, 115, 22, 1));
            }
        }
        .radar-label {
            font-size: 0.6rem; fill: #94a3b8; font-family: var(--font-heading); font-weight: bold;
        }
        .pipm-score-display {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center;
        }
        .pipm-val { font-size: 1.8rem; font-weight: bold; color: white; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
        .pipm-sub { font-size: 0.7rem; color: var(--accent-blue); font-weight: bold; text-transform: uppercase; }


        /* --- CARD 3: TEAM DASHBOARD --- */
        .stats-body { flex: 1; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        
        .chart-container {
            position: relative;
            width: 160px;
            height: 160px;
            margin-bottom: 20px;
        }

        .donut-chart-svg {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
        }

        .donut-bg {
            fill: none;
            stroke: #1e293b;
            stroke-width: 20;
        }

        /* Base styles for segments */
        .donut-segment-team {
            fill: none;
            stroke: var(--accent-orange);
            stroke-width: 20;
            stroke-dasharray: 440; 
            stroke-dashoffset: 440; /* Start empty */
            opacity: 0; /* Hidden by default */
        }

        .donut-segment-avg {
            fill: none;
            stroke: var(--accent-blue);
            stroke-width: 10;
            stroke-dasharray: 280;
            stroke-dashoffset: 280; /* Start empty */
            opacity: 0; /* Hidden by default */
        }

        /* ANIMATION TRIGGERS: Only when card is in pos-1 (Front) */
        
        .stack-card.pos-1 .donut-segment-team {
            animation: fill-chart-orange 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .stack-card.pos-1 .donut-segment-avg {
            animation: fill-chart-blue 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            animation-delay: 0.3s;
        }

        /* Reset animation when card is not in front */
        .stack-card:not(.pos-1) .donut-segment-team,
        .stack-card:not(.pos-1) .donut-segment-avg {
            animation: none;
            stroke-dashoffset: 440;
            opacity: 0;
        }

        @keyframes fill-chart-orange {
            0% { stroke-dashoffset: 440; opacity: 0; filter: drop-shadow(0 0 0 transparent); }
            10% { opacity: 1; }
            100% { stroke-dashoffset: 154; opacity: 1; filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6)); } /* 65% filled */
        }

        @keyframes fill-chart-blue {
            0% { stroke-dashoffset: 280; opacity: 0; }
            10% { opacity: 0.6; }
            100% { stroke-dashoffset: 140; opacity: 0.6; filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.4)); } /* 50% filled */
        }

        .chart-center-text {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; color: white; font-weight: bold; font-size: 0.8rem; line-height: 1.1;
        }

        .pie-legend { width: 100%; display: flex; justify-content: space-around; font-size: 0.75rem; color: #cbd5e1; }
        .legend-item { display: flex; align-items: center; gap: 5px; }
        .dot-lg { width: 8px; height: 8px; border-radius: 50%; }
        .dot-orange { background: var(--accent-orange); }
        .dot-blue { background: var(--accent-blue); }


        .hero h1 { font-size: 3.5rem; color: var(--white); margin-bottom: 20px; line-height: 1.2; }
		.hero h12 { font-size: 3.5rem; color: #f97316; margin-bottom: 20px; line-height: 1.2; }
        .hero p { color: #cbd5e1; font-size: 1.3rem; margin-bottom: 15px; }
	
        /* --- WHAT WE DO --- */
        .what-we-do { background-color: var(--white); }
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        .card {
            padding: 40px;
            border-radius: 8px;
            background: var(--bg-light);
            transition: var(--transition);
            border-bottom: 4px solid transparent;
        }
        .card:hover {
            transform: translateY(-10px);
            border-bottom-color: var(--accent-orange);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            background: white;
        }
        .icon-box {
            width: 70px; height: 70px;
            background-color: rgba(9, 40, 74, 0.05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }
        /* Icon color change only on hover */
        .icon-box svg { 
            width: 35px; 
            height: 35px; 
            fill: var(--primary-dark); 
            transition: fill 0.3s ease;
        }
        
        .card:hover .icon-box svg {
            fill: var(--accent-orange);
        }

        /* --- HOW WE ARE DIFFERENT --- */
        .different { 
            background-color: var(--primary-dark); 
            color: var(--white); 
            position: relative;
            background-image: 
                linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05)), 
                linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05));
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
        }
        .split-layout { display: flex; align-items: center; gap: 60px; position: relative; z-index: 2; }
        .split-text { flex: 1; }
        .split-visual { 
            flex: 1; height: 450px;
            background: radial-gradient(circle at center, #1e293b, #020617);
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Process Visualization */
        .process-visual { width: 100%; height: 100%; position: relative; }
        .pv-chaos-group { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); width: 80px; height: 200px; }
        .pv-dot { 
            position: absolute; width: 6px; height: 6px; background: #64748b; border-radius: 50%; 
            animation: chaos-float 3s infinite ease-in-out; 
        }
        @keyframes chaos-float { 0%,100% { transform: translate(0,0); opacity: 0.5; } 50% { transform: translate(10px, 10px); opacity: 1; } }
        .pv-processor { 
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
            width: 120px; height: 120px; 
            background: radial-gradient(circle, #1e293b, #0f172a);
            border: 2px solid var(--accent-orange); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 30px rgba(249, 115, 22, 0.2);
            z-index: 5;
        }
        .pv-gear { 
            width: 80px; height: 80px; border: 4px dashed rgba(255,255,255,0.2); border-radius: 50%; 
            animation: gear-spin 10s linear infinite; 
        }
        @keyframes gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .pv-line-in { position: absolute; top: 50%; left: 25%; width: 25%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-orange)); opacity: 0.5; }
        .pv-line-out { position: absolute; top: 50%; right: 25%; width: 25%; height: 2px; background: linear-gradient(90deg, var(--accent-orange), transparent); opacity: 0.5; }
        .pv-output-group { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); width: 100px; height: 180px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
        .pv-widget { height: 40px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; position: relative; overflow: hidden; }
        .pv-widget::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--accent-blue); opacity: 0.3; animation: widget-fill 4s infinite; }
        @keyframes widget-fill { 0% { width: 0%; } 50% { width: 80%; } 100% { width: 80%; } }

        .different h2 { color: var(--white); }
        .different p { color: #94a3b8; }

        /* --- OUR SERVICES (Updated Height & Content) --- */
        .services-section {
            background-color: var(--white); 
            position: relative;
            overflow: hidden;
            padding: 100px 0;
        }

        .services-section h2 { color: var(--primary-dark); }
        .services-section p { color: var(--text-dark); }

        .h-scroll-wrap {
            width: 100%;
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 24px;
            padding: 20px 5px 20px 5px;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .h-scroll-wrap::-webkit-scrollbar { display: none; }

        /* Service Card */
        .svc-card {
            flex: 0 0 300px;
            scroll-snap-align: start;
            background: linear-gradient(135deg, #09284A 0%, #163a63 100%);
            border: 2px solid var(--accent-orange);
            border-radius: 12px;
            padding: 25px;
            display: flex;
            flex-direction: column;
            transition: all 0.4s ease;
            position: relative;
            cursor: pointer;
            color: white; 
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
        }

        .svc-card:hover {
            transform: translateY(-8px);
            background: linear-gradient(135deg, #7c2d12 0%, #fb923c 100%);
            border: 2px solid var(--primary-dark);
            box-shadow: 0 20px 40px rgba(249, 115, 22, 0.25);
        }

        .svc-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .svc-icon-box {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1); 
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .svc-card:hover .svc-icon-box {
            background: rgba(0,0,0,0.3);
            color: white;
            border-color: rgba(255,255,255,0.3);
        }

        .svc-icon-box svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .svc-status {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--accent-blue); 
            background: rgba(56, 189, 248, 0.1); 
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid rgba(56, 189, 248, 0.2);
            letter-spacing: 0.5px;
            transition: 0.3s;
        }
        
        .svc-card:hover .svc-status {
            color: #fed7aa; 
            border-color: #fed7aa;
            background: rgba(0,0,0,0.3);
        }

        .svc-card h3 {
            font-size: 1.2rem;
            margin: 0 0 10px 0;
            color: white; 
            transition: 0.3s;
        }
        
        .svc-card:hover h3 { color: white; }

        .svc-card p {
            color: #cbd5e1; 
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 25px;
            flex-grow: 1; 
            transition: 0.3s;
        }
        
        .svc-card:hover p { color: #ffedd5; }

        .svc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            border-top: 1px dashed rgba(255, 255, 255, 0.2);
            padding-top: 15px;
            transition: 0.3s;
        }
        
        .svc-card:hover .svc-tags { border-top-color: rgba(255,255,255,0.3); }

        .tag {
            font-family: var(--font-mono);
            font-size: 0.65rem;
            font-weight: 700;
            color: #cbd5e1;
            background: rgba(0, 0, 0, 0.3);
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: 0.3s;
        }
        
        .svc-card:hover .tag {
            background: rgba(0, 0, 0, 0.2);
            color: white;
            border-color: rgba(255,255,255,0.4);
        }

        .scroll-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.8rem;
            color: var(--accent-orange);
            font-weight: 600;
            margin-bottom: 15px;
            opacity: 0.8;
        }

        .svc-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* UPDATED: Square with rounded corners, Triangle Icon */
        .svc-arrow {
            background: #e2e8f0; /* Light Grey */
            border: none;
            color: #64748b;
            width: 40px;
            height: 40px;
            border-radius: 8px; /* Rounded Square */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .svc-arrow:hover {
            background: var(--accent-orange);
            color: white;
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
        }

        .triangle-left {
            width: 0; height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid currentColor;
        }

        .triangle-right {
            width: 0; height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 10px solid currentColor;
        }

        /* --- FEATURES (Slider) --- */
        .features { 
            background-color: var(--white); 
            padding: 60px 0; 
        }
        .slider-container { 
            position: relative; 
            max-width: 1000px; 
            margin: 0 auto; 
            height: 380px; 
        }
        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0; transition: opacity 0.6s ease-in-out;
            display: flex; border-radius: 12px; overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            background: white;
            visibility: hidden; 
            border: 1.5px solid rgba(249, 115, 22, 0.6);
        }
        .slide.active { opacity: 1; z-index: 10; visibility: visible; }
        .slide-image { flex: 1; background: var(--primary-dark); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        .slide-content { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
        
        /* Generated Feature Images (CSS Graphics) */
        .feature-graphic { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
        
        /* Slide 1: Advanced Analytics (Court + Histogram) */
        .feat-img-analytics { background: #1e293b; }
        
        /* Slide 2: Talent Insights (Profile Card) */
        .feat-img-talent { background: #0f172a; }
        .ti-card { width: 160px; height: 200px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; display: flex; flex-direction: column; align-items: center; padding: 20px; }
        .ti-avatar { width: 60px; height: 60px; background: #cbd5e1; border-radius: 50%; margin-bottom: 15px; position: relative; }
        .ti-star { position: absolute; top: -5px; right: -5px; color: var(--accent-orange); font-size: 20px; }
        .ti-bar { width: 100%; height: 6px; background: #334155; border-radius: 3px; margin-top: 10px; overflow: hidden; }
        .ti-fill { height: 100%; background: #22c55e; width: 85%; }

        /* Slide 3: Tactical Analysis (Play Board) */
        .feat-img-tactics { background: #163a63; }
        .ta-board { width: 220px; height: 160px; border: 2px solid rgba(255,255,255,0.3); position: relative; border-radius: 4px; }
        .ta-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(249, 115, 22, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0,0,0,0.3); z-index: 2; }
        .ta-play-btn::after { content: ''; border-left: 15px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
        .ta-x { position: absolute; color: #cbd5e1; font-family: sans-serif; font-weight: bold; }
        .ta-o { position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent-blue); border-radius: 50%; }

        /* Slide 4: Psychology (Head + Basketball Brain) */
        .feat-img-psych { background: #020617; }

        /* Slide 5: Dashboards (UI + Heatmap) */
        .feat-img-dash { background: #1e293b; }

        /* Dots Control */
        .slider-controls { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
        .dot { width: 14px; height: 14px; background-color: #cbd5e1; border-radius: 50%; cursor: pointer; transition: var(--transition); }
        .dot.active { background-color: var(--accent-orange); transform: scale(1.2); }

        /* --- NEW TEAM SECTION (Modern Split) --- */
        .team-modern-section {
            background-color: var(--bg-light);
            padding: 100px 0;
            overflow: hidden;
        }

        .team-modern-layout {
            display: flex;
            align-items: center;
            gap: 80px;
        }

        .tm-visual {
            flex: 1;
            display: flex;
            justify-content: center;
            perspective: 1500px; /* Container perspective */
        }

        .tm-card {
            background: white;
            width: 100%;
            max-width: 450px;
            aspect-ratio: 1.2 / 1;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.05);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--accent-orange);
            /* FLIPPED PERSPECTIVE */
            transform: rotateY(-12deg) rotateX(5deg); 
            transition: transform 0.5s ease, box-shadow 0.5s ease;
        }
        
        .tm-card:hover {
            transform: rotateY(0deg) rotateX(0deg);
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }

        /* Diagram Logic */
        .tm-diagram {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 30px;
            background: #0f172a; /* Dark Enterprise Background */
        }

        .tm-content {
            flex: 1;
        }

        .tm-content h2 {
            font-size: 3rem;
            line-height: 1.1;
            margin-bottom: 25px;
            color: var(--primary-dark);
        }

        .tm-content p {
            color: #475569;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .tm-stats {
            display: flex;
            gap: 60px;
            margin: 40px 0;
            border-top: 1px solid #e2e8f0;
            padding-top: 30px;
        }

        .tm-stat-item {
            display: flex;
            align-items: center; 
            gap: 15px;
        }

        .tm-stat-graphic {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .tm-stat-label {
            font-size: 1rem;
            color: #0f172a;
            font-family: var(--font-heading);
            font-weight: 700;
            line-height: 1.2;
            max-width: 100px;
        }

        .tm-stat-number-wrapper {
            font-size: 2.2rem; 
            font-weight: 700;
            color: #0f172a;
            font-family: var(--font-heading);
            display: flex;
            align-items: baseline;
        }
        
        .tm-stat-symbol {
            font-size: 1.5rem;
            color: var(--accent-orange);
            margin-left: 2px;
        }

        .pie-stat-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .circular-chart {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 100%;
        }
        .circle-bg {
            fill: none;
            stroke: #eee;
            stroke-width: 3.8;
        }
        .circle {
            fill: none;
            stroke-width: 3.8;
            stroke-linecap: round;
            stroke: var(--accent-orange);
            stroke-dasharray: 100, 100;
            stroke-dashoffset: 100; 
            transition: stroke-dashoffset 2s ease-out;
        }
        .percentage {
            fill: #0f172a;
            font-family: var(--font-heading);
            font-weight: bold;
            font-size: 0.5em;
            text-anchor: middle;
        }
        .animate-pie .circle {
            stroke-dashoffset: 0; 
        }

        .tm-btn {
            background-color: var(--primary-dark); 
            color: white;
            border-radius: 4px; 
            padding: 14px 35px; 
            font-size: 1rem; 
            box-shadow: 0 4px 15px rgba(9, 40, 74, 0.3);
            transition: all 0.3s ease;
            letter-spacing: 1px;
            align-self: flex-start;
        }
        
        .tm-btn:hover {
            background-color: var(--accent-orange); 
            transform: translateY(-2px);
            color: white;
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
        }

        /* --- CERTIFICATIONS RIBBON --- */
        .cert-ribbon-wrapper {
            width: 100%;
            max-width: 800px; 
            margin-top: 30px;
            position: relative;
            overflow: hidden;
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
            padding: 15px 0;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 8px;
        }

        .cert-ribbon-wrapper::before,
        .cert-ribbon-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            width: 80px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .cert-ribbon-wrapper::before {
            left: 0;
            background: linear-gradient(to right, var(--bg-light), transparent);
        }

        .cert-ribbon-wrapper::after {
            right: 0;
            background: linear-gradient(to left, var(--bg-light), transparent);
        }

        .cert-track {
            display: flex;
            width: max-content;
            gap: 40px;
            animation: scroll-left-slow 25s linear infinite; /* Slow pace */
        }

        .cert-item {
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
            color: var(--text-dark);
            font-size: 0.9rem;
            font-weight: 700;
            font-family: var(--font-heading);
            text-transform: uppercase;
        }

        .cert-item svg {
            width: 24px;
            height: 24px;
            fill: var(--accent-blue);
        }

        @keyframes scroll-left-slow {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* --- PRICING --- */
        .pricing { background-color: var(--white); }
        .scoreboard-card {
            background-color: #111827; background-image: radial-gradient(#1e293b 1px, transparent 1px); background-size: 4px 4px;
            border: 4px solid #334155; border-radius: 8px; padding: 30px 20px; text-align: center; position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: var(--transition); overflow: hidden; display: flex; flex-direction: column;
            height: 100%; 
        }
        .scoreboard-card:hover { transform: translateY(-10px); border-color: var(--accent-orange); box-shadow: 0 0 25px rgba(249, 115, 22, 0.3); }
        .scoreboard-card::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 30%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent); pointer-events: none;
        }
        .sb-header {
            font-family: var(--font-tech); 
            color: #94a3b8; font-size: 2rem; 
            text-transform: uppercase;
            letter-spacing: 3px; 
            margin-bottom: 15px; border-bottom: 2px solid #334155; padding-bottom: 10px; font-weight: 500;
            display: flex; align-items: center; justify-content: center;
        }
        
        .plan-ball {
            display: inline-block; width: 20px; height: 20px; border-radius: 50%; margin-right: 10px;
            background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent);
            box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
            border: 1px solid rgba(0,0,0,0.2);
        }
        .pb-bronze { background-color: #cd7f32; }
        .pb-silver { background-color: #c0c0c0; }
        .pb-gold { background-color: #ffd700; }

        .sb-score-area {
            background: #0f172a; border: 2px solid #1e293b; padding: 20px 0; margin-bottom: 25px; border-radius: 4px;
            font-family: var(--font-tech); 
            color: var(--accent-orange); text-shadow: 0 0 8px rgba(249, 115, 22, 0.6); position: relative;
        }
        .sb-score { font-size: 2rem; font-weight: 600; line-height: 1; display: inline-block; text-transform: uppercase; letter-spacing: 1.5px; }
        .sb-period { font-size: 1.2rem; color: #64748b; text-shadow: none; font-family: var(--font-tech); text-transform: uppercase; margin-top: 5px; letter-spacing: 2px; }
        .sb-stats { text-align: left; margin-bottom: 25px; flex-grow: 1; }
        .sb-stats ul { list-style: none; padding: 0 10px; }
        .sb-stats li { 
            border-bottom: 1px dashed #334155; padding: 10px 0; color: #cbd5e1; 
            font-family: var(--font-tech); 
            font-size: 1.2rem; 
            font-weight: 400;
            letter-spacing: 1.5px; 
            display: flex; align-items: center; gap: 10px; 
        }
        .sb-stats li:last-child { border-bottom: none; }
        
        .sb-stats li::before { content: '●'; color: var(--accent-orange); font-size: 0.8rem; text-shadow: 0 0 5px var(--accent-orange); }
        .sb-stats li.led-blue::before { content: '●'; color: var(--led-blue); text-shadow: 0 0 8px var(--led-blue); }

        /* --- FAQ SECTION --- */
        .faq-section { 
            background-color: #f1f5f9; 
            position: relative;
            padding: 60px 0; 
        }
        
        .faq-layout { 
            display: grid; 
            grid-template-columns: 1fr 1.5fr; 
            gap: 40px; 
            align-items: start; 
        }
        
        .faq-header-side { 
            position: sticky; 
            top: 100px; 
        }
        
        .faq-header-side h2 { 
            font-size: 3rem; 
            color: #09284A; 
            line-height: 1.1; 
        }
        .faq-header-side h2orange { 
            font-size: 3rem; 
            color: #f97316; 
            line-height: 1.1; 
        }
        .faq-header-side p { 
            color: #16417C; 
            margin-top: 20px; 
            font-size: 1.15rem; 
            max-width: 400px;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .faq-item {
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 12px;
            padding: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        }

        .faq-item:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); 
        }
        
        .faq-item.active {
            border: 1px solid var(--accent-orange);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
        }

        .faq-top { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
        }
        
        .faq-q-wrap { 
            display: flex; 
            align-items: center; 
            gap: 20px; 
        }
        
        .faq-num {
            font-family: var(--font-heading);
            font-size: 2rem;
            font-weight: 700;
            color: #cbd5e1; 
            transition: all 0.3s ease;
            line-height: 1;
            position: relative;
            padding: 5px;
        }

        .faq-item:not(.active):hover .faq-num {
            color: var(--accent-orange);
        }
        
        .faq-item:not(.active):hover .faq-num::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 60%; height: 60%;
            border-left: 2px solid var(--accent-orange);
            border-bottom: 2px solid var(--accent-orange);
            pointer-events: none;
        }
        
        .faq-item.active .faq-num {
            color: var(--accent-orange); 
            opacity: 1;
        }

        .faq-question { 
            font-size: 1.2rem; 
            font-weight: 700; 
            color: #0f172a; 
            margin: 0; 
        }

        .faq-icon {
            font-size: 1.5rem; 
            color: #cbd5e1; 
            transition: transform 0.3s ease, color 0.3s ease;
            font-weight: 300;
        }
        
        .faq-item.active .faq-icon { 
            transform: rotate(45deg); 
            color: var(--accent-orange); 
        }

        .faq-answer-box {
            max-height: 0; 
            overflow: hidden; 
            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        }
        
        .faq-item.active .faq-answer-box { 
            max-height: 200px; 
            transition: max-height 0.5s ease-in-out; 
        }
        
        .faq-ans-inner { 
            padding-top: 20px; 
            color: #16417C; 
            line-height: 1.6; 
            padding-left: 50px; 
        }

        /* --- CONTACT FORM --- */
        .contact-section {
            background-color: #0f172a;
            color: white;
            padding: 80px 0;
            position: relative;
        }
        .contact-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            background: #1e293b;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.05);
        }
        .contact-info {
            flex: 1;
            min-width: 300px;
            background: linear-gradient(135deg, var(--primary-dark) 0%, #1e293b 100%);
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .contact-info h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: white;
        }
        .contact-info p {
            color: #94a3b8;
            margin-bottom: 40px;
        }
        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }
        .info-icon {
            width: 40px;
            height: 40px;
            background: rgba(249, 115, 22, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: var(--accent-orange);
            flex-shrink: 0;
        }
        .info-text h4 {
            font-size: 1rem;
            margin-bottom: 5px;
            color: white;
        }
        .info-text span {
            font-size: 0.9rem;
            color: #94a3b8;
        }
        .contact-form-wrapper {
            flex: 1.5;
            min-width: 350px;
            padding: 50px;
            background: #1e293b;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.85rem;
            font-weight: 700;
            color: #cbd5e1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 6px;
            color: white;
            font-family: var(--font-body);
            transition: var(--transition);
        }
        .form-control:focus {
            outline: none;
            border-color: var(--accent-orange);
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
        }
        .submit-btn {
            width: 100%;
            padding: 15px;
            background: var(--accent-orange);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition);
            letter-spacing: 1px;
        }
        .submit-btn:hover {
            background: var(--accent-orange-hover);
            transform: translateY(-2px);
        }

        /* --- NEWSLETTER PRE-FOOTER --- */
        .newsletter-section {
            background-color: var(--accent-orange); 
            padding: 40px 0; 
            position: relative;
            overflow: hidden;
            color: white;
        }

        .newsletter-bg-pattern {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05)), 
                linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05));
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
            opacity: 0.4;
            pointer-events: none;
        }

        .nl-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 2;
        }

        .nl-text {
            flex: 1;
            padding-right: 40px;
        }

        .nl-text h3 {
            font-size: 1.8rem;
            margin-bottom: 5px;
            text-transform: uppercase;
            font-family: var(--font-heading);
            color: var(--primary-dark); 
        }

        .nl-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1rem;
            margin: 0;
        }

        .nl-form {
            flex: 1;
            display: flex;
            gap: 10px;
            max-width: 500px;
        }

        .nl-input {
            flex: 1;
            padding: 12px 20px;
            border-radius: 4px;
            border: none;
            outline: none;
            font-family: var(--font-body);
            color: var(--primary-dark);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .nl-btn {
            padding: 12px 30px;
            background-color: var(--primary-dark);
            color: white;
            font-weight: 700;
            text-transform: uppercase;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            letter-spacing: 1px;
        }

        .nl-btn:hover {
            background-color: #020617;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        @media (max-width: 768px) {
            .nl-container {
                flex-direction: column;
                text-align: center;
            }
            .nl-text {
                padding-right: 0;
                margin-bottom: 25px;
            }
            .nl-form {
                width: 100%;
                flex-direction: column;
            }
            .nl-btn {
                width: 100%;
            }
        }

        /* --- FOOTER --- */
        .main-footer {
            background-color: #09284A;
            color: #94a3b8;
            padding: 80px 0 30px;
            border-top: 1px solid #1e293b;
            font-size: 0.95rem;
        }
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
        }
        .footer-brand h4 {
            color: #f97316;
            font-size: 1.5rem;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }
		     .footer-brand h5 {
            color: #f97316;
        
        }
        .footer-brand p {
            color: #87BFD9;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }
        .footer-col h5 {
            color: white;
            font-size: 1rem;
            margin-bottom: 25px;
            font-weight: 700;
            text-transform: uppercase;
        }
        .footer-links {
            list-style: none;
        }
        .footer-links li {
            margin-bottom: 12px;
        }
        .footer-links a {
            color: #94a3b8;
            text-decoration: none;
            transition: var(--transition);
        }
        .footer-links a:hover {
            color: var(--accent-orange);
            padding-left: 5px;
        }
        .social-links {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }
        .social-btn:hover {
            background: var(--accent-orange);
            transform: translateY(-3px);
        }
        .footer-bottom {
            max-width: 1200px;
            margin: 60px auto 0;
            padding: 30px 20px 0;
            border-top: 1px solid #1e293b;
            text-align: center;
            font-size: 0.85rem;
            color: #475569;
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 992px) {
            .hero .container { flex-direction: column; text-align: center; justify-content: center; }
            .hero-content { padding-right: 0; margin-bottom: 50px; }
            .hero-visual { width: 100%; height: 450px; }
            .stack-container { transform: scale(0.9); }
            .hero-orbit-sys { width: 600px; height: 600px; }
            .ot-inner, .or-blue { width: 280px; height: 280px; }
            .ot-outer, .or-orange { width: 480px; height: 480px; }
            .contact-container { flex-direction: column; }
            .team-modern-layout { flex-direction: column; gap: 40px; }
            .tm-visual { width: 100%; }
            .tm-content { width: 100%; text-align: center; }
            .tm-stats { justify-content: center; }
            .cert-ribbon-wrapper { width: 100%; }
            
            /* Reset card size on smaller screens */
            .tm-card { max-width: 450px; }
        }

        @media (max-width: 768px) {
            .mobile-menu-btn { display: block; }
            .nav-links {
                display: none; position: absolute; top: 100%; left: 0; width: 100%;
                background: var(--primary-dark); flex-direction: column; padding: 30px;
                text-align: center; border-top: 1px solid rgba(255,255,255,0.1);
            }
            .nav-links.active { display: flex; }
            .hero h1 { font-size: 2.5rem; }
			.hero h12 { font-size: 2.5rem; }
            .split-layout { flex-direction: column; }
            .split-visual { width: 100%; height: 300px; }
            .slide { flex-direction: column; }
            .slide-image { height: 200px; }
            .slider-arrow { transform: rotate(90deg); margin: 10px 0; }
            .stack-container { transform: scale(0.8); }
            .hero-orbit-sys { width: 400px; height: 400px; }
            .ot-inner, .or-blue { width: 200px; height: 200px; }
            .ot-outer, .or-orange { width: 350px; height: 350px; }
            .faq-layout { grid-template-columns: 1fr; }
            .faq-header-side { position: static; margin-bottom: 40px; text-align: center; }
            .faq-header-side p { margin: 20px auto; }
            .faq-ans-inner { padding-left: 0; }
        }
		
/* --- COOKIE BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: -100%; /* Hidden off-screen by default */
    left: 0;
    width: 100%;
    background-color: #1e293b;
    border-top: 1px solid #334155;
    color: #f8fafc;
    padding: 1rem 5%;
    z-index: 10000;
    display: flex;
    justify-content: space-between; /* Spreads text and buttons apart */
    align-items: center;
    gap: 2rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-banner.show {
    bottom: 0;
}

.cookie-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #cbd5e1;
}

.cookie-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0; /* Prevents buttons from squishing */
}

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .cookie-actions {
        width: 100%;
        justify-content: center;
    }
}