:root{--bg:#0a0a0f;--bg-2:#131320;--bg-3:#1c1c2e;--text:#f5f5f5;--muted:#9a9aaf;--accent:#ff6a00;--accent-2:#ffb703;--purple:#8b5cf6;--cyan:#22d3ee;--pink:#ec4899;--green:#84cc16;--border:#2a2a3e}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 24px}nav{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#0a0a0fd9;padding:14px 0;position:fixed;top:0;left:0;right:0}nav .container{justify-content:space-between;align-items:center;display:flex}.logo-wrap{align-items:center;gap:12px;text-decoration:none;display:flex}.logo-img{object-fit:contain;filter:drop-shadow(0 0 10px #8b5cf666);width:50px;height:50px}.logo-text{letter-spacing:2px;color:var(--text);font-family:Bangers,cursive;font-size:24px;line-height:1}.logo-text span{background:linear-gradient(135deg, var(--accent), var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text}.nav-links{gap:32px;list-style:none;display:flex}.nav-links a{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-size:13px;font-weight:600;text-decoration:none;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--accent)}.hero{background:radial-gradient(ellipse at top right, #8b5cf62e, transparent 50%), radial-gradient(ellipse at bottom left, #ff6a0026, transparent 50%), var(--bg);align-items:center;min-height:100vh;padding-top:80px;display:flex;position:relative;overflow:hidden}.hero:before{content:"";background-image:linear-gradient(#8b5cf60d 1px,#0000 1px),linear-gradient(90deg,#ff6a000d 1px,#0000 1px);background-size:60px 60px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 30%,#0000 70%);mask-image:radial-gradient(#000 30%,#0000 70%)}.hero .container{z-index:2;grid-template-columns:1.2fr 1fr;align-items:center;gap:60px;display:grid;position:relative}.hero-content{max-width:700px}.badge{color:var(--purple);text-transform:uppercase;letter-spacing:2px;background:#8b5cf626;border:1px solid #8b5cf666;border-radius:50px;margin-bottom:24px;padding:8px 16px;font-size:12px;font-weight:700;display:inline-block}.hero h1{letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;font-family:Bangers,cursive;font-size:clamp(48px,8vw,110px);line-height:.95}.hero h1 .highlight{background:linear-gradient(135deg, var(--accent), var(--pink), var(--purple));color:#0000;-webkit-background-clip:text;background-clip:text;display:inline-block}.hero p{color:var(--muted);max-width:600px;margin-bottom:40px;font-size:19px}.cta-group{flex-wrap:wrap;gap:16px;display:flex}.btn{text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:10px;padding:16px 32px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--pink));color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ec489966}.btn-secondary{color:var(--text);border:1px solid var(--border);background:0 0}.btn-secondary:hover{border-color:var(--purple);color:var(--purple)}.hero-logo{filter:drop-shadow(0 0 60px #8b5cf666)drop-shadow(0 0 30px #ff6a004d);width:100%;max-width:450px;animation:6s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.page-header{text-align:center;background:radial-gradient(ellipse at top, #8b5cf626, transparent 60%), radial-gradient(ellipse at bottom, #ff6a001a, transparent 70%), var(--bg);border-bottom:1px solid var(--border);padding:160px 0 60px;position:relative}.page-header h1{letter-spacing:3px;text-transform:uppercase;margin-bottom:16px;font-family:Bangers,cursive;font-size:clamp(48px,8vw,96px)}.page-header h1 .accent,.section-title .accent,.cta-section h2 .accent,.about h2 .accent{background:linear-gradient(135deg, var(--accent), var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text}.page-header p{color:var(--muted);max-width:700px;margin:0 auto;font-size:18px}section{padding:120px 0}.section-title{letter-spacing:3px;text-align:center;text-transform:uppercase;margin-bottom:16px;font-family:Bangers,cursive;font-size:clamp(40px,6vw,72px)}.section-subtitle{color:var(--muted);text-align:center;max-width:600px;margin:0 auto 60px;font-size:17px}.tabs{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;justify-content:center;gap:8px;max-width:fit-content;margin-bottom:60px;margin-left:auto;margin-right:auto;padding:8px;display:flex}.tab-btn{color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:12px 22px;font-family:inherit;font-size:13px;font-weight:700;transition:all .2s}.tab-btn:hover{color:var(--text)}.tab-btn.active{background:linear-gradient(135deg, var(--accent), var(--pink));color:#fff}.tab-panel{display:none}.tab-panel.active{animation:.3s fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stats{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:60px 0}.stats-grid{text-align:center;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;display:grid}.stat-number{letter-spacing:2px;font-family:Bangers,cursive;font-size:64px;line-height:1}.stat-number.c1{color:var(--accent)}.stat-number.c2{color:var(--purple)}.stat-number.c3{color:var(--cyan)}.stat-number.c4{color:var(--pink)}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-top:8px;font-size:12px;font-weight:600}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1100px;margin:0 auto;display:grid}.card{background:var(--bg-2);border:1px solid var(--border);color:inherit;border-radius:16px;padding:32px;text-decoration:none;transition:all .3s;display:block;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--accent), var(--pink), var(--purple));transform-origin:0;height:4px;transition:transform .4s;position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.card:hover{border-color:var(--purple);transform:translateY(-6px);box-shadow:0 20px 40px #00000080}.card:hover:before{transform:scaleX(1)}.card-icon{border-radius:12px;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:20px;font-size:28px;display:flex}.card-icon.i1{background:#ff6a0026}.card-icon.i2{background:#8b5cf626}.card-icon.i3{background:#22d3ee26}.card-icon.i4{background:#ec489926}.card h3{letter-spacing:1.5px;margin-bottom:12px;font-family:Bebas Neue,sans-serif;font-size:20px}.card p{color:var(--muted);font-size:15px}.card-status{text-transform:uppercase;letter-spacing:1px;border-radius:50px;margin-bottom:12px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-block}.card-status.ongoing{color:var(--green);background:#84cc1626;border:1px solid #84cc164d}.card-status.done{color:var(--purple);background:#8b5cf626;border:1px solid #8b5cf64d}.card-status.planned{color:var(--cyan);background:#22d3ee26;border:1px solid #22d3ee4d}.card-status.test{color:var(--accent);background:#ff6a0026;border:1px solid #ff6a004d}.video-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;display:grid}.video-card{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;transition:all .3s;overflow:hidden}.video-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 20px 40px #00000080}.video-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#2a2a3e,#1a1a2e);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.video-thumb iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.video-info{padding:20px}.video-info h3{margin-bottom:8px;font-size:17px}.video-meta{color:var(--muted);gap:12px;font-size:13px;display:flex}.quiz-wrap{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;max-width:700px;margin:0 auto;padding:40px}.quiz-progress{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;font-size:13px}.quiz-question{margin-bottom:24px;font-size:22px;font-weight:600}.quiz-answers{gap:12px;margin-bottom:24px;display:grid}.quiz-answer{background:var(--bg-3);border:1px solid var(--border);color:var(--text);text-align:left;cursor:pointer;border-radius:10px;padding:16px 20px;font-family:inherit;font-size:15px;transition:all .2s}.quiz-answer:hover{border-color:var(--purple);transform:translate(4px)}.quiz-answer.correct{border-color:var(--green);color:var(--green);background:#84cc161a}.quiz-answer.wrong{color:#ef4444;background:#ef44441a;border-color:#ef4444}.quiz-result{text-align:center;padding:20px}.quiz-result h3{letter-spacing:2px;margin-bottom:12px;font-family:Bangers,cursive;font-size:48px}.quiz-result .score{background:linear-gradient(135deg, var(--accent), var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text}.community-feed{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.community-card{background:var(--bg-2);border:1px solid var(--border);color:inherit;border-radius:12px;padding:24px;text-decoration:none;transition:all .3s;display:block}.community-card:hover{border-color:var(--purple);transform:translateY(-4px)}.community-card .platform{text-transform:uppercase;letter-spacing:1px;border-radius:50px;margin-bottom:12px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-block}.product-card{background:var(--bg-2);border:1px solid var(--border);border-radius:16px;transition:all .3s;overflow:hidden}.product-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 20px 40px #00000080}.product-image{aspect-ratio:1;background:linear-gradient(135deg, var(--bg-3), var(--bg-2));justify-content:center;align-items:center;font-size:64px;display:flex}.product-body{padding:24px}.product-body h3{letter-spacing:1.5px;margin-bottom:8px;font-family:Bebas Neue,sans-serif;font-size:22px}.product-price{letter-spacing:1.5px;background:linear-gradient(135deg, var(--accent), var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text;margin:12px 0;font-family:Bangers,cursive;font-size:28px}.about{background:var(--bg-2);position:relative;overflow:hidden}.about:before{content:"";background:radial-gradient(circle,#8b5cf61a,#0000 70%);border-radius:50%;width:400px;height:400px;position:absolute;top:-100px;right:-100px}.about-grid{grid-template-columns:1fr 1fr;align-items:center;gap:60px;display:grid;position:relative}.about-image-wrap{justify-content:center;align-items:center;padding:20px;display:flex}.about-image{filter:drop-shadow(0 0 40px #8b5cf64d);width:100%;max-width:420px}.about h2{letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;font-family:Bangers,cursive;font-size:56px;line-height:1}.about p{color:var(--muted);margin-bottom:16px;font-size:17px}.cta-section{text-align:center;background:radial-gradient(ellipse at center, #8b5cf633, transparent 60%), radial-gradient(ellipse at center, #ff6a0026, transparent 70%), var(--bg)}.cta-section h2{letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;font-family:Bangers,cursive;font-size:clamp(40px,6vw,80px)}.cta-section p{color:var(--muted);max-width:500px;margin:0 auto 40px;font-size:18px}footer{background:var(--bg-2);border-top:1px solid var(--border);text-align:center;color:var(--muted);padding:48px 0 32px;font-size:14px}.footer-logo{filter:drop-shadow(0 0 15px #8b5cf64d);width:70px;height:70px;margin-bottom:16px}footer .socials{flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:24px;display:flex}footer .socials a{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:700;text-decoration:none;transition:color .2s}footer .socials a:hover{color:var(--accent)}@media (max-width:900px){.hero .container{text-align:center;grid-template-columns:1fr}.hero-logo{order:-1;max-width:350px;margin:0 auto}.hero p{margin-left:auto;margin-right:auto}.cta-group{justify-content:center}.about-grid{grid-template-columns:1fr}}@media (max-width:768px){.nav-links{display:none}section{padding:80px 0}}
