:root{--bg-primary:#000000;--bg-secondary:#050505;--bg-card:#0a0a0a;--bg-card-hover:#141414;--text-primary:#f0f4f8;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-primary:#39FF14;--accent-secondary:#008f11;--accent-glow:rgba(57,255,20,0.3);--accent-gradient:linear-gradient(135deg,#39FF14 0%,#008f11 100%);--success:#10b981;--warning:#f59e0b;--border-color:rgba(57,255,20,0.2);--border-glow:rgba(57,255,20,0.5);--font-primary:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-display:'Orbitron',monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 16px rgba(0,0,0,0.4);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);--shadow-glow:0 0 30px var(--accent-glow);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease;--max-width:1200px;--content-width:800px} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-primary);font-size:16px;line-height:1.7;color:var(--text-primary);background:var(--bg-primary);min-height:100vh;overflow-x:hidden} body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 20%,rgba(57,255,20,0.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,143,17,0.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(57,255,20,0.03) 0%,transparent 70%);pointer-events:none;z-index:-1} @keyframes twinkle{0%,100%{opacity:0.3} 50%{opacity:1} } body::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(2px 2px at 20px 30px,white,transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,0.8),transparent),radial-gradient(1px 1px at 90px 40px,white,transparent),radial-gradient(2px 2px at 130px 80px,rgba(255,255,255,0.6),transparent),radial-gradient(1px 1px at 160px 120px,white,transparent);background-repeat:repeat;background-size:200px 200px;animation:twinkle 4s ease-in-out infinite;pointer-events:none;z-index:-1;opacity:0.5} h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.3;color:var(--text-primary);letter-spacing:0.5px} h1{font-size:clamp(2rem,5vw,3rem);background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.5rem} h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--accent-primary);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--border-color)} h3{font-size:1.25rem;color:var(--text-primary);margin-bottom:0.75rem} p{margin-bottom:1rem;color:var(--text-secondary)} a{color:var(--accent-primary);text-decoration:none;transition:var(--transition-fast)} a:hover{color:var(--accent-secondary);text-shadow:0 0 10px var(--accent-glow)} strong{color:var(--text-primary);font-weight:600} .btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:700;font-size:0.9rem;text-transform:uppercase;letter-spacing:1px;text-decoration:none;transition:all var(--transition-normal);cursor:pointer;border:none;gap:0.5rem} .btn-primary{background:var(--accent-gradient);color:#000;box-shadow:var(--shadow-glow)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 40px var(--accent-glow);filter:brightness(1.1)} .btn-secondary{background:rgba(57,255,20,0.1);color:var(--accent-primary);border:1px solid var(--border-color)} .btn-secondary:hover{background:rgba(57,255,20,0.2);border-color:var(--accent-primary);transform:translateY(-2px)} .container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 3rem} .content-wrapper{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 3rem} .content-wrapper p,.content-wrapper li,.content-wrapper .callout{max-width:800px} .header{position:sticky;top:0;z-index:100;background:rgba(0,0,0,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);padding:1rem 0} .header-inner{display:flex;justify-content:space-between;align-items:center} .logo{font-family:var(--font-display);font-size:1.25rem;font-weight:900;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;display:flex;align-items:center;gap:0.5rem} .logo::before{content:'⚔️';font-size:1.5rem} .nav{display:flex;gap:0.5rem} .nav-link{padding:0.5rem 1rem;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:500;color:var(--text-secondary);transition:var(--transition-normal)} .nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--bg-card)} .lang-switcher{position:relative;margin-left:1rem} .lang-switcher-btn{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:600;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;transition:var(--transition-fast)} .lang-switcher-btn:hover{border-color:var(--accent-primary);background:var(--bg-card-hover)} .lang-switcher-btn::after{content:'▼';font-size:0.6rem;transition:var(--transition-fast)} .lang-switcher.active .lang-switcher-btn::after{transform:rotate(180deg)} .lang-dropdown{position:absolute;top:100%;right:0;margin-top:0.75rem;min-width:180px;background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-secondary) 100%);border:1px solid var(--accent-primary);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 20px var(--accent-glow);opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.95);transition:all 0.2s ease;z-index:200;max-height:350px;overflow-y:auto;padding:0.5rem 0} .lang-switcher.active .lang-dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .lang-dropdown a{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;font-size:0.9rem;color:var(--text-secondary);text-decoration:none;transition:all 0.15s ease;border-left:3px solid transparent} .lang-dropdown a:hover{background:rgba(57,255,20,0.1);color:var(--accent-primary);border-left-color:var(--accent-primary);padding-left:1.5rem} .lang-dropdown a.active{background:rgba(57,255,20,0.15);color:var(--accent-primary);border-left-color:var(--accent-primary);font-weight:600} .nav-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer} .hero{padding:4rem 0;text-align:center;position:relative;max-width:var(--max-width);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem} .hero-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);font-size:0.875rem;color:var(--accent-primary);margin-bottom:1.5rem} .hero-badge::before{content:'🛸'} .hero h1{margin-bottom:1rem} .hero-subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto 2rem} .update-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);border-radius:var(--radius-sm);font-size:0.75rem;color:var(--success)} .update-badge::before{content:'✓'} .main{padding:3rem 0} .section{margin-bottom:3rem;max-width:var(--max-width);margin-left:auto;margin-right:auto;padding:0 3rem} .card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.5rem;transition:var(--transition-normal)} .card:hover{background:var(--bg-card-hover);border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-2px)} .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem} .guide-card{display:block} .guide-card h3{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem} .guide-card h3::before{content:'→';color:var(--accent-primary);transition:var(--transition-fast)} .guide-card:hover h3::before{transform:translateX(4px);color:var(--accent-secondary)} .guide-card p{font-size:0.9375rem;margin-bottom:0} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0} .stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;text-align:center} .stat-value{font-family:var(--font-display);font-size:2rem;font-weight:900;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .stat-label{font-size:0.875rem;color:var(--text-muted);margin-top:0.25rem} .feature-list{list-style:none;padding:0} .feature-list li{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid var(--border-color);color:var(--text-secondary)} .feature-list li:last-child{border-bottom:none} .feature-list li::before{content:'✦';color:var(--accent-primary);font-size:1rem} .faq-list{margin-top:1.5rem} .faq-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:1rem;overflow:hidden} .faq-question{padding:1.25rem;font-weight:600;color:var(--text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center} .faq-question::after{content:'+';font-size:1.25rem;color:var(--accent-primary);transition:var(--transition-fast)} .faq-item:hover .faq-question::after{color:var(--accent-secondary)} .faq-answer{padding:0 1.25rem 1.25rem;color:var(--text-secondary);border-top:1px solid var(--border-color)} .table-wrapper{overflow-x:auto;margin:1.5rem 0} table{width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:var(--radius-md);overflow:hidden} th,td{padding:1rem;text-align:left;border-bottom:1px solid var(--border-color)} th{background:var(--bg-secondary);font-weight:600;color:var(--accent-primary);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.5px} td{color:var(--text-secondary)} tr:last-child td{border-bottom:none} tr:hover td{background:var(--bg-card-hover)} .callout{background:linear-gradient(90deg,rgba(57,255,20,0.1) 0%,transparent 100%);border-left:4px solid var(--accent-primary);padding:1rem 1.5rem;margin:1.5rem 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0} .callout p{margin-bottom:0} .steps{counter-reset:step-counter;list-style:none;padding:0} .step{position:relative;padding-left:3.5rem;padding-bottom:2rem;border-left:2px solid var(--border-color);margin-left:1rem} .step:last-child{border-left:none;padding-bottom:0} .step::before{counter-increment:step-counter;content:counter(step-counter);position:absolute;left:-1rem;top:0;width:2rem;height:2rem;background:var(--accent-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:0.875rem;color:var(--bg-primary)} .step h3{margin-bottom:0.5rem} .step p{margin-bottom:0} .breadcrumb{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text-muted);margin-bottom:2rem} .breadcrumb a{color:var(--text-muted)} .breadcrumb a:hover{color:var(--accent-primary)} .breadcrumb-separator{color:var(--text-muted)} .page-header{padding:3rem 0;text-align:center;border-bottom:1px solid var(--border-color);margin-bottom:3rem} @media (max-width:768px){.container,.content-wrapper{padding:0 2rem} .nav{position:fixed;top:60px;left:0;right:0;background:var(--bg-secondary);flex-direction:column;padding:1rem;border-bottom:1px solid var(--border-color);transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--transition-normal)} .nav.active{transform:translateY(0);opacity:1;visibility:visible} .nav-toggle{display:block} .nav-link{padding:0.75rem 1rem} .hero{padding:2rem 0} .card-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr;gap:2rem} .footer-nav{flex-direction:column;gap:0.75rem} } @media (max-width:480px){.container,.content-wrapper{padding:0 1.5rem} .stats-grid{grid-template-columns:1fr} .step{padding-left:2.5rem} } .text-center{text-align:center} .text-left{text-align:left} .text-gradient{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .mt-1{margin-top:0.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem} .mb-1{margin-bottom:0.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem} .footer{background:var(--bg-card);border-top:1px solid rgba(255,255,255,0.05);padding:60px 0 30px;margin-top:auto} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px} .footer-column h3{color:var(--text-primary);font-size:1.1rem;margin-bottom:20px;font-weight:600;letter-spacing:0.5px} .footer-links{display:flex;flex-direction:column;gap:12px} .footer-links a{color:var(--text-secondary);text-decoration:none;transition:all 0.3s ease;width:fit-content;font-size:0.95rem} .footer-links a:hover{color:var(--accent-primary);transform:translateX(5px)} .footer-desc{color:var(--text-secondary);margin-top:15px;line-height:1.6;font-size:0.95rem;max-width:320px} .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:30px;text-align:center;color:var(--text-muted);font-size:0.9rem} .footer-logo{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--accent-primary)}