:root {
            /* Brand Colors - B2B Marketing Agency Theme */
            --primary: 218 64% 33%;        /* Deep Navy Blue #1F3B8C */
            --primary-foreground: 0 0% 100%;
            --primary-light: 218 64% 45%;
            --primary-dark: 218 64% 25%;

            --accent: 47 94% 52%;          /* Warm Yellow #F9C80E */
            --accent-foreground: 0 0% 18%;
            --accent-light: 47 94% 65%;
            --accent-dark: 47 94% 40%;

            --background: 0 0% 96%;        /* Soft Grey #F5F5F5 */
            --foreground: 0 0% 18%;        /* Charcoal #2E2E2E */

            --card: 0 0% 100%;
            --card-foreground: 0 0% 18%;
            --muted: 0 0% 93%;
            --muted-foreground: 0 0% 40%;
            --border: 0 0% 90%;

            /* Gradients */
            --gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
            --gradient-accent: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-light)));
            --shadow-soft: 0 4px 20px -2px hsl(var(--primary) / 0.1);
            --shadow-card: 0 8px 30px -8px hsl(var(--primary) / 0.15);
            --shadow-button: 0 4px 15px -3px hsl(var(--accent) / 0.3);
        }

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
            line-height: 1.6;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Header Styles */
        .header {
            background: hsl(var(--card));
            border-bottom: 1px solid hsl(var(--border));
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 4rem;
        }

        .logo {
            font-size: 1.25rem;
            font-weight: bold;
            color: hsl(var(--primary));
        }

        .nav {
            display: flex;
            gap: 2rem;
        }

        .nav a {
            color: hsl(var(--foreground));
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

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

        .nav a.active {
            color: hsl(var(--primary));
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-dark)) 100%);
            color: hsl(var(--primary-foreground));
            padding: 5rem 0 8rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('/src/assets/hero-analytics.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0.2;
            z-index: 1;
        }

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

        .hero h1 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: bold;
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }

        .hero-accent {
            background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-light)));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
        }

        .btn-hero {
            background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-light)));
            color: hsl(var(--accent-foreground));
            padding: 1rem 2rem;
            border: none;
            border-radius: 0.75rem;
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-button);
            transition: all 0.3s ease;
        }

        .btn-hero:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -5px hsl(var(--accent) / 0.4);
        }

        /* Services Section */
        .services {
            padding: 5rem 0;
            background: hsl(var(--muted) / 0.3);
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: bold;
            margin-bottom: 1rem;
            color: hsl(var(--foreground));
        }

        .section-header p {
            font-size: 1.25rem;
            color: hsl(var(--muted-foreground));
            max-width: 600px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
        }

        .service-column {
            background: hsl(var(--card));
            border: 1px solid hsl(var(--border));
            border-radius: 0.75rem;
            padding: 2rem;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

        .service-column:hover {
            box-shadow: var(--shadow-card);
            transform: translateY(-4px);
        }

        .service-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: hsl(var(--foreground));
        }

        .service-list {
            list-style: none;
        }

        .service-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .service-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 0.125rem;
        }

        .service-icon.blue {
            background-color: #e0e7ff;
            color: #3b82f6;
        }

        .service-icon.purple {
            background-color: #f3e8ff;
            color: #a855f7;
        }

        .service-icon.green {
            background-color: #ecfdf5;
            color: #10b981;
        }

        .service-icon.orange {
            background-color: #fed7aa;
            color: #f97316;
        }

        .service-icon.red {
            background-color: #fecaca;
            color: #ef4444;
        }

        .service-icon.teal {
            background-color: #ccfbf1;
            color: #14b8a6;
        }

        .service-icon.indigo {
            background-color: #e0e7ff;
            color: #6366f1;
        }

        .service-icon.pink {
            background-color: #fdf2f8;
            color: #ec4899;
        }

        .service-icon.yellow {
            background-color: #fef3c7;
            color: #f59e0b;
        }

        .service-content h4 {
            font-weight: 500;
            margin-bottom: 0.25rem;
            color: hsl(var(--foreground));
        }

        .service-content p {
            font-size: 0.875rem;
            color: hsl(var(--muted-foreground));
            line-height: 1.5;
        }

        .icon {
            width: 1.25rem;
            height: 1.25rem;
        }

        /* Tools Section Styles */
        .tools-section {
            padding: 5rem 0;
            background: hsl(var(--card));
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .tool-category-card {
            background: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

        .tool-category-card:hover {
            box-shadow: var(--shadow-card);
            transform: translateY(-4px);
        }

        .tool-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

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

        .tool-content {
            padding: 1.5rem;
        }

        .category-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: hsl(var(--primary));
        }

        .tool-list {
            list-style: none;
        }

        .tool-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
        }

        .check-icon {
            width: 1.25rem;
            height: 1.25rem;
            background: hsl(var(--accent));
            color: hsl(var(--accent-foreground));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: bold;
            flex-shrink: 0;
        }

        .tool-name {
            color: hsl(var(--foreground));
            font-weight: 500;
        }

        /* Industries Section Styles */
        .industries-section {
            padding: 5rem 0;
            background: hsl(var(--muted) / 0.3);
        }

        .industries-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .industry-card {
            background: hsl(var(--card));
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            position: relative;
        }

        .industry-card:hover {
            box-shadow: var(--shadow-card);
            transform: translateY(-4px);
        }

        .industry-image {
            width: 100%;
            height: 250px;
            overflow: hidden;
            position: relative;
        }

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

        .industry-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, hsl(var(--primary) / 0.8), hsl(var(--primary-dark) / 0.9));
        }

        .industry-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem;
            color: hsl(var(--primary-foreground));
            z-index: 2;
        }

        .industry-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .industry-description {
            font-size: 1rem;
            opacity: 0.9;
            line-height: 1.5;
        }

        /* Why Choose Us Section Styles */
        .why-choose-section {
            padding: 5rem 0;
            background: hsl(var(--card));
        }

        .why-choose-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin-top: 2rem;
        }

        .why-choose-card {
            background: hsl(var(--background));
            border: 1px solid hsl(var(--border));
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

        .why-choose-card:hover {
            box-shadow: var(--shadow-card);
            transform: translateY(-4px);
        }

        .why-choose-image {
            width: 100%;
            height: 180px;
            overflow: hidden;
        }

        .why-choose-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .why-choose-content {
            padding: 1.5rem;
        }

        .why-choose-icon {
            width: 3rem;
            height: 3rem;
            background: hsl(var(--accent) / 0.1);
            color: hsl(var(--accent-dark));
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .why-choose-icon .icon {
            width: 1.5rem;
            height: 1.5rem;
        }

        .why-choose-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: hsl(var(--foreground));
        }

        .why-choose-description {
            color: hsl(var(--muted-foreground));
            line-height: 1.6;
        }

        /* Final CTA Section Styles */
        .final-cta-section {
            padding: 5rem 0;
            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-dark)));
            color: hsl(var(--primary-foreground));
            text-align: center;
        }

        .cta-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .cta-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: bold;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .cta-accent {
            background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-light)));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cta-description {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            line-height: 1.6;
        }

        .btn-cta {
            background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-light)));
            color: hsl(var(--accent-foreground));
            padding: 1rem 2rem;
            border: none;
            border-radius: 0.75rem;
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-button);
            transition: all 0.3s ease;
        }

        .btn-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -5px hsl(var(--accent) / 0.4);
        }

        @media (max-width: 768px) {
            .nav {
                display: none;
            }

            .services-grid, .tools-grid, .industries-grid, .why-choose-grid {
                grid-template-columns: 1fr;
            }

            .container {
                padding: 0 1rem;
            }

            .hero {
                padding: 3rem 0 5rem;
            }

            .services, .tools-section, .industries-section, .why-choose-section, .final-cta-section {
                padding: 3rem 0;
            }
        }