/* Base Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  background: #050505;
  color: #d9d9d9;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:root {
  --bg: #050505;
  --panel: #0e0e0e;
  --panel-alt: #121212;
  --border: #1d1d1d;
  --text: #d9d9d9;
  --muted: #8a8f98;
  --accent: #00ff41;
  --accent-rgb: 0,255,65;
  --danger: #ff3864;
  --warn: #ffb347;
  --grad: linear-gradient(135deg,#00ff41,#009b2c 60%,#00771f);
  --radius: 14px;
  --shadow: 0 4px 16px -4px rgba(0,0,0,0.6),0 2px 4px -1px rgba(0,0,0,0.4);
  --trans: 140ms cubic-bezier(.4,.0,.2,1);
}

.accent { color: var(--accent); }
.container { width: min(1240px, 92%); margin-inline: auto; }
.container.narrow { width: min(900px, 92%); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center-v { align-items: center; }

.skip-link { position: absolute; left: -999px; top: auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 8px; top: 8px; width:auto; height:auto; padding:.75rem 1rem; background:#000; color:#fff; z-index:1000; }

.site-header { position: sticky; top:0; backdrop-filter: blur(10px); background: rgba(0,0,0,.7); border-bottom:1px solid #111; z-index: 50; }
.site-header .logo { font-family:'Share Tech Mono', monospace; font-size:1.3rem; font-weight:700; letter-spacing:2px; color:var(--accent); }
.nav-toggle { display:none; background:none; border:1px solid var(--border); color:var(--accent); padding:.5rem .75rem; border-radius:8px; font-size:1.2rem; }
.nav-list { list-style:none; display:flex; gap:1.2rem; }
.nav-list a { display:inline-block; padding:.9rem .4rem; font-weight:500; color:var(--muted); text-decoration:none; position:relative; font-size:.95rem; }
.nav-list a:after { content:""; position:absolute; left:0; bottom:.55rem; height:2px; width:0; background:var(--accent); transition:width var(--trans); }
.nav-list a:hover,.nav-list a:focus { color:#fff; }
.nav-list a:hover:after,.nav-list a:focus:after { width:100%; }

.btn { --btn-bg: var(--panel-alt); --btn-color: var(--text); --btn-border: var(--border); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none; padding:.85rem 1.25rem; font-size:.9rem; border-radius:10px; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); position:relative; overflow:hidden; transition:background var(--trans), color var(--trans), border-color var(--trans), transform 160ms; }
.btn.primary { --btn-bg: var(--grad); --btn-color:#000; border:none; box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4),0 4px 18px -4px rgba(var(--accent-rgb),.35); }
.btn.ghost { background:#000; border:1px solid #1b1b1b; color:var(--accent); }
.btn.small { padding:.55rem .9rem; font-size:.75rem; font-weight:500; }
.btn.full { width:100%; justify-content:center; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.hero { position:relative; padding: clamp(6rem, 12vh, 8rem) 0 4rem; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(circle at 30% 40%, rgba(var(--accent-rgb),0.18), transparent 60%), radial-gradient(circle at 70% 60%, rgba(0,140,45,.25), transparent 65%), linear-gradient(160deg,#040804,#020302); z-index:-2; }
.hero:before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,65,0.03) 2px 4px); mix-blend-mode:overlay; opacity:.35; pointer-events:none; z-index:-1; }
.hero-grid { display:grid; gap:3.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.hero-text h1 { font-size: clamp(2.8rem, 7vw, 4.2rem); font-family:'Share Tech Mono', monospace; letter-spacing: -1px; line-height:1.05; background:linear-gradient(90deg,#fff,#b9ffd0 35%,#00ff41); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.glitch { position:relative; }
.glitch:after,.glitch:before { content:attr(data-text); position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; }
.glitch:before { animation:glitch 4s steps(120) infinite; color:#0f0; opacity:.15; }
.glitch:after { animation:glitch 5.5s steps(100) infinite; color:#0ff; opacity:.1; }
@keyframes glitch { 0% { transform:translate(0);} 10% { transform:translate(-1px,1px);} 20% { transform:translate(1px,-1px);} 30% { transform:translate(-2px,1px);} 40% { transform:translate(2px,-2px);} 50% { transform:translate(0);} 60% { transform:translate(1px,1px);} 70% { transform:translate(-1px,-1px);} 80% { transform:translate(2px,1px);} 90% { transform:translate(-2px,-1px);} 100% { transform:translate(0);} }
.subtitle { font-size:1rem; font-weight:500; margin-top:1.1rem; color:var(--muted); letter-spacing:.5px; max-width:620px; }
.typing { margin-top:1.4rem; font-family:'Share Tech Mono', monospace; font-size:1rem; color:var(--accent); min-height:1.3em; }
.hero-actions { margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.quick-stats { list-style:none; margin-top:2rem; display:flex; gap:2.2rem; padding:0; }
.quick-stats li { display:grid; gap:.25rem; text-transform:uppercase; font-size:.65rem; letter-spacing:1.5px; color:var(--muted); }
.quick-stats strong { font-size:1.3rem; color:#fff; font-weight:700; }
.matrix-card { background:#060d07; border:1px solid #092c12; padding:1.6rem 1.4rem 1.8rem; border-radius:var(--radius); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.08),0 10px 32px -12px rgba(var(--accent-rgb),.35); position:relative; overflow:hidden; }
.matrix-card:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(var(--accent-rgb),0.08),transparent 40%); pointer-events:none; }
.matrix-card h2 { font-size:1.05rem; font-weight:600; margin-bottom:.9rem; color:var(--accent); letter-spacing:1px; }
.matrix-card ul { list-style:none; display:grid; gap:.55rem; font-size:.85rem; margin:0 0 1rem; }
.status-pill { display:inline-block; font-size:.65rem; letter-spacing:1px; font-weight:600; padding:.5rem .75rem; border-radius:100px; background:#09120a; border:1px solid #0f3c18; color:var(--accent); text-transform:uppercase; }
.status-pill.online { box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4),0 0 0 4px rgba(var(--accent-rgb),.08); }

.section { padding: clamp(4rem, 9vh, 6rem) 0; position:relative; }
.section.alt { background:linear-gradient(180deg,#070707,#050505); }
.section-title { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height:1.1; margin-bottom:2.8rem; font-family:'Share Tech Mono', monospace; font-weight:700; letter-spacing:1px; background:linear-gradient(90deg,#fff,#b9ffd0,#00ff41 70%); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.section-title:after { content:""; position:absolute; left:0; bottom:-12px; height:3px; width:90px; background:var(--grad); border-radius:4px; }

.cards.trio { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:2rem; }
.info-card { background:var(--panel); border:1px solid var(--border); padding:1.25rem 1.2rem 1.35rem; border-radius:var(--radius); position:relative; overflow:hidden; transition:transform var(--trans), border-color var(--trans); }
.info-card:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(var(--accent-rgb),.06)); opacity:0; transition:opacity var(--trans); }
.info-card h3 { font-size:1rem; margin-bottom:.6rem; font-weight:600; letter-spacing:.5px; color:#fff; }
.info-card p { font-size:.85rem; color:var(--muted); line-height:1.4; }
.info-card:hover { transform:translateY(-4px); border-color:#1f4029; }
.info-card:hover:before { opacity:1; }

.pill-cloud { display:flex; flex-wrap:wrap; gap:.65rem; }
.pill-cloud span { font-size:.7rem; letter-spacing:.8px; padding:.55rem .75rem; background:#0b0b0b; border:1px solid #1d1d1d; border-radius:100px; text-transform:uppercase; font-weight:600; color:var(--muted); position:relative; overflow:hidden; transition: color var(--trans), border-color var(--trans), background var(--trans); }
.pill-cloud span:hover { color:var(--accent); border-color:#1f4029; background:#071108; }

.projects-grid { display:grid; gap:1.7rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.project-card { background:#060606; border:1px solid #121212; padding:1.4rem 1.3rem 1.6rem; border-radius:var(--radius); display:flex; flex-direction:column; gap:.9rem; position:relative; overflow:hidden; transition: border-color var(--trans), transform var(--trans); }
.project-card:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(var(--accent-rgb),.08),transparent 60%); opacity:0; transition:opacity var(--trans); }
.project-card h3 { font-size:1.05rem; font-weight:600; letter-spacing:.5px; }
.project-card p { font-size:.8rem; color:var(--muted); line-height:1.4; }
.project-card .tags { list-style:none; display:flex; gap:.5rem; flex-wrap:wrap; }
.project-card .tags li { background:#0e0e0e; border:1px solid #1f1f1f; font-size:.55rem; letter-spacing:1px; padding:.4rem .55rem; border-radius:6px; font-weight:600; color:var(--muted); text-transform:uppercase; }
.project-card .project-link { margin-top:auto; text-decoration:none; font-size:.7rem; font-weight:600; letter-spacing:1px; color:var(--accent); position:relative; }
.project-card:hover { transform:translateY(-6px); border-color:#1f4029; }
.project-card:hover:before { opacity:1; }

.skill-groups { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.skill-column h3 { font-size:.9rem; font-weight:600; letter-spacing:1px; color:var(--accent); text-transform:uppercase; margin-bottom:1rem; }
.bar-list { list-style:none; display:grid; gap:.75rem; }
.bar-list li { display:grid; gap:.35rem; }
.bar-list span { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.bar { --h:6px; height:var(--h); background:#121212; border-radius:100px; position:relative; overflow:hidden; }
.bar:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--accent),#048d2a); width:var(--w); border-radius:inherit; box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4),0 0 0 4px rgba(var(--accent-rgb),.06); animation:grow 1.4s cubic-bezier(.4,.0,.2,1); }
@keyframes grow { from { width:0; } }

.stats-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:1rem; }
.stat-box { background:#060606; border:1px solid #121212; border-radius:var(--radius); padding:1.2rem 1rem 1.25rem; display:grid; gap:.3rem; text-align:center; position:relative; overflow:hidden; }
.stat-box:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(var(--accent-rgb),.07),transparent 50%); opacity:0; transition:opacity var(--trans); }
.stat-box strong { font-size:1.3rem; font-weight:600; letter-spacing:.5px; }
.stat-box span { font-size:.65rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:600; }
.stat-box:hover:before { opacity:1; }

.research-list { display:grid; gap:1.4rem; margin-top:1rem; }
.research-item { background:#060606; border:1px solid #121212; padding:1.25rem 1.2rem 1.35rem; border-radius:var(--radius); position:relative; overflow:hidden; transition: border-color var(--trans), transform var(--trans); }
.research-item:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(var(--accent-rgb),.08),transparent 60%); opacity:0; transition:opacity var(--trans); }
.research-item h3 { font-size:1rem; margin-bottom:.4rem; font-weight:600; letter-spacing:.7px; }
.research-item p { font-size:.8rem; color:var(--muted); line-height:1.5; }
.badge { display:inline-block; font-size:.6rem; font-weight:600; letter-spacing:1px; padding:.3rem .6rem; background:#071108; border:1px solid #1f4029; color:var(--accent); border-radius:100px; margin-top:.6rem; }
.research-item:hover { transform:translateY(-4px); border-color:#1f4029; }
.research-item:hover:before { opacity:1; }

.timeline { list-style:none; display:grid; gap:1.6rem; position:relative; margin-left:1.2rem; }
.timeline:before { content:""; position:absolute; left:-1.2rem; top:.3rem; bottom:.3rem; width:2px; background:#1a1a1a; }
.timeline li { position:relative; display:grid; gap:.4rem; }
.timeline .time { position:absolute; left:-5.4rem; top:.3rem; font-size:.65rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; color:var(--accent); background:#051307; padding:.35rem .5rem; border-radius:6px; border:1px solid #1f4029; }
.tl-card { background:#060606; border:1px solid #121212; padding:1rem .9rem 1.1rem; border-radius:10px; transition: border-color var(--trans), transform var(--trans); }
.tl-card h3 { font-size:.95rem; font-weight:600; letter-spacing:.5px; margin-bottom:.35rem; }
.tl-card p { font-size:.75rem; color:var(--muted); line-height:1.45; }
.tl-card:hover { transform:translateY(-4px); border-color:#1f4029; }

.support-tiers { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:1.5rem 0 2.25rem; }
.tier { background:#060606; border:1px solid #121212; padding:1.2rem 1.1rem 1.3rem; border-radius:var(--radius); position:relative; display:grid; gap:.6rem; }
.tier:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(var(--accent-rgb),.08),transparent 60%); opacity:0; transition:opacity var(--trans); }
.tier h3 { font-size:.9rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
.tier p { font-size:.75rem; letter-spacing:.5px; font-weight:600; color:var(--accent); }
.tier ul { list-style:none; display:grid; gap:.35rem; }
.tier li { font-size:.7rem; letter-spacing:.5px; color:var(--muted); }
.tier:hover:before { opacity:1; }
.tier.bronze { border-color:#51361c; }
.tier.silver { border-color:#5d5d62; }
.tier.gold { border-color:#715b05; }
.tier.platinum { border-color:#3f494d; }

.donate-cta { display:flex; gap:1rem; flex-wrap:wrap; }
.wallet { margin-top:1.5rem; background:#060606; border:1px dashed #1f4029; padding:1rem 1.1rem; border-radius:var(--radius); overflow:auto; font-size:.75rem; }

.contact-grid { display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start; margin-top:1.5rem; }
.contact-links ul { list-style:none; display:grid; gap:.55rem; }
.contact-links a { color:var(--accent); text-decoration:none; font-weight:500; }
.contact-links a:hover { text-decoration:underline; }
.contact-form { display:grid; gap:1rem; background:#060606; border:1px solid #121212; padding:1.2rem 1.1rem 1.4rem; border-radius:var(--radius); }
.contact-form label { display:grid; gap:.4rem; font-size:.7rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.contact-form input,.contact-form textarea { font:inherit; background:#0e0e0e; border:1px solid #161616; color:#fff; padding:.75rem .8rem; border-radius:8px; resize:vertical; min-height:48px; }
.contact-form textarea { min-height:130px; }
.contact-form input:focus,.contact-form textarea:focus { outline:2px solid #1f4029; border-color:#1f4029; }
.form-status { font-size:.7rem; color:var(--accent); min-height:1.2em; }

.site-footer { background:#040404; border-top:1px solid #111; padding:3.5rem 0 2.5rem; margin-top:3rem; position:relative; }
.footer-grid { display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.footer-grid h3,.footer-grid h4 { font-size:1rem; font-weight:600; letter-spacing:.5px; color:#fff; margin-bottom:.9rem; }
.foot-nav,.social-list { list-style:none; display:grid; gap:.3rem; }
.foot-nav a,.social-list a { color:var(--muted); font-size:.75rem; text-decoration:none; letter-spacing:.5px; }
.foot-nav a:hover,.social-list a:hover { color:var(--accent); }

/* Responsive */
@media (max-width: 880px) {
  .nav-toggle { display:inline-flex; }
  .nav-list { position:absolute; right:1rem; top:calc(100% + .75rem); background:#050505; border:1px solid #161616; flex-direction:column; padding:.75rem; border-radius:12px; min-width:200px; box-shadow:var(--shadow); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--trans), transform var(--trans); }
  .nav-list[data-open="true"] { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-list a { padding:.75rem .65rem; }
  .timeline .time { position:static; margin-bottom:.4rem; display:inline-block; }
  .timeline { margin-left:0; }
  .timeline:before { display:none; }
  .tl-card { padding:1.1rem 1rem 1.2rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}
