.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-8);
        }

        /* Mobile-First Hero Section */
        .hero {
            /* background: var(--bg-gradient); */
            background: var(--bg-secondary);
            padding: var(--spacing-12) 0 var(--spacing-8);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
            pointer-events: none;
        }

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

        .hero h1 {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: var(--text-white);
            margin-bottom: var(--spacing-4);
            line-height: var(--line-height-tight);
        }

        .hero p {
            font-size: var(--font-size-lg);
            color: var(--text-white);
            opacity: 0.9;
            margin-bottom: var(--spacing-8);
            line-height: var(--line-height-relaxed);
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: var(--spacing-6);
            flex-wrap: wrap;
            margin-top: var(--spacing-6);
        }

        .stat {
            text-align: center;
            color: var(--text-white);
        }

        .stat-number {
            display: block;
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            line-height: 1;
        }

        .stat-label {
            font-size: var(--font-size-sm);
            opacity: 0.8;
            margin-top: var(--spacing-1);
        }

        /* Mission Vision Cards */
        .mission-vision {
            padding: var(--spacing-8) 0;
            background: var(--bg-secondary);
        }

        .cards-grid {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-6);
        }

        .card {
            background: var(--bg-card);
            padding: var(--spacing-6);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            text-align: center;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto var(--spacing-4);
            background: var(--primary-color);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-white);
        }

        .vision-card .card-icon {
            background: var(--secondary-color);
        }

        .card h2 {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-3);
        }

        .card p {
            color: var(--text-secondary);
            line-height: var(--line-height-relaxed);
        }

        /* Features Section */
        .features {
            padding: var(--spacing-8) 0;
        }

        .section-title {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: var(--text-primary);
            text-align: center;
            margin-bottom: var(--spacing-8);
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-4);
            padding: var(--spacing-4);
            margin-bottom: var(--spacing-4);
            background: var(--bg-card);
            border-radius: var(--radius-base);
            border: 1px solid var(--border-color);
            transition: var(--transition-base);
        }

        .feature-item:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            border-radius: var(--radius-base);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-white);
            flex-shrink: 0;
        }

        .feature-content h3 {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-2);
        }

        .feature-content p {
            color: var(--text-secondary);
            font-size: var(--font-size-base);
            line-height: var(--line-height-relaxed);
        }

        /* Process Section */
        .process {
            padding: var(--spacing-8) 0;
            background: var(--bg-secondary);
        }

        .process-step {
            display: flex;
            gap: var(--spacing-4);
            margin-bottom: var(--spacing-6);
            position: relative;
        }

        .process-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 19px;
            top: 40px;
            bottom: -24px;
            width: 2px;
            background: var(--border-color);
        }

        .step-number {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            color: var(--text-white);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--font-weight-bold);
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .step-content h3 {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-2);
        }

        .step-content p {
            color: var(--text-secondary);
            line-height: var(--line-height-relaxed);
            font-size: var(--font-size-base);
        }

        /* CTA Section */
        .cta {
            padding: var(--spacing-8) 0;
            text-align: center;
        }

        .cta h2 {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-4);
        }

        .cta p {
            color: var(--text-secondary);
            font-size: var(--font-size-lg);
            margin-bottom: var(--spacing-6);
            line-height: var(--line-height-relaxed);
        }

        .btn-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
        }

  

        /* Tablet Styles */
        @media (min-width: 768px) {
            .container {
                padding: 0 var(--spacing-6);
            }

            .hero {
                padding: var(--spacing-16) 0 var(--spacing-12);
            }

            .hero h1 {
                font-size: var(--font-size-3xl);
            }

            .stats {
                gap: var(--spacing-8);
            }

            .stat-number {
                font-size: var(--font-size-3xl);
            }

            .cards-grid {
                flex-direction: row;
                gap: var(--spacing-8);
            }

            .card {
                flex: 1;
                padding: var(--spacing-8);
            }

            .features {
                padding: var(--spacing-12) 0;
            }

            .features-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: var(--spacing-6);
            }

            .feature-item {
                margin-bottom: 0;
            }

            .process {
                padding: var(--spacing-12) 0;
            }

            .btn-group {
                flex-direction: row;
                justify-content: center;
                gap: var(--spacing-4);
            }

 
        }

        /* Desktop Styles */
        @media (min-width: 1024px) {
            .hero {
                padding: var(--spacing-20) 0 var(--spacing-16);
            }

            .hero h1 {
                font-size: var(--font-size-4xl);
            }

            .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .mission-vision,
            .features,
            .process,
            .cta {
                padding: var(--spacing-16) 0;
            }

            .process-steps {
                max-width: 800px;
                margin: 0 auto;
            }
        }

        /* SVG Icons */
        .icon {
            width: 24px;
            height: 24px;
        }