.magento2-react-page{min-height:100vh;background-color:#fff}.page-title-wrapper{text-align:center;padding:5rem 2rem 3rem;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.page-title-wrapper:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 20s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.page-title{font-size:3.5rem;color:#fff;margin:0 0 15px;font-weight:800;position:relative;z-index:1;text-shadow:0 4px 20px rgba(0,0,0,.2)}.page-subtitle{font-size:1.3rem;color:#fffffff2;margin:0;position:relative;z-index:1}.react-content{max-width:1400px;margin:0 auto;padding:60px 40px}.hero-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:100px}.hero-text h2{font-size:2.8rem;color:#2c3e50;margin:0 0 20px;font-weight:800;line-height:1.2}.hero-description{font-size:1.2rem;line-height:1.8;color:#555;margin:0}.architecture-diagram{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f8f9fa,#fff);padding:40px;border-radius:20px;box-shadow:0 8px 30px #0000001a}.diagram-layer{flex:1;text-align:center;padding:30px 20px;border-radius:16px;transition:all .3s ease}.diagram-layer.backend{background:#fff;color:#ff5722;border:3px solid #ff5722}.diagram-layer.frontend{background:#fff;color:#667eea;border:3px solid #667eea}.diagram-layer.browser{background:#fff;color:#43e97b;border:3px solid #43e97b}.diagram-layer:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.layer-icon{font-size:3rem;margin-bottom:15px}.layer-title{font-size:1.2rem;font-weight:700;margin-bottom:8px}.layer-desc{font-size:.9rem;opacity:.9}.diagram-arrow{font-size:2rem;color:#667eea;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.section-heading{text-align:center;font-size:2.5rem;color:#2c3e50;margin:0 0 20px;font-weight:700}.section-intro{text-align:center;font-size:1.2rem;color:#666;max-width:800px;margin:0 auto 50px;line-height:1.8}.pagespeed-section{margin-bottom:20px}.magento2-react-page .pagespeed-metrics-container{display:grid!important;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px!important;margin-bottom:0!important}.pagespeed-card{text-align:center}.magento2-react-page .score-circle{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;background:#fff!important;border:8px solid #0c6!important;box-shadow:0 4px 15px #00000014;color:#0c6!important}.magento2-react-page .score-value{font-size:2.5rem;font-weight:800;color:#0c6!important}.score-label{font-size:1.1rem;font-weight:700;color:#2c3e50;margin-bottom:8px}.score-benefit{font-size:.95rem;color:#666}.pagespeed-note{text-align:center;font-size:1.1rem;color:#666;margin-top:20px;margin-bottom:50px;font-style:italic}.pulse-animation{animation:pulse-score 3s ease-in-out infinite}.pulse-animation.delay-1{animation-delay:.3s}.pulse-animation.delay-2{animation-delay:.6s}.pulse-animation.delay-3{animation-delay:.9s}@keyframes pulse-score{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.benefits-showcase{margin-top:30px;margin-bottom:100px}.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}.benefit-card{background:#fff;padding:40px 30px;border-radius:16px;box-shadow:0 4px 20px #00000014;transition:all .3s ease;border:2px solid transparent;text-align:center}.benefit-card:hover{border-color:#667eea;transform:translateY(-5px);box-shadow:0 8px 30px #667eea26}.benefit-icon{font-size:3rem;margin-bottom:20px;display:block}.benefit-card h3{font-size:1.4rem;color:#2c3e50;margin:0 0 15px;font-weight:700}.benefit-card p{color:#666;line-height:1.7;margin:0}.ai-development-section{background:linear-gradient(135deg,#f8f9fa,#fff);padding:80px 60px;border-radius:20px;margin-bottom:100px}.ai-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:40px}.ai-text h3{font-size:2rem;color:#2c3e50;margin:0 0 20px;font-weight:700}.ai-text>p{font-size:1.1rem;line-height:1.8;color:#555;margin:0 0 30px}.ai-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:25px}.ai-features li{display:flex;gap:15px;align-items:flex-start}.feature-icon{font-size:2rem;flex-shrink:0}.ai-features strong{display:block;font-size:1.1rem;color:#2c3e50;margin-bottom:5px}.ai-features p{color:#666;margin:0;line-height:1.6}.ai-comparison{display:flex;flex-direction:column;gap:20px}.comparison-card{background:#fff;padding:30px;border-radius:16px;box-shadow:0 4px 20px #00000014;border:2px solid #f0f0f0}.comparison-card.new{border-color:#667eea;box-shadow:0 8px 30px #667eea26}.comparison-header{font-size:1.2rem;font-weight:700;color:#2c3e50;margin-bottom:20px}.comparison-header.highlighted{color:#667eea}.comparison-timeline{margin-bottom:20px}.timeline-bar{height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.1rem}.timeline-bar.slow{background:linear-gradient(90deg,#ff5722,#f44336);width:100%}.timeline-bar.fast{background:linear-gradient(90deg,#43e97b,#38f9d7);width:25%}.comparison-points{list-style:none;padding:0;margin:0}.comparison-points li{padding:8px 0;font-size:1rem;color:#555}.demos-section{margin-bottom:100px}.demos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}.demo-card.large{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px #0000001a;text-decoration:none;transition:all .3s ease;border:2px solid transparent}.demo-card.large:hover{border-color:#667eea;transform:translateY(-8px);box-shadow:0 12px 40px #667eea33}.demo-image{height:200px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center}.demo-placeholder{text-align:center;color:#fff}.placeholder-icon{font-size:4rem;margin-bottom:10px}.placeholder-text{font-size:1.1rem;font-weight:600}.demo-info{padding:30px}.demo-info h3{font-size:1.4rem;color:#2c3e50;margin:0 0 10px;font-weight:700}.demo-info p{color:#666;margin:0 0 20px;line-height:1.6}.demo-stats{display:flex;gap:15px}.stat{background:#f8f9fa;padding:8px 16px;border-radius:8px;font-size:.9rem;font-weight:600;color:#667eea}.backend-optimization-section{background:linear-gradient(135deg,#667eea,#764ba2);padding:80px 60px;border-radius:20px;color:#fff;margin-bottom:100px;position:relative;overflow:hidden}.backend-optimization-section:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 15s linear infinite}.optimization-header{position:relative;z-index:1}.optimization-header .section-heading{color:#fff}.optimization-header .section-intro{color:#fffffff2}.optimization-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px;position:relative;z-index:1}.optimization-item{text-align:center}.opt-number{font-size:4rem;font-weight:800;margin-bottom:10px;line-height:1}.opt-label{font-size:1.3rem;font-weight:700;margin-bottom:15px}.optimization-item p{font-size:1rem;opacity:.9;line-height:1.6;margin:0}.implementation-section{margin-bottom:100px}.timeline-wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px}.implementation-section .timeline{position:relative;padding:20px 0}.implementation-section .timeline:before{content:"";position:absolute;left:40px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#667eea,#764ba2)}.implementation-section .timeline-item{display:flex;gap:30px;align-items:flex-start;margin-bottom:30px;position:relative}.timeline-marker{min-width:80px;width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;flex-shrink:0;box-shadow:0 4px 15px #667eea66;z-index:1}.implementation-section .timeline-content h4{font-size:1.2rem;color:#2c3e50;margin:0 0 8px;font-weight:700}.implementation-section .timeline-content p{color:#666;margin:0;line-height:1.6}.timeline-week{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px 20px;border-radius:12px;font-size:1.2rem;font-weight:700;text-align:center;margin-bottom:20px}.timeline-content{background:#f8f9fa;padding:25px 20px;border-radius:12px;min-height:200px}.timeline-content h3{font-size:1.2rem;color:#2c3e50;margin:0 0 15px;font-weight:700}.timeline-content ul{list-style:none;padding:0;margin:0}.timeline-content li{color:#666;position:relative;padding:8px 0 8px 20px}.timeline-content li:before{content:"•";position:absolute;left:0;color:#667eea;font-weight:700}.timeline-note{margin-top:40px;padding:20px 30px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-left:4px solid #667eea;border-radius:8px;text-align:center}.timeline-note p{margin:0;font-size:1.2rem;color:#2c3e50}.faq-section{margin-bottom:100px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:50px}.faq-item{background:#f8f9fa;padding:30px;border-radius:16px;border:2px solid transparent;transition:all .3s ease}.faq-item:hover{background:#fff;border-color:#667eea;box-shadow:0 4px 20px #667eea1a}.faq-item h3{font-size:1.3rem;color:#2c3e50;margin:0 0 15px;font-weight:700}.faq-item p{color:#666;margin:0;line-height:1.7}.cta-section{text-align:center;padding:80px 60px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;position:relative;overflow:hidden}.cta-section:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 15s linear infinite}.cta-section h2{font-size:2.5rem;color:#fff;margin:0 0 15px;font-weight:800;position:relative;z-index:1}.cta-section p{font-size:1.2rem;color:#fffffff2;margin:0 0 40px;position:relative;z-index:1}.cta-buttons{display:flex;gap:20px;justify-content:center;position:relative;z-index:1}.btn{display:inline-block;padding:18px 45px;font-size:1.1rem;font-weight:700;text-decoration:none;border-radius:12px;transition:all .3s ease}.magento2-react-page .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;border:3px solid #fff!important;box-shadow:0 8px 25px #0003;font-weight:700}.magento2-react-page .btn-primary:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px #0000004d;background:linear-gradient(135deg,#764ba2,#667eea)!important}.magento2-react-page .btn-secondary{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;border:3px solid #fff!important;box-shadow:0 8px 25px #0003;font-weight:700}.magento2-react-page .btn-secondary:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px #0000004d;background:linear-gradient(135deg,#764ba2,#667eea)!important}@media (max-width: 1200px){.hero-section{grid-template-columns:1fr;gap:40px}.architecture-diagram{flex-direction:column;gap:20px}.diagram-arrow{transform:rotate(90deg)}.benefits-grid,.timeline-wrapper{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.page-title{font-size:2.5rem}.react-content{padding:40px 20px}.hero-text h2{font-size:2rem}.benefits-grid,.demos-grid,.optimization-grid,.timeline-wrapper,.faq-grid,.ai-content{grid-template-columns:1fr}.ai-development-section,.backend-optimization-section{padding:60px 30px}.cta-buttons{flex-direction:column}.btn{width:100%}}