/* CSS Variables */
        :root {
            --bg-primary: #0F1423; /* Deep desaturated periwinkle-navy */
            --bg-secondary: #141B2E; /* Slightly lighter periwinkle-navy layer */
            --bg-card: #1B233D; /* Slate-periwinkle card base */
            --navy-accent: #A2D2FF; /* Sky blue matching the shirt */
            --gold-primary: #FF8A5B; /* Sunset peach matching the ambient light */
            --gold-soft: #FFA580; /* Soft warm peach */
            --gold-glow: rgba(255, 138, 91, 0.18);
            --text-white: #F8FAFC;
            --text-muted: #A1B0C5; /* Desaturated blue-grey text */
            --border-color: rgba(255, 138, 91, 0.12);
            
            --font-display: 'Outfit', sans-serif;
            --font-body: 'Inter', sans-serif;
            --font-mono: 'Space Mono', monospace;
        }

        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none; /* For custom cursor */
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
            width: 100%;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-white);
            font-family: var(--font-body);
            overflow-x: hidden;
            width: 100%;
            position: relative;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 2px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--gold-primary);
        }

        /* Global Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            font-weight: 500;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        /* Noise Texture */
        .noise-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* Custom Cursor */
        .cursor-dot, .cursor-ring {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
        }

        .cursor-dot {
            width: 6px;
            height: 6px;
            background-color: var(--gold-primary);
        }

        .cursor-ring {
            width: 24px;
            height: 24px;
            border: 1px solid var(--gold-primary);
            transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
        }

        .cursor-ring.active {
            width: 40px;
            height: 40px;
            background-color: rgba(255,215,0,0.1);
        }

        /* Scroll Progress Indicator (Top Bar) */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--gold-primary), var(--gold-soft), #FFE082);
            transform-origin: left;
            transform: scaleX(0);
            z-index: 99999;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        /* Scroll Animations — Initial state set by GSAP, no CSS transition needed */
        .animate-on-scroll {
            will-change: transform, opacity;
        }

        /* Stagger delays — used as hints by GSAP */
        .stagger-1 { }
        .stagger-2 { }
        .stagger-3 { }
        .stagger-4 { }

        /* 3D Perspective support for cards */
        .service-cards, .pricing-grid, .process-steps, .test-grid {
            perspective: 1400px;
        }

        /* Text reveal mask helpers */
        .line-reveal-wrap {
            display: block;
            overflow: hidden;
            padding-bottom: 6px;
        }
        .line-reveal-inner {
            display: block;
            transform: translateY(110%);
            will-change: transform;
        }
        .word-mask {
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
            padding-bottom: 4px;
        }
        .word-inner {
            display: inline-block;
            transform: translateY(110%);
            will-change: transform;
        }
        .char-mask {
            display: inline-block;
            overflow: hidden;
        }
        .char-inner {
            display: inline-block;
            transform: translateY(110%);
            opacity: 0;
            will-change: transform, opacity;
        }

        /* Section initial states — hidden by default, revealed by GSAP */
        .section-label {
            opacity: 0;
        }
        .section-title {
            overflow: hidden;
        }


        /* Prevent Flash of Unstyled/Unanimated Content before loader finishes */
        body.loading .navbar,
        body.loading section,
        body.loading footer,
        body.loading .glow-blob,
        body.loading .cursor-dot,
        body.loading .cursor-ring,
        body.loading .scroll-progress {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* LOADING SCREEN */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--bg-primary);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            will-change: opacity;
        }

        .loader-logo {
            width: 150px;
            height: auto;
            opacity: 0;
            animation: fadeIn 1s ease forwards;
            margin-bottom: 20px;
        }

        .loader-sub {
            font-family: var(--font-body);
            font-size: 10px;
            color: var(--gold-primary);
            letter-spacing: 0.3em;
            margin-top: 15px;
            opacity: 0;
            animation: fadeIn 1s ease 1.5s forwards;
        }

        .loader-progress-container {
            width: 200px;
            height: 1px;
            background-color: var(--border-color);
            margin-top: 30px;
            overflow: hidden;
            opacity: 0;
            animation: fadeIn 1s ease 0.5s forwards;
        }

        .loader-progress {
            width: 0%;
            height: 100%;
            background-color: var(--gold-primary);
            animation: progressFill 2.5s ease forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        @keyframes progressFill {
            to { width: 100%; }
        }

        /* SECTION 1 - NAVBAR */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(8,12,20,0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,215,0,0.08);
            z-index: 9990;
        }

        .nav-brand img {
            height: 60px;
            width: auto;
            object-fit: contain;
        }

        .nav-links {
            display: flex;
            gap: 40px;
        }

        .nav-links a {
            font-size: 13px;
            color: var(--text-muted);
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--gold-primary);
        }

        .nav-cta {
            border: 1px solid var(--gold-primary);
            border-radius: 50px;
            padding: 10px 24px;
            font-size: 12px;
            color: var(--gold-primary);
            transition: all 0.3s;
        }

        .nav-cta:hover {
            background-color: var(--gold-primary);
            color: var(--bg-primary);
        }

        .mobile-menu-btn {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
        }

        .mobile-menu-btn span {
            width: 30px;
            height: 2px;
            background-color: var(--text-white);
            transition: 0.3s;
        }

        .mobile-menu {
            position: fixed;
            top: 70px;
            left: 0;
            width: 100%;
            background-color: var(--navy-accent);
            padding: 20px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            border-bottom: 1px solid var(--border-color);
            z-index: 9989;
        }

        /* SECTION 2 - HERO */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 120px 20px 60px;
            overflow: visible;
        }

        .hero-bg-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: 20vw;
            color: rgba(255,215,0,0.03);
            white-space: nowrap;
            pointer-events: none;
            z-index: 0;
        }

        .gold-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background-color: var(--gold-primary);
            border-radius: 50%;
            opacity: 0.4;
            animation: float 20s infinite linear;
        }

        @keyframes float {
            0% { transform: translateY(0) translateX(0); }
            50% { transform: translateY(-100px) translateX(50px); }
            100% { transform: translateY(0) translateX(0); }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255,215,0,0.05);
            border: 1px solid rgba(255,215,0,0.1);
            border-radius: 50px;
            font-size: 10px;
            color: var(--gold-primary);
            letter-spacing: 0.3em;
            margin-bottom: 40px;
        }

        .hero-badge .dot {
            width: 6px;
            height: 6px;
            background-color: var(--gold-primary);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--gold-primary);
        }

        .hero h1 {
            font-size: 88px;
            line-height: 0.95;
            margin-bottom: 32px;
        }

        .hero h1 i {
            font-style: italic;
            font-weight: 400;
        }

        .hero-divider {
            width: 60px;
            height: 1px;
            background-color: var(--gold-primary);
            margin: 0 auto 32px;
        }

        .hero-desc {
            font-size: 16px;
            color: var(--text-muted);
            max-width: 600px;
            line-height: 1.6;
            margin-bottom: 40px;
        }

        .hero-ctas {
            display: flex;
            gap: 16px;
            margin-bottom: 40px;
        }

        .btn-primary {
            background-color: var(--gold-primary);
            color: var(--bg-primary);
            padding: 16px 32px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s;
            border: 1px solid var(--gold-primary);
            box-shadow: 0 0 20px var(--gold-glow);
        }

        .btn-primary:hover {
            box-shadow: 0 0 30px rgba(255,215,0,0.4);
            transform: translateY(-2px);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--gold-primary);
            padding: 16px 32px;
            border-radius: 50px;
            font-size: 13px;
            border: 1px solid var(--gold-primary);
            transition: all 0.3s;
        }

        .btn-outline:hover {
            background-color: var(--gold-primary);
            color: var(--bg-primary);
        }

        .social-proof {
            display: flex;
            gap: 24px;
            font-size: 11px;
            color: var(--text-muted);
        }

        .social-proof span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .social-proof i {
            color: var(--gold-primary);
            font-style: normal;
        }

        /* --- HERO CONTAINER SPLIT (BBM-STYLE DIAL ANIMATION) --- */
        .hero-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
            gap: 60px;
            z-index: 2;
            position: relative;
        }

        .hero-content {
            flex: 1.2;
            max-width: 650px;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start !important; /* Left-aligned content override */
        }

        .hero-content h1 {
            text-align: left;
            margin-bottom: 32px;
        }
        
        .hero-divider {
            margin: 0 0 32px 0 !important; /* Left-aligned divider override */
        }
        
        .hero-desc {
            text-align: left;
            margin-left: 0;
            max-width: 580px;
        }
        
        .hero-ctas {
            justify-content: flex-start;
        }
        
        .social-proof {
            justify-content: flex-start;
        }

        /* --- HERO VISUAL (RIGHT SIDE CIRCULAR DIAGRAM) --- */
        .hero-visual {
            flex: 0.9;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 500px;
            width: 500px;
            min-width: 500px;
        }

        .circle-diagram-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* SVG Connecting Lines */
        .diagram-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .connection-line {
            fill: none;
            stroke: rgba(255, 215, 0, 0.12);
            stroke-width: 2px;
            transition: stroke 0.4s, stroke-width 0.4s;
        }

        .connection-line-particle {
            fill: none;
            stroke: var(--gold-primary);
            stroke-width: 2px;
            stroke-dasharray: 20 80;
            animation: flowParticles 5s linear infinite;
            filter: drop-shadow(0 0 2px var(--gold-primary));
            opacity: 0.55;
            pointer-events: none;
        }

        .line-1-particle { animation-delay: 0s; }
        .line-2-particle { animation-delay: 1s; }
        .line-3-particle { animation-delay: 2s; }
        .line-4-particle { animation-delay: 3s; }
        .line-5-particle { animation-delay: 4s; }

        @keyframes flowParticles {
            0% { stroke-dashoffset: 100; }
            100% { stroke-dashoffset: -100; }
        }

        /* Central logo circle styles */
        .center-logo-circle {
            position: absolute;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(13, 18, 32, 0.85) 0%, rgba(8, 12, 20, 0.95) 100%);
            border: 2px solid rgba(255, 215, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.1), inset 0 0 12px rgba(255, 215, 0, 0.08);
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .center-logo-circle:hover {
            border-color: var(--gold-primary);
            box-shadow: 0 0 35px rgba(255, 215, 0, 0.25), inset 0 0 18px rgba(255, 215, 0, 0.15);
        }

        .logo-inner {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            overflow: hidden;
            border-radius: 50%;
        }

        .center-logo-circle:hover .logo-inner {
            transform: scale(1.1) rotate(6deg);
        }

        .logo-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.38); /* Zooms the golden circular emblem to perfectly fit the circle boundary */
            filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.1));
            border-radius: 50%;
        }

        .logo-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            background: radial-gradient(circle, var(--gold-primary) 0%, transparent 70%);
            opacity: 0.12;
            z-index: 1;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .center-logo-circle:hover .logo-glow {
            opacity: 0.25;
        }

        /* Pulsating outer rings */
        .pulse-ring {
            position: absolute;
            border: 1px solid rgba(255, 215, 0, 0.1);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        .pulse-ring.ring-1 {
            width: 150px;
            height: 150px;
            animation: pulseRing 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
        }

        .pulse-ring.ring-2 {
            width: 220px;
            height: 220px;
            animation: pulseRing 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
            animation-delay: 2s;
        }

        @keyframes pulseRing {
            0% { transform: scale(0.7); opacity: 0; }
            50% { opacity: 0.4; }
            100% { transform: scale(1.35); opacity: 0; }
        }

        /* Orbiting floating cards with glowing snake border animation */
        .orbiting-card {
            position: absolute;
            width: 190px;
            padding: 1px; /* Represents the 1px ultra-thin glowing border width */
            background: transparent;
            border: none !important;
            border-radius: 12px;
            overflow: hidden; /* Clips the rotating conic gradient background */
            z-index: 3;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
            transform: translate(var(--x), var(--y));
            display: flex;
            align-items: stretch;
            justify-content: stretch;
            transition: box-shadow 0.3s;
        }

        /* The rotating conic gradient snake behind the mask */
        .orbiting-card::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 260px; /* Perfect square wider than the diagonal to rotate uniformly */
            height: 260px;
            margin-top: -130px;
            margin-left: -130px;
            background: conic-gradient(
                #ffd700,
                #ff4b2b,
                #ffd700
            );
            animation: rotateSnake 4.5s linear infinite;
            z-index: 1;
            pointer-events: none;
        }

        @keyframes rotateSnake {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Staggered animation delays and unique multicolor combinations for each card */
        .card-1::before {
            background: conic-gradient(
                #00f2fe,
                #9b51e0,
                #00f2fe
            );
            animation-delay: 0s;
        }
        .card-2::before {
            background: conic-gradient(
                #ff0080,
                #ff8c00,
                #ff0080
            );
            animation-delay: -0.75s;
        }
        .card-3::before {
            background: conic-gradient(
                #39ff14,
                #00d2ff,
                #39ff14
            );
            animation-delay: -1.5s;
        }
        .card-4::before {
            background: conic-gradient(
                #ff4b2b,
                #f1c40f,
                #ff4b2b
            );
            animation-delay: -2.25s;
        }
        .card-5::before {
            background: conic-gradient(
                #ffd700,
                #ff007f,
                #ffd700
            );
            animation-delay: -3s;
        }
        .card-6::before {
            background: conic-gradient(
                #8f00ff,
                #00f2fe,
                #8f00ff
            );
            animation-delay: -3.75s;
        }

        /* Custom Hover Shadows to match each card's theme color */
        .card-1:hover {
            box-shadow: 0 0 25px rgba(0, 242, 254, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);
        }
        .card-2:hover {
            box-shadow: 0 0 25px rgba(255, 0, 128, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);
        }
        .card-3:hover {
            box-shadow: 0 0 25px rgba(57, 255, 20, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);
        }
        .card-4:hover {
            box-shadow: 0 0 25px rgba(255, 75, 43, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);
        }
        .card-5:hover {
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.22), 0 8px 30px rgba(0, 0, 0, 0.5);
        }
        .card-6:hover {
            box-shadow: 0 0 25px rgba(143, 0, 255, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);
        }

        /* Accelerate the border snake animation speed on hover! */
        .orbiting-card:hover::before {
            animation-duration: 2s;
        }

        .card-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background: radial-gradient(circle at center, rgba(255, 215, 0, 0.08) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            z-index: 2;
        }

        .orbiting-card:hover .card-glow {
            opacity: 1;
        }

        /* Inner glassmorphism mask sitting in front of the rotating background */
        .card-content-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 12px;
            background: rgba(13, 18, 32, 0.95); /* Blocks the conic gradient except at the 1.5px padding border */
            border-radius: 11px; /* Follows the outer 12px boundary */
            z-index: 3;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s;
        }

        .orbiting-card:hover .card-content-wrapper {
            transform: translateY(-6px);
            background-color: rgba(18, 24, 40, 0.92); /* Subtle lighting shift on hover */
        }

        .card-icon {
            font-size: 20px;
            line-height: 1;
            filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.15));
            transition: transform 0.3s;
        }

        .orbiting-card:hover .card-icon {
            transform: scale(1.1) rotate(4deg);
        }

        .card-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;
        }

        .card-title {
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .card-tag {
            font-family: var(--font-mono);
            font-size: 9px;
            color: var(--gold-soft);
            letter-spacing: 0.03em;
            text-transform: uppercase;
            line-height: 1.25;
            word-break: break-word;
        }

        /* Color-coded tags */
        .card-1 .card-tag { color: #00f2fe; }
        .card-2 .card-tag { color: #ff0080; }
        .card-3 .card-tag { color: #39ff14; }
        .card-4 .card-tag { color: #ff4b2b; }
        .card-5 .card-tag { color: var(--gold-soft); }
        .card-6 .card-tag { color: #8f00ff; }

        /* Color-coded glows */
        .card-1 .card-glow { background: radial-gradient(circle at center, rgba(0, 242, 254, 0.15) 0%, transparent 70%); }
        .card-2 .card-glow { background: radial-gradient(circle at center, rgba(255, 0, 128, 0.15) 0%, transparent 70%); }
        .card-3 .card-glow { background: radial-gradient(circle at center, rgba(57, 255, 20, 0.15) 0%, transparent 70%); }
        .card-4 .card-glow { background: radial-gradient(circle at center, rgba(255, 75, 43, 0.15) 0%, transparent 70%); }
        .card-5 .card-glow { background: radial-gradient(circle at center, rgba(255, 215, 0, 0.12) 0%, transparent 70%); }
        .card-6 .card-glow { background: radial-gradient(circle at center, rgba(143, 0, 255, 0.15) 0%, transparent 70%); }

        /* Color-coded icon drop shadows */
        .card-1 .card-icon { filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.4)); }
        .card-2 .card-icon { filter: drop-shadow(0 0 4px rgba(255, 0, 128, 0.4)); }
        .card-3 .card-icon { filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.4)); }
        .card-4 .card-icon { filter: drop-shadow(0 0 4px rgba(255, 75, 43, 0.4)); }
        .card-5 .card-icon { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4)); }
        .card-6 .card-icon { filter: drop-shadow(0 0 4px rgba(143, 0, 255, 0.4)); }

        /* CSS :has() hover triggers to highlight connection lines with matching card colors */
        .circle-diagram-wrapper:has(.card-1:hover) .line-1 {
            stroke: #00f2fe;
            stroke-width: 3px;
            filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.5));
        }
        .circle-diagram-wrapper:has(.card-1:hover) .line-1-particle {
            stroke: #00f2fe;
            stroke-width: 3.5px;
            animation-duration: 2s;
            filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.6));
        }

        .circle-diagram-wrapper:has(.card-2:hover) .line-2 {
            stroke: #ff0080;
            stroke-width: 3px;
            filter: drop-shadow(0 0 4px rgba(255, 0, 128, 0.5));
        }
        .circle-diagram-wrapper:has(.card-2:hover) .line-2-particle {
            stroke: #ff0080;
            stroke-width: 3.5px;
            animation-duration: 2s;
            filter: drop-shadow(0 0 4px rgba(255, 0, 128, 0.6));
        }

        .circle-diagram-wrapper:has(.card-3:hover) .line-3 {
            stroke: #39ff14;
            stroke-width: 3px;
            filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.5));
        }
        .circle-diagram-wrapper:has(.card-3:hover) .line-3-particle {
            stroke: #39ff14;
            stroke-width: 3.5px;
            animation-duration: 2s;
            filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.6));
        }

        .circle-diagram-wrapper:has(.card-4:hover) .line-4 {
            stroke: #ff4b2b;
            stroke-width: 3px;
            filter: drop-shadow(0 0 4px rgba(255, 75, 43, 0.5));
        }
        .circle-diagram-wrapper:has(.card-4:hover) .line-4-particle {
            stroke: #ff4b2b;
            stroke-width: 3.5px;
            animation-duration: 2s;
            filter: drop-shadow(0 0 4px rgba(255, 75, 43, 0.6));
        }

        .circle-diagram-wrapper:has(.card-5:hover) .line-5 {
            stroke: var(--gold-primary);
            stroke-width: 3px;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
        }
        .circle-diagram-wrapper:has(.card-5:hover) .line-5-particle {
            stroke: var(--gold-primary);
            stroke-width: 3.5px;
            animation-duration: 2s;
            filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
        }

        .circle-diagram-wrapper:has(.card-6:hover) .line-6 {
            stroke: #8f00ff;
            stroke-width: 3px;
            filter: drop-shadow(0 0 4px rgba(143, 0, 255, 0.5));
        }
        .circle-diagram-wrapper:has(.card-6:hover) .line-6-particle {
            stroke: #8f00ff;
            stroke-width: 3.5px;
            animation-duration: 2s;
            filter: drop-shadow(0 0 4px rgba(143, 0, 255, 0.6));
        }

        .line-6-particle { animation-delay: 5s; }

        /* --- RESPONSIVE OVERRIDES --- */
        @media (max-width: 1023px) {
            .hero-container {
                flex-direction: column;
                gap: 50px;
                padding: 0 20px;
                text-align: center;
            }
            .hero-content {
                align-items: center !important;
                text-align: center;
                max-width: 100%;
            }
            .hero-content h1 {
                text-align: center;
            }
            .hero-divider {
                margin: 0 auto 32px !important;
            }
            .hero-desc {
                text-align: center;
                margin: 0 auto 40px;
            }
            .hero-ctas {
                justify-content: center;
            }
            .social-proof {
                justify-content: center;
            }
            .hero-visual {
                transform: scale(0.85);
                height: 500px;
                width: 500px;
                min-width: 500px;
                margin-top: 20px;
                margin-bottom: 20px;
            }
        }

        @media (max-width: 500px) {
            .hero-visual {
                transform: scale(0.62);
                height: 500px;
                width: 500px;
                min-width: 500px;
                margin-top: 15px;
                margin-bottom: 30px;
            }
        }

        /* SECTION 3 - MARQUEE */
        .marquee-strip {
            background-color: var(--gold-primary);
            padding: 15px 0;
            overflow: hidden;
            display: flex;
            white-space: nowrap;
        }

        .marquee-content {
            display: flex;
            animation: marquee 25s linear infinite;
        }

        .marquee-strip:hover .marquee-content {
            animation-play-state: paused;
        }

        .marquee-text {
            font-family: var(--font-display);
            font-size: 20px;
            color: var(--bg-primary);
            letter-spacing: 0.15em;
            padding-right: 50px;
        }

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

        /* SECTION 4 - SERVICES */
        .section-padding {
            padding: 120px 5%;
        }

        .services {
            background-color: var(--bg-secondary);
        }

        .section-label {
            font-size: 10px;
            color: var(--gold-primary);
            letter-spacing: 0.3em;
            text-transform: uppercase;
            margin-bottom: 20px;
            display: block;
        }

        .section-title {
            font-size: 64px;
            line-height: 1.1;
            margin-bottom: 60px;
        }

        .service-cards {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .service-card {
            background-color: var(--bg-card);
            border-radius: 16px;
            padding: 48px;
            border-left: 2px solid var(--gold-primary);
            display: flex;
            gap: 60px;
            align-items: flex-start;
            position: relative;
        }

        .service-number {
            font-family: var(--font-mono);
            font-size: 48px;
            color: var(--gold-primary);
            opacity: 0.4;
            min-width: 80px;
        }

        .service-content {
            flex: 1;
        }

        .service-tag {
            display: inline-block;
            background-color: var(--gold-primary);
            color: var(--bg-primary);
            font-size: 10px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 50px;
            margin-bottom: 20px;
        }

        .service-title {
            font-size: 40px;
            line-height: 1.1;
            margin-bottom: 24px;
        }

        .service-desc {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 30px;
            max-width: 600px;
        }

        .service-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 40px;
        }

        .service-features li {
            font-size: 14px;
            color: var(--text-white);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .service-features li::before {
            content: '✓';
            color: var(--gold-primary);
        }

        .service-price {
            font-family: var(--font-mono);
            font-size: 24px;
            color: var(--gold-primary);
            margin-bottom: 20px;
        }

        .service-link {
            color: var(--gold-primary);
            font-size: 14px;
            text-decoration: underline;
            text-underline-offset: 4px;
            transition: opacity 0.3s;
        }

        .service-link:hover {
            opacity: 0.8;
        }

        /* SECTION 5 - PORTFOLIO */
        .portfolio {
            background-color: var(--bg-primary);
        }

        .portfolio-filters {
            display: flex;
            gap: 12px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: transparent;
            border: 1px solid var(--gold-primary);
            color: var(--gold-primary);
            padding: 8px 20px;
            border-radius: 50px;
            font-family: var(--font-body);
            font-size: 13px;
            transition: all 0.3s;
        }

        .filter-btn.active, .filter-btn:hover {
            background: var(--gold-primary);
            color: var(--bg-primary);
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            align-items: start;
            grid-auto-flow: dense;
        }

        .portfolio-item {
            position: relative;
            background-color: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, border 0.3s;
            border: 1px solid transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .portfolio-item.square { aspect-ratio: 1 / 1; }
        .portfolio-item.portrait { aspect-ratio: 9 / 16; }
        .portfolio-item.tall { aspect-ratio: 3/4; }
        .portfolio-item.wide { grid-column: span 2; min-height: 200px; }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .portfolio-item.wide img {
            object-fit: contain;
            background-color: #050810;
        }

        .portfolio-img-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--navy-accent), #051024);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            color: rgba(255,215,0,0.3);
            font-size: 24px;
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(8,12,20,0.8);
            opacity: 0;
            transition: opacity 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .portfolio-item:hover {
            transform: scale(1.02);
            border-color: var(--gold-primary);
            z-index: 2;
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-tag {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--gold-primary);
            color: var(--bg-primary);
            font-size: 10px;
            padding: 4px 12px;
            border-radius: 50px;
        }

        .portfolio-view {
            color: var(--gold-primary);
            font-size: 14px;
            letter-spacing: 0.1em;
        }

        .portfolio-footer {
            margin-top: 60px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .portfolio-footer p {
            font-size: 14px;
            color: var(--text-muted);
        }

        /* SECTION 6 - STATS */
        .stats {
            background-color: var(--gold-primary);
            padding: 60px 5%;
        }

        .stats-grid {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .stat-item {
            text-align: center;
            flex: 1;
        }

        .stat-divider {
            width: 1px;
            height: 60px;
            background-color: rgba(8,12,20,0.1);
        }

        .stat-num {
            font-family: var(--font-display);
            font-size: 64px;
            color: var(--bg-primary);
            line-height: 1;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 12px;
            color: var(--bg-secondary);
            font-weight: 500;
        }

        /* SECTION 7 - PRICING */
        .pricing {
            background-color: var(--bg-secondary);
            text-align: center;
        }

        .pricing .section-label, .pricing .section-title {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        .pricing-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 60px;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto 40px;
            text-align: left;
        }

        .pricing-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 48px;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .pricing-card.popular {
            border-color: var(--gold-primary);
            box-shadow: 0 0 30px var(--gold-glow);
            transform: translateY(-16px);
        }

        .popular-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--gold-primary);
            color: var(--bg-primary);
            font-size: 10px;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: 50px;
        }

        .pricing-icon {
            font-size: 32px;
            margin-bottom: 20px;
        }

        .pricing-title {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .pricing-price {
            font-family: var(--font-mono);
            font-size: 64px;
            color: var(--gold-primary);
            line-height: 1;
        }

        .pricing-unit {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 10px;
            display: block;
        }

        .min-order {
            display: inline-block;
            font-size: 10px;
            color: var(--gold-primary);
            background: rgba(255,215,0,0.1);
            padding: 4px 8px;
            border-radius: 4px;
            margin-bottom: 30px;
        }

        .pricing-features {
            margin-bottom: 30px;
            flex: 1;
        }

        .pricing-features li {
            font-size: 14px;
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .pricing-features li::before {
            content: '✓';
            color: var(--gold-primary);
        }

        .volume-pricing {
            background: rgba(255,215,0,0.03);
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 30px;
            font-size: 13px;
        }

        .volume-pricing div {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .volume-pricing div:last-child {
            margin-bottom: 0;
        }

        .btn-full {
            width: 100%;
            text-align: center;
        }

        .pricing-footer {
            text-align: center;
            font-size: 14px;
            color: var(--text-muted);
        }

        .pricing-footer a {
            color: var(--gold-primary);
            display: block;
            margin-top: 10px;
        }

        /* SECTION 8 - PROCESS */
        .process {
            background-color: var(--bg-primary);
        }

        .process-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 60px;
        }

        .process-line {
            position: absolute;
            top: 24px;
            left: 50px;
            right: 50px;
            height: 2px;
            border-top: 2px dashed rgba(255,215,0,0.3);
            z-index: 1;
        }

        .process-card {
            background-color: var(--bg-card);
            border-radius: 16px;
            padding: 30px;
            width: 23%;
            position: relative;
            z-index: 2;
        }

        .process-num {
            font-family: var(--font-mono);
            font-size: 20px;
            color: var(--gold-primary);
            margin-bottom: 20px;
        }

        .process-icon {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .process-title {
            color: var(--gold-primary);
            font-size: 18px;
            margin-bottom: 15px;
            font-family: var(--font-display);
        }

        .process-desc {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* SECTION 9 - FREE SAMPLE CTA */
        .free-sample {
            background-color: var(--bg-card);
            border-top: 2px solid rgba(255,215,0,0.3);
            border-bottom: 2px solid rgba(255,215,0,0.3);
            text-align: center;
        }

        .risk-free-badge {
            display: inline-block;
            background: var(--gold-primary);
            color: var(--bg-primary);
            font-size: 12px;
            font-weight: 600;
            padding: 6px 16px;
            border-radius: 50px;
            margin-bottom: 30px;
        }

        .free-sample h2 {
            font-size: 56px;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .free-sample p {
            font-size: 16px;
            color: var(--text-muted);
            max-width: 500px;
            margin: 0 auto 40px;
        }

        .sample-form {
            max-width: 800px;
            margin: 0 auto;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-input {
            flex: 1;
            background: rgba(8,12,20,0.5);
            border: 1px solid var(--border-color);
            padding: 16px 20px;
            border-radius: 8px;
            color: var(--text-white);
            font-family: var(--font-body);
            font-size: 14px;
        }

        .form-input::placeholder {
            color: var(--text-muted);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--gold-primary);
        }

        textarea.form-input {
            width: 100%;
            min-height: 120px;
            resize: vertical;
            margin-bottom: 30px;
        }

        .submit-btn {
            background-color: var(--gold-primary);
            color: var(--bg-primary);
            border: none;
            padding: 18px 40px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            display: block;
            cursor: none; /* keep custom cursor */
            transition: all 0.3s;
        }

        .submit-btn:hover {
            box-shadow: 0 0 20px var(--gold-glow);
            transform: translateY(-2px);
        }

        .form-footer {
            margin-top: 20px;
            font-size: 12px;
            color: var(--gold-primary);
        }

        /* SECTION 10 - TESTIMONIALS */
        .testimonials {
            background-color: var(--bg-secondary);
        }

        .testimonials h2 {
            font-size: 56px;
            margin-bottom: 60px;
        }

        .test-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .test-card {
            background-color: var(--bg-card);
            border-radius: 16px;
            padding: 40px;
            border-left: 2px solid var(--gold-primary);
        }

        .stars {
            color: var(--gold-primary);
            margin-bottom: 20px;
            font-size: 14px;
        }

        .test-quote {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 30px;
            font-style: italic;
        }

        .test-author {
            font-weight: 600;
            font-size: 15px;
        }

        .test-company {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 10px;
        }

        .test-tag {
            display: inline-block;
            font-size: 10px;
            color: var(--gold-primary);
            background: rgba(255,215,0,0.1);
            padding: 4px 8px;
            border-radius: 4px;
        }

        /* SECTION 11 - FAQ */
        .faq {
            background-color: var(--bg-primary);
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background-color: var(--bg-card);
            border-left: 2px solid var(--gold-primary);
            border-radius: 8px;
            margin-bottom: 16px;
            overflow: hidden;
            cursor: pointer;
        }

        .faq-header {
            padding: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
        }

        .faq-icon {
            color: var(--gold-primary);
            font-size: 20px;
            transition: transform 0.3s;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        .faq-content {
            padding: 0 24px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .faq-item.active .faq-content {
            padding: 0 24px 24px;
            max-height: 500px; /* generous max height */
        }

        /* SECTION 12 - FINAL CTA */
        .final-cta {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-primary);
            text-align: center;
        }

        .radial-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80vw;
            height: 80vw;
            background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, rgba(8,12,20,0) 70%);
            pointer-events: none;
            z-index: 0;
        }

        .final-content {
            position: relative;
            z-index: 1;
            max-width: 600px;
        }

        .final-cta h2 {
            font-size: 80px;
            line-height: 1;
            margin-bottom: 24px;
        }

        .final-cta p {
            font-size: 16px;
            color: var(--text-muted);
            margin-bottom: 40px;
            line-height: 1.6;
        }

        .final-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }

        .btn-large {
            padding: 20px 40px;
            font-size: 14px;
            width: 100%;
            max-width: 360px;
        }

        .btn-primary.btn-large:hover {
            box-shadow: 0 0 40px rgba(255,255,255,0.2), 0 0 20px var(--gold-glow);
        }

        .final-footer-text {
            font-size: 12px;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* FOOTER */
        .footer {
            background-color: #050810;
            border-top: 1px solid rgba(255,215,0,0.08);
            padding: 60px 5% 40px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.5fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .footer-brand .nav-logo-icon {
            font-size: 20px;
        }

        .footer-brand .nav-logo-text {
            font-size: 20px;
        }

        .footer-logo {
            height: 35px;
            width: auto;
            margin-bottom: 10px;
            object-fit: contain;
        }

        .footer-brand p {
            font-size: 12px;
            color: var(--text-muted);
            margin: 15px 0 20px;
        }

        .social-icons {
            display: flex;
            gap: 15px;
        }

        .social-icons a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-white);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .social-icons a:hover {
            background-color: var(--gold-primary);
            border-color: var(--gold-primary);
            color: var(--bg-primary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 138, 91, 0.3);
        }

        .social-icons a svg {
            transition: transform 0.3s ease;
        }

        .social-icons a:hover svg {
            transform: scale(1.1);
        }

        .footer-col h3 {
            font-family: var(--font-body);
            font-size: 14px;
            color: var(--text-white);
            margin-bottom: 20px;
            font-weight: 600;
        }

        .footer-col ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-col a, .footer-col span {
            font-size: 13px;
            color: var(--text-muted);
            transition: color 0.3s;
        }

        .footer-col a:hover {
            color: var(--gold-primary);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255,215,0,0.08);
            font-size: 11px;
            color: var(--text-muted);
        }

        .footer-bottom a {
            color: var(--gold-primary);
        }

        /* MOBILE RESPONSIVE */
        @media (max-width: 992px) {
            .hero h1 { font-size: 64px; }
            .section-title { font-size: 48px; }
            .service-card { flex-direction: column; gap: 30px; padding: 30px; }
            .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-grid { flex-wrap: wrap; gap: 40px; justify-content: space-around; }
            .stat-divider { display: none; }
            .stat-item { flex: 0 0 40%; }
            .pricing-grid { grid-template-columns: 1fr; max-width: 500px; }
            .pricing-card.popular { transform: none; }
            .process-steps { flex-direction: column; gap: 30px; }
            .process-line { display: none; }
            .process-card { width: 100%; border-left: 2px dashed var(--gold-primary); border-radius: 0 16px 16px 0; }
            .test-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            .cursor-dot, .cursor-ring { display: none; } /* Disable custom cursor on mobile */
            * { cursor: auto; }
            
            .nav-links { display: none; }
            .nav-cta.desktop-cta { display: none; }
            .mobile-menu-btn { display: flex; }
            
            .hero {
                min-height: auto;
                padding: 100px 20px 40px;
                overflow: visible;
            }
            .hero-container {
                flex-direction: column;
                gap: 20px;
                padding: 0 10px;
            }
            .hero-visual {
                display: none !important;
            }
            .hero h1 {
                font-size: 36px !important;
                line-height: 1.15 !important;
            }
            .hero-desc {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 24px !important;
            }
            .hero-ctas { flex-direction: column; width: 100%; max-width: 300px; }
            .social-proof { flex-wrap: wrap; justify-content: center; }
            
            .section-padding { padding: 80px 5%; }
            
            .form-row { flex-direction: column; gap: 20px; }
            .free-sample h2 { font-size: 40px; }
            .final-cta h2 { font-size: 56px; }
            
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
            .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }
        }

        /* VIDEO MODAL STYLES */
        .video-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(8, 12, 20, 0.95);
            backdrop-filter: blur(15px);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .video-modal.active {
            display: flex;
            opacity: 1;
        }

        .video-modal-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            aspect-ratio: 16/9;
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.15);
        }

        .video-modal-content.portrait {
            max-width: 420px;
            aspect-ratio: 9/16;
            height: 85vh;
        }

        .video-modal-content video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .video-modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(8, 12, 20, 0.8);
            border: 1px solid var(--border-color);
            color: var(--gold-primary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            z-index: 10001;
            transition: all 0.3s;
        }

        .video-modal-close:hover {
            background: var(--gold-primary);
            color: var(--bg-primary);
            transform: scale(1.1);
        }

        /* CUSTOM HTML5 VIDEO PLAYER */
        .custom-video-player {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
        }

        .custom-video-player video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Custom Controls Container */
        .player-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(8, 12, 20, 0.95) 0%, rgba(8, 12, 20, 0.7) 60%, transparent 100%);
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px 25px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.4s ease, transform 0.4s ease;
            z-index: 10002;
            pointer-events: auto;
        }

        .custom-video-player:hover .player-controls {
            opacity: 1;
            transform: translateY(0);
        }

        /* Control Buttons */
        .player-controls button {
            background: transparent;
            border: none;
            color: var(--gold-primary);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .player-controls button:hover {
            background: rgba(255, 215, 0, 0.15);
            transform: scale(1.1);
        }

        /* Seek Bar / Progress Bar */
        .player-controls .progress-container {
            flex-grow: 1;
            height: 6px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 3px;
            position: relative;
            cursor: pointer;
            transition: height 0.2s ease;
        }

        .player-controls .progress-container:hover {
            height: 8px;
        }

        .player-controls .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--gold-soft), var(--gold-primary));
            border-radius: 3px;
            position: relative;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
        }

        .player-controls .progress-handle {
            width: 12px;
            height: 12px;
            background: var(--text-white);
            border: 2px solid var(--gold-primary);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.2s ease;
            box-shadow: 0 0 10px var(--gold-primary);
            pointer-events: none;
        }

        .player-controls .progress-container:hover .progress-handle {
            transform: translate(-50%, -50%) scale(1);
        }

        /* Time Display */
        .player-controls .time-display {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-white);
            min-width: 80px;
            text-align: center;
            opacity: 0.9;
        }

        /* Volume Slider */
        .player-controls .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .player-controls .volume-slider {
            width: 0;
            opacity: 0;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            cursor: pointer;
            transition: width 0.3s ease, opacity 0.3s ease;
            -webkit-appearance: none;
            margin: 0;
        }

        .player-controls .volume-container:hover .volume-slider {
            width: 70px;
            opacity: 1;
        }

        .player-controls .volume-slider::-webkit-slider-runnable-track {
            height: 4px;
            background: transparent;
        }

        .player-controls .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--gold-primary);
            box-shadow: 0 0 5px var(--gold-primary);
            margin-top: -3px;
        }

        /* Floating WhatsApp Button */
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #25D366;
            color: #ffffff;
            border-radius: 50px;
            padding: 12px 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
            z-index: 9999;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 600;
        }

        .whatsapp-float:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.2);
            background: #20ba59;
        }

        .whatsapp-float svg {
            width: 20px;
            height: 20px;
            fill: #ffffff;
            transition: transform 0.3s;
        }

        .whatsapp-float:hover svg {
            transform: rotate(10deg);
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 20px;
                right: 20px;
                padding: 12px;
                border-radius: 50%;
            }
            .whatsapp-float span {
                display: none;
            }
        }
/* UGC Video Showcase Section Styling */
.ugc-studio {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.ugc-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}

.ugc-info h3 {
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--gold-primary);
}

.ugc-info p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

.ugc-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    padding: 0;
}

.ugc-points li {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-white);
    position: relative;
    padding-left: 28px;
}

.ugc-points li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold-primary);
    font-size: 16px;
}

.ugc-points li strong {
    color: var(--gold-primary);
    font-weight: 600;
}

.ugc-videos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px 0;
}

.ugc-video-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

@media (max-width: 1024px) {
    .ugc-videos {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
        cursor: grab;
        padding: 10px 5px;
        will-change: transform;
    }

    .ugc-videos::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    .ugc-videos:active {
        cursor: grabbing;
    }

    .ugc-video-card {
        flex: 0 0 280px; /* Fixed width for card carousel */
        scroll-snap-align: start;
        user-select: none;
        -webkit-user-drag: none;
    }
}

.ugc-video-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold-primary);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.1);
}

.ugc-video-wrapper {
    position: relative;
    aspect-ratio: 9/16;
    background: #000;
}

.ugc-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.ugc-video-card:hover video {
    opacity: 1;
}

/* Preview Card Progress Bar */
.ugc-card-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ugc-card-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--gold-primary);
    box-shadow: 0 0 8px var(--gold-primary);
    transition: width 0.1s linear;
}

.ugc-video-card:hover .ugc-card-progress-bar {
    opacity: 1;
}

.ugc-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.ugc-video-card:hover .ugc-play-overlay {
    opacity: 0;
    pointer-events: none;
}

.play-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.9);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    transition: all 0.3s;
}

.ugc-video-card:hover .play-btn {
    transform: scale(1.1);
    background: var(--gold-primary);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.play-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--text-white);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    opacity: 0.8;
    transition: opacity 0.3s;
}

.ugc-video-card:hover .play-label {
    opacity: 1;
}

.ugc-meta {
    padding: 15px;
}

.ugc-meta h4 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ugc-meta span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ==========================================================================
   CGI SHOWCASE SECTION STYLES
   ========================================================================== */
.cgi-showcase {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.cgi-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

.cgi-showcase-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    margin-top: 50px;
    align-items: flex-start;
}

/* Draggable Before/After Split-Slider */
.cgi-slider-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cgi-slider-desc {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.cgi-split-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.05);
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    background: #000;
}

/* Video Containers inside Slider */
.cgi-split-slider .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.cgi-slider-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Raw (Clay Blueprint) Video Layer on the Left (bottom layer) */
.raw-video-container {
    z-index: 1;
    filter: grayscale(100%) brightness(1.15) contrast(1.35);
    background-blend-mode: overlay;
    background-image: 
        linear-gradient(rgba(255, 215, 0, 0.04) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Rendered (Final Cinematic) Video Layer on the Right (top layer) */
.final-video-container {
    z-index: 2;
    clip-path: inset(0 0 0 50%); /* Start at 50% split */
    will-change: clip-path;
}

/* Badges for Slider Left / Right sides */
.slider-badge {
    position: absolute;
    top: 20px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    border-radius: 50px;
    z-index: 5;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-left {
    left: 20px;
    background: rgba(8, 12, 20, 0.85);
    color: var(--gold-soft);
    border-color: rgba(255, 215, 0, 0.15);
}

.badge-right {
    right: 20px;
    background: rgba(255, 215, 0, 0.9);
    color: var(--bg-primary);
    border-color: var(--gold-primary);
    font-weight: 600;
}

/* Draggable Golden Divider line and handle */
.slider-divider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--gold-primary);
    z-index: 10;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 10px var(--gold-primary);
    will-change: left;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--bg-secondary);
    border: 2px solid var(--gold-primary);
    border-radius: 50%;
    color: var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 8px rgba(255, 215, 0, 0.1);
    transition: background 0.3s, transform 0.2s;
    pointer-events: auto;
    cursor: ew-resize;
}

.slider-handle:hover {
    background: var(--gold-primary);
    color: var(--bg-primary);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
}

/* Right Side: CGI Formula Pipeline Accordions */
.cgi-pipeline-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cgi-pipeline-column h3 {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--gold-primary);
    line-height: 1.2;
}

.pipeline-intro {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.cgi-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.cgi-accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.cgi-accordion-item.active {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.03);
}

.cgi-accordion-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    user-select: none;
}

.cgi-accordion-header .step-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-soft);
    opacity: 0.8;
}

.cgi-accordion-header h4 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-white);
    flex-grow: 1;
}

.cgi-accordion-header .accordion-icon {
    font-size: 18px;
    color: var(--gold-primary);
    transition: transform 0.3s;
}

.cgi-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cgi-accordion-content p {
    padding: 0 24px 24px 51px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Responsive Showcase Media Queries */
@media (max-width: 992px) {
    .cgi-showcase-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .cgi-container {
        padding: 0 20px;
    }
    
    .cgi-pipeline-column h3 {
        font-size: 32px;
    }
    
    .slider-badge {
        top: 10px;
        padding: 4px 10px;
        font-size: 8px;
    }
    
    .badge-left { left: 10px; }
    .badge-right { right: 10px; }
}

@media (max-width: 992px) {
    .ugc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .ugc-videos {
        gap: 16px;
    }
    .ugc-video-card {
        flex: 0 0 240px;
    }
}

/* Lenis Smooth Scroll Resets */
html.lenis, html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis-stopped {
  overflow: hidden;
}

.lenis-scrolling iframe {
  pointer-events: none;
}

/* Dynamic Snake Border Draw & Divider Styling */
.service-card, .test-card, .faq-item {
    border-left: none !important;
    position: relative;
    overflow: hidden;
}

.border-draw-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--gold-primary), var(--gold-soft));
    transform-origin: top;
    transform: scaleY(0);
    z-index: 5;
}

/* Divider scale baselines */
.hero-divider {
    transform-origin: center;
    transform: scaleX(0);
}

.stat-divider {
    transform-origin: top;
    transform: scaleY(0);
    background-color: rgba(8, 12, 20, 0.2) !important;
}

.process-line {
    transform-origin: left;
    transform: scaleX(0);
}

/* Awwwards & BBM Style Premium Cosmic Aesthetics */

/* 1. Background Cosmic Blur Glow Blobs */
.glow-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    mix-blend-mode: screen;
    animation: floatBlob 25s infinite alternate ease-in-out;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.blob-1 {
    top: 15%;
    left: -10%;
    background: var(--gold-primary);
}

.blob-2 {
    top: 45%;
    right: -10%;
    background: var(--navy-accent); /* Sky blue accent matching the shirt */
    animation-delay: -5s;
    opacity: 0.04;
}

.blob-3 {
    top: 75%;
    left: 10%;
    background: var(--gold-primary);
    animation-delay: -10s;
}

@keyframes floatBlob {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(1.15); }
    100% { transform: translate(-40px, 50px) scale(0.9); }
}

/* Ensure sections contain the blobs gracefully */
body {
    position: relative;
    overflow-x: hidden;
}

/* 2. Glassmorphism Upgrades for Cards */
.service-card, .test-card, .pricing-card, .process-card, .faq-item, .b2b-card {
    background: rgba(13, 18, 32, 0.45) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 215, 0, 0.06) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1;
}

.service-card:hover, .test-card:hover, .pricing-card:hover, .b2b-card:hover {
    border-color: rgba(255, 215, 0, 0.25) !important;
    box-shadow: 0 30px 60px rgba(255, 215, 0, 0.04), 0 0 20px rgba(255, 215, 0, 0.02);
    transform: translateY(-8px) scale(1.005) !important;
}

/* 3. Typography Upgrades */
.hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(48px, 6.8vw, 80px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase;
}

.hero h1 i {
    color: var(--gold-primary);
    text-shadow: 0 0 50px rgba(255, 215, 0, 0.2);
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(36px, 4.5vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    font-weight: 700;
}

/* 4. Luxury Details (Logo bar scrolling & gradients) */
.nav-brand img {
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.15));
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-soft) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-outline {
    background: rgba(255, 215, 0, 0.02) !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    backdrop-filter: blur(5px);
}

/* Active Spot Light effect for cards */
.spot-light {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0) 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.service-card:hover .spot-light, .pricing-card:hover .spot-light, .b2b-card:hover .spot-light {
    opacity: 1;
}

/* Subtle Layout Offsets for dynamic look */
@media (min-width: 992px) {
    .service-cards .service-card:nth-child(even) {
        margin-left: 5%;
        border-right: 2px solid var(--gold-primary);
        border-left: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* BBM-LEVEL PREMIUM ANIMATION ENHANCEMENTS                  */
/* ═══════════════════════════════════════════════════════════ */

/* Card 3D Tilt Support */
.service-card, .pricing-card, .process-card, .test-card, .b2b-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Enhanced hover glow on portfolio items */
.portfolio-item {
    will-change: transform, clip-path;
    transform-origin: center center;
}

.portfolio-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0) 0%,
        rgba(255, 215, 0, 0.06) 50%,
        rgba(255, 215, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.portfolio-item:hover::after {
    opacity: 1;
}

/* UGC cards enhanced hover */
.ugc-video-card {
    will-change: transform;
    transform-style: preserve-3d;
}

/* Section entrance clip support */
.stats {
    will-change: clip-path;
}

/* Smooth GPU-accelerated transforms */
.service-card, .pricing-card, .process-card, .test-card, .b2b-card,
.portfolio-item, .ugc-video-card, .faq-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Marquee skew effect base */
.marquee-strip {
    will-change: transform;
    transform-origin: center;
}

/* Enhanced section label animation base */
.section-label {
    will-change: transform, opacity, letter-spacing;
}

/* Final CTA enhanced glow animation */
.final-cta .radial-glow {
    will-change: transform, opacity;
}

/* Premium focus ring for form inputs */
.form-input {
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

.form-input:focus {
    border-color: var(--gold-primary);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.08);
    transform: translateY(-2px);
}

/* Navbar auto-hide smoothness */
.navbar {
    will-change: transform;
    transition: background-color 0.3s ease;
}

/* Responsive overrides for animations */
@media (max-width: 768px) {
    .nav-brand img {
        height: 50px !important;
    }

    .scroll-progress {
        height: 2px;
    }
    
    .section-title {
        font-size: 38px !important;
    }
    
    .hero h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }
    
    /* Disable 3D perspective on mobile for performance */
    .service-cards, .pricing-grid, .process-steps, .test-grid {
        perspective: none;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 30px !important;
    }
    
    .hero h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
}

/* ================================================================= */
/* CGI PRODUCT IMAGES SHOWCASE SECTION                               */
/* ================================================================= */
.cgi-images-showcase {
    background-color: var(--bg-secondary);
}

.cgi-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
}

@media (max-width: 992px) {
    .cgi-images-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.homepage-project-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.homepage-project-card:hover {
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-4px);
}

.homepage-project-header {
    font-family: var(--font-display);
    color: var(--gold-primary);
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    border-left: 2px solid var(--gold-primary);
    padding-left: 12px;
}

.homepage-project-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 576px) {
    .homepage-project-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Image Slider styles */
.slider-wrapper {
    position: relative;
    width: 100%;
}

.cgi-image-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.1);
    background: #090e18;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}

.slider-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slider-image-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.image-after {
    clip-path: inset(0 0 0 50%);
    z-index: 2;
}

.image-before {
    z-index: 1;
}

.active-rendered-img {
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.active-rendered-img.swapping {
    opacity: 0;
}

/* Draggable divider line and handle */
.image-slider-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, transparent 2%, var(--gold-primary) 15%, var(--gold-primary) 85%, transparent 98%);
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 10px var(--gold-glow);
}

.image-slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(8, 12, 20, 0.85);
    border: 2px solid var(--gold-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gold-primary);
    font-size: 16px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3), 0 0 12px var(--gold-glow);
    backdrop-filter: blur(8px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, border-color 0.2s;
    cursor: grab;
    pointer-events: auto;
}

.cgi-image-slider:hover .image-slider-handle {
    transform: translate(-50%, -50%) scale(1.1);
}

.cgi-image-slider:active .image-slider-handle {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(0.95);
    background-color: var(--gold-primary);
    color: #080c14;
}

.image-slider-handle::before,
.image-slider-handle::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    transition: border-color 0.2s;
}

.image-slider-handle::before {
    border-right: 6px solid var(--gold-primary);
    left: 11px;
}

.image-slider-handle::after {
    border-left: 6px solid var(--gold-primary);
    right: 11px;
}

.cgi-image-slider:active .image-slider-handle::before {
    border-right-color: #080c14;
}

.cgi-image-slider:active .image-slider-handle::after {
    border-left-color: #080c14;
}

/* Labels over images */
.slider-wrapper .label {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
    position: absolute;
    top: -24px;
    left: 0;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

.slider-wrapper .label::after {
    content: '• DRAG OR SWIPE';
    font-weight: 700;
    color: var(--gold-primary);
    opacity: 0.8;
}

.badge-label {
    position: absolute;
    top: 15px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.badge-before {
    left: 15px;
    background: rgba(8, 12, 20, 0.65);
    color: #f8fafc;
    border: 1px solid rgba(248, 250, 252, 0.2);
}

.badge-after {
    right: 15px;
    background: var(--gold-primary);
    color: #080c14;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px var(--gold-glow);
}

/* Variations grid styling */
.variations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.homepage-project-content .variations-grid {
    grid-template-columns: 1fr;
    max-height: 100%;
}

@media (max-width: 576px) {
    .homepage-project-content .variations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.img-container {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    aspect-ratio: 1.2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage-project-content .img-container {
    aspect-ratio: 16 / 10;
}

@media (max-width: 576px) {
    .homepage-project-content .img-container {
        aspect-ratio: 1 / 1;
    }
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    transition: opacity 0.3s, transform 0.5s ease;
}

.img-container:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.img-container.active {
    border-color: var(--gold-primary);
    box-shadow: 0 0 15px var(--gold-glow);
}

.img-container.active img {
    opacity: 1;
}

.variation-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(8, 12, 20, 0.75);
    color: #f8fafc;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.cgi-images-footer {
    text-align: center;
    margin-top: 30px;
}

.cgi-images-footer p {
    font-family: var(--font-body);
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 20px;
}

/* Mobile responsive hardening */
img,
video,
svg {
    max-width: 100%;
}

.btn-primary,
.btn-outline,
.submit-btn,
.nav-cta,
.filter-btn {
    white-space: normal;
    text-align: center;
}

@media (max-width: 1200px) {
    .hero h1 {
        font-size: clamp(58px, 7.5vw, 92px) !important;
    }

    .section-title {
        font-size: clamp(48px, 6vw, 68px) !important;
    }
}

@media (max-width: 992px) {
    .navbar {
        padding: 16px 24px;
    }

    .hero {
        min-height: auto;
        padding: 110px 0 70px;
    }

    .hero-container {
        width: min(100%, 760px);
        padding: 0 24px;
        gap: 36px;
    }

    .hero-content {
        align-items: center !important;
        text-align: center;
        width: 100%;
        max-width: calc(100vw - 36px);
        overflow: hidden;
    }

    .hero-content h1,
    .hero-desc {
        text-align: center;
    }

    .hero h1 {
        font-size: clamp(44px, 9vw, 64px) !important;
        letter-spacing: 0 !important;
    }

    .hero-visual {
        width: min(500px, 100%);
        min-width: 0;
        height: auto;
        aspect-ratio: 1 / 1;
        transform: none;
    }

    .circle-diagram-wrapper {
        transform: scale(0.9);
        transform-origin: center;
    }

    .service-card,
    .pricing-card,
    .test-card,
    .homepage-project-card {
        padding: 30px;
    }

    .service-features {
        grid-template-columns: 1fr;
    }

    .ugc-grid,
    .cgi-showcase-grid,
    .homepage-project-content {
        grid-template-columns: 1fr;
    }

    .homepage-project-content .variations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
        margin-top: 16px;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 820px;
    }

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

@media (max-width: 768px) {
    .navbar {
        padding: 12px 18px;
    }

    .line-reveal-inner,
    .word-inner,
    .char-inner,
    .animate-on-scroll,
    .hero-badge,
    .hero h1,
    .hero-desc,
    .hero-ctas,
    .hero-ctas .btn-primary,
    .hero-ctas .btn-outline,
    .social-proof {
        opacity: 1 !important;
        transform: none !important;
    }

    .line-reveal-wrap,
    .word-mask,
    .char-mask {
        overflow: visible;
    }

    .hero h1 .line-reveal-wrap,
    .hero h1 .line-reveal-inner,
    .hero h1 .word-mask,
    .hero h1 .word-inner,
    .hero h1 .char-mask,
    .hero h1 .char-inner {
        display: contents !important;
    }

    .mobile-menu {
        top: 74px;
        max-height: calc(100vh - 74px);
        overflow-y: auto;
    }

    .hero {
        padding: 96px 0 56px;
    }

    .hero-container {
        padding: 0 18px;
    }

    .hero-badge {
        margin-bottom: 24px;
        max-width: 100%;
        justify-content: center;
        letter-spacing: 0.18em;
    }

    .hero h1 {
        font-size: 0 !important;
        line-height: 1.08 !important;
        max-width: 100%;
        overflow: visible;
        color: transparent !important;
    }

    .hero h1 > * {
        display: none !important;
    }

    .hero h1 i {
        color: transparent !important;
    }

    .hero h1::before {
        content: "Hyper-Real Visuals\A For Brands That\A Demand More.";
        display: block;
        white-space: pre-line;
        font-family: var(--font-display);
        font-size: clamp(32px, 8.8vw, 38px);
        line-height: 1.08;
        color: var(--text-white);
        text-align: center;
        text-transform: uppercase;
    }

    .hero-desc {
        font-size: 15px;
        margin-bottom: 28px !important;
        width: min(100%, 330px);
        overflow-wrap: break-word;
    }

    .hero-ctas,
    .final-buttons {
        width: 100%;
        max-width: 330px;
    }

    .hero-ctas a,
    .final-buttons a,
    .cgi-images-footer .btn-primary {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding: 14px 18px;
    }

    .social-proof {
        width: 100%;
        gap: 10px 16px;
    }

    .hero-visual {
        width: min(380px, 100%);
        margin: 0 auto;
    }

    .circle-diagram-wrapper {
        transform: scale(0.74);
    }

    .section-padding {
        padding: 72px 18px;
    }

    .section-title {
        font-size: clamp(32px, 10vw, 42px) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        margin-bottom: 36px;
    }

    .service-title,
    .ugc-info h3,
    .cgi-pipeline-column h3 {
        font-size: clamp(28px, 8vw, 34px);
    }

    .service-card,
    .pricing-card,
    .test-card,
    .homepage-project-card,
    .process-card {
        border-radius: 12px;
        padding: 24px;
    }

    .service-number {
        font-size: 36px;
        min-width: 0;
    }

    .portfolio-filters {
        gap: 10px;
    }

    .filter-btn {
        flex: 1 1 calc(50% - 10px);
        padding: 10px 12px;
    }

    .portfolio-item.portrait {
        aspect-ratio: 4 / 5;
    }

    .portfolio-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(8, 12, 20, 0.78), rgba(8, 12, 20, 0.15));
        justify-content: flex-end;
        padding: 18px;
    }

    .portfolio-tag {
        top: 12px;
        right: 12px;
    }

    .portfolio-view {
        font-size: 12px;
        text-align: center;
    }

    .cgi-split-slider {
        min-height: 0;
    }

    .cgi-accordion-header {
        gap: 12px;
        padding: 18px;
    }

    .cgi-accordion-header h4 {
        font-size: 15px;
    }

    .cgi-accordion-content p {
        padding: 0 18px 18px 18px;
    }

    .homepage-project-content .variations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .homepage-project-content .img-container {
        aspect-ratio: 1 / 1;
    }

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

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

    .test-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 10px 4px 20px;
        scroll-padding-left: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .test-grid::-webkit-scrollbar {
        display: none;
    }
    .test-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    .process-steps {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 10px 4px 20px;
        scroll-padding-left: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .process-steps::-webkit-scrollbar {
        display: none;
    }
    .process-card {
        flex: 0 0 82%;
        width: auto;
        scroll-snap-align: start;
        border-left: 2px solid var(--gold-primary);
        border-radius: 16px;
        margin-bottom: 0;
        padding: 20px;
    }
    .process-card .process-num {
        margin-bottom: 8px;
        font-size: 16px;
    }
    .process-card .process-icon {
        margin-bottom: 8px;
        font-size: 20px;
    }
    .process-card .process-title {
        margin-bottom: 8px;
        font-size: 16px;
    }
    .process-card .process-desc {
        font-size: 12.5px;
        line-height: 1.4;
    }
    .process.section-padding {
        padding: 50px 5% 30px;
    }
    .process h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 30px !important;
    }

    .volume-pricing div {
        gap: 14px;
    }

    .stats {
        padding: 42px 18px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
    }

    .stat-item {
        flex: initial;
    }

    .stat-num {
        font-size: 46px;
    }

    .free-sample h2,
    .final-cta h2 {
        font-size: clamp(36px, 11vw, 48px) !important;
        line-height: 1.05;
    }

    .free-sample p,
    .final-cta p {
        font-size: 15px;
    }

    .sample-form {
        width: 100%;
    }

    .form-input {
        width: 100%;
    }

    .faq-header {
        gap: 16px;
        align-items: flex-start;
        padding: 20px;
    }

    .faq-content,
    .faq-item.active .faq-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .final-cta {
        min-height: auto;
        padding: 88px 18px;
    }

    .footer {
        padding: 44px 18px 32px;
    }

    .social-icons,
    .footer-bottom {
        flex-wrap: wrap;
    }

    .video-modal-content,
    .video-modal-content.portrait {
        width: min(94vw, 420px);
        height: auto;
        max-height: 86vh;
    }

    .player-controls {
        gap: 8px;
        padding: 14px 12px;
        opacity: 1;
        transform: none;
    }

    .player-controls .time-display {
        min-width: auto;
        font-size: 10px;
    }

    .player-controls .volume-container {
        display: none;
    }
}

@media (max-width: 520px) {
    .hero {
        padding-top: 88px;
    }

    .hero-container {
        padding: 0 16px;
    }

    .hero-badge {
        font-size: 9px;
        letter-spacing: 0.12em;
        padding: 8px 12px;
    }

    .hero h1::before {
        font-size: clamp(23px, 7vw, 27px) !important;
    }

    .hero-visual {
        width: min(320px, 100%);
    }

    .circle-diagram-wrapper {
        transform: scale(0.62);
    }

    .section-padding {
        padding: 60px 16px;
    }

    .section-title {
        font-size: clamp(29px, 10vw, 34px) !important;
    }

    .btn-primary,
    .btn-outline,
    .submit-btn {
        font-size: 12px;
    }

    .portfolio-grid {
        gap: 14px;
    }

    .ugc-videos {
        margin-left: -16px;
        margin-right: -16px;
        padding: 10px 16px;
        scroll-padding-left: 16px;
    }

    .ugc-video-card {
        flex-basis: min(76vw, 260px);
    }

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

    .pricing-price {
        font-size: 50px;
    }

    .homepage-project-card {
        padding: 18px;
    }

    .homepage-project-header {
        font-size: 14px;
    }

    .badge-label,
    .slider-wrapper .label,
    .variation-label {
        font-size: 7px;
    }

    .badge-label {
        top: 10px;
        padding: 4px 7px;
    }

    .badge-before {
        left: 10px;
    }

    .badge-after {
        right: 10px;
    }

    .final-footer-text {
        font-size: 11px;
    }
}

/* ================================================================= */
/* 33. BRAND BANNERS SHOWCASE SECTION                                */
/* ================================================================= */
.banners-showcase {
    background-color: var(--bg-primary);
    position: relative;
    overflow: visible;
}

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

.banners-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    line-height: 1.6;
}

/* Flex interactive deck layout */
.banners-interactive-deck {
    display: flex;
    gap: 40px;
    background-color: var(--bg-card);
    border: 1px solid rgba(255, 215, 0, 0.05);
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    align-items: center;
}

/* Control Panel */
.banners-control-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 420px;
}

.panel-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.design-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Thumbnails button styling */
.thumb-nav-btn {
    background: rgba(8, 12, 20, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.06);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
}

.thumb-nav-btn:hover {
    border-color: rgba(255, 215, 0, 0.25);
    background: rgba(8, 12, 20, 0.6);
    transform: translateX(4px);
}

.thumb-nav-btn.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(8, 12, 20, 0.8) 100%);
    border-color: var(--gold-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.05);
}

.thumb-num {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--gold-primary);
    opacity: 0.4;
    font-weight: 700;
    transition: opacity 0.3s;
}

.thumb-nav-btn.active .thumb-num {
    opacity: 1;
}

.thumb-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thumb-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-white);
}

.thumb-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.thumb-nav-btn.active .thumb-tag {
    color: var(--gold-soft);
}

/* Device toggles */
.device-toggles {
    display: flex;
    gap: 10px;
}

.device-toggle-btn {
    flex: 1;
    background: rgba(8, 12, 20, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.06);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
}

.device-toggle-btn:hover {
    border-color: rgba(255, 215, 0, 0.2);
    color: var(--text-white);
}

.device-toggle-btn.active {
    background: var(--gold-primary);
    color: var(--bg-primary);
    border-color: var(--gold-primary);
    font-weight: 700;
}

/* Device Canvas Block */
.banners-device-canvas {
    flex: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 380px;
    background: radial-gradient(circle at center, #0F172A 0%, #050810 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.04);
    padding: 40px;
    overflow: hidden;
}

/* Hyper-Realistic Mockups (HALF SIZE FOR COMPACT LUXURY FEEL) */
.browser-mockup, .phone-mockup {
    display: none;
    opacity: 0;
    transform: scale(0.95);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.browser-mockup.active, .phone-mockup.active {
    display: block;
    opacity: 1;
    transform: scale(1);
}

/* Laptop / Browser Mockup */
.browser-mockup {
    width: 100%;
    max-width: 440px; /* Highly compact "half-size" design! */
    aspect-ratio: 16 / 10;
    background: #080C14;
    border: 2px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

.browser-header {
    background-color: #0E1321;
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 6px;
    height: 28px;
}

.browser-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.browser-dot.red { background-color: #ef4444; }
.browser-dot.yellow { background-color: #eab308; }
.browser-dot.green { background-color: #22c55e; }

.browser-address {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-muted);
    margin-left: auto;
    margin-right: auto;
    opacity: 0.6;
}

.browser-viewport {
    width: 100%;
    height: calc(100% - 28px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: #050810;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar inside browser mockup */
.browser-viewport::-webkit-scrollbar {
    width: 4px;
}
.browser-viewport::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}
.browser-viewport::-webkit-scrollbar-thumb {
    background: var(--gold-primary);
    border-radius: 4px;
}

/* Simulated Storefront Webpage (Inside Desktop Mockup) */
.simulated-store {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.simulated-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(5, 8, 16, 0.9);
    border-bottom: 1px solid rgba(255, 215, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.simnav-logo {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.05em;
}

.simnav-links {
    display: flex;
    gap: 8px;
    font-size: 7px;
    color: var(--text-muted);
}

.simulated-hero {
    width: 100%;
    overflow: hidden;
    background-color: #000000;
}

.simulated-hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
}

/* Variations grid styling */
.variations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.homepage-project-content .variations-grid {
    grid-template-columns: 1fr;
    max-height: 100%;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.variations-grid .img-container {
    animation: cardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.variations-grid .img-container.active {
    display: none !important;
}

@media (max-width: 576px) {
    .homepage-project-content .variations-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items visible since active is hidden */
    }
}

.simulated-grid-block {
    padding: 12px;
}

.simulated-title {
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    text-align: center;
}

.simulated-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.simulated-card {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #0E1321 0%, #080C14 100%);
    border: 1px solid rgba(255,215,0,0.04);
    border-radius: 4px;
}

/* Smartphone Mockup */
.phone-mockup {
    width: 170px; /* Highly compact phone mockup */
    aspect-ratio: 9 / 19.5;
    background: #080C14;
    border: 3px solid rgba(255, 215, 0, 0.15);
    border-radius: 28px;
    overflow: hidden;
    position: relative;
}

.phone-frame-bezel {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.phone-notch {
    height: 16px;
    background-color: #0E1321;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 20;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
}

.phone-speaker {
    width: 24px;
    height: 2px;
    background-color: #1E293B;
    border-radius: 1px;
}

.phone-camera {
    width: 4px;
    height: 4px;
    background-color: #1E293B;
    border-radius: 50%;
}

.phone-viewport {
    width: 100%;
    height: calc(100% - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: #050810;
    -webkit-overflow-scrolling: touch;
}

.phone-viewport::-webkit-scrollbar {
    width: 0px; /* hide scrollbars on simulated mobile */
}

/* Simulated Mobile Webpage (Inside Smartphone Mockup) */
.simulated-mobile-store {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.simulated-mobile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(5, 8, 16, 0.9);
    border-bottom: 1px solid rgba(255, 215, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 10;
}

.simnav-menu {
    font-size: 8px;
    color: var(--text-muted);
}

.simulated-mobile-hero {
    width: 100%;
    overflow: hidden;
}

.simulated-mobile-hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.simulated-mobile-content {
    padding: 10px;
}

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

.banners-footer {
    text-align: center;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.banners-footer p {
    font-size: 15px;
    color: var(--text-muted);
}

/* Responsive Overrides for Showcase Deck */
@media (max-width: 992px) {
    .banners-interactive-deck {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
    }
    .banners-control-panel {
        max-width: 100%;
        width: 100%;
    }
    .banners-device-canvas {
        width: 100%;
        padding: 30px;
        min-height: auto;
    }
}

/* ================================================================= */
/* 34. UGC & CGI MIXED VIDEO ADS SHOWCASE PANEL                      */
/* ================================================================= */
.video-ads-mix-container {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-ad-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.video-ad-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold-primary);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.08);
}

.video-ad-viewport {
    width: 100%;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

.mix-panel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.video-ad-card:hover .mix-panel-video {
    transform: scale(1.03);
}

.video-ad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 12, 20, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.video-ad-card:hover .video-ad-overlay {
    opacity: 1;
}

.video-ad-play {
    background: var(--gold-primary);
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    letter-spacing: 0.05em;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-ad-card:hover .video-ad-play {
    transform: scale(1);
}

.video-ad-details {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #0B0F19;
    border-top: 1px solid rgba(255, 215, 0, 0.03);
}

.video-ad-tag {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.video-ad-details h4 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    margin-top: 2px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .video-ads-mix-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .video-ads-mix-container {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        padding: 0 4px 16px !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .video-ads-mix-container::-webkit-scrollbar {
        height: 3px;
    }
    
    .video-ads-mix-container::-webkit-scrollbar-thumb {
        background-color: var(--gold-primary);
        border-radius: 3px;
    }

    .video-ad-card {
        flex: 0 0 160px !important; /* Elegant 160px width swipe track on mobile */
        scroll-snap-align: start !important;
    }
    
    .video-ad-viewport {
        aspect-ratio: 9 / 16 !important;
    }
    
    .video-ad-details h4 {
        font-size: 12px;
    }
}

/* ================================================================= */
/* 35. B2B ENTERPRISE TRUST SECTION                                  */
/* ================================================================= */
.b2b-trust {
    background-color: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.b2b-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
}

.b2b-card {
    border-radius: 20px;
    padding: 35px;
    position: relative;
    overflow: hidden;
}

.b2b-icon {
    font-size: 28px;
    margin-bottom: 20px;
    display: inline-block;
}

.b2b-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-white);
    margin-bottom: 12px;
    font-weight: 600;
}

.b2b-card p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

.hero-b2b-link {
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.hero-b2b-link a {
    color: var(--gold-soft);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    border-bottom: 1px dashed var(--gold-primary);
    padding-bottom: 1px;
}

.hero-b2b-link a:hover {
    color: var(--text-white);
    border-bottom-style: solid;
}

@media (max-width: 768px) {
    .b2b-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 10px 4px 20px;
        scroll-padding-left: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .b2b-grid::-webkit-scrollbar {
        display: none;
    }
    .b2b-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

/* Force visibility of Hero CTA buttons on all viewports, overriding any animation inline styles if they get stuck */
.hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
}

.hero-ctas .btn-primary,
.hero-ctas .btn-outline {
    opacity: 1 !important;
    transform: none !important;
    display: inline-flex !important;
}

/* Policy & Legal Page Styles */
.policy-page {
    padding-top: 140px;
    padding-bottom: 100px;
    background-color: var(--bg-primary);
    color: var(--text-white);
    min-height: 100vh;
}

.policy-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.policy-header {
    margin-bottom: 48px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 24px;
}

.policy-header h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-white);
    margin-bottom: 12px;
}

.policy-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold-primary);
    letter-spacing: 0.1em;
}

.policy-body h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-primary);
    margin-top: 36px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.policy-body p {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
}

.policy-body ul {
    list-style: none;
    margin-bottom: 24px;
}

.policy-body li {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.policy-body li::before {
    content: "⚡";
    position: absolute;
    left: 0;
    color: var(--gold-primary);
    font-size: 11px;
}



/* ═══════════════════════════════════════════════════════
   MOBILE PERFORMANCE OPTIMIZATIONS
   Target: Push mobile score from 68 → 80+
   Fixes: Forced reflow, GPU overdraw, heavy animations
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* --- Disable glow blobs (huge GPU hit on mobile) --- */
    .glow-blob {
        display: none !important;
    }

    /* --- Disable noise overlay (SVG filter = CPU cost) --- */
    .noise-overlay {
        display: none !important;
    }

    /* --- Custom cursor: hide on mobile (touch devices) --- */
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }

    /* Restore default cursor for mobile */
    * {
        cursor: auto !important;
    }

    /* --- Backdrop filter: too expensive on mobile GPUs --- */
    .service-card,
    .test-card,
    .pricing-card,
    .process-card,
    .faq-item,
    .b2b-card,
    .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(13, 18, 32, 0.95) !important;
    }

    .navbar {
        background: rgba(15, 20, 35, 0.98) !important;
    }

    /* --- Disable floating blob keyframe --- */
    .glow-blob.blob-1,
    .glow-blob.blob-2,
    .glow-blob.blob-3 {
        animation: none !important;
    }

    /* --- Reduce animation complexity on cards --- */
    .service-card:hover,
    .pricing-card:hover,
    .test-card:hover,
    .b2b-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* --- Disable hero background parallax text (causes reflow) --- */
    .hero-bg-text {
        display: none !important;
    }

    /* --- Remove will-change from elements that cause layer explosion --- */
    .glow-blob,
    .orbiting-card,
    .connection-line,
    .connection-line-particle {
        will-change: auto !important;
    }

    /* --- Optimize particles: mobile already limited in JS, 
          but kill the CSS animation on remaining ones --- */
    .particle {
        animation-duration: 30s !important; /* Slower = less repaints */
    }

    /* --- Loader: speed up on mobile to show content faster --- */
    #loader {
        animation-duration: 0.2s !important;
    }

    /* --- Scroll progress bar: simpler implementation --- */
    .scroll-progress {
        height: 2px;
    }

    /* --- Reduce box-shadow complexity on mobile --- */
    .hero-ctas .btn-primary,
    .hero-ctas .btn-outline {
        box-shadow: none !important;
    }

    /* --- Disable dial/circle animation on mobile --- */
    .center-logo-circle,
    .connection-line,
    .orbiting-card {
        animation: none !important;
    }

    /* --- Marquee: use CSS only, no JS velocity calculation --- */
    .marquee-content {
        will-change: auto !important;
    }
}

/* ─── Respect user's motion preference ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .glow-blob,
    .particle,
    .connection-line-particle,
    .marquee-content {
        animation: none !important;
    }

    .hero-bg-text {
        display: none !important;
    }
}

/* ─── Very small screens extra optimization ─── */
@media (max-width: 480px) {
    /* Kill ALL box shadows to reduce paint complexity */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Re-add only essential shadows for readability */
    .btn-primary {
        box-shadow: 0 4px 15px rgba(255, 138, 91, 0.3) !important;
    }

    /* Reduce font-size computation load */
    body {
        font-size: 15px;
    }
}

/* ─── Risk-Free Policy Section Styling ─── */
.payment-policy-box {
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 20px;
    padding: 40px;
    margin: 60px auto 40px auto;
    max-width: 1000px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.policy-header {
    text-align: center;
    margin-bottom: 35px;
}

.policy-badge {
    background: rgba(255, 215, 0, 0.1);
    color: var(--gold-primary);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.policy-header h3 {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
}

.policy-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.policy-step {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
}

.policy-step:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-5px);
    background: rgba(255, 215, 0, 0.01);
}

.policy-step-num {
    position: absolute;
    top: -15px;
    left: 20px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #b8860b, #ffd700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

.policy-step-title {
    font-size: 18px;
    color: var(--gold-soft);
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 5px;
}

.policy-step p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .policy-steps-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .payment-policy-box {
        padding: 30px 20px;
        margin: 40px 10px;
    }
    .policy-header h3 {
        font-size: 22px;
    }
}