html{scroll-behavior:smooth}:root{--primary-color: #c29651;--primary-dark: #a67f42;--primary-light: #d4a574;--accent-color: #6b8ce8;--accent-secondary: #8ba5ff;--text-primary: #f5f5f5;--text-secondary: #d0d0d0;--text-muted: #a8a8a8;--text-light: #888888;--white: #ffffff;--gray-50: #3a3a3a;--gray-100: #424242;--gray-200: #4a4a4a;--gray-300: #525252;--gray-900: #2a2a2a;--bg-primary: linear-gradient(135deg, #2d2d2d 0%, #3e3e3e 50%, #353535 100%);--bg-section: linear-gradient(135deg, #363636 0%, #404040 100%);--bg-card: linear-gradient(135deg, #3a3a3a 0%, #424242 100%);--bg-dark: linear-gradient(135deg, #2a2a2a 0%, #343434 50%, #2f2f2f 100%);--bg-gradient: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #323232 100%);--primary-gradient: linear-gradient(135deg, #c29651 0%, #d4a574 100%);--header-gradient: linear-gradient(135deg, #2f2f2f 0%, #424242 100%);--footer-gradient: linear-gradient(135deg, #323232 0%, #454545 100%);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--border-color: #525252;--border-light: #484848;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .6);--shadow-brand: 0 4px 15px rgba(212, 165, 116, .3);--shadow-brand-hover: 0 6px 20px rgba(212, 165, 116, .4);--bg-overlay: rgba(40, 45, 50, .95);--bg-section-transparent: rgba(55, 62, 68, .8);--border-light: rgba(255, 255, 255, .15);--border-brand: rgba(194, 150, 81, .3);--border-brand-hover: rgba(194, 150, 81, .4);--accent-brand-10: rgba(194, 150, 81, .15);--accent-brand-20: rgba(194, 150, 81, .25);--accent-brand-80: rgba(194, 150, 81, .8);--accent-secondary-10: rgba(107, 140, 232, .15);--accent-error-10: rgba(220, 53, 69, .1);--divider-gradient: linear-gradient(to right, transparent, rgba(255, 255, 255, .2), transparent);--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1200px;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;overflow-x:hidden;font-family:var(--font-family);line-height:1.6;color:var(--text-primary)}#root{width:100%;margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column}body{margin:0;padding:0;background:var(--bg-primary);background-attachment:fixed}.container{max-width:var(--container-xl);margin:0 auto;padding-left:var(--space-xl);padding-right:var(--space-xl)}.section-spacing{padding:var(--space-3xl) 0}.card{background:var(--bg-card);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);padding:var(--space-2xl)}.btn-primary{background-color:var(--primary-color);color:var(--white);border:none;border-radius:var(--radius-full);padding:var(--space-md) var(--space-xl);font-weight:600;transition:var(--transition-base);cursor:pointer;box-shadow:var(--shadow-brand)}.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px #a4766b66}.text-gradient{background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.brand-gradient{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 768px){.container{padding-left:var(--space-md);padding-right:var(--space-md)}.section-spacing{padding:var(--space-xl) 0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes gentle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}*:focus{outline:2px solid var(--primary-color);outline-offset:2px}.code-particles-container{position:relative;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#1e3c72,#2a5298);border-radius:20px;display:flex;align-items:center;justify-content:center}.code-particles{position:absolute;width:100%;height:100%;top:0;left:0}.particle{position:absolute;color:#ffffffb3;font-family:Courier New,monospace;font-size:14px;animation:float-particle 15s infinite linear;opacity:0}.particle:nth-child(1){animation-delay:0s;left:10%}.particle:nth-child(2){animation-delay:2s;left:20%}.particle:nth-child(3){animation-delay:4s;left:30%}.particle:nth-child(4){animation-delay:6s;left:40%}.particle:nth-child(5){animation-delay:8s;left:50%}.particle:nth-child(6){animation-delay:10s;left:60%}.particle:nth-child(7){animation-delay:12s;left:70%}.particle:nth-child(8){animation-delay:14s;left:80%}@keyframes float-particle{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100px) rotate(360deg);opacity:0}}.code-display{position:relative;z-index:10;background:#000c;border-radius:15px;padding:2rem;border:1px solid rgba(52,152,219,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 15px 35px #0000004d}.code-text{color:#0f8;font-family:Courier New,monospace;font-size:1.1rem;line-height:1.6;margin:0;text-shadow:0 0 10px rgba(0,255,136,.5)}.code-comment{color:#888}.code-keyword{color:#ff6b6b;font-weight:700}.code-string{color:#ffd93d}.code-function{color:#6bcf7f}.typing-animation{display:inline-block;animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.data-flow-container{position:relative;width:100%;height:300px;background:linear-gradient(45deg,#667eea,#764ba2);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.data-stream{position:absolute;width:2px;height:100%;background:linear-gradient(to bottom,transparent,rgba(52,152,219,.8),rgba(52,152,219,1),rgba(52,152,219,.8),transparent);animation:stream-flow 3s infinite linear}.data-stream:nth-child(1){left:20%;animation-delay:0s}.data-stream:nth-child(2){left:40%;animation-delay:.5s}.data-stream:nth-child(3){left:60%;animation-delay:1s}.data-stream:nth-child(4){left:80%;animation-delay:1.5s}@keyframes stream-flow{0%{transform:translateY(-100%);opacity:0}50%{opacity:1}to{transform:translateY(100%);opacity:0}}.data-nodes{position:relative;z-index:10}.data-node{width:80px;height:80px;border-radius:50%;background:#ffffffe6;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 1rem;animation:pulse-node 2s infinite ease-in-out;box-shadow:0 8px 25px #0003}.data-node:nth-child(1){animation-delay:0s}.data-node:nth-child(2){animation-delay:.3s}.data-node:nth-child(3){animation-delay:.6s}@keyframes pulse-node{0%,to{transform:scale(1);box-shadow:0 8px 25px #0003}50%{transform:scale(1.1);box-shadow:0 12px 35px #3498db66}}.geometric-container{position:relative;width:100%;height:350px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.geometric-shape{position:absolute;border:2px solid rgba(255,255,255,.3);animation:rotate-shape 20s infinite linear}.shape-triangle{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:52px solid rgba(52,152,219,.6);top:20%;left:15%;animation:float-triangle 8s infinite ease-in-out}.shape-square{width:60px;height:60px;background:#ff6b6b99;top:60%;right:20%;animation:rotate-square 12s infinite linear}.shape-circle{width:80px;height:80px;border-radius:50%;background:#ffd93d99;top:30%;right:40%;animation:scale-circle 6s infinite ease-in-out}.shape-hexagon{width:50px;height:43.3px;background:#6bcf7f99;position:relative;top:70%;left:60%;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);animation:bounce-hexagon 10s infinite ease-in-out}@keyframes float-triangle{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}@keyframes rotate-square{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes scale-circle{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}@keyframes bounce-hexagon{0%,to{transform:translateY(0)}25%{transform:translateY(-15px)}50%{transform:translateY(0)}75%{transform:translateY(-10px)}}.geometric-center{position:relative;z-index:10;text-align:center;color:#fff}.geometric-title{font-size:2rem;font-weight:700;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.3)}.geometric-subtitle{font-size:1.1rem;opacity:.9;text-shadow:0 1px 5px rgba(0,0,0,.3)}@media (max-width: 768px){.code-particles-container,.data-flow-container,.geometric-container{height:300px}.code-display{padding:1.5rem}.code-text{font-size:.9rem}.geometric-title{font-size:1.5rem}.geometric-subtitle{font-size:1rem}.data-node{width:60px;height:60px;font-size:1.5rem;margin:0 .5rem}}