/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:2rem}

/* Theme variables on html[data-theme] */
html[data-theme="dark"]{
  --bg: #0a0a0a;
  --surface:#111111;
  --border:#1a2e1a;
  --primary:#00ff41;
  --primary-2:#00cc33;
  --dim:#004d14;
  --text:#e0ffe0;
  --muted:#5a8a5a;
}
html[data-theme="light"]{
  --bg:#f0fff0;
  --surface:#ffffff;
  --border:#b3d9b3;
  --primary:#006600;
  --primary-2:#008800;
  --dim:#cfe6cf;
  --text:#0a1a0a;
  --muted:#4a7a4a;
}

body{background:var(--bg);color:var(--text);}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,0.15);z-index:50}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:0.6rem}
.logo{font-family:JetBrains Mono, monospace;color:var(--primary);background:linear-gradient(90deg,rgba(0,0,0,0.05),transparent);padding:0.25rem 0.5rem;border-radius:6px}
.title{font-weight:600;font-family:JetBrains Mono, monospace}
.nav a{color:var(--muted);margin-left:1rem;text-decoration:none}
.nav a.cta{border:1px solid var(--primary);padding:0.4rem 0.7rem;border-radius:6px;color:var(--primary)}
.theme-toggle{margin-left:0.8rem;background:transparent;border:1px solid var(--border);color:var(--primary);padding:0.3rem 0.5rem;border-radius:6px;cursor:pointer}

/* Hero */
.hero{min-height:65vh;display:flex;align-items:center;position:relative;padding:4rem 0}
.hero-inner{max-width:760px}
.hero-title{font-family:JetBrains Mono, monospace;font-size:2.4rem;color:var(--primary);margin-bottom:0.6rem}
.hero-sub{color:var(--muted);margin-bottom:1rem}
.hero-actions{display:flex;gap:0.8rem;margin-bottom:1rem}
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:8px;border:1px solid var(--primary);text-decoration:none;color:var(--primary);font-weight:600}
.btn.primary{background:transparent}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.primary:hover{background:var(--primary);color:#052005}

.ascii{margin-top:1rem;color:var(--muted);background:transparent;font-family:JetBrains Mono, monospace}

.scanlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,0.06) 50%, transparent 50%);background-size:100% 4px;mix-blend-mode:overlay}

/* Sections */
.section{padding:3rem 0}
.section h2{font-family:JetBrains Mono, monospace;color:var(--primary);margin-bottom:1rem}
.section p{color:var(--muted);margin-bottom:1rem}

/* Activities grid */
.grid{display:grid;gap:1rem}
.activities{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--surface);border-left:4px solid var(--primary-2);padding:1rem;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,0.3)}
.card h3{margin-top:0.6rem;margin-bottom:0.4rem;font-family:JetBrains Mono, monospace}
.card p{color:var(--muted);font-size:0.95rem}
.icon{font-family:JetBrains Mono, monospace;color:var(--primary)}
.card:hover{transform:translateY(-6px);transition:transform 180ms,box-shadow 180ms;box-shadow:0 8px 30px rgba(0,255,65,0.06)}

/* Projects */
.projects{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:1rem}
.project{background:var(--surface);padding:0.8rem;border-radius:6px;border:1px solid var(--border);color:var(--text)}

/* Form */
.form-section .join-form{display:grid;gap:0.8rem;max-width:600px}
.join-form label{display:flex;flex-direction:column;color:var(--muted);font-size:0.95rem}
.join-form input, .join-form textarea{margin-top:0.4rem;padding:0.6rem;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:6px}
.form-msg{margin-top:0.6rem;color:var(--primary)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:1.2rem 0;margin-top:2rem}
.footer-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.footer-row .links a{margin-left:1rem;color:var(--muted);text-decoration:none}

/* Responsive */
@media (max-width:720px){
  .nav a{display:none}
  .hero-title{font-size:1.6rem}
  .container{padding:1rem}
}

/* Minor accessibility focus */
button:focus, a:focus, input:focus, textarea:focus{outline:2px dashed var(--primary);outline-offset:3px}