* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#0a0a0f; color:#e0e0e0; line-height:1.6; min-height:100vh; }
a { color:#00d4ff; text-decoration:none; }
a:hover { text-decoration:underline; }

.navbar { position:sticky; top:0; z-index:100; background:rgba(10,10,15,0.8); backdrop-filter:blur(12px); border-bottom:1px solid #1e1e2a; }
.nav-container { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:60px; }
.nav-logo { font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,#00d4ff,#7b2ff7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:16px; align-items:center; }
.nav-links a { color:#aaa; font-size:0.85rem; transition:color 0.2s; }
.nav-links a:hover { color:#fff; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

.container { max-width:900px; margin:0 auto; padding:40px 20px; }

.hero { text-align:center; padding:60px 0 40px; }
.hero-title { font-size:3rem; font-weight:800; background:linear-gradient(135deg,#00d4ff,#7b2ff7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.hero-subtitle { color:#888; font-size:1.1rem; }

.card { background:rgba(19,19,26,0.6); backdrop-filter:blur(8px); border:1px solid rgba(30,30,42,0.8); border-radius:12px; padding:24px; margin-bottom:20px; }
.card-title { font-size:1.1rem; color:#aaa; margin-bottom:16px; text-transform:uppercase; letter-spacing:1px; }
.card h2, .card h3 { color:#00d4ff; margin-bottom:8px; }
.card p { color:#aaa; margin-bottom:8px; }

.info-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #1a1a24; }
.info-row:last-child { border-bottom:none; }
.label { color:#888; }
.value { color:#fff; text-align:right; }
.mono { font-family:'SF Mono','Fira Code',monospace; font-size:0.85rem; word-break:break-all; }

.badge { display:inline-block; padding:2px 10px; border-radius:4px; font-size:0.75rem; margin-left:8px; }
.badge.green { background:#00ff8822; color:#00ff88; }
.badge.red { background:#ff004422; color:#ff0044; }

.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.dot.green { background:#00ff88; }

.btn-group { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.btn { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#00d4ff,#7b2ff7); color:#fff; padding:12px 24px; border-radius:8px; font-weight:600; font-size:0.9rem; transition:opacity 0.2s; border:none; cursor:pointer; }
.btn:hover { opacity:0.85; text-decoration:none; }
.btn-outline { background:transparent; border:1px solid #333; color:#e0e0e0; }

.eco-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.eco-card { background:rgba(13,13,20,0.6); backdrop-filter:blur(4px); border:1px solid #1a1a24; border-radius:8px; padding:16px; }
.eco-card h3 { font-size:0.9rem; color:#00d4ff; margin-bottom:4px; }
.eco-card p { font-size:0.8rem; color:#666; margin-bottom:6px; }
.eco-card code { font-size:0.75rem; color:#999; word-break:break-all; font-family:'SF Mono',monospace; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:rgba(19,19,26,0.6); backdrop-filter:blur(8px); border:1px solid #1e1e2a; border-radius:12px; padding:20px; text-align:center; }
.stat-card h3 { font-size:2rem; color:#00d4ff; }
.stat-card p { color:#888; font-size:0.9rem; }

.roadmap { display:flex; flex-direction:column; gap:16px; }
.phase { background:rgba(19,19,26,0.6); backdrop-filter:blur(8px); border:1px solid #1e1e2a; border-radius:12px; padding:20px; border-left:4px solid #333; }
.phase.completed { border-left-color:#00ff88; }
.phase.active { border-left-color:#00d4ff; }
.phase h2 { font-size:1.1rem; margin-bottom:8px; }
.phase ul { list-style:none; padding:0; }
.phase ul li { color:#888; padding:4px 0; }

table { width:100%; border-collapse:collapse; }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid #1a1a24; color:#aaa; }
th { color:#888; font-weight:600; text-transform:uppercase; font-size:0.8rem; letter-spacing:0.5px; }

.form-group { margin-bottom:16px; }
.form-group label { display:block; color:#888; margin-bottom:4px; font-size:0.9rem; }
.form-input { width:100%; padding:10px 12px; background:#13131a; border:1px solid #1e1e2a; border-radius:6px; color:#fff; font-size:0.9rem; }
.form-input:focus { outline:none; border-color:#00d4ff; }

.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:0.9rem; }
.alert-error { background:#ff004422; border:1px solid #ff0044; color:#ff0044; }
.alert-success { background:#00ff8822; border:1px solid #00ff88; color:#00ff88; }

.mt-2 { margin-top:16px; }
.mt-2 a { color:#00d4ff; }

.footer { text-align:center; color:#444; font-size:0.8rem; padding:20px 0; border-top:1px solid #1a1a24; margin-top:40px; }

@media(max-width:600px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:60px; left:0; right:0; background:rgba(10,10,15,0.95); padding:20px; border-bottom:1px solid #1e1e2a; }
  .nav-links.active { display:flex; }
  .nav-toggle { display:block; }
  .eco-grid { grid-template-columns:1fr; }
  .hero-title { font-size:2rem; }
}