:root {
            --blue: #1266E2;
            --blue-dark: #0d4da8;
            --blue-light: #4a8ef5;
            --orange: #FFA500;
            --orange-light: #FFB732;
            --orange-glow: rgba(255, 165, 0, 0.25);
            --black: #000000;
            --black-soft: #0a0a0a;
            --black-card: #121212;
            --black-card-hover: #1a1a1a;
            --white: #ffffff;
            --white-soft: #f5f5f5;
            --white-muted: #b0b0b0;
            --text-primary: #ffffff;
            --text-secondary: #d0d0d0;
            --text-muted: #999999;
            --border-subtle: rgba(255, 255, 255, 0.12);
            --border-hover: rgba(18, 102, 226, 0.6);
            --font-heading: 'Space Grotesk', sans-serif;
            --font-body: 'Inter', sans-serif;
            --font-serif: 'Playfair Display', serif;
            --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --shadow-card: 0 25px 60px rgba(0, 0, 0, 0.5);
            --shadow-glow-blue: 0 0 50px rgba(18, 102, 226, 0.25);
            --shadow-glow-orange: 0 0 50px rgba(255, 165, 0, 0.2);
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --bg-main: #000000;
            --bg-section-alt: #050508;
            --bg-card: #121212;
            --bg-card-hover: #1a1a1a;
        }

        /* Light theme variables */
        [data-theme="light"] {
            --black: #f5f5f7;
            --black-soft: #ffffff;
            --black-card: #ffffff;
            --black-card-hover: #f0f0f5;
            --text-primary: #1a1a1a;
            --text-secondary: #4a4a55;
            --text-muted: #6b6b7b;
            --border-subtle: rgba(0, 0, 0, 0.1);
            --border-hover: rgba(18, 102, 226, 0.5);
            --shadow-card: 0 25px 60px rgba(0, 0, 0, 0.1);
            --shadow-glow-blue: 0 0 50px rgba(18, 102, 226, 0.15);
            --bg-main: #f5f5f7;
            --bg-section-alt: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #f5f5f7;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none !important;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 80px;
        }

        body {
            font-family: var(--font-body);
            background-color: var(--bg-main);
            color: var(--text-primary);
            overflow-x: hidden;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        ::selection {
            background: var(--blue);
            color: #fff;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: var(--black);
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--blue), var(--orange));
            border-radius: 10px;
        }

        /* Theme Toggle Button */
        .theme-toggle {
            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-secondary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: none;
            transition: var(--transition);
            font-size: 1.1rem;
            position: relative;
            margin-left: 10px;
        }
        .theme-toggle:hover {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
            transform: rotate(30deg);
        }
        .theme-toggle .fa-sun {
            display: none;
        }
        [data-theme="light"] .theme-toggle .fa-sun {
            display: inline;
        }
        [data-theme="light"] .theme-toggle .fa-moon {
            display: none;
        }

        /* Update background colors for light theme */
        [data-theme="light"] .hero-cinematic {
            background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 30%, #f0f0f5 60%, #fafafa 100%);
        }
        [data-theme="light"] .hero-cinematic::before {
            background:
                radial-gradient(ellipse at 20% 20%, rgba(18, 102, 226, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 60%, rgba(255, 165, 0, 0.06) 0%, transparent 50%);
        }
        [data-theme="light"] .navbar-cinematic.scrolled {
            background: rgba(255, 255, 255, 0.95);
            border-bottom: 1px solid var(--border-subtle);
        }
        [data-theme="light"] .navbar-collapse {
            background: rgba(255, 255, 255, 0);
        }
        [data-theme="light"] .hero-badge,
        [data-theme="light"] .sub-badge {
            background: rgba(18, 102, 226, 0.08);
            color: var(--blue-dark);
        }
        [data-theme="light"] .service-card,
        [data-theme="light"] .why-choose-card,
        [data-theme="light"] .industry-card,
        [data-theme="light"] .tech-tool-item,
        [data-theme="light"] .pricing-card,
        [data-theme="light"] .testimonial-card,
        [data-theme="light"] .faq-item,
        [data-theme="light"] .contact-panel,
        [data-theme="light"] .timeline-content,
        [data-theme="light"] .footer-newsletter {
            background: var(--bg-card);
            border-color: var(--border-subtle);
        }
        [data-theme="light"] .service-card:hover,
        [data-theme="light"] .why-choose-card:hover,
        [data-theme="light"] .industry-card:hover,
        [data-theme="light"] .tech-tool-item:hover,
        [data-theme="light"] .pricing-card:hover,
        [data-theme="light"] .testimonial-card:hover,
        [data-theme="light"] .faq-item:hover,
        [data-theme="light"] .contact-panel:hover {
            background: var(--bg-card-hover);
        }
        [data-theme="light"] .section-padding[style*="background:#050508"],
        [data-theme="light"] .how-it-works-section,
        [data-theme="light"] #testimonials,
        [data-theme="light"] #contact,
        [data-theme="light"] #industries,
        [data-theme="light"] #why-choose-us {
            background: var(--bg-section-alt) !important;
        }
        [data-theme="light"] .footer-main {
            background: #f5f5f7;
            border-top-color: var(--border-subtle);
        }
        [data-theme="light"] .form-control-cinematic {
            background: #f5f5f7 !important;
            color: #1a1a1a !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        [data-theme="light"] .form-control-cinematic::placeholder {
            color: #999;
        }
        [data-theme="light"] .chatbot-panel {
            background: #ffffff;
            border-color: rgba(0, 0, 0, 0.1);
        }
        [data-theme="light"] .chatbot-message.bot {
            background: #f5f5f7;
            border-color: rgba(0, 0, 0, 0.1);
            color: #4a4a55;
        }
        [data-theme="light"] .chatbot-input-area input {
            background: #f5f5f7;
            color: #1a1a1a;
            border-color: rgba(0, 0, 0, 0.1);
        }
        [data-theme="light"] .preloader {
            background: #ffffff;
        }
        [data-theme="light"] .preloader-logo {
            color: #1a1a1a;
        }
        [data-theme="light"] .cube-face {
            background: rgba(255, 255, 255, 0.85);
            border-color: rgba(18, 102, 226, 0.3);
        }
        [data-theme="light"] .timeline::before {
            background: linear-gradient(180deg, transparent, #1266E2, #FFA500, transparent);
        }
        [data-theme="light"] .timeline-dot {
            border-color: #f5f5f7;
        }
        [data-theme="light"] .pricing-card.featured {
            background: linear-gradient(180deg, rgba(18, 102, 226, 0.05), #ffffff 35%);
            border-color: var(--blue);
        }
        [data-theme="light"] .btn-3d-outline {
            border-color: var(--blue);
            color: var(--blue-dark);
        }
        [data-theme="light"] .btn-3d-outline:hover {
            background: rgba(18, 102, 226, 0.05);
            color: var(--blue-dark);
        }
        [data-theme="light"] .footer-social a {
            background: #ffffff;
            border-color: rgba(0, 0, 0, 0.1);
            color: #4a4a55;
        }
        [data-theme="light"] .chatbot-quick-replies button {
            background: rgba(18, 102, 226, 0.08);
            border-color: rgba(18, 102, 226, 0.3);
            color: var(--blue-dark);
        }
        [data-theme="light"] .contact-info-icon {
            background: rgba(18, 102, 226, 0.08);
            border-color: rgba(18, 102, 226, 0.3);
            color: var(--blue-dark);
        }
        [data-theme="light"] .service-icon {
            background: rgba(18, 102, 226, 0.08);
            border-color: rgba(18, 102, 226, 0.3);
            color: var(--blue-dark);
        }
        [data-theme="light"] .why-choose-icon {
            background: rgba(255, 165, 0, 0.08);
            border-color: rgba(255, 165, 0, 0.3);
            color: #cc8400;
        }
        [data-theme="light"] .industry-icon {
            background: rgba(18, 102, 226, 0.08);
            border-color: rgba(18, 102, 226, 0.3);
            color: var(--blue-dark);
        }
        [data-theme="light"] .tech-tool-icon {
            background: rgba(18, 102, 226, 0.08);
            color: var(--blue-dark);
        }
        [data-theme="light"] .p-3.rounded-3 {
            background: #ffffff !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }
        [data-theme="light"] .navbar-cinematic .nav-link {
            color: #4a4a55;
        }
        [data-theme="light"] .navbar-cinematic .nav-link:hover,
        [data-theme="light"] .navbar-cinematic .nav-link.active {
            color: #1a1a1a;
        }
        [data-theme="light"] .section-title {
            color: #1a1a1a;
        }
        [data-theme="light"] .section-title .highlight {
            color: var(--blue-dark);
        }
        [data-theme="light"] .hero-title-cinematic {
            color: #1a1a1a;
        }
        [data-theme="light"] .hero-title-cinematic .gradient-text {
            background: linear-gradient(135deg, #1a1a1a 20%, var(--blue-dark) 50%, #cc8400 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        [data-theme="light"] .hero-subtitle-cinematic {
            color: #4a4a55;
        }
        [data-theme="light"] .text-secondary {
            color: #4a4a55 !important;
        }
        [data-theme="light"] .section-desc {
            color: #4a4a55;
        }
        [data-theme="light"] .contact-info-item p a {
            color: #1a1a1a !important;
        }
        [data-theme="light"] .footer-links ul li a {
            color: #4a4a55;
        }
        [data-theme="light"] .footer-bottom {
            border-top-color: rgba(0, 0, 0, 0.1);
            color: #6b6b7b;
        }
        [data-theme="light"] .navbar-brand-cinematic img {
            filter: brightness(1) invert(1);
        }
        [data-theme="light"] .hero-stat-item p {
            color: #6b6b7b;
        }
        [data-theme="light"] .faq-question {
            color: #1a1a1a;
        }
        [data-theme="light"] .faq-answer {
            color: #4a4a55;
        }
        [data-theme="light"] .pricing-price {
            color: #1a1a1a;
        }
        [data-theme="light"] .pricing-price span {
            color: #6b6b7b;
        }
        [data-theme="light"] .pricing-features li {
            color: #4a4a55;
        }
        [data-theme="light"] .testimonial-card p {
            color: #4a4a55;
        }
        [data-theme="light"] .contact-info-item h6 {
            color: #6b6b7b !important;
        }

        .cursor-dot,
        .cursor-ring {
            position: fixed;
            pointer-events: none;
            z-index: 999999;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.25s ease, height 0.25s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
        }
        .cursor-dot {
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, var(--blue-light), var(--orange));
            box-shadow: 0 0 15px rgba(18, 102, 226, 0.8), 0 0 30px rgba(255, 165, 0, 0.4);
        }
        .cursor-ring {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(18, 102, 226, 0.6);
            background: transparent;
            transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
        }
        .cursor-ring.hovering {
            width: 60px;
            height: 60px;
            border-color: var(--orange);
            background: rgba(255, 165, 0, 0.08);
            box-shadow: 0 0 30px rgba(255, 165, 0, 0.2);
        }
        .cursor-ring.clicking {
            width: 30px;
            height: 30px;
            border-color: var(--orange-light);
            background: rgba(255, 165, 0, 0.15);
            transition: width 0.15s ease, height 0.15s ease;
        }
        .cursor-dot.hovering {
            width: 4px;
            height: 4px;
            background: var(--orange);
        }

        @media (max-width: 991px) {
            .cursor-dot, .cursor-ring { display: none; }
            * { cursor: auto !important; }
        }

        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--black);
            z-index: 99999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.7s ease, visibility 0.7s ease;
        }
        .preloader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        .preloader-logo {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 1.5rem;
        }
        [data-theme="light"] .preloader-logo {
            color: #1a1a1a;
        }
        .preloader-logo span {
            color: var(--blue);
        }
        .preloader-logo .accent {
            color: var(--orange);
        }
        .preloader-ring {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid rgba(18, 102, 226, 0.2);
            border-top-color: var(--blue);
            animation: spin 1s linear infinite;
            position: relative;
        }
        .preloader-ring::after {
            content: '';
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            border: 3px solid rgba(255, 165, 0, 0.2);
            border-top-color: var(--orange);
            animation: spin 1.6s linear infinite reverse;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .navbar-cinematic {
            padding: 16px 0;
            transition: var(--transition);
            background: transparent;
            z-index: 1000;
        }
        .navbar-cinematic.scrolled {
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(30px);
            border-bottom: 1px solid var(--border-subtle);
            padding: 10px 0;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }
        [data-theme="light"] .navbar-cinematic.scrolled {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand-cinematic img {
            width: 280px;
        }
        .navbar-cinematic .nav-link {
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 0.82rem;
            padding: 8px 16px !important;
            transition: var(--transition);
            position: relative;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .navbar-cinematic .nav-link:hover,
        .navbar-cinematic .nav-link.active {
            color: #fff;
        }
        [data-theme="light"] .navbar-cinematic .nav-link:hover,
        [data-theme="light"] .navbar-cinematic .nav-link.active {
            color: #1a1a1a;
        }
        .navbar-cinematic .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--blue), var(--orange));
            transition: var(--transition);
            border-radius: 2px;
        }
        .navbar-cinematic .nav-link:hover::after,
        .navbar-cinematic .nav-link.active::after {
            width: 60%;
        }
        .navbar-toggler {
            border: none;
            color: #fff;
            font-size: 1.5rem;
            padding: 8px;
        }
        [data-theme="light"] .navbar-toggler {
            color: #1a1a1a;
        }
        .navbar-toggler:focus {
            box-shadow: none;
        }

        .btn-3d {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.03em;
            text-decoration: none;
            transition: var(--transition);
            border: none;
            cursor: none;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            transform: perspective(600px) translateZ(0);
        }
        .btn-3d:hover {
            transform: perspective(600px) translateZ(20px);
        }
        .btn-3d-primary {
            background: linear-gradient(135deg, var(--blue), var(--blue-dark));
            color: #fff;
            box-shadow: 0 15px 40px rgba(18, 102, 226, 0.4);
        }
        .btn-3d-primary:hover {
            box-shadow: 0 20px 60px rgba(18, 102, 226, 0.6);
            color: #fff;
        }
        .btn-3d-orange {
            background: linear-gradient(135deg, var(--orange), var(--orange-light));
            color: #000;
            box-shadow: 0 15px 40px rgba(255, 165, 0, 0.35);
        }
        .btn-3d-orange:hover {
            box-shadow: 0 20px 60px rgba(255, 165, 0, 0.55);
            color: #000;
        }
        .btn-3d-outline {
            background: transparent;
            border: 2px solid var(--border-hover);
            color: #fff;
            box-shadow: 0 0 30px rgba(18, 102, 226, 0.1);
        }
        .btn-3d-outline:hover {
            border-color: var(--blue);
            background: rgba(18, 102, 226, 0.1);
            color: #fff;
            box-shadow: 0 0 50px rgba(18, 102, 226, 0.3);
        }

        .hero-cinematic {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            padding: 140px 0 80px;
            overflow: hidden;
            background: linear-gradient(135deg, #000000 0%, #0a0a10 30%, #050508 60%, #0a0a0a 100%);
        }
        .hero-cinematic::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(18, 102, 226, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 60%, rgba(255, 165, 0, 0.08) 0%, transparent 50%);
            pointer-events: none;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            border-radius: 50px;
            background: rgba(18, 102, 226, 0.12);
            border: 1px solid var(--border-hover);
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--blue-light);
            margin-bottom: 1.5rem;
            letter-spacing: 0.05em;
        }
        .hero-badge .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--orange);
            animation: pulseDot 2s infinite;
        }
        @keyframes pulseDot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(1.4); }
        }
        .hero-title-cinematic {
            font-family: var(--font-heading);
            font-size: clamp(2.8rem, 6vw, 5rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }
        .hero-title-cinematic .gradient-text {
            background: linear-gradient(135deg, #fff 20%, var(--blue-light) 50%, var(--orange) 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-subtitle-cinematic {
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 560px;
            line-height: 1.8;
            margin-bottom: 2rem;
        }
        .hero-stats-3d {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            padding-top: 2rem;
            border-top: 1px solid var(--border-subtle);
        }
        .hero-stat-item h3 {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 0.1rem;
        }
        .hero-stat-item h3 span {
            color: var(--blue-light);
        }
        .hero-stat-item h3 .orange {
            color: var(--orange);
        }
        .hero-stat-item p {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .hero-3d-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
            perspective: 1200px;
        }
        .hero-3d-cube {
            width: 240px;
            height: 240px;
            position: relative;
            transform-style: preserve-3d;
            animation: cubeRotate 20s linear infinite;
        }
        @keyframes cubeRotate {
            0% { transform: rotateX(0deg) rotateY(0deg); }
            100% { transform: rotateX(360deg) rotateY(360deg); }
        }
        .cube-face {
            position: absolute;
            width: 240px;
            height: 240px;
            border-radius: 20px;
            border: 2px solid rgba(18, 102, 226, 0.4);
            background: rgba(10, 10, 16, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--blue-light);
            backdrop-filter: blur(10px);
            box-shadow: 0 0 40px rgba(18, 102, 226, 0.1) inset;
            transition: var(--transition);
        }
        .cube-face:nth-child(2n) {
            border-color: rgba(255, 165, 0, 0.3);
            color: var(--orange);
        }
        .cube-face.front { transform: translateZ(120px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(120px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(120px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(120px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(120px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(120px); }

        .section-padding {
            padding: 100px 0;
            position: relative;
        }
        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 1rem;
            color: #fff;
            letter-spacing: -0.02em;
        }
        [data-theme="light"] .section-title {
            color: #1a1a1a;
        }
        .section-title .highlight {
            color: var(--blue-light);
            position: relative;
            display: inline-block;
        }
        [data-theme="light"] .section-title .highlight {
            color: var(--blue-dark);
        }
        .section-title .highlight::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
            border-radius: 3px;
        }
        .sub-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            border-radius: 50px;
            background: rgba(18, 102, 226, 0.12);
            border: 1px solid var(--border-hover);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--blue-light);
            margin-bottom: 1.2rem;
        }
        [data-theme="light"] .sub-badge {
            color: var(--blue-dark);
        }
        .sub-badge i {
            font-size: 0.5rem;
            color: var(--orange);
            animation: pulseDot 2s infinite;
        }
        .section-desc {
            color: var(--text-secondary);
            max-width: 600px;
            line-height: 1.8;
        }

        .service-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 2rem 1.8rem;
            height: 100%;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--blue), var(--orange));
            opacity: 0;
            transition: var(--transition);
        }
        .service-card:hover::before { opacity: 1; }
        .service-card:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-glow-blue);
            background: var(--bg-card-hover);
            transform: translateY(-6px);
        }
        .service-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: var(--blue-light);
            background: rgba(18, 102, 226, 0.12);
            border: 1px solid var(--border-hover);
            margin-bottom: 1.2rem;
            transition: var(--transition);
        }
        .service-card:hover .service-icon {
            background: var(--blue);
            color: #fff;
            box-shadow: 0 12px 30px rgba(18, 102, 226, 0.5);
            transform: scale(1.1);
        }
        .service-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; font-family: var(--font-heading); color: var(--text-primary); }
        .service-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; }
        .service-link { font-size: 0.8rem; font-weight: 600; color: var(--blue-light); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
        .service-link:hover { color: var(--orange); }

        .why-choose-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 2rem 1.5rem;
            height: 100%;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        .why-choose-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(18, 102, 226, 0.06) 0%, transparent 60%);
            opacity: 0;
            transition: var(--transition);
            pointer-events: none;
        }
        .why-choose-card:hover::after { opacity: 1; }
        .why-choose-card:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-glow-blue);
            transform: translateY(-5px);
        }
        .why-choose-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: var(--orange);
            background: rgba(255, 165, 0, 0.1);
            border: 1px solid rgba(255, 165, 0, 0.3);
            margin-bottom: 1rem;
            transition: var(--transition);
        }
        .why-choose-card:hover .why-choose-icon {
            background: var(--orange);
            color: #000;
            box-shadow: 0 10px 25px rgba(255, 165, 0, 0.4);
        }
        .why-choose-card h3 { color: var(--text-primary); }
        .why-choose-card p { color: var(--text-secondary); }

        .industry-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            transition: var(--transition);
            height: 100%;
        }
        .industry-card:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-glow-blue);
            transform: translateY(-5px);
            background: var(--bg-card-hover);
        }
        .industry-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--blue-light);
            background: rgba(18, 102, 226, 0.1);
            border: 1px solid var(--border-hover);
            margin: 0 auto 1rem;
            transition: var(--transition);
        }
        .industry-card:hover .industry-icon {
            background: var(--blue);
            color: #fff;
            box-shadow: 0 10px 30px rgba(18, 102, 226, 0.5);
            transform: scale(1.1);
        }
        .industry-card h3 { color: var(--text-primary); }
        .industry-card p { color: var(--text-muted); }

        .tech-tool-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; transition: var(--transition); }
        .tech-tool-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-glow-blue); transform: translateY(-3px); }
        .tech-tool-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(18, 102, 226, 0.12); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--blue-light); flex-shrink: 0; }
        .tech-tool-item span { color: var(--text-primary); }

        .how-it-works-section { background: var(--bg-section-alt); position: relative; overflow: hidden; }
        .timeline { position: relative; max-width: 900px; margin: 0 auto; }
        .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: linear-gradient(180deg, transparent, var(--blue), var(--orange), transparent); transform: translateX(-50%); }
        .timeline-item { position: relative; margin-bottom: 70px; width: 50%; padding: 0 40px; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; }
        .timeline-item.left { left: 0; text-align: right; transform: translateX(-60px); }
        .timeline-item.right { left: 50%; text-align: left; transform: translateX(60px); }
        .timeline-item.visible { opacity: 1; transform: translateX(0); }
        .timeline-content { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 20px 25px; display: inline-block; transition: var(--transition); position: relative; }
        .timeline-content:hover { border-color: var(--border-hover); box-shadow: var(--shadow-glow-blue); }
        .timeline-dot { position: absolute; top: 24px; width: 16px; height: 16px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 25px rgba(18, 102, 226, 0.9); z-index: 2; border: 3px solid #000; }
        [data-theme="light"] .timeline-dot { border-color: #f5f5f7; }
        .timeline-item.left .timeline-dot { right: -8px; }
        .timeline-item.right .timeline-dot { left: -8px; }
        .timeline-step { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--blue-light); margin-bottom: 0.3rem; }
        [data-theme="light"] .timeline-step { color: var(--blue-dark); }
        .timeline-content h4 { color: var(--text-primary); }
        .timeline-content p { color: var(--text-secondary); }

        .pricing-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2.2rem 1.8rem; height: 100%; display: flex; flex-direction: column; transition: var(--transition); }
        .pricing-card.featured { border-color: var(--blue); box-shadow: 0 0 70px rgba(18, 102, 226, 0.2); background: linear-gradient(180deg, rgba(18, 102, 226, 0.1), var(--bg-card) 35%); }
        .pricing-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-glow-blue); transform: translateY(-6px); }
        .pricing-badge { display: inline-block; width: max-content; padding: 4px 14px; border-radius: 50px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(18, 102, 226, 0.15); color: var(--blue-light); border: 1px solid var(--border-hover); margin-bottom: 1rem; }
        [data-theme="light"] .pricing-badge { color: var(--blue-dark); }
        .pricing-card.featured .pricing-badge { background: var(--orange); color: #000; border-color: var(--orange); }
        .pricing-price { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; line-height: 1; margin: 0.8rem 0; color: var(--text-primary); }
        .pricing-price span { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); }
        .pricing-features { list-style: none; padding: 0; margin: 1.5rem 0; flex-grow: 1; }
        .pricing-features li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-secondary); padding: 6px 0; }
        .pricing-features li i { color: var(--blue-light); font-size: 0.85rem; }
        .pricing-card.featured .pricing-features li i { color: var(--orange); }
        .pricing-card h4, .pricing-card p { color: var(--text-primary); }

        .testimonial-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2rem; height: 100%; transition: var(--transition); }
        .testimonial-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-glow-blue); }
        .testimonial-stars { color: var(--orange); font-size: 0.9rem; margin-bottom: 1rem; }
        .testimonial-card p { color: var(--text-secondary); }
        .testimonial-card h6 { color: var(--text-primary); }

        .faq-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; margin-bottom: 0.8rem; overflow: hidden; transition: var(--transition); }
        .faq-item.active { border-color: var(--border-hover); }
        .faq-question { padding: 1.2rem 1.5rem; cursor: none; font-weight: 600; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-heading); font-size: 0.95rem; color: var(--text-primary); }
        .faq-question i { transition: var(--transition); color: var(--blue-light); }
        .faq-item.active .faq-question i { transform: rotate(180deg); }
        .faq-answer { padding: 0 1.5rem 1.2rem; color: var(--text-secondary); display: none; font-size: 0.9rem; }
        .faq-item.active .faq-answer { display: block; }

        .contact-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2.5rem; height: 100%; transition: var(--transition); }
        .contact-panel:hover { box-shadow: var(--shadow-glow-blue); border-color: var(--border-hover); }
        .contact-panel h3 { color: var(--text-primary); }
        .contact-panel p { color: var(--text-secondary); }
        .form-control-cinematic { background: #000 !important; border: 1px solid var(--border-subtle) !important; color: #fff !important; border-radius: 12px !important; padding: 14px 18px !important; font-size: 0.9rem !important; }
        [data-theme="light"] .form-control-cinematic { background: #f5f5f7 !important; color: #1a1a1a !important; border-color: rgba(0, 0, 0, 0.1) !important; }
        .form-control-cinematic:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(18, 102, 226, 0.2) !important; }
        .form-control-cinematic::placeholder { color: var(--text-muted); }
        .contact-info-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
        .contact-info-item:last-child { border-bottom: none; }
        .contact-info-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(18, 102, 226, 0.12); border: 1px solid var(--border-hover); color: var(--blue-light); font-size: 1.1rem; flex-shrink: 0; }
        [data-theme="light"] .contact-info-icon { color: var(--blue-dark); }
        .contact-info-item h6 { color: var(--text-muted); }
        .contact-info-item p { color: var(--text-primary); }
        .contact-info-item a { color: var(--text-primary); }

        .footer-main { background: #050508; border-top: 1px solid var(--border-subtle); padding: 5rem 0 2rem; position: relative; overflow: hidden; }
        [data-theme="light"] .footer-main { background: #f5f5f7; }
        .footer-newsletter { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 3rem; }
        .footer-newsletter input { background: #000; border: 1px solid var(--border-subtle); color: #fff; border-radius: 50px; padding: 14px 22px; font-size: 0.9rem; }
        [data-theme="light"] .footer-newsletter input { background: #ffffff; color: #1a1a1a; }
        .footer-newsletter input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 102, 226, 0.2); outline: none; }
        .footer-links h6 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-primary); margin-bottom: 1rem; font-family: var(--font-heading); }
        .footer-links ul { list-style: none; padding: 0; margin: 0; }
        .footer-links ul li { margin-bottom: 8px; }
        .footer-links ul li a { font-size: 0.95rem; color: var(--text-secondary); text-decoration: none; transition: var(--transition); }
        .footer-links ul li a:hover { color: var(--blue-light); }
        .footer-social { display: flex; gap: 10px; margin-top: 1rem; }
        .footer-social a { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.9rem; transition: var(--transition); text-decoration: none; }
        .footer-social a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
        .footer-bottom { padding-top: 2rem; border-top: 1px solid var(--border-subtle); font-size: 0.8rem; color: var(--text-muted); }
        .footer-main p { color: var(--text-secondary); }

        .chatbot-wrapper { position: fixed; bottom: 30px; right: 30px; z-index: 10000; }
        .chatbot-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--orange)); border: none; cursor: none; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(18, 102, 226, 0.5); transition: var(--transition); }
        .chatbot-toggle:hover { transform: scale(1.1); box-shadow: 0 15px 40px rgba(18, 102, 226, 0.7); }
        .chatbot-panel { position: absolute; bottom: 80px; right: 0; width: 350px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); display: none; animation: slideUp 0.4s ease; }
        .chatbot-panel.open { display: block; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .chatbot-header { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 12px; }
        .chatbot-header .bot-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; }
        .chatbot-header h6 { margin: 0; color: #fff; font-weight: 600; }
        .chatbot-header .status { font-size: 0.7rem; color: #4ade80; display: flex; align-items: center; gap: 4px; }
        .chatbot-messages { padding: 1.5rem; min-height: 250px; max-height: 350px; overflow-y: auto; }
        .chatbot-message { max-width: 85%; margin-bottom: 1rem; padding: 12px 16px; border-radius: 16px; font-size: 0.85rem; line-height: 1.6; }
        .chatbot-message.bot { background: var(--bg-card-hover); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 16px 16px 16px 4px; }
        .chatbot-message.user { background: var(--blue); color: #fff; margin-left: auto; border-radius: 16px 16px 4px 16px; }
        .chatbot-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0.5rem 1.5rem 1.5rem; }
        .chatbot-quick-replies button { padding: 8px 16px; border-radius: 50px; background: rgba(18, 102, 226, 0.12); border: 1px solid var(--border-hover); color: var(--blue-light); font-size: 0.75rem; cursor: none; transition: var(--transition); }
        [data-theme="light"] .chatbot-quick-replies button { color: var(--blue-dark); }
        .chatbot-quick-replies button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
        .chatbot-input-area { padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); display: flex; gap: 10px; }
        .chatbot-input-area input { flex: 1; background: #000; border: 1px solid var(--border-subtle); color: #fff; border-radius: 50px; padding: 10px 18px; font-size: 0.85rem; }
        [data-theme="light"] .chatbot-input-area input { background: #f5f5f7; color: #1a1a1a; }
        .chatbot-input-area input:focus { border-color: var(--blue); outline: none; }
        .chatbot-input-area button { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); border: none; color: #fff; cursor: none; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
        .chatbot-input-area button:hover { background: var(--orange); }

        .float-buttons { position: fixed; bottom: 30px; left: 30px; z-index: 10000; display: flex; flex-direction: column; gap: 12px; }
        .float-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; text-decoration: none; transition: var(--transition); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }
        .float-btn:hover { transform: scale(1.1); }
        .float-btn.whatsapp { background: #25D366; box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); }
        .float-btn.call { background: var(--blue); box-shadow: 0 8px 25px rgba(18, 102, 226, 0.4); }

        @media (max-width: 991px) {
            .navbar-collapse {
                background: rgba(0, 0, 0, 0.98);
                border-radius: 0 0 20px 20px;
                padding: 18px 20px;
                margin-top: 12px;
                border: 1px solid var(--border-subtle);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
                backdrop-filter: blur(30px);
            }
            [data-theme="light"] .navbar-collapse {
                background: rgba(255, 255, 255, 0.98);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
            }
            .navbar-cinematic .nav-link {
                padding: 12px 16px !important;
                font-size: 0.85rem;
                text-align: center;
            }
            .navbar-cinematic .nav-link::after { display: none; }
            .navbar-cinematic .nav-item { text-align: center; }
            .navbar-cinematic .btn-3d { width: 100%; justify-content: center; margin-top: 10px !important; }
            .hero-cinematic { padding: 130px 0 60px; min-height: auto; }
            .hero-stats-3d { gap: 1.2rem; padding-top: 1.5rem; }
            .hero-stat-item h3 { font-size: 1.7rem; }
            .section-padding { padding: 70px 0; }
            .rounded-4.overflow-hidden.shadow-lg img { max-height: 350px; object-fit: cover; }
            .timeline { max-width: 100%; }
            .theme-toggle { margin-left: 0; margin-top: 10px; width: 100%; }
        }

        @media (max-width: 768px) {
            .navbar-cinematic { padding: 12px 0; }
            .navbar-cinematic.scrolled { padding: 8px 0; }
            .navbar-brand-cinematic img { width: 190px; }
            .navbar-toggler { font-size: 1.3rem; padding: 6px; }
            .hero-cinematic { padding: 110px 0 45px; }
            .hero-title-cinematic { font-size: 1.85rem; line-height: 1.2; }
            .hero-subtitle-cinematic { font-size: 0.95rem; line-height: 1.7; }
            .hero-badge { font-size: 0.7rem; padding: 6px 14px; gap: 6px; }
            .hero-stats-3d { gap: 1rem; padding-top: 1.2rem; }
            .hero-stat-item h3 { font-size: 1.35rem; }
            .hero-stat-item p { font-size: 0.62rem; letter-spacing: 0.05em; }
            .btn-3d { padding: 12px 20px; font-size: 0.75rem; gap: 8px; }
            .section-title { font-size: 1.55rem; }
            .sub-badge { font-size: 0.65rem; padding: 5px 12px; }
            .section-desc { font-size: 0.88rem; max-width: 100%; }
            .service-card { padding: 1.5rem 1.2rem; }
            .service-icon { width: 46px; height: 46px; font-size: 1.2rem; border-radius: 10px; margin-bottom: 1rem; }
            .service-card h3 { font-size: 1rem; }
            .service-card p { font-size: 0.8rem; }
            .service-link { font-size: 0.75rem; }
            .why-choose-card { padding: 1.5rem 1.2rem; }
            .why-choose-icon { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 10px; }
            .why-choose-card h3 { font-size: 1rem; }
            .why-choose-card p { font-size: 0.8rem; }
            .industry-card { padding: 1.2rem 0.8rem; }
            .industry-icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 0.7rem; }
            .industry-card h3 { font-size: 0.85rem; }
            .industry-card p { font-size: 0.7rem; }
            .tech-tool-item { padding: 10px 14px; }
            .tech-tool-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 8px; }
            .tech-tool-item span { font-size: 0.8rem; }
            .timeline::before { left: 16px; }
            .timeline-item { padding-left: 38px; padding-right: 0; margin-bottom: 35px; width: 100%; left: 0 !important; text-align: left; transform: translateX(0); }
            .timeline-item.right { left: 0 !important; }
            .timeline-dot { width: 12px; height: 12px; left: 10px !important; right: auto !important; top: 18px; }
            .timeline-content { padding: 14px 16px; border-radius: 12px; }
            .timeline-step { font-size: 0.9rem; }
            .timeline-content h4 { font-size: 0.95rem; }
            .timeline-content p { font-size: 0.8rem; }
            .pricing-card { padding: 1.5rem 1.2rem; }
            .pricing-price { font-size: 2rem; }
            .pricing-features li { font-size: 0.8rem; padding: 5px 0; }
            .pricing-badge { font-size: 0.6rem; padding: 3px 10px; }
            .testimonial-card { padding: 1.5rem; }
            .testimonial-stars { font-size: 0.8rem; }
            .testimonial-card p { font-size: 0.85rem; }
            .faq-question { padding: 1rem 1.2rem; font-size: 0.85rem; }
            .faq-answer { padding: 0 1.2rem 1rem; font-size: 0.82rem; }
            .contact-panel { padding: 1.5rem; }
            .contact-panel h3 { font-size: 1.2rem; }
            .form-control-cinematic { padding: 11px 14px !important; font-size: 0.85rem !important; border-radius: 10px !important; }
            .contact-info-item { padding: 12px 0; }
            .contact-info-icon { width: 38px; height: 38px; font-size: 0.95rem; border-radius: 10px; }
            .contact-info-item h6 { font-size: 0.7rem; }
            .contact-info-item p { font-size: 0.85rem; }
            .footer-main { padding: 3rem 0 1.5rem; }
            .footer-newsletter { padding: 1.5rem; margin-bottom: 2rem; }
            .footer-newsletter input { padding: 11px 16px; font-size: 0.85rem; }
            .footer-newsletter .btn-3d { padding: 10px 16px; font-size: 0.7rem; }
            .footer-links h6 { font-size: 0.8rem; }
            .footer-links ul li a { font-size: 0.85rem; }
            .footer-social a { width: 36px; height: 36px; font-size: 0.8rem; }
            .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; font-size: 0.7rem; }
            .chatbot-panel { width: calc(100vw - 30px); right: 0; bottom: 75px; max-height: 75vh; border-radius: 16px; }
            .chatbot-header { padding: 1rem 1.2rem; }
            .chatbot-header .bot-avatar { width: 34px; height: 34px; font-size: 1rem; }
            .chatbot-header h6 { font-size: 0.85rem; }
            .chatbot-header .status { font-size: 0.65rem; }
            .chatbot-messages { padding: 1rem; min-height: 160px; max-height: 250px; }
            .chatbot-message { font-size: 0.8rem; padding: 10px 14px; margin-bottom: 0.8rem; }
            .chatbot-quick-replies { padding: 0.4rem 1rem 1rem; gap: 6px; }
            .chatbot-quick-replies button { padding: 6px 12px; font-size: 0.7rem; }
            .chatbot-input-area { padding: 0.8rem 1rem; gap: 8px; }
            .chatbot-input-area input { padding: 8px 14px; font-size: 0.8rem; }
            .chatbot-input-area button { width: 36px; height: 36px; font-size: 0.85rem; }
            .chatbot-toggle { width: 50px; height: 50px; font-size: 1.2rem; }
            .float-btn { width: 42px; height: 42px; font-size: 1rem; }
            .float-buttons { gap: 8px; left: 15px; bottom: 15px; }
            .chatbot-wrapper { right: 15px; bottom: 15px; }
            #contactSuccessMsg { font-size: 0.85rem; padding: 10px 14px; }
        }

        @media (max-width: 576px) {
            .hero-cinematic { padding: 95px 0 35px; }
            .hero-title-cinematic { font-size: 1.55rem; }
            .hero-subtitle-cinematic { font-size: 0.88rem; }
            .hero-badge { font-size: 0.65rem; padding: 5px 12px; }
            .hero-stats-3d { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; text-align: center; }
            .hero-stat-item { padding: 8px; }
            .hero-stat-item h3 { font-size: 1.2rem; }
            .hero-stat-item p { font-size: 0.6rem; }
            .hero-cinematic .d-flex.flex-wrap.gap-3 { flex-direction: column; }
            .hero-cinematic .btn-3d { width: 100%; justify-content: center; text-align: center; }
            .section-padding { padding: 50px 0; }
            .section-title { font-size: 1.4rem; }
            .sub-badge { font-size: 0.6rem; padding: 4px 10px; }
            .section-desc { font-size: 0.85rem; }
            .service-card, .why-choose-card, .pricing-card, .testimonial-card, .contact-panel { padding: 1.2rem 1rem; }
            .service-icon { width: 40px; height: 40px; font-size: 1rem; }
            .service-card h3 { font-size: 0.95rem; }
            .service-card p { font-size: 0.78rem; }
            .pricing-price { font-size: 1.7rem; }
            .pricing-features li { font-size: 0.75rem; }
            .pricing-badge { font-size: 0.55rem; padding: 3px 8px; }
            .timeline-item { padding-left: 32px; margin-bottom: 25px; }
            .timeline-content { padding: 12px 14px; }
            .timeline-step { font-size: 0.8rem; }
            .timeline-content h4 { font-size: 0.85rem; }
            .timeline-content p { font-size: 0.75rem; }
            .contact-info-item p { font-size: 0.78rem; word-break: break-word; }
            .contact-info-item a { font-size: 0.78rem; word-break: break-all; }
            .footer-links { margin-bottom: 0.8rem; }
            .footer-links h6 { font-size: 0.75rem; margin-bottom: 0.6rem; }
            .footer-links ul li { margin-bottom: 5px; }
            .footer-links ul li a { font-size: 0.78rem; }
            .footer-social a { width: 32px; height: 32px; font-size: 0.75rem; }
            .footer-bottom { font-size: 0.65rem; padding-top: 1rem; }
            .chatbot-panel { width: calc(100vw - 20px); bottom: 70px; right: 0; }
            .chatbot-messages { min-height: 140px; max-height: 200px; }
            .chatbot-message { font-size: 0.75rem; padding: 8px 12px; }
            .chatbot-quick-replies button { font-size: 0.65rem; padding: 5px 10px; }
            .theme-toggle { width: auto; margin: 5px 0; }
        }

        @media (max-width: 400px) {
            .hero-title-cinematic { font-size: 1.4rem; }
            .hero-subtitle-cinematic { font-size: 0.82rem; }
            .hero-badge { font-size: 0.6rem; }
            .hero-stats-3d { gap: 0.5rem; }
            .hero-stat-item h3 { font-size: 1.05rem; }
            .hero-stat-item p { font-size: 0.55rem; }
            .section-title { font-size: 1.25rem; }
            .btn-3d { padding: 10px 14px; font-size: 0.65rem; gap: 5px; }
            .section-padding { padding: 40px 0; }
            .service-card, .why-choose-card, .pricing-card, .testimonial-card, .contact-panel { padding: 1rem 0.8rem; }
            .pricing-price { font-size: 1.5rem; }
            .pricing-badge { font-size: 0.5rem; }
            .pricing-features li { font-size: 0.7rem; }
            .navbar-brand-cinematic img { width: 160px; }
            .faq-question { font-size: 0.8rem; padding: 0.8rem 1rem; }
            .faq-answer { font-size: 0.78rem; padding: 0 1rem 0.8rem; }
            .chatbot-toggle { width: 44px; height: 44px; font-size: 1rem; }
            .float-btn { width: 38px; height: 38px; font-size: 0.9rem; }
            .chatbot-panel { width: calc(100vw - 16px); bottom: 62px; }
            .chatbot-input-area input { font-size: 0.75rem; padding: 6px 10px; }
            .chatbot-input-area button { width: 32px; height: 32px; }
        }

        @media (max-width: 360px) {
            .hero-title-cinematic { font-size: 1.3rem; }
            .section-title { font-size: 1.2rem; }
            .hero-stats-3d { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
            .btn-3d { font-size: 0.6rem; padding: 8px 12px; }
            .navbar-brand-cinematic img { width: 140px; }
            .pricing-price { font-size: 1.4rem; }
            .contact-info-item { flex-direction: column; gap: 8px; }
            .contact-info-icon { width: 34px; height: 34px; font-size: 0.85rem; }
        }

        @keyframes typingBounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-4px); opacity: 1; }
        }
        .visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0,0,0,0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
   

 /* ==========================================================
   SERVICES PAGE – THEME‑AWARE STYLES (What We Offer & Hero)
   ========================================================== */

/* ---------- Services Hero Section ---------- */
.services-hero {
  padding: 150px 0 80px;
  background: linear-gradient(135deg, #000000 0%, #0a0a10 30%, #050508 60%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;
}

[data-theme="light"] .services-hero {
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 30%, #f0f0f5 60%, #fafafa 100%);
}

.services-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(18, 102, 226, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 165, 0, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.services-hero .container {
  position: relative;
  z-index: 1;
}

.services-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(18, 102, 226, 0.12);
  border: 1px solid var(--border-hover);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .services-hero .hero-badge {
  background: rgba(18, 102, 226, 0.08);
  color: var(--blue-dark);
}

.services-hero .hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulseDot 2s infinite;
}

.services-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: #ffffff; /* dark theme default */
  transition: color 0.3s ease;
}

[data-theme="light"] .services-hero h1 {
  color: #1a1a1a;
}

.services-hero .gradient-text {
  background: linear-gradient(135deg, #ffffff 20%, var(--blue-light) 50%, var(--orange) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .services-hero .gradient-text {
  background: linear-gradient(135deg, #1a1a1a 20%, var(--blue-dark) 50%, #cc8400 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 700px;
  margin-bottom: 2rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .services-hero p {
  color: #4a4a55;
}

/* ---------- Section Titles & Badges (What We Offer) ---------- */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: #ffffff; /* dark default */
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

[data-theme="light"] .section-title {
  color: #1a1a1a;
}

.section-title .highlight {
  color: var(--blue-light);
  position: relative;
  display: inline-block;
}

[data-theme="light"] .section-title .highlight {
  color: var(--blue-dark);
}

.section-title .highlight::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
  border-radius: 3px;
}

.sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(18, 102, 226, 0.12);
  border: 1px solid var(--border-hover);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1.2rem;
  transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .sub-badge {
  background: rgba(18, 102, 226, 0.08);
  border-color: rgba(18, 102, 226, 0.3);
  color: var(--blue-dark);
}

.sub-badge i {
  font-size: 0.5rem;
  color: var(--orange);
  animation: pulseDot 2s infinite;
}

.section-desc {
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.8;
  transition: color 0.3s ease;
}

[data-theme="light"] .section-desc {
  color: #4a4a55;
}

/* ---------- Horizontal Service Cards ---------- */
.service-card-horizontal {
  background: var(--bg-card);      /* dark: #121212, light: #ffffff */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  height: 100%;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.service-card-horizontal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  opacity: 0;
  transition: var(--transition);
}

.service-card-horizontal:hover::before {
  opacity: 1;
}

.service-card-horizontal:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow-blue);
  background: var(--bg-card-hover);   /* dark: #1a1a1a, light: #f0f0f5 */
  transform: translateY(-5px);
}

.service-card-horizontal .service-icon-new {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--blue-light);
  background: rgba(18, 102, 226, 0.12);
  border: 1px solid var(--border-hover);
  transition: var(--transition);
}

[data-theme="light"] .service-card-horizontal .service-icon-new {
  background: rgba(18, 102, 226, 0.08);
  border-color: rgba(18, 102, 226, 0.3);
  color: var(--blue-dark);
}

.service-card-horizontal:hover .service-icon-new {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(18, 102, 226, 0.5);
  transform: scale(1.05);
}

.service-card-horizontal .service-content h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);      /* dark: #fff, light: #1a1a1a */
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .service-card-horizontal .service-content h3 {
  color: #1a1a1a;
}

.service-card-horizontal .service-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .service-card-horizontal .service-content p {
  color: #4a4a55;
}

.service-card-horizontal .service-link-new {
  color: var(--blue-light);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

[data-theme="light"] .service-card-horizontal .service-link-new {
  color: var(--blue-dark);
}

.service-card-horizontal .service-link-new:hover {
  color: var(--orange);
}

/* ---------- Keyframe ---------- */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}


/* ==========================================================
   CONTACT PAGE – THEME‑AWARE STYLES (Dark & Light)
   ========================================================== */

/* ---------- Contact Hero ---------- */
.contact-hero {
  padding: 150px 0 60px;
  background: linear-gradient(135deg, #000000 0%, #0a0a10 30%, #050508 60%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: background 0.5s ease;
}

[data-theme="light"] .contact-hero {
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 30%, #f0f0f5 60%, #fafafa 100%);
}

.contact-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(18, 102, 226, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 165, 0, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.contact-hero .container {
  position: relative;
  z-index: 1;
}

.contact-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(18, 102, 226, 0.12);
  border: 1px solid var(--border-hover);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .contact-hero .hero-badge {
  background: rgba(18, 102, 226, 0.08);
  color: var(--blue-dark);
}

.contact-hero .hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulseDot 2s infinite;
}

.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: #ffffff;
  transition: color 0.3s ease;
}

[data-theme="light"] .contact-hero h1 {
  color: #1a1a1a;
}

.contact-hero .gradient-text {
  background: linear-gradient(135deg, #ffffff 20%, var(--blue-light) 50%, var(--orange) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .contact-hero .gradient-text {
  background: linear-gradient(135deg, #1a1a1a 20%, var(--blue-dark) 50%, #cc8400 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .contact-hero p {
  color: #4a4a55;
}

/* ---------- Contact Info Cards ---------- */
.contact-info-card {
  background: var(--bg-card);          /* dark: #121212, light: #ffffff */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
  transition: var(--transition);
}

.contact-info-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow-blue);
  transform: translateY(-5px);
  background: var(--bg-card-hover);    /* subtle hover background */
}

.contact-info-card .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--blue-light);
  background: rgba(18, 102, 226, 0.12);
  border: 1px solid var(--border-hover);
  margin: 0 auto 1rem;
  transition: var(--transition);
}

[data-theme="light"] .contact-info-card .icon-circle {
  background: rgba(18, 102, 226, 0.08);
  border-color: rgba(18, 102, 226, 0.3);
  color: var(--blue-dark);
}

.contact-info-card:hover .icon-circle {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(18, 102, 226, 0.5);
  transform: scale(1.1);
}

.contact-info-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);          /* dark: #fff, light: #1a1a1a */
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .contact-info-card h4 {
  color: #1a1a1a;
}

.contact-info-card p,
.contact-info-card a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  transition: var(--transition);
}

[data-theme="light"] .contact-info-card p,
[data-theme="light"] .contact-info-card a {
  color: #4a4a55;
}

.contact-info-card a:hover {
  color: var(--blue-light);
}

[data-theme="light"] .contact-info-card a:hover {
  color: var(--blue-dark);
}

/* ---------- Contact Form Panel ---------- */
.contact-form-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: var(--transition);
}

.contact-form-panel:hover {
  box-shadow: var(--shadow-glow-blue);
  border-color: var(--border-hover);
}

/* Form controls */
.form-control-cinematic {
  background: #000 !important;
  border: 1px solid var(--border-subtle) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 0.9rem !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .form-control-cinematic {
  background: #f5f5f7 !important;
  color: #1a1a1a !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.form-control-cinematic:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(18, 102, 226, 0.2) !important;
}

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

[data-theme="light"] .form-control-cinematic::placeholder {
  color: #999999;
}

/* ---------- Map Container ---------- */
.map-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  margin-top: 2rem;
  transition: border-color 0.3s ease;
}

[data-theme="light"] .map-container {
  border-color: rgba(0, 0, 0, 0.1);
}

.map-container iframe {
  width: 100%;
  height: 350px;
  border: none;
  filter: grayscale(100%) invert(90%) contrast(83%); /* dark mode map invert */
  transition: filter 0.5s ease;
}

/* Light mode – revert map to normal colors */
[data-theme="light"] .map-container iframe {
  filter: none;
}

/* ---------- Keyframe ---------- */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* ---------- Mobile responsiveness (unchanged, but with theme awareness) ---------- */
@media (max-width: 768px) {
  .contact-hero {
    padding: 120px 0 40px;
  }
  .contact-form-panel {
    padding: 1.5rem;
  }
  .contact-info-card {
    padding: 1.5rem 1rem;
  }
  .map-container iframe {
    height: 250px;
  }
}




/* ==========================================================
   PRIVACY POLICY PAGE – THEME‑AWARE STYLES (Dark & Light)
   ========================================================== */

/* ---------- Privacy Hero ---------- */
.privacy-hero {
  padding: 150px 0 60px;
  background: linear-gradient(135deg, #000000 0%, #0a0a10 30%, #050508 60%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: background 0.5s ease;
}

[data-theme="light"] .privacy-hero {
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 30%, #f0f0f5 60%, #fafafa 100%);
}

.privacy-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(18, 102, 226, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 165, 0, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.privacy-hero .container {
  position: relative;
  z-index: 1;
}

.privacy-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(18, 102, 226, 0.12);
  border: 1px solid var(--border-hover);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="light"] .privacy-hero .hero-badge {
  background: rgba(18, 102, 226, 0.08);
  border-color: rgba(18, 102, 226, 0.3);
  color: var(--blue-dark);
}

.privacy-hero .hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulseDot 2s infinite;
}

.privacy-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: #ffffff;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-hero h1 {
  color: #1a1a1a;
}

.privacy-hero .gradient-text {
  background: linear-gradient(135deg, #ffffff 20%, var(--blue-light) 50%, var(--orange) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .privacy-hero .gradient-text {
  background: linear-gradient(135deg, #1a1a1a 20%, var(--blue-dark) 50%, #cc8400 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.privacy-hero p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-hero p {
  color: #4a4a55;
}

/* ---------- Privacy Content Card ---------- */
.privacy-content {
  background: var(--bg-card);              /* dark: #121212, light: #ffffff */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 3rem;
  margin: 0 auto 5rem;
  max-width: 900px;
  box-shadow: var(--shadow-card);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.privacy-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);             /* dark: #fff, light: #1a1a1a */
  margin-top: 2rem;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-content h2 {
  color: #1a1a1a;
}

.privacy-content h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--blue-light);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-content h3 {
  color: var(--blue-dark);
}

.privacy-content p,
.privacy-content ul {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-content p,
[data-theme="light"] .privacy-content ul {
  color: #4a4a55;
}

.privacy-content ul {
  padding-left: 1.5rem;
}

.privacy-content ul li {
  margin-bottom: 0.5rem;
}

.privacy-content a {
  color: var(--blue-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-content a {
  color: var(--blue-dark);
}

.privacy-content a:hover {
  color: var(--orange);
}

.privacy-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 2rem;
  text-align: center;
  transition: color 0.3s ease;
}

[data-theme="light"] .privacy-updated {
  color: #6b6b7b;
}

/* ---------- Mobile Responsiveness ---------- */
@media (max-width: 768px) {
  .privacy-content {
    padding: 1.5rem;
  }
  .privacy-hero {
    padding: 120px 0 40px;
  }
}





















/* NEWSLETTER SECTION STYLES - FormSubmit Version */
.newsletter-section {
    padding: 80px 0;
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(18, 102, 226, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(255, 165, 0, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.newsletter-wrapper {
    background: linear-gradient(135deg, var(--black-card) 0%, var(--black-card-hover) 50%, var(--black-card) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

[data-theme="light"] .newsletter-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 50%, #ffffff 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.newsletter-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(18, 102, 226, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatGlow 8s ease-in-out infinite;
}

.newsletter-wrapper::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatGlow 10s ease-in-out infinite reverse;
}

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(18, 102, 226, 0.12);
    border: 1px solid var(--border-hover);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .newsletter-badge {
    background: rgba(18, 102, 226, 0.08);
    color: var(--blue-dark);
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.newsletter-title .highlight {
    color: var(--blue-light);
    position: relative;
    display: inline-block;
}

[data-theme="light"] .newsletter-title .highlight {
    color: var(--blue-dark);
}

.newsletter-title .highlight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
    border-radius: 3px;
}

.newsletter-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.newsletter-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.benefit-item i {
    color: var(--blue-light);
    font-size: 1rem;
}

[data-theme="light"] .benefit-item i {
    color: var(--blue-dark);
}

.newsletter-form-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

[data-theme="light"] .newsletter-form-wrapper {
    background: rgba(245, 245, 247, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}

.newsletter-input {
    width: 100%;
    padding: 14px 20px 14px 45px;
    background: #000;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    transition: var(--transition);
    outline: none;
}

[data-theme="light"] .newsletter-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

.newsletter-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(18, 102, 226, 0.2);
}

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

.newsletter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(18, 102, 226, 0.4);
}

.newsletter-btn:hover {
    box-shadow: 0 15px 40px rgba(18, 102, 226, 0.6);
    transform: translateY(-2px);
}

.newsletter-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(18, 102, 226, 0.3);
}

.newsletter-btn .btn-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.8rem;
    transition: var(--transition);
}

.newsletter-btn:hover .btn-icon {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.3);
}

.newsletter-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.newsletter-privacy i {
    color: var(--blue-light);
}

[data-theme="light"] .newsletter-privacy i {
    color: var(--blue-dark);
}

.newsletter-success {
    margin-top: 15px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    color: #22c55e;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 50px 0;
    }
    
    .newsletter-wrapper {
        padding: 30px 20px;
    }
    
    .newsletter-form-wrapper {
        padding: 20px;
    }
    
    .newsletter-title {
        font-size: 1.5rem;
    }
    
    .newsletter-desc {
        font-size: 0.85rem;
    }
    
    .newsletter-input {
        padding: 12px 15px 12px 40px;
        font-size: 0.85rem;
    }
    
    .newsletter-btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .newsletter-wrapper {
        padding: 25px 15px;
    }
    
    .newsletter-form-wrapper {
        padding: 15px;
    }
    
    .newsletter-title {
        font-size: 1.3rem;
    }
    
    .benefit-item {
        font-size: 0.78rem;
    }
    
    .newsletter-input {
        padding: 10px 12px 10px 35px;
        font-size: 0.8rem;
    }
    
    .newsletter-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
}




/* NEWSLETTER SECTION STYLES */
/* .newsletter-section {
    padding: 80px 0;
    background: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(18, 102, 226, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(255, 165, 0, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.newsletter-wrapper {
    background: linear-gradient(135deg, var(--black-card) 0%, var(--black-card-hover) 50%, var(--black-card) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

[data-theme="light"] .newsletter-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 50%, #ffffff 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.newsletter-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(18, 102, 226, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatGlow 8s ease-in-out infinite;
}

.newsletter-wrapper::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: floatGlow 10s ease-in-out infinite reverse;
}

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(18, 102, 226, 0.12);
    border: 1px solid var(--border-hover);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin-bottom: 1.2rem;
}

[data-theme="light"] .newsletter-badge {
    background: rgba(18, 102, 226, 0.08);
    color: var(--blue-dark);
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.newsletter-title .highlight {
    color: var(--blue-light);
    position: relative;
    display: inline-block;
}

[data-theme="light"] .newsletter-title .highlight {
    color: var(--blue-dark);
}

.newsletter-title .highlight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--orange), transparent);
    border-radius: 3px;
}

.newsletter-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.newsletter-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.benefit-item i {
    color: var(--blue-light);
    font-size: 1rem;
}

[data-theme="light"] .benefit-item i {
    color: var(--blue-dark);
}

.newsletter-form-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: var(--transition);
}

[data-theme="light"] .newsletter-form-wrapper {
    background: rgba(245, 245, 247, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}

.newsletter-input {
    width: 100%;
    padding: 14px 20px 14px 45px;
    background: #000;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    transition: var(--transition);
    outline: none;
}

[data-theme="light"] .newsletter-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

.newsletter-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(18, 102, 226, 0.2);
}

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

.newsletter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(18, 102, 226, 0.4);
}

.newsletter-btn:hover {
    box-shadow: 0 15px 40px rgba(18, 102, 226, 0.6);
    transform: translateY(-2px);
}

.newsletter-btn .btn-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.8rem;
    transition: var(--transition);
}

.newsletter-btn:hover .btn-icon {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.3);
}

.newsletter-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.newsletter-privacy i {
    color: var(--blue-light);
}

[data-theme="light"] .newsletter-privacy i {
    color: var(--blue-dark);
}

.newsletter-success {
    margin-top: 15px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    color: #22c55e;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 50px 0;
    }
    
    .newsletter-wrapper {
        padding: 30px 20px;
    }
    
    .newsletter-form-wrapper {
        padding: 20px;
    }
    
    .newsletter-title {
        font-size: 1.5rem;
    }
    
    .newsletter-desc {
        font-size: 0.85rem;
    }
    
    .newsletter-input {
        padding: 12px 15px 12px 40px;
        font-size: 0.85rem;
    }
    
    .newsletter-btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .newsletter-wrapper {
        padding: 25px 15px;
    }
    
    .newsletter-form-wrapper {
        padding: 15px;
    }
    
    .newsletter-title {
        font-size: 1.3rem;
    }
    
    .benefit-item {
        font-size: 0.78rem;
    }
    
    .newsletter-input {
        padding: 10px 12px 10px 35px;
        font-size: 0.8rem;
    }
    
    .newsletter-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
} */