:root{--primary-color:#f28482;--secondary-color:#3d405b;--bg-light:#fffbf5;--white:#fff;--text-dark:#3d405b;--text-muted:#666;--font-family:"Inter", sans-serif;--accent:#f4a261;--success:#2ecc71;--warning:#f1c40f;--danger:#e74c3c}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-family);background-color:var(--white);color:var(--text-dark);line-height:1.7;overflow-x:hidden}section{padding:100px 0}.container{max-width:1200px;margin:0 auto;padding:0 24px}h1,h2,h3,h4{color:var(--secondary-color);font-weight:800;line-height:1.2}p{color:var(--text-muted);margin-bottom:20px;font-size:1.1rem}span.highlight{color:var(--primary-color)}.btn{cursor:pointer;border:2px solid #0000;border-radius:50px;align-items:center;gap:10px;padding:16px 36px;font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex}.btn-primary{background-color:var(--primary-color);color:#fff;box-shadow:0 10px 25px #f2848266}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 35px #f2848280}.reveal{opacity:0;transition:all .8s cubic-bezier(.16,1,.3,1);transform:translateY(40px)}.reveal.visible{opacity:1;transform:translateY(0)}.section-header{text-align:center;margin-bottom:70px;max-width:800px;margin-inline:auto}.section-header h2{margin-bottom:20px;font-size:clamp(2.2rem,5vw,3.2rem)}.section-header .badge{color:var(--primary-color);text-transform:uppercase;letter-spacing:1px;background:#f284821a;border-radius:30px;margin-bottom:15px;padding:8px 16px;font-size:.9rem;font-weight:700;display:inline-block}.hero{background:linear-gradient(135deg, var(--bg-light) 0%, white 100%);padding-top:160px;padding-bottom:80px}.hero-grid{grid-template-columns:1.1fr 1fr;align-items:center;gap:50px;display:grid}.hero-content h1{margin-bottom:25px;font-size:clamp(2.5rem,6vw,4rem)}.game-ui{color:#fff;background:#1e1e2f;border:4px solid #2a2a40;border-radius:24px;padding:30px;position:relative;overflow:hidden;box-shadow:0 40px 80px #0003}.game-header{border-bottom:2px solid #2a2a40;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;display:flex}.avatar{background:var(--accent);border:3px solid #fff;border-radius:50%;place-items:center;width:60px;height:60px;font-size:1.5rem;font-weight:700;display:grid}.xp-bar-container{background:#2a2a40;border-radius:10px;width:100%;height:12px;margin-top:8px;overflow:hidden}.xp-bar{background:linear-gradient(90deg,#f4a261,#f1c40f);width:85%;height:100%;transition:all 1s cubic-bezier(.175,.885,.32,1.275)}.rank-display{text-align:center;margin:30px 0}.rank-title{background:linear-gradient(90deg,#f1c40f,#f39c12);color:#0000;text-transform:uppercase;letter-spacing:2px;text-shadow:0 5px 15px #f1c40f33;-webkit-background-clip:text;margin-top:10px;font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:900}.badges-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.badge-item{text-align:center;cursor:pointer;background:#2a2a40;border:2px solid #0000;border-radius:16px;padding:15px;transition:all .3s}.badge-item:hover{border-color:#f1c40f80;transform:translateY(-5px)}.badge-icon{opacity:.5;filter:grayscale();margin-bottom:10px;font-size:2.5rem;transition:all .4s}.badge-item.unlocked .badge-icon{opacity:1;filter:grayscale(0);text-shadow:0 0 20px #f1c40f80}.badge-name{color:#aaa;font-size:.8rem;font-weight:600}.badge-item.unlocked .badge-name{color:#fff}.game-card{color:#fff;background:#1a1b2e;border:1px solid #2d2d44;border-radius:24px;padding:30px;font-family:Inter,sans-serif;box-shadow:0 40px 80px #00000040}.gc-header{align-items:center;gap:15px;margin-bottom:28px;display:flex}.gc-avatar{color:#fff;background:linear-gradient(135deg,#f4a261,#e76f51);border-radius:14px;flex-shrink:0;place-items:center;width:52px;height:52px;font-size:1.4rem;font-weight:900;display:grid}.gc-name{letter-spacing:.3px;font-size:1.15rem;font-weight:800}.gc-rank-label{color:#8ab4f8;margin-top:3px;font-size:.82rem;font-weight:600}.gc-xp-pill{color:#f1c40f;white-space:nowrap;background:#f1c40f26;border:1px solid #f1c40f4d;border-radius:30px;margin-left:auto;padding:6px 14px;font-size:.9rem;font-weight:800}.gc-progress-section{margin-bottom:28px}.gc-progress-header{color:#aaa;justify-content:space-between;margin-bottom:10px;font-size:.85rem;font-weight:600;display:flex}.gc-progress-header span:last-child{color:#f1c40f}.gc-track{background:#2d2d44;border-radius:8px;height:14px;overflow:hidden}.gc-fill{background:linear-gradient(90deg,#f4a261,#f1c40f);border-radius:8px;width:72%;height:100%;transition:width 1.2s cubic-bezier(.22,1,.36,1);box-shadow:0 0 12px #f1c40f66}.gc-badges-title{color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;font-size:.8rem;font-weight:700}.gc-badges{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px;display:grid}.gc-badge{text-align:center;background:#2d2d44;border:1.5px solid #3a3a55;border-radius:14px;padding:14px 8px;transition:all .4s}.gc-badge .badge-icon{filter:grayscale();opacity:.4;margin-bottom:6px;font-size:1.8rem;transition:all .4s;display:block}.gc-badge .badge-name{color:#666;font-size:.7rem;font-weight:600;transition:all .4s}.gc-badge.unlocked{background:#f1c40f14;border-color:#f1c40f4d}.gc-badge.unlocked .badge-icon{filter:grayscale(0);opacity:1}.gc-badge.unlocked .badge-name{color:#ddd}.gc-badge.popping{animation:.6s cubic-bezier(.175,.885,.32,1.275) forwards badgePop}@keyframes badgePop{0%{transform:scale(1)}50%{transform:scale(1.3);box-shadow:0 0 25px #f1c40f99}to{transform:scale(1)}}.gc-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f4a261,#f28482);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px;font-size:1rem;font-weight:700;transition:all .3s;display:flex}.gc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #f2848266}.gc-btn:disabled{opacity:.5;cursor:default;transform:none}.content-split{grid-template-columns:1fr 1fr;align-items:center;gap:60px;margin-bottom:100px;display:grid}.content-split.reverse{direction:rtl}.content-split.reverse>*{direction:ltr}.content-image{background:var(--bg-light);text-align:center;border-radius:30px;padding:50px;position:relative}.check-list{margin-top:30px;list-style:none}.check-list li{color:var(--text-muted);align-items:flex-start;gap:15px;margin-bottom:20px;font-size:1.1rem;display:flex}.check-list i{color:var(--primary-color);background:#f284821a;border-radius:50%;margin-top:3px;padding:6px;font-size:.9rem}.insight-card{text-align:left;border-left:5px solid var(--primary-color);background:#fff;border-radius:16px;margin-bottom:20px;padding:20px;box-shadow:0 10px 30px #0000000d}.insight-bar{background:#eee;border-radius:4px;height:8px;margin-top:10px;overflow:hidden}.insight-fill{border-radius:4px;height:100%}.features-bg{background:var(--bg-light);padding:100px 0}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px;display:grid}.feature-card{background:#fff;border:1px solid #00000008;border-radius:20px;padding:40px;transition:all .4s;box-shadow:0 10px 30px #00000005}.feature-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px #3d405b14}.feature-icon{background:var(--bg-light);width:70px;height:70px;color:var(--primary-color);border-radius:20px;place-items:center;margin-bottom:30px;font-size:2rem;display:grid}.faq-container{max-width:800px;margin:0 auto}.faq-item{background:#fff;border:1px solid #eee;border-radius:12px;margin-bottom:15px;overflow:hidden;box-shadow:0 4px 15px #00000005}.faq-question{width:100%;color:var(--secondary-color);cursor:pointer;text-align:left;font-size:1.2rem;font-weight:700;font-family:var(--font-family);background:0 0;border:none;justify-content:space-between;align-items:center;padding:25px 30px;display:flex}.faq-question i{color:var(--primary-color);transition:all .3s}.faq-question.active i{transform:rotate(180deg)}.faq-answer{max-height:0;color:var(--text-muted);padding:0 30px;font-size:1.05rem;transition:all .4s ease-in-out;overflow:hidden}.faq-answer p{margin-bottom:25px}.cta{background:var(--secondary-color);color:#fff;text-align:center;padding:100px 0}.cta h2{color:#fff;margin-bottom:25px}@media (width<=992px){.hero-grid,.content-split{grid-template-columns:1fr;gap:40px}.hero-content{text-align:center}}.achievement-belt{background:#111116;border-top:1px solid #222;border-bottom:1px solid #222;width:100vw;margin-left:-50vw;margin-right:-50vw;padding:15px 0;position:relative;left:50%;right:50%;overflow:hidden}.achievement-track{width:max-content;animation:40s linear infinite scrollAchievements;display:flex}.ach-item{color:#fff;white-space:nowrap;align-items:center;gap:12px;padding:0 50px;font-family:Inter,sans-serif;font-size:.95rem;display:flex}.ach-item span.name{color:#8ab4f8;font-weight:600}.ach-item span.action{color:#888}.ach-item span.award{color:#34a853;font-weight:600}.ach-item:after{content:"";background:#333;border-radius:50%;width:4px;height:4px;margin-left:50px;display:inline-block}@keyframes scrollAchievements{0%{transform:translate(0)}to{transform:translate(-50%)}}.premium-dashboard{background:#181820;border:1px solid #2d2d3d;border-radius:20px;padding:0;font-family:Inter,sans-serif;overflow:hidden;box-shadow:0 40px 80px #0000004d}.dash-header{background:#1c1c26;border-bottom:1px solid #2d2d3d;justify-content:space-between;align-items:center;padding:25px 30px;display:flex}.player-info{align-items:center;gap:15px;display:flex}.avatar{color:#fff;background:#34a853;border-radius:12px;place-items:center;width:45px;height:45px;font-size:1.2rem;font-weight:700;display:grid}.btn-analyze{color:#8ab4f8;cursor:pointer;background:#8ab4f81a;border:1px solid #8ab4f84d;border-radius:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .3s}.btn-analyze:hover{background:#8ab4f833}.skill-tree-container{background:radial-gradient(circle,#1f1f2e 0%,#181820 100%);height:300px;padding:60px 30px;position:relative}.node{z-index:2;flex-direction:column;align-items:center;width:80px;display:flex;position:absolute}.node-1{top:100px;left:10%}.node-2{top:50px;left:35%}.node-3{top:150px;left:60%}.node-4{top:80px;left:85%}.node-ring{background:#222;border:4px solid #333;border-radius:50%;place-items:center;width:60px;height:60px;transition:all .5s;display:grid;position:relative}.ring-fill{opacity:0;border:4px solid #0000;border-top-color:#8ab4f8;border-radius:50%;transition:transform 1s cubic-bezier(.1,.7,.1,1),border-color .5s;position:absolute;inset:-4px;transform:rotate(-45deg)}.node-inner{color:#555;z-index:2;background:#181820;border-radius:50%;place-items:center;width:44px;height:44px;font-size:1.2rem;transition:all .5s;display:grid}.node-label{color:#888;text-align:center;white-space:nowrap;margin-top:12px;font-size:.8rem;font-weight:600;transition:all .5s}.node-pct{color:#fff;opacity:0;margin-top:5px;font-size:1rem;font-weight:800;transition:all .5s}.tree-path{z-index:1;transform-origin:0;background:#333;height:3px;position:absolute}#path1{width:calc(25% - 40px);top:130px;left:calc(10% + 40px);transform:rotate(-15deg)}#path2{width:calc(25% - 40px);top:80px;left:calc(35% + 40px);transform:rotate(18deg)}#path3{width:calc(25% - 40px);top:180px;left:calc(60% + 40px);transform:rotate(-12deg)}.tree-path:after{content:"";background:#8ab4f8;width:0;height:100%;transition:width .8s;position:absolute;top:0;left:0;box-shadow:0 0 10px #8ab4f8}.node.active .node-ring{border-color:#2d2d3d}.node.active .ring-fill{opacity:1}.node.active .node-inner,.node.active .node-label{color:#fff}.node.active .node-pct{opacity:1}.node.success .ring-fill{border-color:#34a853;transform:rotate(315deg)}.node.success .node-inner{color:#34a853;box-shadow:inset 0 0 15px #34a85333}.node.success .node-pct{color:#34a853}.node.warning .ring-fill{border-top-color:#fbbc05;border-bottom-color:#fbbc05;border-right-color:#fbbc05;transform:rotate(225deg)}.node.warning .node-inner{color:#fbbc05;box-shadow:inset 0 0 15px #fbbc0533}.node.warning .node-pct{color:#fbbc05}.node.danger .ring-fill{border-top-color:#ea4335;border-right-color:#0000;transform:rotate(45deg)}.node.danger .node-inner{color:#ea4335;box-shadow:inset 0 0 15px #ea433533}.node.danger .node-pct{color:#ea4335}.tree-path.active:after{width:100%}.dash-footer{background:#181820;border-top:1px solid #2d2d3d;padding:15px 30px}@media (width<=992px){.skill-tree-container{display:none}}
