:root { 
            --mediterranean-blue: #0E4B7F; 
            --valencia-orange: #FF6B35; 
            --olive-green: #6B8E23; 
            --soil-brown: #8B4513; 
            --sky-blue: #87CEEB; 
            --digital-grey: #4A4A4A; 
            --light-sand: #FFF8E1; 
            --water-blue: #4A90E2; 
            --success-green: #52C41A; 
        } 
 
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; 
            color: var(--digital-grey); 
            overflow-x: hidden; 
            background: #FAFAFA; 
        } 
 
      
 
        /* Hero Section */ 
        .tech-hero { 
            
            padding: 6rem 5%; 
            background: linear-gradient(135deg, #0E4B7F 0%, #6B8E23 100%); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .tech-hero::before { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='circuit' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 10h80v80h-80z' fill='none' stroke='white' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='10' cy='10' r='2' fill='white' opacity='0.2'/%3E%3Ccircle cx='90' cy='10' r='2' fill='white' opacity='0.2'/%3E%3Ccircle cx='90' cy='90' r='2' fill='white' opacity='0.2'/%3E%3Ccircle cx='10' cy='90' r='2' fill='white' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23circuit)'/%3E%3C/svg%3E"); 
        } 
 
        .hero-tec-content { 
            max-width: 1200px; 
            margin: 0 auto; 
            text-align: center; 
            position: relative; 
            z-index: 1; 
            color: white; 
        } 
 
        .hero-tec-content h1 { 
            font-size: 3.5rem; 
            font-weight: 800; 
            margin-bottom: 1.5rem; 
            animation: fadeInUp 0.8s ease; 
        } 
 
        @keyframes fadeInUp { 
            from { 
                opacity: 0; 
                transform: translateY(30px); 
            } 
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
 
        .hero-tec-content p { 
            font-size: 1.3rem; 
            opacity: 0.9; 
            max-width: 800px; 
            margin: 0 auto; 
            animation: fadeInUp 0.8s ease 0.2s both; 
        } 
 
        /* Tech Stack Section */ 
        .tech-stack { 
            padding: 5rem 5%; 
            background: white; 
        } 
 
        .stack-container { 
            max-width: 1200px; 
            margin: 0 auto; 
        } 
        .section-header { 
            text-align: center; 
            margin-bottom: 4rem; 
        } 
 
        .section-header h2 { 
            font-size: 2.5rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
        } 
 
        .stack-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
        } 
 
        .stack-card { 
            min-width: 300px;
            background: linear-gradient(135deg, #ffffff, #f8f9fa); 
            border-radius: 20px; 
            padding: 2.5rem; 
            position: relative; 
            overflow: hidden; 
            transition: all 0.3s ease; 
            cursor: pointer; 
        } 
 
        .stack-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        } 


    .stack-card:hover::before { 
            opacity: 0.05; 
        } 
 
        .stack-card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
        } 
 
        .stack-icon { 
            width: 80px; 
            height: 80px; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 20px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 2rem; 
            margin-bottom: 1.5rem; 
            position: relative; 
        } 
 
        .stack-icon::after { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background: inherit; 
            border-radius: inherit; 
            opacity: 0.3; 
            z-index: -1; 
            animation: pulse 2s infinite; 
        } 
 
        @keyframes pulse { 
            0%, 100% { transform: scale(1); } 
            50% { transform: scale(1.1); } 
        } 
 
        .stack-title { 
            font-size: 1.3rem; 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
        } 
 
        .stack-description { 
            color: var(--digital-grey); 
            opacity: 0.8; 
            line-height: 1.6; 
            margin-bottom: 1rem; 
        } 
 
        .stack-features { 
            list-style: none; 
        } 
 
        .stack-features li { 
            padding: 0.5rem 0; 
            border-top: 1px solid rgba(0,0,0,0.05); 
            font-size: 0.9rem; 
            color: var(--digital-grey); 
        opacity: 0.9; 
        } 

        /* Architecture Visualization */ 
        .architecture-section { 
            padding: 5rem 5%; 
            background: var(--light-sand); 
        } 
 
        .architecture-container { 
            max-width: 1200px; 
            margin: 0 auto; 
        } 
 
        
        .architecture-visual { 
            display: grid;
            align-content: center;
            grid-template-columns: repeat(3fr, 0fr); 
            background: white; 
            border-radius: 30px; 
            padding: 2rem; 
            box-shadow: 0 20px 60px rgba(0,0,0,0.1); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .architecture-diagram { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
            margin-top: 3rem; 
        } 
 
        .arch-layer { 
            text-align: center; 
            position: relative; 
        } 
 
        .arch-box { 
            
            height: max-content;
            background: linear-gradient(135deg, #f5f5f5, #ffffff); 
            border: 2px solid var(--mediterranean-blue); 
            border-radius: 15px; 
            padding: 1.5rem; 
            margin-bottom: 1rem; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            position: relative; 
        } 
 
        .arch-box:hover { 
            transform: scale(1.05); 
            box-shadow: 0 10px 30px rgba(14, 75, 127, 0.2); 
            border-color: var(--valencia-orange); 
        } 
 
        .arch-label { 
            font-weight: 600; 
            color: var(--mediterranean-blue); 
            margin-bottom: 0.5rem; 
        } 
 
        .arch-detail { 
            font-size: 0.9rem; 
            color: var(--digital-grey); 
            opacity: 0.8; 
        } 
 
        .arch-arrow { 
            position: absolute; 
            bottom: -20px; 
            left: 50%; 
            transform: translateX(-50%); 
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent; 
            border-right: 10px solid transparent; 
            border-top: 20px solid var(--mediterranean-blue); 
        } 
 
        /* Performance Metrics */ 
        .performance-section { 
            padding: 5rem 5%; 
            background: white; 
        } 

        .metrics-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 2rem; 
            margin-top: 3rem; 
        } 
 
        .metric-box { 
            text-align: center; 
            padding: 2rem; 
            background: linear-gradient(135deg, var(--sky-blue), var(--light-sand)); 
            border-radius: 20px; 
            transition: all 0.3s ease; 
            cursor: pointer; 
        } 
 
        .metric-box:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
        } 
 

        .metric-number { 
            font-size: 3rem; 
            font-weight: 800; 
            color: var(--mediterranean-blue); 
            margin-bottom: 0.5rem; 
        } 
 
        .metric-label { 
            font-size: 1rem; 
            color: var(--digital-grey); 
            opacity: 0.9; 
        } 
 
        /* Innovation Section */ 
        .innovation-section { 
            padding: 5rem 5%; 
            background: linear-gradient(135deg, var(--mediterranean-blue), var(--olive-green)); 
            color: white; 
            position: relative; 
            overflow: hidden; 1
        } 
 
        .innovation-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            position: relative; 
            z-index: 1; 
        } 
 
        .innovation-grid { 
            display: grid; 
            
            gap: 4rem; 
            align-items: center; 
        } 
 
        .innovation-text h2 { 
            font-size: 2.5rem; 
            margin-bottom: 1.5rem; 
        } 
 
        .innovation-text p { 
            font-size: 1.1rem; 
            line-height: 1.8; 
            opacity: 0.9; 
            margin-bottom: 2rem; 
        } 
 
        .innovation-features { 
            list-style: none; 
        } 
 
        .innovation-features li { 
            display: flex; 
            align-items: center; 
            gap: 1rem; 
            margin-bottom: 1rem; 
            font-size: 1.05rem; 
        } 
 
        .check-circle { 
            width: 30px; 
            height: 30px; 
            background: rgba(255,255,255,0.2); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            flex-shrink: 0; 
        } 
 
        /* Interactive Demo */ 
        .demo-visual { 
            background: white; 
            border-radius: 20px; 
            padding: 2rem; 
            box-shadow: 0 20px 60px rgba(0,0,0,0.2); 
            position: relative; 
        } 
 
        .demo-screen { 
            background: linear-gradient(135deg, #E8F5E9, #E1F5FE); 
            border-radius: 15px; 
            padding: 1.5rem; 
            margin-bottom: 1.5rem; 
            height: 300px; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .demo-particles { 
            position: absolute; 
            width: 100%; 
            height: 100%; 
        } 
 
        .particle { 
            position: absolute; 
            width: 4px; 
            height: 4px; 
            background: var(--mediterranean-blue); 
            border-radius: 50%; 
            animation: floatParticle 10s infinite linear; 
        } 
 
        @keyframes floatParticle { 
            from { 
                transform: translateY(100%); 
                opacity: 0; 
            } 
            10% { 
                opacity: 1; 
            } 
            90% { 
                opacity: 1; 
            } 
            to { 
                transform: translateY(-100%); 
                opacity: 0; 
            } 
        } 
 
        .demo-controls { 
            display: flex; 
            gap: 1rem; 
        } 
 
        .demo-btn { 
            flex: 1; 
            padding: 0.75rem; 
            background: var(--mediterranean-blue); 
            color: white; 
            border: none; 
            border-radius: 10px; 
            cursor: pointer; 
            transition: all 0.3s ease; 
        } 
 
        .demo-btn:hover { 
            background: var(--valencia-orange); 
            transform: translateY(-2px); 
        } 
 
        /* Footer */ 
        footer { 
            background: var(--digital-grey); 
            color: white; 
            padding: 4rem 5% 2rem; 
        } 
 
        .footer-content { 
            max-width: 1400px; 
            margin: 0 auto; 
        } 

        .footer-grid { 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr 1fr; 
            gap: 3rem; 
            margin-bottom: 3rem; 
        } 
@media (max-width:1100px){
    .stack-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 2rem; 
        } 
       .metric-box {
            font-weight: 800; 
            color: var(--mediterranean-blue); 
            margin-bottom: 0.5rem; 
        } 
   
}
@media (max-width:900px){
    .metrics-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 2fr); 
            gap: 2rem; 
            margin-top: 3rem; 
        } 
}
@media (max-width:700px){
    .stack-grid{
        display: flex;
        flex-direction: column;
    }
}

@media (max-width:500px){
   
    .metrics-grid{
            grid-template-columns: repeat(1, 1fr); 
            

    }
     
    .metric-box {
            font-weight: 800; 
            color: var(--mediterranean-blue); 
            margin-bottom: 0.5rem; 
    }
     .architecture-diagram { 
            display: grid; 
            grid-template-columns: repeat(1, 1fr); 
            gap: 2rem; 
            margin-top: 3rem; 
        } 
    .architecture-diagram { 
            grid-template-columns: repeat(1, 1fr);
    }
     .architecture-visual { 
            display: flex;
            flex-direction: column;
            
    }
 
}