/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;width:100%}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#060911;color:#c9d1d9;line-height:1.6;overflow-x:hidden;width:100%;max-width:100vw}
a{color:inherit;text-decoration:none}
::selection{background:#22d3ee33;color:#22d3ee}

/* ===== NAVBAR ===== */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:14px 36px;background:#0d1117;border-bottom:1px solid #161b22;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.nav-brand{font-size:22px;font-weight:800;color:#22d3ee;display:flex;align-items:center;gap:6px;letter-spacing:-0.5px;flex-shrink:0}
.brand-icon{font-size:24px}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:#8b949e;font-size:14px;font-weight:500;transition:.2s}
.nav-links a:hover{color:#22d3ee}
.nav-user{color:#22d3ee !important;font-weight:600}
.nav-cta-small{background:#22d3ee20;color:#22d3ee !important;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;border:1px solid #22d3ee40}
.btn-google{display:flex;align-items:center;gap:8px;background:#fff;color:#333;padding:7px 16px;border-radius:6px;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:.2s}
.btn-google:hover{box-shadow:0 2px 12px #fff3}

/* Hamburger Menu Button */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:200;flex-shrink:0}
.hamburger span{display:block;width:24px;height:2.5px;background:#c9d1d9;margin:5px 0;border-radius:2px;transition:all .3s ease}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile nav overlay - hidden on desktop */
.nav-overlay{display:none}

/* Language Toggle */
.lang-toggle{background:#161b22;color:#22d3ee;padding:5px 14px;border-radius:6px;font-size:13px;font-weight:700;border:1px solid #22d3ee40;cursor:pointer;transition:.2s;letter-spacing:0.5px}
.lang-toggle:hover{background:#22d3ee20;border-color:#22d3ee}

/* ===== HERO ===== */
.hero{text-align:center;padding:100px 20px 80px;position:relative;overflow:hidden}
.hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,#22d3ee15 0%,transparent 70%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none}
.hero-content{position:relative;z-index:1}
.hero-badge{display:inline-block;background:#dc262620;color:#f87171;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:24px;border:1px solid #dc262640;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.hero h1{font-size:clamp(30px,5vw,52px);font-weight:800;line-height:1.15;margin-bottom:16px;color:#f0f6fc;letter-spacing:-1px}
.gradient-text{background:linear-gradient(135deg,#22d3ee,#818cf8,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(15px,2.5vw,18px);color:#8b949e;max-width:620px;margin:0 auto 40px;line-height:1.7}
.hero-stats{display:flex;justify-content:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.stat-box{background:#0d1117;padding:20px 24px;border-radius:12px;border:1px solid #161b22;min-width:120px;transition:.3s;flex:1;max-width:200px}
.stat-box:hover{border-color:#22d3ee40;transform:translateY(-2px)}
.stat-number{display:block;font-size:clamp(24px,3.5vw,32px);font-weight:800;color:#22d3ee;font-family:'JetBrains Mono',monospace}
.stat-label{font-size:12px;color:#6e7681;margin-top:4px}
.hero-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{display:inline-block;background:linear-gradient(135deg,#22d3ee,#06b6d4);color:#060911;padding:13px 32px;border-radius:8px;font-size:16px;font-weight:700;transition:.3s;border:none;cursor:pointer;letter-spacing:-0.3px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px #22d3ee40}
.btn-large{padding:16px 40px;font-size:18px}
.btn-outline{display:inline-block;border:1.5px solid #30363d;color:#c9d1d9;padding:12px 28px;border-radius:8px;font-size:15px;font-weight:600;transition:.3s}
.btn-outline:hover{border-color:#22d3ee;color:#22d3ee}
.btn-danger{display:inline-block;border:1.5px solid #f8717140;color:#f87171;padding:10px 24px;border-radius:8px;font-size:14px;transition:.3s}
.btn-danger:hover{background:#f8717120}

/* ===== HOW IT WORKS ===== */
.how-it-works{padding:80px 36px;text-align:center}
.how-it-works h2,.challenges-section h2,.top-section h2,.lb-header h1{font-size:clamp(26px,4vw,36px);font-weight:800;color:#f0f6fc;margin-bottom:8px;letter-spacing:-0.5px}
.section-sub{color:#6e7681;font-size:clamp(14px,2vw,16px);margin-bottom:40px}
.steps{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.step{background:#0d1117;padding:32px 24px;border-radius:14px;width:280px;border:1px solid #161b22;transition:.3s;text-align:center}
.step:hover{border-color:#22d3ee40;transform:translateY(-4px)}
.step-icon{font-size:36px;margin-bottom:8px}
.step-number{font-family:'JetBrains Mono',monospace;font-size:13px;color:#22d3ee60;font-weight:700;margin-bottom:10px}
.step h3{color:#f0f6fc;margin-bottom:8px;font-size:18px}
.step p{color:#8b949e;font-size:14px}
.step-arrow{color:#30363d;font-size:28px;font-weight:bold}

/* ===== CHALLENGES ===== */
.challenges-section{padding:60px 36px}
.challenges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;max-width:1200px;margin:0 auto}
.challenge-card{background:#0d1117;padding:24px;border-radius:14px;border:1px solid #161b22;transition:.3s;display:block}
.challenge-card:hover{border-color:#22d3ee40;transform:translateY(-3px)}
.challenge-card.completed{opacity:.65}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.challenge-cat{background:#22d3ee15;color:#22d3ee;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.challenge-status{font-size:12px;font-weight:600}
.challenge-status.active{color:#34d399}
.challenge-status.completed{color:#6e7681}
.challenge-card h3{color:#f0f6fc;margin-bottom:8px;font-size:19px;font-weight:700}
.challenge-card p{color:#8b949e;font-size:13px;margin-bottom:16px;line-height:1.5}
.challenge-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.meta-item{font-size:12px;color:#6e7681;display:flex;align-items:center;gap:4px}
.meta-icon{font-size:14px}
.score-display{display:flex;align-items:center;gap:10px}
.score-start{font-family:'JetBrains Mono',monospace;font-size:13px;color:#6e7681}
.score-end{font-family:'JetBrains Mono',monospace;font-size:14px;color:#22d3ee;font-weight:700}
.progress-bar{flex:1;background:#161b22;border-radius:10px;height:6px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,#22d3ee,#818cf8);height:100%;border-radius:10px;transition:width 1.5s ease}

/* ===== TOP BUILDERS (HOME) ===== */
.top-section{padding:60px 36px;text-align:center}
.top-cards{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;max-width:1000px;margin:0 auto}
.top-card{background:#0d1117;padding:20px;border-radius:12px;border:1px solid #161b22;width:200px;text-align:center;transition:.3s}
.top-card:hover{border-color:#22d3ee40}
.top-card.rank-1{border-color:#fbbf2440}
.top-card.rank-2{border-color:#94a3b840}
.top-card.rank-3{border-color:#d9764040}
.top-rank{margin-bottom:6px}
.rank-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:#6e7681}
.top-avatar{font-size:32px;margin-bottom:6px}
.top-name{font-weight:700;color:#f0f6fc;font-size:14px;margin-bottom:4px}
.top-stats-mini{font-size:11px;color:#6e7681;margin-top:6px}
.top-stats-mini span{display:block}
.jump-text{color:#34d399 !important;font-weight:600}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:0.3px}
.badge.evograndmaster{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#060911}
.badge.evomaster{background:linear-gradient(135deg,#818cf8,#6366f1);color:#fff}
.badge.evoexpert{background:#22d3ee30;color:#22d3ee}
.badge.evorookie{background:#161b22;color:#6e7681;border:1px solid #21262d}

/* ===== LEADERBOARD PAGE ===== */
.lb-page{max-width:1000px;margin:0 auto;padding:40px 20px}
.lb-header{text-align:center;margin-bottom:40px}
.lb-header p{color:#6e7681;margin-top:8px}
.podium{display:flex;justify-content:center;gap:20px;margin-bottom:50px;flex-wrap:wrap}
.podium-card{background:#0d1117;padding:28px 24px;border-radius:16px;border:1px solid #161b22;width:220px;text-align:center;transition:.3s}
.podium-card:hover{transform:translateY(-4px)}
.podium-card.p-1{border-color:#fbbf2450;order:2}
.podium-card.p-2{border-color:#94a3b840;order:1}
.podium-card.p-3{border-color:#d9764040;order:3}
.podium-medal{font-size:40px;margin-bottom:8px}
.podium-avatar{font-size:36px;margin-bottom:6px}
.podium-name{font-weight:700;color:#f0f6fc;font-size:16px}
.podium-country{font-size:18px;margin:4px 0}
.podium-stats{margin-top:10px;font-size:12px;color:#6e7681}
.podium-stats .ps{margin-bottom:2px}
.lb-table-wrap{overflow-x:auto;margin-bottom:40px;-webkit-overflow-scrolling:touch}
.lb-table{width:100%;border-collapse:collapse;background:#0d1117;border-radius:12px;overflow:hidden;min-width:600px}
.lb-table th{background:#161b22;padding:14px 18px;text-align:left;color:#8b949e;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.lb-table td{padding:14px 18px;border-bottom:1px solid #161b22}
.highlight-row{background:#0d111790}
.rank-cell{text-align:center;font-size:20px;width:60px}
.rank-plain{color:#6e7681;font-family:'JetBrains Mono',monospace}
.builder-cell{display:flex;align-items:center;gap:10px}
.builder-avatar{font-size:20px}
.builder-name{font-weight:700;color:#f0f6fc;white-space:nowrap}
.builder-country{font-size:16px}
.num-cell{font-family:'JetBrains Mono',monospace;color:#c9d1d9;text-align:center}
.jump-cell{text-align:center}
.jump-badge{background:#34d39920;color:#34d399;padding:3px 10px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700}
.github-cell{text-align:center}
.gh-link{color:#22d3ee;font-size:16px;font-weight:bold}
.lb-cta{text-align:center;background:#0d1117;padding:40px;border-radius:14px;border:1px solid #161b22}
.lb-cta h3{color:#f0f6fc;margin-bottom:8px}
.lb-cta p{color:#6e7681;margin-bottom:20px}

/* ===== CHALLENGE DETAIL ===== */
.challenge-detail{max-width:900px;margin:0 auto;padding:40px 20px}
.back-link{color:#22d3ee;font-size:14px;display:inline-block;margin-bottom:20px}
.back-link:hover{text-decoration:underline}
.header-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.challenge-header h1{font-size:clamp(24px,4vw,34px);font-weight:800;color:#f0f6fc;margin-bottom:10px;letter-spacing:-0.5px}
.challenge-desc{color:#8b949e;font-size:16px;line-height:1.6;margin-bottom:30px}
.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.detail-stat{background:#0d1117;padding:18px;border-radius:12px;border:1px solid #161b22;text-align:center}
.detail-stat.highlight{border-color:#34d39940}
.ds-icon{font-size:22px;display:block;margin-bottom:4px}
.ds-num{display:block;font-size:clamp(16px,3vw,22px);font-weight:800;color:#f0f6fc;font-family:'JetBrains Mono',monospace;word-break:break-word}
.ds-num.best-score{color:#34d399}
.ds-num.start-score{color:#6e7681}
.ds-label{font-size:11px;color:#6e7681}
.improvement-banner{background:linear-gradient(135deg,#22d3ee10,#818cf810);border:1px solid #22d3ee30;border-radius:12px;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;flex-wrap:wrap;gap:10px}
.imp-label{color:#8b949e;font-size:14px}
.imp-value{font-size:clamp(20px,4vw,28px);font-weight:800;color:#22d3ee;font-family:'JetBrains Mono',monospace}
.imp-mult{color:#34d399;font-weight:600;font-size:14px}
.section-title{font-size:24px;font-weight:700;color:#f0f6fc;margin-bottom:6px}
.section-desc{color:#6e7681;margin-bottom:20px;font-size:14px}
.evo-table-wrap{overflow-x:auto;margin-bottom:36px;-webkit-overflow-scrolling:touch}
.evo-table{width:100%;border-collapse:collapse;background:#0d1117;border-radius:12px;overflow:hidden;min-width:480px}
.evo-table th{background:#161b22;padding:12px 18px;text-align:left;color:#8b949e;font-size:13px;font-weight:600;text-transform:uppercase;white-space:nowrap}
.evo-table td{padding:12px 18px;border-bottom:1px solid #161b22;white-space:nowrap}
.round-cell{font-family:'JetBrains Mono',monospace;color:#6e7681}
.score-cell{font-family:'JetBrains Mono',monospace;color:#22d3ee;font-weight:700}
.agent-cell{color:#f0f6fc;font-weight:500}
.time-cell{font-family:'JetBrains Mono',monospace;color:#6e7681}
.cta-box{text-align:center;background:#0d1117;padding:40px 20px;border-radius:14px;border:1px solid #161b22}
.cta-box h3{color:#f0f6fc;margin-bottom:8px;font-size:20px}
.cta-box p{color:#6e7681;margin-bottom:20px}

/* ===== PROFILE PAGE ===== */
.profile-page{max-width:700px;margin:0 auto;padding:40px 20px}
.profile-page h1{font-size:clamp(26px,4vw,32px);font-weight:800;color:#f0f6fc;margin-bottom:6px}
.profile-form{background:#0d1117;padding:30px;border-radius:14px;border:1px solid #161b22;margin:24px 0}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:14px;font-weight:600;color:#c9d1d9;margin-bottom:6px}
.optional{color:#6e7681;font-weight:400;font-size:12px}
.form-group input,.form-group textarea{width:100%;background:#161b22;border:1px solid #21262d;color:#f0f6fc;padding:12px 14px;border-radius:8px;font-size:16px;font-family:'Plus Jakarta Sans',sans-serif;transition:.2s;-webkit-appearance:none}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#22d3ee}
.profile-stats-section{margin:30px 0}
.profile-stats-section h2{font-size:24px;font-weight:700;color:#f0f6fc;margin-bottom:16px}
.profile-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ps-card{background:#0d1117;padding:20px;border-radius:12px;border:1px solid #161b22;text-align:center}
.ps-num{display:block;font-size:clamp(20px,3.5vw,28px);font-weight:800;color:#22d3ee;font-family:'JetBrains Mono',monospace}
.ps-label{font-size:12px;color:#6e7681}
.profile-actions{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}

/* ===== NEW AGENT PAGE ===== */
.agent-page{max-width:900px;margin:0 auto;padding:40px 20px}
.agent-page h1{font-size:clamp(26px,4vw,34px);font-weight:800;color:#f0f6fc;margin-bottom:6px}
.agent-step{background:#0d1117;padding:30px;border-radius:14px;border:1px solid #161b22;margin:24px 0}
.agent-step-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.agent-step-num{width:40px;height:40px;background:linear-gradient(135deg,#22d3ee,#818cf8);color:#060911;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0}
.agent-step h2{font-size:clamp(18px,3vw,22px);font-weight:700;color:#f0f6fc}
.agent-step p{color:#8b949e;font-size:15px;margin-bottom:16px;line-height:1.6}
.btn-download{display:inline-block;background:#34d399;color:#060911;padding:14px 28px;border-radius:8px;font-size:16px;font-weight:700;transition:.3s;margin-bottom:20px}
.btn-download:hover{transform:translateY(-2px);box-shadow:0 4px 16px #34d39940}
.file-preview{background:#161b22;border-radius:10px;overflow:hidden;margin-top:16px}
.file-header{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#1c2128}
.file-dot{width:12px;height:12px;border-radius:50%}
.file-dot.red{background:#f87171}
.file-dot.yellow{background:#fbbf24}
.file-dot.green{background:#34d399}
.file-name{color:#6e7681;font-size:13px;margin-left:8px;font-family:'JetBrains Mono',monospace}
.file-preview pre{padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.file-preview code{color:#8b949e;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.8}

/* LLM Options */
.llm-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}
.llm-card{background:#161b22;padding:20px;border-radius:12px;border:1px solid #21262d;transition:.3s;position:relative}
.llm-card:hover{border-color:#22d3ee40}
.llm-card.free{border-color:#34d39930}
.llm-card.cheap{border-color:#fbbf2430}
.llm-badge{position:absolute;top:12px;right:12px;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700}
.free-badge{background:#34d39920;color:#34d399}
.cheap-badge{background:#fbbf2420;color:#fbbf24}
.llm-card h3{color:#f0f6fc;font-size:16px;margin-bottom:6px;padding-right:60px}
.llm-card>p{color:#8b949e;font-size:13px;margin-bottom:12px}
.llm-steps{margin-bottom:10px}
.llm-step{font-size:13px;color:#8b949e;padding:3px 0;word-break:break-word}
.llm-step code{background:#0d1117;padding:2px 6px;border-radius:4px;font-size:11px;color:#22d3ee;font-family:'JetBrains Mono',monospace;word-break:break-all}
.llm-step a{color:#22d3ee;text-decoration:underline}
.llm-cost{font-family:'JetBrains Mono',monospace;font-size:12px;color:#34d399;font-weight:600}

/* Terminal */
.terminal-box{background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid #161b22;margin-top:16px}
.terminal-header{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#161b22}
.terminal-title{color:#6e7681;font-size:13px;margin-left:8px}
.terminal-body{padding:16px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:2;overflow-x:auto;-webkit-overflow-scrolling:touch}
.terminal-line{color:#8b949e;white-space:nowrap}
.terminal-line.output{color:#6e7681}
.terminal-line.success{color:#34d399;font-weight:700}
.t-prompt{color:#22d3ee;font-weight:700}

/* Tips */
.agent-tips{margin:40px 0}
.agent-tips h2{font-size:24px;font-weight:700;color:#f0f6fc;margin-bottom:20px}
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tip-card{background:#0d1117;padding:20px;border-radius:12px;border:1px solid #161b22}
.tip-card h4{color:#f0f6fc;margin-bottom:8px;font-size:15px}
.tip-card p{color:#8b949e;font-size:13px;line-height:1.5}

/* ===== CTA FINAL ===== */
.cta-final{text-align:center;padding:80px 20px;position:relative;overflow:hidden}
.cta-glow{position:absolute;width:500px;height:500px;background:radial-gradient(circle,#818cf815 0%,transparent 70%);bottom:-200px;left:50%;transform:translateX(-50%);pointer-events:none}
.cta-final h2{font-size:clamp(26px,4vw,36px);font-weight:800;color:#f0f6fc;margin-bottom:12px;position:relative}
.cta-final p{color:#8b949e;font-size:16px;margin-bottom:30px;position:relative;line-height:1.7}

/* ===== FOOTER ===== */
footer{text-align:center;padding:30px 20px;color:#30363d;border-top:1px solid #161b22;margin-top:40px;font-size:13px}
.footer-brand{font-size:18px;font-weight:700;color:#22d3ee;margin-bottom:6px}
.footer-license{color:#21262d;margin-top:4px}

/* ===== NAV WHY BUTTON ===== */
.nav-why-btn{background:linear-gradient(135deg,#818cf820,#a78bfa20);color:#a78bfa !important;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:700;border:1px solid #818cf840;transition:.3s}
.nav-why-btn:hover{background:linear-gradient(135deg,#818cf840,#a78bfa40);border-color:#a78bfa;transform:translateY(-1px)}

/* ===== WHY PAGE ===== */
.why-page{max-width:900px;margin:0 auto;padding:20px 20px 60px;overflow-x:hidden;word-wrap:break-word}
.why-hero{text-align:center;padding:60px 20px 40px;position:relative}
.why-hero-glow{position:absolute;width:500px;height:500px;background:radial-gradient(circle,#818cf815 0%,transparent 70%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none}
.why-hero h1{font-size:clamp(28px,5vw,42px);font-weight:800;color:#f0f6fc;margin-bottom:16px;letter-spacing:-1px;position:relative;word-wrap:break-word;overflow-wrap:break-word}
.why-hero-sub{font-size:clamp(16px,2.5vw,20px);color:#8b949e;max-width:650px;margin:0 auto;line-height:1.7;position:relative;word-wrap:break-word}
.why-section{margin:50px 0;padding:0}
.why-section-icon{font-size:40px;margin-bottom:12px}
.why-section h2{font-size:clamp(22px,3.5vw,28px);font-weight:800;color:#f0f6fc;margin-bottom:16px;letter-spacing:-0.5px;word-wrap:break-word;overflow-wrap:break-word}
.why-section p{color:#8b949e;font-size:clamp(14px,2vw,16px);line-height:1.8;margin-bottom:14px;word-wrap:break-word;overflow-wrap:break-word}
.why-highlight-box{background:linear-gradient(135deg,#818cf810,#22d3ee10);border:1px solid #818cf830;border-radius:14px;padding:24px 28px;margin:24px 0;display:flex;gap:16px;align-items:flex-start}
.why-highlight-icon{font-size:28px;flex-shrink:0}
.why-highlight-box p{color:#c9d1d9;font-size:15px;margin:0;line-height:1.7;font-weight:500}

/* Evolution Flow */
.evo-flow{display:flex;justify-content:center;align-items:center;gap:12px;margin:30px 0;flex-wrap:wrap}
.evo-flow-step{background:#0d1117;padding:24px 20px;border-radius:14px;border:1px solid #161b22;width:240px;text-align:center;transition:.3s}
.evo-flow-step:hover{border-color:#22d3ee40;transform:translateY(-3px)}
.evo-flow-num{width:36px;height:36px;background:linear-gradient(135deg,#22d3ee,#818cf8);color:#060911;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;margin:0 auto 10px}
.evo-flow-step h3{color:#f0f6fc;font-size:16px;margin-bottom:6px}
.evo-flow-step p{color:#8b949e;font-size:13px;margin:0;line-height:1.5}
.evo-flow-arrow{color:#30363d;font-size:24px;font-weight:bold}

/* Score Evolution Demo */
.score-evolution-demo{background:#0d1117;border-radius:14px;border:1px solid #161b22;padding:24px;margin:30px 0}
.sed-label{color:#8b949e;font-size:14px;margin-bottom:14px;font-weight:600}
.sed-bar{display:flex;flex-direction:column;gap:6px}
.sed-step{background:linear-gradient(90deg,#22d3ee,#818cf8);height:28px;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;transition:width 1s ease;min-width:60px}
.sed-step span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#060911}
.sed-step.s2{background:linear-gradient(90deg,#22d3ee,#34d399)}
.sed-step.s3{background:linear-gradient(90deg,#818cf8,#a78bfa)}
.sed-step.s4{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.sed-step.s5{background:linear-gradient(90deg,#34d399,#22d3ee)}
.sed-step.s6{background:linear-gradient(90deg,#f87171,#fb923c)}
.sed-step.s7{background:linear-gradient(90deg,#22d3ee,#818cf8)}
.sed-agents{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:#6e7681;flex-wrap:wrap;gap:4px}

/* Comparison Cards */
.why-comparison{display:flex;gap:20px;align-items:stretch;margin:30px 0;flex-wrap:wrap;justify-content:center}
.why-comp-card{background:#0d1117;padding:28px;border-radius:14px;border:1px solid #161b22;flex:1;min-width:280px;transition:.3s}
.why-comp-card:hover{transform:translateY(-3px)}
.why-comp-card.single{border-color:#f8717130}
.why-comp-card.swarm{border-color:#34d39930}
.comp-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.comp-icon{font-size:28px}
.comp-header h3{color:#f0f6fc;font-size:18px;font-weight:700}
.why-comp-card ul{list-style:none;padding:0;margin:0 0 16px 0}
.why-comp-card li{color:#8b949e;font-size:14px;padding:6px 0;line-height:1.5}
.comp-result{text-align:center;padding:12px;border-radius:8px;margin-top:auto}
.single-r{background:#f8717115}
.swarm-r{background:#34d39915}
.comp-score{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800}
.single-r .comp-score{color:#f87171}
.swarm-r .comp-score{color:#34d399}
.why-vs{font-size:24px;font-weight:800;color:#30363d;display:flex;align-items:center}

/* Powers Grid */
.powers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:30px 0}
.power-card{background:#0d1117;padding:24px;border-radius:14px;border:1px solid #161b22;transition:.3s}
.power-card:hover{border-color:#818cf840;transform:translateY(-3px)}
.power-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:#818cf860;font-weight:700;margin-bottom:8px}
.power-card h3{color:#f0f6fc;font-size:16px;margin-bottom:8px}
.power-card p{color:#8b949e;font-size:13px;line-height:1.6;margin:0}

/* Alpha Comparison */
.alpha-comparison{display:flex;gap:16px;margin:24px 0;flex-wrap:wrap}
.alpha-card{flex:1;min-width:250px;padding:20px;border-radius:12px;text-align:center}
.alpha-card h4{font-size:16px;font-weight:700;margin-bottom:8px}
.alpha-card p{font-size:14px;margin:0;line-height:1.6}
.alpha-card.closed{background:#f8717110;border:1px solid #f8717130;color:#f87171}
.alpha-card.closed h4{color:#f87171}
.alpha-card.open{background:#34d39910;border:1px solid #34d39930;color:#34d399}
.alpha-card.open h4{color:#34d399}

/* Scary Quote */
.scary-quote{text-align:center;padding:30px;margin:24px 0;border-left:3px solid #818cf8;border-right:3px solid #818cf8;border-radius:12px;background:#0d1117}
.scary-quote p{font-size:clamp(16px,3vw,20px);font-weight:700;color:#f0f6fc;font-style:italic;margin:0;line-height:1.6}

/* Why CTA */
.why-cta{text-align:center;padding:50px 20px;margin-top:40px}
.why-cta h2{font-size:clamp(24px,4vw,32px);font-weight:800;color:#f0f6fc;margin-bottom:12px}
.why-cta p{color:#8b949e;font-size:16px;margin-bottom:30px;line-height:1.7}

/* Nature Steps */
.nature-steps{margin:20px 0}
.nature-step{display:flex;align-items:center;gap:12px;padding:10px 16px;border-left:2px solid #161b22;margin-left:12px;transition:.2s}
.nature-step:hover{border-left-color:#22d3ee}
.ns-icon{font-size:18px;flex-shrink:0}
.nature-step span:last-child{color:#8b949e;font-size:14px}

/* Proof Grid */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
.proof-card{background:#0d1117;padding:24px;border-radius:14px;border:1px solid #161b22;text-align:center;transition:.3s}
.proof-card:hover{border-color:#22d3ee40;transform:translateY(-3px)}
.proof-icon{font-size:32px;margin-bottom:8px}
.proof-stat{font-family:'JetBrains Mono',monospace;font-size:clamp(16px,2.5vw,20px);font-weight:800;color:#22d3ee;margin-bottom:8px}
.proof-card p{color:#8b949e;font-size:13px;line-height:1.5;margin:0}
.proof-conclusion{border-color:#fbbf2440}

/* Equation Box */
.equation-box{background:#0d1117;border-radius:16px;border:1px solid #161b22;padding:36px 28px;margin:30px 0;text-align:center}
.equation-line{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0;flex-wrap:wrap}
.equation-line.second{margin-top:24px;padding-top:24px;border-top:1px dashed #21262d}
.eq-label{font-size:16px;font-weight:700;color:#6e7681;min-width:40px;text-align:right}
.eq-formula{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.eq-part{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:700}
.eq-part.model{background:#818cf820;color:#818cf8;border:1px solid #818cf840}
.eq-part.system{background:#22d3ee20;color:#22d3ee;border:1px solid #22d3ee40}
.eq-part.company{background:#f59e0b20;color:#f59e0b;border:1px solid #f59e0b40}
.eq-part.highlight-model{background:#34d39920;color:#34d399;border:1px solid #34d39940;font-size:16px}
.eq-part.highlight-world{background:#f5920b20;color:#fb923c;border:1px solid #fb923c40;font-size:16px}
.eq-op{color:#30363d;font-size:18px;font-weight:800;font-family:'JetBrains Mono',monospace}
.eq-result{padding:8px 20px;border-radius:8px;font-size:15px;font-weight:800}
.eq-result.good{background:#22d3ee15;color:#22d3ee;border:1px solid #22d3ee30}
.eq-result.great{background:linear-gradient(135deg,#fbbf2430,#f59e0b30);color:#fbbf24;border:1px solid #fbbf2450;font-size:28px;padding:8px 24px;animation:pulse 2s infinite}

/* Models Showcase */
.models-showcase{text-align:center;margin:24px 0}
.models-showcase p{color:#8b949e;font-size:15px;margin-bottom:14px}
.model-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.model-tag{background:#161b22;color:#c9d1d9;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;border:1px solid #21262d;transition:.2s}
.model-tag:hover{border-color:#22d3ee40;transform:translateY(-2px)}

/* Why 1000 Grid */
.why1000-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0}
.why1000-card{background:#0d1117;padding:24px;border-radius:14px;border:1px solid #161b22;transition:.3s}
.why1000-card:hover{border-color:#22d3ee40;transform:translateY(-3px)}
.why1000-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:#22d3ee60;font-weight:700;margin-bottom:8px}
.why1000-card h3{color:#f0f6fc;font-size:16px;margin-bottom:10px}
.why1000-card p{color:#8b949e;font-size:13px;line-height:1.6;margin:0}

/* Island Comparison */
.island-comparison{display:flex;gap:20px;margin:30px 0;flex-wrap:wrap;justify-content:center}
.island-card{flex:1;min-width:280px;background:#0d1117;padding:28px;border-radius:16px;text-align:center;transition:.3s}
.island-card:hover{transform:translateY(-3px)}
.island-card h4{font-size:18px;font-weight:700;margin-bottom:16px}
.island-card p{color:#8b949e;font-size:13px;margin-top:14px;line-height:1.5}
.google-islands{border:1px solid #f8717130}
.google-islands h4{color:#f87171}
.swarm-islands{border:1px solid #34d39930}
.swarm-islands h4{color:#34d399}
.island-visual{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.island-dot{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700}
.island-dot.gemini{background:#818cf820;color:#818cf8;border:1px solid #818cf840}
.island-dot.llama{background:#fb923c20;color:#fb923c;border:1px solid #fb923c40}
.island-dot.claude-dot{background:#22d3ee20;color:#22d3ee;border:1px solid #22d3ee40}
.island-dot.gpt{background:#34d39920;color:#34d399;border:1px solid #34d39940}
.island-dot.deepseek{background:#f8717120;color:#f87171;border:1px solid #f8717140}
.final-quote{border-color:#fbbf2450}
.final-quote p{color:#fbbf24}


/* ============================================================
   RESPONSIVE — TABLET & MOBILE (max-width: 768px)
   ============================================================ */
@media(max-width:768px){
    /* ── MOBILE NAVBAR ── */
    .navbar{padding:12px 16px;flex-wrap:nowrap}
    .hamburger{display:flex !important;flex-direction:column;justify-content:center;position:relative;z-index:250}

    /* Nav links: hidden by default, fullscreen overlay when active */
    .nav-links{
        display:none !important;
        position:fixed;
        top:0;left:0;right:0;bottom:0;
        background:#060911fa;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:8px;
        z-index:200;
        padding:80px 30px 40px;
        overflow-y:auto;
    }
    .nav-links.active{display:flex !important}

    /* Menu items styling */
    .nav-links a,
    .nav-links button{
        font-size:20px;
        padding:16px 32px;
        min-height:52px;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        max-width:300px;
        border-radius:12px;
        transition:background .2s;
    }
    .nav-links a:hover{background:#161b2280}
    .nav-links .btn-google{
        font-size:17px;
        padding:14px 28px;
        border-radius:12px;
        justify-content:center;
        width:100%;
        max-width:300px;
    }
    .nav-links .nav-why-btn{
        font-size:15px;
        padding:12px 24px;
        margin-top:8px;
    }
    .nav-links .nav-cta-small{
        font-size:17px;
        padding:14px 24px;
        border-radius:12px;
        width:100%;
        max-width:300px;
    }
    .nav-links .lang-toggle{
        font-size:16px;
        padding:10px 28px;
        margin-top:4px;
    }

    /* ── HERO ── */
    .hero{padding:50px 16px 40px}
    .hero-badge{font-size:11px;padding:5px 12px}
    .hero h1{line-height:1.25;margin-bottom:12px}
    .hero-sub{font-size:15px;margin-bottom:28px;line-height:1.6}
    .hero-stats{gap:8px}
    .stat-box{min-width:0;padding:14px 8px;flex:1 1 80px}
    .stat-number{font-size:22px}
    .stat-label{font-size:10px}
    .hero-buttons{flex-direction:column;align-items:center;gap:10px}
    .btn-primary,.btn-outline{width:100%;max-width:320px;text-align:center;padding:14px 24px}
    .btn-large{padding:16px 24px;font-size:16px}

    /* ── HOW IT WORKS ── */
    .how-it-works{padding:40px 16px}
    .section-sub{margin-bottom:24px}
    .steps{flex-direction:column;gap:12px;align-items:center}
    .step{width:100%;max-width:400px;padding:24px 20px}
    .step-arrow{display:none}

    /* ── CHALLENGES ── */
    .challenges-section{padding:30px 16px}
    .challenges-section h2,.challenges-section .section-sub{text-align:center}
    .challenges-grid{grid-template-columns:1fr;gap:12px}
    .challenge-card{padding:18px}
    .challenge-card h3{font-size:17px}

    /* ── TOP BUILDERS ── */
    .top-section{padding:30px 16px}
    .top-cards{gap:10px;justify-content:center}
    .top-card{width:calc(50% - 6px);min-width:0;padding:16px 12px}
    .top-avatar{font-size:28px}
    .top-name{font-size:13px}

    /* ── CHALLENGE DETAIL ── */
    .challenge-detail{padding:20px 16px}
    .challenge-header h1{font-size:22px}
    .detail-stats{grid-template-columns:repeat(2,1fr);gap:8px}
    .detail-stat{padding:12px 8px}
    .ds-icon{font-size:18px}
    .ds-num{font-size:16px}
    .ds-label{font-size:10px}
    .improvement-banner{flex-direction:column;text-align:center;padding:14px;gap:6px}
    .imp-value{font-size:22px}
    .evo-table th,.evo-table td{padding:8px 10px;font-size:11px}
    .cta-box{padding:24px 16px}

    /* ── LEADERBOARD ── */
    .lb-page{padding:20px 16px}
    .podium{flex-direction:column;align-items:center;gap:12px}
    .podium-card{width:100%;max-width:300px}
    .podium-card.p-1,.podium-card.p-2,.podium-card.p-3{order:unset}
    .lb-table th,.lb-table td{padding:8px 10px;font-size:11px}
    .lb-cta{padding:24px 16px}

    /* ── PROFILE ── */
    .profile-page{padding:20px 16px}
    .profile-form{padding:20px}
    .profile-stats-grid{grid-template-columns:repeat(2,1fr)}
    .profile-actions{flex-direction:column}
    .profile-actions a,.profile-actions button{width:100%;text-align:center;padding:14px}

    /* ── NEW AGENT ── */
    .agent-page{padding:20px 16px}
    .agent-step{padding:18px}
    .agent-step h2{font-size:17px}
    .llm-options{grid-template-columns:1fr}
    .terminal-body{font-size:10px;padding:10px;line-height:1.8}
    .tips-grid{grid-template-columns:1fr}
    .file-preview code{font-size:11px;line-height:1.6}

    /* ── CTA FINAL ── */
    .cta-final{padding:40px 16px}
    .cta-final .btn-primary,.cta-final .btn-outline{width:100%;max-width:320px}

    /* ── WHY PAGE ── */
    .why-hero{padding:40px 16px 24px}
    .why-section{margin:24px 0}
    .why-section-icon{font-size:32px}
    .why-highlight-box{flex-direction:column;gap:10px;padding:16px}
    .why-highlight-icon{font-size:24px}
    .proof-grid{grid-template-columns:1fr;gap:12px}
    .proof-card{padding:18px}
    .proof-icon{font-size:26px}
    .equation-box{padding:18px 12px}
    .equation-line{flex-direction:column;gap:8px}
    .eq-formula{gap:6px}
    .eq-part{padding:6px 10px;font-size:12px}
    .eq-op{font-size:16px}
    .eq-result{font-size:13px;padding:6px 14px}
    .eq-result.great{font-size:20px;padding:6px 16px}
    .evo-flow{flex-direction:column;align-items:center}
    .evo-flow-step{width:100%;max-width:400px}
    .evo-flow-arrow{display:none}
    .island-comparison{flex-direction:column}
    .island-card{min-width:0}
    .why-comparison{flex-direction:column}
    .why-comp-card{min-width:0}
    .powers-grid{grid-template-columns:1fr}
    .alpha-comparison{flex-direction:column}
    .alpha-card{min-width:0}
    .sed-agents{font-size:9px}
    .scary-quote{padding:16px}
    .scary-quote p{font-size:16px}
    .nature-step{padding:8px 12px}
    .why-cta{padding:30px 16px}
    .why-cta .hero-buttons{flex-direction:column;align-items:center;gap:10px}
    .why-cta .hero-buttons .btn-primary,
    .why-cta .hero-buttons .btn-outline{width:100%;max-width:320px}

    /* ── FOOTER ── */
    footer{padding:24px 16px;font-size:12px}
}

/* ============================================================
   RESPONSIVE — SMALL PHONES (max-width: 480px)
   ============================================================ */
@media(max-width:480px){
    .hero{padding:40px 14px 30px}
    .hero-stats{flex-direction:column;align-items:stretch;gap:6px}
    .stat-box{max-width:none;padding:12px;text-align:center}
    .stat-number{font-size:20px}
    .hero-badge{font-size:10px;padding:4px 10px}
    .top-cards{gap:8px}
    .top-card{width:100%;padding:14px}
    .detail-stats{grid-template-columns:1fr}
    .challenge-meta{gap:6px}
    .podium-card{width:100%}
    .eq-label{text-align:center;min-width:auto;font-size:13px}
    .model-tags{gap:6px}
    .model-tag{padding:5px 10px;font-size:11px}
    .island-dot{padding:4px 8px;font-size:10px}
    .nature-step{padding:8px 10px;gap:8px;margin-left:4px}
    .nature-step span:last-child{font-size:12px}
    .profile-stats-grid{grid-template-columns:1fr}
    .agent-step{padding:14px}
    .llm-card{padding:16px}
    .llm-card h3{font-size:15px;padding-right:50px}
    .btn-download{padding:12px 20px;font-size:15px;width:100%;text-align:center}
}

/* ============================================================
   RESPONSIVE — LARGE SCREENS (min-width: 1200px)
   ============================================================ */
@media(min-width:1200px){
    .navbar{padding:14px 48px}
    .hero{padding:120px 40px 100px}
    .challenges-section{padding:60px 48px}
    .how-it-works{padding:80px 48px}
    .top-section{padding:60px 48px}
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
body.rtl{direction:rtl;text-align:right;overflow-x:hidden;width:100%}
body.rtl .navbar{flex-direction:row-reverse}
body.rtl .nav-links{flex-direction:row-reverse}
body.rtl .nav-brand{flex-direction:row-reverse}
body.rtl .btn-google{flex-direction:row-reverse}
body.rtl .hero-buttons{flex-direction:row-reverse}
body.rtl .hero-stats{flex-direction:row-reverse}
body.rtl .steps{flex-direction:row-reverse}
body.rtl .step-arrow{transform:scaleX(-1)}
body.rtl .card-top{flex-direction:row-reverse}
body.rtl .challenge-meta{flex-direction:row-reverse}
body.rtl .meta-item{flex-direction:row-reverse}
body.rtl .score-display{flex-direction:row-reverse}
body.rtl .top-cards{flex-direction:row-reverse}
body.rtl .improvement-banner{flex-direction:row-reverse}
body.rtl .header-top{flex-direction:row-reverse}
body.rtl .profile-actions{flex-direction:row-reverse}
body.rtl .agent-step-header{flex-direction:row-reverse}
body.rtl .builder-cell{flex-direction:row-reverse}
body.rtl .file-header{flex-direction:row-reverse}
body.rtl .terminal-header{flex-direction:row-reverse}
body.rtl .hero,body.rtl .how-it-works,body.rtl .top-section,body.rtl .cta-final,body.rtl .lb-header{text-align:center}
body.rtl .step,body.rtl .detail-stat,body.rtl .ps-card,body.rtl .podium-card,body.rtl .cta-box,body.rtl .lb-cta{text-align:center}
body.rtl .evo-table th,body.rtl .lb-table th{text-align:right}
body.rtl .rank-cell,body.rtl .num-cell,body.rtl .jump-cell,body.rtl .github-cell{text-align:center}
body.rtl .llm-badge{right:auto;left:12px}
body.rtl .llm-card h3{padding-right:0;padding-left:60px}
body.rtl .file-name{margin-left:0;margin-right:8px}
body.rtl .terminal-title{margin-left:0;margin-right:8px}
body.rtl .progress-fill{background:linear-gradient(270deg,#22d3ee,#818cf8)}
body.rtl .podium{flex-direction:row-reverse}
body.rtl .file-preview pre,body.rtl .file-preview code,body.rtl .terminal-body,body.rtl .terminal-line{direction:ltr;text-align:left}
body.rtl .form-group input,body.rtl .form-group textarea{text-align:right}
body.rtl .why-highlight-box{flex-direction:row-reverse}
body.rtl .evo-flow{flex-direction:row-reverse}
body.rtl .evo-flow-arrow{transform:scaleX(-1)}
body.rtl .why-comparison{flex-direction:row-reverse}
body.rtl .comp-header{flex-direction:row-reverse}
body.rtl .scary-quote{border-left:3px solid #818cf8;border-right:3px solid #818cf8}
body.rtl .sed-step{justify-content:flex-start;padding-right:0;padding-left:10px}
body.rtl .nature-step{border-left:none;border-right:2px solid #161b22;margin-left:0;margin-right:12px;flex-direction:row-reverse}
body.rtl .nature-step:hover{border-right-color:#22d3ee}
body.rtl .island-comparison{flex-direction:row-reverse}
body.rtl .equation-line{flex-direction:row-reverse}
body.rtl .eq-label{text-align:left}
body.rtl .eq-formula{flex-direction:row-reverse}
body.rtl .model-tags{flex-direction:row-reverse}

/* Mobile RTL */
@media(max-width:768px){
    body.rtl .navbar{flex-direction:row-reverse}
    body.rtl .nav-links{flex-direction:column}
    body.rtl .nav-links.active{flex-direction:column}
    body.rtl .hamburger{order:-1}
    body.rtl .steps,body.rtl .hero-stats,body.rtl .hero-buttons,body.rtl .podium,body.rtl .evo-flow,body.rtl .why-comparison,body.rtl .island-comparison{flex-direction:column}
    body.rtl .equation-line,body.rtl .why-highlight-box,body.rtl .profile-actions,body.rtl .improvement-banner{flex-direction:column}
    body.rtl .why-cta .hero-buttons{flex-direction:column}
    body.rtl .top-cards{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:480px){
    body.rtl .nature-step{margin-right:4px}
    body.rtl .top-cards{flex-direction:column}
}