:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#1a1a24;--accent-primary:#0fa;--accent-secondary:#ff006e;--accent-tertiary:#00d4ff;--text-primary:#fff;--text-secondary:#a0a0b0;--text-muted:#606070;--border-glow:#00ffaa4d;--font-heading:"Orbitron", sans-serif;--font-body:"Noto Sans SC", sans-serif;--font-mono:"JetBrains Mono", monospace;--section-padding:120px;--section-padding-mobile:80px;--container-width:1200px;--transition-smooth:all .4s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:-1;background-image:linear-gradient(#00ffaa08 1px,#0000 1px),linear-gradient(90deg,#00ffaa08 1px,#0000 1px);background-size:50px 50px;width:100%;height:100%;position:fixed;top:0;left:0}body:after{content:"";pointer-events:none;z-index:-2;background:radial-gradient(circle at 20% 80%,#00ffaa14 0%,#0000 40%),radial-gradient(circle at 80% 20%,#ff006e0f 0%,#0000 40%),radial-gradient(circle,#00d4ff0d 0%,#0000 50%);width:200%;height:200%;position:fixed;top:-50%;left:-50%}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;outline:none;font-family:inherit}ul,ol{list-style:none}img{max-width:100%;display:block}.container{max-width:var(--container-width);margin:0 auto;padding:0 24px}section{padding:var(--section-padding) 0}@media (width<=768px){section{padding:var(--section-padding-mobile) 0}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-tertiary)}::selection{background:var(--accent-primary);color:var(--bg-primary)}.navbar{z-index:1000;padding:20px 0;transition:all .4s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:0;right:0}.navbar.scrolled{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0a0a0fd9;border-bottom:1px solid #00ffaa1a;padding:12px 0}.navbar-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;display:flex}.navbar-logo{font-family:var(--font-heading);color:var(--text-primary);transition:var(--transition-smooth);align-items:center;gap:10px;font-size:1.5rem;font-weight:600;display:flex}.navbar-logo:hover{text-shadow:0 0 20px var(--accent-primary)}.logo-icon{color:var(--accent-primary);filter:drop-shadow(0 0 8px var(--accent-primary))}.logo-text{background:linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.navbar-links{align-items:center;gap:32px;display:flex}.nav-link{color:var(--text-secondary);transition:var(--transition-smooth);padding:8px 0;font-size:.95rem;font-weight:500;position:relative}.nav-link:after{content:"";background:linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));width:0;height:2px;transition:width .3s;position:absolute;bottom:0;left:0}.nav-link:hover{color:var(--text-primary)}.nav-link:hover:after{width:100%}.navbar-toggle{color:var(--text-primary);transition:var(--transition-smooth);background:0 0;border-radius:8px;padding:8px}.navbar-toggle:hover{background:#00ffaa1a}.mobile-menu{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0a0a0ff2;border-bottom:1px solid #00ffaa1a;padding:24px;position:absolute;top:100%;left:0;right:0}.mobile-nav-links{flex-direction:column;gap:16px;display:flex}.mobile-nav-link{color:var(--text-secondary);transition:var(--transition-smooth);border-bottom:1px solid #ffffff0d;padding:12px 0;font-size:1.1rem;font-weight:500;display:block}.mobile-nav-link:hover{color:var(--accent-primary);padding-left:8px}.desktop-only{display:flex}.mobile-only{display:none}@media (width<=768px){.desktop-only{display:none}.mobile-only{display:block}}.hero{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:120px 24px 80px;display:flex;position:relative;overflow:hidden}.hero-bg{pointer-events:none;position:absolute;inset:0}.glow-orb{filter:blur(80px);border-radius:50%;position:absolute}.glow-1{background:radial-gradient(circle,#00ffaa4d 0%,#0000 70%);width:400px;height:400px;top:10%;left:10%}.glow-2{background:radial-gradient(circle,#ff006e40 0%,#0000 70%);width:300px;height:300px;top:60%;right:15%}.glow-3{background:radial-gradient(circle,#00d4ff33 0%,#0000 70%);width:350px;height:350px;bottom:10%;left:40%}.hero-content{text-align:center;z-index:1;max-width:800px;position:relative}.hero-badge{color:var(--accent-primary);background:#00ffaa1a;border:1px solid #00ffaa4d;border-radius:50px;align-items:center;gap:8px;margin-bottom:24px;padding:8px 16px;font-size:.875rem;display:inline-flex}.hero-title{font-family:var(--font-heading);letter-spacing:-.02em;margin-bottom:24px;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:700;line-height:1.1}.title-accent{background:linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:inline-block;position:relative}.title-accent:after{content:"";background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));border-radius:2px;width:100%;height:4px;position:absolute;bottom:5px;left:0}.hero-subtitle{color:var(--text-secondary);margin-bottom:40px;font-size:1.25rem;line-height:1.8}.hero-actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:60px;display:flex}.btn-primary,.btn-secondary{border-radius:12px;align-items:center;gap:10px;padding:16px 32px;font-size:1rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), #0c8);color:var(--bg-primary);box-shadow:0 4px 20px #00ffaa4d}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px #00ffaa80}.btn-secondary{color:var(--text-primary);background:0 0;border:1px solid #fff3}.btn-secondary:hover{border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 0 20px #0fa3}.hero-stats{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a2499;border:1px solid #ffffff0d;border-radius:16px;justify-content:center;align-items:center;gap:32px;padding:24px 40px;display:flex}.stat-item{flex-direction:column;align-items:center;display:flex}.stat-number{font-family:var(--font-heading);color:var(--accent-primary);font-size:2rem;font-weight:700}.stat-divider{background:linear-gradient(#0000,#fff3,#0000);width:1px;height:40px}.scroll-indicator{color:var(--text-muted);transition:var(--transition-smooth);background:0 0;border-radius:50%;padding:12px;animation:2s infinite bounce;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.scroll-indicator:hover{color:var(--accent-primary)}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%)translateY(0)}40%{transform:translate(-50%)translateY(-10px)}60%{transform:translate(-50%)translateY(-5px)}}@media (width<=640px){.hero{padding:100px 16px 60px}.hero-subtitle{font-size:1rem}.hero-actions{flex-direction:column;width:100%;max-width:300px;margin:0 auto 40px}.btn-primary,.btn-secondary{justify-content:center;width:100%}.hero-stats{flex-direction:column;gap:16px;padding:20px}.stat-divider{width:60px;height:1px}}.why{background:linear-gradient(#0000,#12121a80,#0000);position:relative}.section-header{text-align:center;margin-bottom:60px}.section-tag{color:var(--accent-primary);background:#00ffaa1a;border:1px solid #0fa3;border-radius:50px;margin-bottom:16px;padding:8px 20px;font-size:.875rem;font-weight:500;display:inline-block}.section-title{font-family:var(--font-heading);margin-bottom:16px;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:600}.section-subtitle{color:var(--text-secondary);max-width:500px;margin:0 auto;font-size:1.125rem}.reasons-grid{grid-template-columns:repeat(3,1fr);gap:32px;display:grid}.reason-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a2499;border:1px solid #ffffff0d;border-radius:20px;padding:40px 32px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.reason-card:hover{border-color:var(--icon-color);box-shadow:0 0 30px #00ffaa1a}.reason-card:before{content:"";background:linear-gradient(90deg, var(--icon-color), transparent);opacity:0;height:3px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.reason-card:hover:before{opacity:1}.reason-icon{width:64px;height:64px;color:var(--icon-color);transition:var(--transition-smooth);background:#00ffaa1a;border-radius:16px;justify-content:center;align-items:center;margin-bottom:24px;display:flex}.reason-card:hover .reason-icon{background:#0fa3;box-shadow:0 0 20px #00ffaa4d}.reason-title{font-family:var(--font-heading);margin-bottom:12px;font-size:1.25rem;font-weight:600}.reason-description{color:var(--text-secondary);font-size:.95rem;line-height:1.7}.reason-glow{filter:blur(60px);opacity:.1;border-radius:50%;width:200px;height:200px;transition:opacity .4s;position:absolute;bottom:-100px;right:-100px}.reason-card:hover .reason-glow{opacity:.2}@media (width<=1024px){.reasons-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.reasons-grid{grid-template-columns:1fr}.reason-card{padding:32px 24px}}.steps{position:relative}.timeline{max-width:900px;margin:0 auto;padding:40px 0;position:relative}.timeline-line{background:linear-gradient(180deg, transparent, var(--accent-primary) 10%, var(--accent-primary) 90%, transparent);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.timeline-item{align-items:flex-start;margin-bottom:60px;display:flex;position:relative}.timeline-item:last-child{margin-bottom:0}.timeline-item.left{flex-direction:row;padding-right:calc(50% + 40px)}.timeline-item.right{flex-direction:row-reverse;padding-left:calc(50% + 40px)}.timeline-node{background:var(--bg-card);border:2px solid var(--accent-primary);z-index:2;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 20px #00ffaa4d}.node-number{font-family:var(--font-heading);color:var(--accent-primary);font-size:.875rem;font-weight:600}.timeline-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:inherit;background:#1a1a2499;border:1px solid #ffffff0d;border-radius:16px;flex:1;padding:24px;text-decoration:none;transition:all .4s}.timeline-item.left .timeline-content{text-align:right}.timeline-content:hover{cursor:pointer;border-color:#00ffaa4d;transform:translateY(-4px);box-shadow:0 10px 40px #0000004d}.content-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.timeline-item.left .content-header{flex-direction:row-reverse}.content-icon{width:40px;height:40px;color:var(--accent-primary);background:#00ffaa1a;border-radius:10px;justify-content:center;align-items:center;display:flex}.content-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:600}.content-description{color:var(--text-secondary);margin-bottom:16px;font-size:.95rem;line-height:1.7}.content-tips{flex-wrap:wrap;gap:8px;display:flex}.timeline-item.left .content-tips{justify-content:flex-end}.tip-tag{color:var(--accent-tertiary);background:#00d4ff1a;border:1px solid #00d4ff33;border-radius:20px;padding:4px 12px;font-size:.75rem}.steps-guide-cta{text-align:center;border-top:1px solid #ffffff0f;flex-direction:column;align-items:center;gap:16px;margin-top:60px;padding-top:48px;display:flex}.steps-cta-hint{color:var(--text-secondary);font-size:.9rem;line-height:1.6}.steps-cta-btn{color:var(--accent-primary);font-family:var(--font-heading);cursor:pointer;letter-spacing:.02em;background:linear-gradient(135deg,#00ffaa26,#00d4ff26);border:1px solid #0fa6;border-radius:12px;align-items:center;gap:10px;padding:14px 32px;font-size:1rem;font-weight:600;transition:all .3s;display:inline-flex}.steps-cta-btn:hover{background:linear-gradient(135deg,#00ffaa40,#00d4ff40);border-color:#00ffaab3;transform:translateY(-3px);box-shadow:0 10px 30px #00ffaa26}@media (width<=768px){.timeline-line{left:24px}.timeline-item.left,.timeline-item.right{flex-direction:row;padding-left:64px;padding-right:0}.timeline-node{width:40px;height:40px;left:24px}.timeline-item.left .content-header{flex-direction:row}.timeline-item.left .content-tips{justify-content:flex-start}.timeline-content{text-align:left}.steps-cta-btn{justify-content:center;width:100%}}.showcase{background:linear-gradient(#0000,#12121a4d,#0000)}.showcase-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;display:grid}.showcase-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a2499;border:1px solid #ffffff0d;border-radius:16px;padding:28px;transition:all .4s cubic-bezier(.4,0,.2,1)}.showcase-card:hover{border-color:var(--site-color);box-shadow:0 0 30px #00ffaa1a}.showcase-card:before{content:"";background:linear-gradient(90deg, var(--site-color), transparent);opacity:0;border-radius:16px 16px 0 0;height:3px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.showcase-card:hover:before{opacity:1}.showcase-card-header{align-items:center;gap:14px;margin-bottom:16px;display:flex}.site-icon{width:48px;height:48px;color:var(--site-color);background:#00ffaa1a;border-radius:12px;justify-content:center;align-items:center;transition:all .3s;display:flex}.showcase-card:hover .site-icon{box-shadow:0 0 20px var(--site-color);background:#0fa3}.site-title{font-family:var(--font-heading);font-size:1.1rem;font-weight:600}.site-description{color:var(--text-secondary);margin-bottom:16px;font-size:.9rem;line-height:1.6}.site-features{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.feature-tag{color:var(--accent-tertiary);background:#00d4ff1a;border:1px solid #00d4ff33;border-radius:20px;padding:4px 12px;font-size:.75rem}.site-link{color:var(--text-secondary);background:0 0;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:.875rem;transition:all .3s;display:inline-flex}.site-link:hover{border-color:var(--site-color);color:var(--site-color);background:#00ffaa0d}.showcase-footer{background:#1a1a2466;border:1px solid #ffffff0d;border-radius:16px;justify-content:space-between;align-items:center;margin-top:50px;padding:30px;display:flex}.footer-stats{gap:40px;display:flex}.stat-box{flex-direction:column;display:flex}.stat-value{font-family:var(--font-heading);color:var(--accent-primary);font-size:1.5rem;font-weight:700}.stat-label{color:var(--text-muted);font-size:.8rem}.github-link{background:linear-gradient(135deg, var(--accent-primary), #0c8);color:var(--bg-primary);border-radius:10px;align-items:center;gap:10px;padding:14px 28px;font-weight:600;transition:all .3s;display:inline-flex}.github-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0fa6}@media (width<=1024px){.showcase-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.showcase-grid{grid-template-columns:1fr}.showcase-footer{text-align:center;flex-direction:column;gap:24px}.footer-stats{justify-content:center;gap:24px}.github-link{justify-content:center;width:100%}}.tech{position:relative}.tech-grid{grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;display:grid}.tech-card{background:#1a1a2480;border:1px solid #ffffff0d;border-radius:16px;align-items:flex-start;gap:16px;padding:24px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex}.tech-card:hover{border-color:var(--tech-color);box-shadow:0 0 30px #00ffaa1a}.tech-icon{width:48px;height:48px;color:var(--tech-color);background:#00ffaa1a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;transition:all .3s;display:flex}.tech-card:hover .tech-icon{box-shadow:0 0 20px var(--tech-color);background:#0fa3}.tech-info{flex:1;min-width:0}.tech-name{font-family:var(--font-heading);margin-bottom:4px;font-size:1rem;font-weight:600}.tech-description{color:var(--text-muted);font-size:.8rem;line-height:1.5}@media (width<=1024px){.tech-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.tech-grid{grid-template-columns:1fr}.tech-card{padding:20px}}.cta{text-align:center;padding:100px 0;position:relative;overflow:hidden}.cta-bg{pointer-events:none;position:absolute;inset:0}.cta-glow{filter:blur(80px);border-radius:50%;position:absolute}.cta-glow-1{background:radial-gradient(circle,#00ffaa26 0%,#0000 70%);width:400px;height:400px;top:50%;left:20%;transform:translateY(-50%)}.cta-glow-2{background:radial-gradient(circle,#ff006e1a 0%,#0000 70%);width:350px;height:350px;top:50%;right:20%;transform:translateY(-50%)}.cta-content{max-width:600px;margin:0 auto;padding:0 24px;position:relative}.cta-badge{color:var(--accent-secondary);background:#ff006e1a;border:1px solid #ff006e4d;border-radius:50px;align-items:center;gap:8px;margin-bottom:24px;padding:8px 16px;font-size:.875rem;display:inline-flex}.cta-title{font-family:var(--font-heading);margin-bottom:20px;font-size:clamp(2rem,5vw,3rem);font-weight:700}.cta-description{color:var(--text-secondary);margin-bottom:40px;font-size:1.125rem;line-height:1.8}.cta-button{background:linear-gradient(135deg, var(--accent-secondary), #ff4d8d);color:#fff;border-radius:14px;align-items:center;gap:12px;padding:18px 40px;font-size:1.1rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 8px 30px #ff006e66}.cta-button:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 12px 40px #ff006e80}.cta-button svg{transition:transform .3s}.cta-button:hover svg{transform:translate(4px)}@media (width<=640px){.cta{padding:80px 0}.cta-description{font-size:1rem}.cta-button{justify-content:center;width:100%}}.footer{background:var(--bg-secondary);border-top:1px solid #ffffff0d;padding:60px 0 30px}.footer-content{justify-content:space-between;gap:60px;margin-bottom:40px;display:flex}.footer-brand{max-width:280px}.footer-logo{font-family:var(--font-heading);color:var(--text-primary);align-items:center;gap:10px;margin-bottom:12px;font-size:1.25rem;font-weight:600;display:flex}.footer-logo svg{color:var(--accent-primary)}.footer-tagline{color:var(--text-muted);font-size:.9rem;line-height:1.6}.footer-links{gap:80px;display:flex}.footer-section h4{font-family:var(--font-heading);color:var(--text-primary);margin-bottom:16px;font-size:.9rem;font-weight:600}.footer-section ul{flex-direction:column;gap:10px;display:flex}.footer-section a{color:var(--text-muted);font-size:.9rem;transition:color .3s}.footer-section a:hover{color:var(--accent-primary)}.footer-bottom{border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding-top:30px;display:flex}.copyright{color:var(--text-muted);font-size:.85rem}.footer-social{gap:16px;display:flex}.footer-social a{width:40px;height:40px;color:var(--text-muted);background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;transition:all .3s;display:flex}.footer-social a:hover{color:var(--accent-primary);background:#00ffaa1a}@media (width<=768px){.footer-content{flex-direction:column;gap:40px}.footer-brand{max-width:100%}.footer-links{flex-wrap:wrap;gap:40px}.footer-bottom{text-align:center;flex-direction:column;gap:20px}}.app{flex-direction:column;min-height:100vh;display:flex}main{flex:1}