.container {
            display: flex;
            gap: 20px;
            max-width: 1200px;
            width: 100%;
        }

        .card {
            flex: 1;
            background-color: #1a1a1a;
            border-radius: 12px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            border: 1px solid #333;
            transition: all 0.3s ease;
            color: #aaa;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            color: white;
        }

        .card-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            opacity: 0.8;
        }

        .card-title {
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .card-description {
            font-size: 14px;
            color: #aaa;
            line-height: 1.5;
            margin-bottom: 24px;
        }

        .illustration {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }

        .cube {
            width: 120px;
            height: 120px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 20s infinite linear;
        }

        .face {
            position: absolute;
            width: 120px;
            height: 120px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .front { transform: translateZ(60px); }
        .back { transform: rotateY(180deg) translateZ(60px); }
        .right { transform: rotateY(90deg) translateZ(60px); }
        .left { transform: rotateY(-90deg) translateZ(60px); }
        .top { transform: rotateX(90deg) translateZ(60px); }
        .bottom { transform: rotateX(-90deg) translateZ(60px); }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: #4ade80;
            animation: float 3s infinite ease-in-out;
        }

        .particle:nth-child(1) { width: 6px; height: 6px; top: 30%; left: 20%; animation-delay: 0s; }
        .particle:nth-child(2) { width: 4px; height: 4px; top: 60%; right: 25%; animation-delay: 0.5s; }
        .particle:nth-child(3) { width: 5px; height: 5px; bottom: 30%; left: 40%; animation-delay: 1s; }
        .particle:nth-child(4) { width: 3px; height: 3px; top: 45%; right: 35%; animation-delay: 1.5s; }
        .particle:nth-child(5) { width: 4px; height: 4px; bottom: 20%; right: 15%; animation-delay: 2s; }

        @keyframes float {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
            50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
        }

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

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 24px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            background-color: #252525;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
        }

        .feature-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            opacity: 0.7;
        }

        .api-endpoint {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #252525;
            padding: 10px 14px;
            border-radius: 6px;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .endpoint-label {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .endpoint-value {
            color: var(--primary-color);
            font-family: 'Courier New', monospace;
        }

        .workflow-step {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding: 12px;
            background-color: #252525;
            border-radius: 6px;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }

        .step-content h3 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .step-content p {
            font-size: 12px;
            color: #aaa;
        }

        .cta-button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #797979 0%, #282829 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgb(53 82 59 / 40%);
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .card {
                margin-bottom: 20px;
            }
        }

        .mvp-flow {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .phase {
            position: absolute;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .phase:hover {
            transform: scale(1.1);
        }

        .phase-1 {
            top: 0;
            left: 42px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .phase-2 {
            top: 42px;
            left: 84px;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
        }

        .phase-3 {
            bottom: 42px;
            left: 42px;
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
        }

        .phase-4 {
            bottom: 0;
            left: 0;
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
        }

        .connection-line {
            position: absolute;
            background: rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .line-1 {
            width: 2px;
            height: 42px;
            top: 18px;
            left: 60px;
            transform-origin: bottom;
        }

        .line-2 {
            width: 42px;
            height: 2px;
            top: 60px;
            left: 60px;
        }

        .line-3 {
            width: 2px;
            height: 42px;
            bottom: 18px;
            left: 18px;
            transform-origin: top;
        }

        .line-4 {
            width: 42px;
            height: 2px;
            bottom: 0;
            left: 0;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 24px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            background-color: #252525;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
        }

        .feature-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            opacity: 0.7;
        }

        .workflow-step {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding: 12px;
            background-color: #252525;
            border-radius: 6px;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }

        .step-content h3 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .step-content p {
            font-size: 12px;
            color: #aaa;
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .card {
                margin-bottom: 20px;
            }
        }

                .devops-pipeline {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .pipeline-phase {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .phase-1 {
            top: 0;
            left: 45px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .phase-2 {
            top: 45px;
            left: 90px;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
        }

        .phase-3 {
            bottom: 45px;
            left: 90px;
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
        }

        .phase-4 {
            bottom: 0;
            left: 45px;
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
        }

        .phase-5 {
            bottom: 45px;
            left: 0;
            background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        }

        .connection-line {
            position: absolute;
            background: rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .line-1 {
            width: 2px;
            height: 45px;
            top: 15px;
            left: 60px;
            transform-origin: bottom;
        }

        .line-2 {
            width: 45px;
            height: 2px;
            top: 60px;
            left: 60px;
        }

        .line-3 {
            width: 2px;
            height: 45px;
            bottom: 15px;
            left: 105px;
            transform-origin: top;
        }

        .line-4 {
            width: 45px;
            height: 2px;
            bottom: 60px;
            left: 60px;
        }

        .line-5 {
            width: 2px;
            height: 45px;
            bottom: 15px;
            left: 15px;
            transform-origin: top;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 24px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            background-color: #252525;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
        }

        .feature-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            opacity: 0.7;
        }

        .workflow-step {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding: 12px;
            background-color: #252525;
            border-radius: 6px;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }

        .step-content h3 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .step-content p {
            font-size: 12px;
            color: #aaa;
        }

        .infrastructure-item {
            display: flex;
            align-items: center;
            background-color: #252525;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .infra-icon {
            width: 24px;
            height: 24px;
            background-color: #333;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

        .infra-details {
            flex: 1;
        }

        .infra-name {
            font-size: 13px;
            font-weight: 500;
            color: #fff;
        }

        .infra-info {
            font-size: 11px;
            color: #888;
        }

        .monitoring-metric {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #252525;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .metric-label {
            font-size: 12px;
            color: #aaa;
        }

        .metric-value {
            font-size: 14px;
            font-weight: 600;
            color: #4ade80;
        }

        .lightning-delivery {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .delivery-truck {
            width: 100px;
            height: 60px;
            position: absolute;
            top: 30px;
            left: 10px;
        }

        .truck-front {
            width: 30px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 4px 0 0 4px;
        }

        .truck-body {
            width: 50px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 0 4px 4px 0;
            position: relative;
        }

        .truck-window {
            width: 40px;
            height: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            position: absolute;
            top: 5px;
            left: 5px;
        }

        .truck-wheels {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            bottom: -6px;
        }

        .wheel-front {
            left: 5px;
        }

        .wheel-back {
            right: 5px;
        }

        .lightning-bolt {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 80px;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            animation: lightning 2s infinite ease-in-out;
        }

        @keyframes lightning {
            0%, 100% { transform: translateX(0) rotate(0deg); opacity: 0.7; }
            50% { transform: translateX(-10px) rotate(-5deg); opacity: 1; }
        }

        .budget-packages {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .package {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            border-radius: 4px;
            position: absolute;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .package:hover {
            transform: translateY(-5px) scale(1.05);
        }

        .package-1 {
            top: 10px;
            left: 10px;
            z-index: 3;
        }

        .package-2 {
            top: 20px;
            left: 50px;
            z-index: 2;
        }

        .package-3 {
            bottom: 10px;
            right: 10px;
            z-index: 1;
        }

        .money-bag {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: float 3s infinite ease-in-out;
        }

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

        .flexibility {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .puzzle-piece {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
            position: absolute;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .piece-1 {
            top: 10px;
            left: 10px;
            transform: rotate(0deg);
        }

        .piece-2 {
            top: 50px;
            left: 50px;
            transform: rotate(45deg);
        }

        .piece-3 {
            bottom: 10px;
            right: 10px;
            transform: rotate(90deg);
        }

        .connectors {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
        }

        .connector-1 {
            width: 2px;
            height: 40px;
            top: 30px;
            left: 30px;
            transform: rotate(45deg);
        }

        .connector-2 {
            width: 2px;
            height: 40px;
            bottom: 30px;
            right: 30px;
            transform: rotate(45deg);
        }

        .enterprise-quality {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .shield {
            width: 60px;
            height: 80px;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            position: absolute;
            top: 20px;
            left: 30px;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            animation: pulse 2s infinite ease-in-out;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
        }

        .star-1 { top: 20%; left: 20%; }
        .star-2 { top: 30%; left: 70%; }
        .star-3 { top: 70%; left: 30%; }
        .star-4 { top: 80%; left: 80%; }

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 24px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            background-color: #252525;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
        }

        .feature-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            opacity: 0.7;
        }

        .workflow-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background-color: #252525;
            border-radius: 6px;
            margin-bottom: 16px;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }

        .step-content h3 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .step-content p {
            font-size: 12px;
            color: #aaa;
        }

        .cloud-computing {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .cloud {
            width: 80px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            position: absolute;
            top: 20px;
            left: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .server {
            width: 30px;
            height: 40px;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            border-radius: 4px;
            position: absolute;
            bottom: 20px;
            right: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .data-flow {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        .flow-line {
            stroke: rgba(255, 255, 255, 0.6);
            stroke-width: 2;
            fill: none;
        }

        .flow-dot {
            fill: #4ade80;
            r: 3;
        }

        .users {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        .user {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
            border-radius: 50%;
            position: absolute;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 24px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            background-color: #252525;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
        }

        .feature-icon {
            width: 1rem;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }

        .workflow-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background-color: #252525;
            border-radius: 6px;
            margin-bottom: 16px;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
        }

        .step-content h3 {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .step-content p {
            font-size: 12px;
            color: #aaa;
        }

        .metrics-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .metric-card {
            background-color: #252525;
            padding: 12px;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
        }

        .metric-title {
            font-size: 12px;
            color: #aaa;
            margin-bottom: 8px;
        }

        .metric-value {
            font-size: 20px;
            font-weight: 600;
            color: #4ade80;
        }

        .deployment-phases {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .phase-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
        }

        .phase-number {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .nodejs-architecture {
            width: 120px;
            height: 120px;
            position: relative;
        }

        .nestjs-server {
            width: 80px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            position: absolute;
            top: 30px;
            left: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .express-framework {
            width: 60px;
            height: 40px;
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            border-radius: 4px;
            position: absolute;
            bottom: 30px;
            right: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .routes {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        .route {
            fill: none;
            stroke: rgba(102, 126, 234, 0.6);
            stroke-width: 2;
        }

        .route-dot {
            fill: #667eea;
            r: 3;
        }
 .endpoints {
            margin-bottom: 24px;
        }

        .endpoint-card {
            background-color: #252525;
            padding: 12px;
            border-radius: 6px;
            display: flex;
            align-items: center;
        }

        .endpoint-label {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .endpoint-name {
            font-size: 12px;
            font-weight: 500;
        }

        .endpoint-value {
            font-size: 14px;
            font-weight: 600;
            color: #4ade80;
        }

        .development-phases {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .snippet-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .snippet-lang {
            font-size: 12px;
            color: #aaa;
        }

.snippet-code {
            font-size: 12px;
            color: #ddd;
            line-height: 1.4;
        }