/* S.P.A.R.K. Labs — Terminal Theme v2 */
/* Phosphor-CRT aesthetic, matched to the file-manager / SPARK//FILES interface */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* new core palette (from SPARK//FILES) */
  --bg:#060a07; --panel:#0a0f0b; --raised:#0e150f; --inset:#040604;
  --line:#1a2a1c; --line-2:#28412b; --line-hot:#3a6b40;
  --green:#43e08a; --green-hi:#86ffb8; --txt:#b7e6c5; --dim:#5f8a6c; --faint:#3e5c46;
  --amber:#ffb347; --orange:#ff8a3d; --red:#ff5b5b; --blue:#5fb0ff; --purple:#b58cff;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --glow:0 0 7px rgba(67,224,138,.45);
  --glow-amber:0 0 8px rgba(255,179,71,.4);

  /* legacy aliases so existing inline styles keep working */
  --bg-primary:var(--bg); --bg-secondary:var(--panel); --bg-panel:var(--raised);
  --text-primary:var(--txt); --text-secondary:var(--dim);
  --accent-green:var(--green); --accent-orange:var(--orange); --accent-red:var(--red);
  --accent-blue:var(--blue); --accent-cyan:var(--green-hi); --accent-purple:var(--purple); --accent-yellow:var(--amber);
  --accent-primary:var(--green); --accent-secondary:var(--amber);
  --border-color:var(--line-2); --border-highlight:var(--green);
  --glow-green:var(--glow); --glow-orange:var(--glow-amber);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:var(--mono);
  background:var(--bg);
  color:var(--txt);
  line-height:1.7;
  min-height:100vh;
  padding:20px;
  -webkit-font-smoothing:antialiased;
}

/* Global CRT treatment — subtle scanlines + screen vignette, click-through */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 3px 3px);
  mix-blend-mode:multiply; opacity:.55;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9997;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(67,224,138,.045), transparent 55%),
    radial-gradient(130% 120% at 50% 100%, rgba(0,0,0,.5), transparent 60%);
}

/* Typography */
h1,h2,h3,h4,h5,h6{ font-weight:700; line-height:1.2; margin-bottom:1rem; color:var(--green-hi); text-shadow:var(--glow); letter-spacing:.3px; }
h1{ font-size:2rem; } h2{ font-size:1.5rem; } h3{ font-size:1.15rem; }
p{ margin-bottom:1rem; color:var(--txt); }
a{ color:var(--green); text-decoration:none; transition:all .15s ease; }
a:hover{ color:var(--green-hi); text-shadow:var(--glow); }

/* Layout */
.container{ max-width:1140px; margin:0 auto; }
section{ padding:3rem 0; }

/* Navigation — a top status bar */
nav{
  position:fixed; top:0; left:0; right:0; z-index:1000; padding:0;
  background:rgba(8,12,9,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-2);
}
nav .container{ display:flex; justify-content:space-between; align-items:center; padding:13px 20px; }
.logo{ font-size:1.15rem; font-weight:700; color:var(--orange); text-shadow:var(--glow-amber); letter-spacing:.5px; }
.logo span{ color:var(--green); text-shadow:var(--glow); }
.nav-links{ display:flex; gap:5px; list-style:none; flex-wrap:wrap; }
.nav-links a{
  display:block; padding:8px 14px; font-size:.92rem; color:var(--dim);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; transition:all .15s ease;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--green-hi); border-color:var(--line-hot); background:var(--raised); box-shadow:inset 0 -2px 0 var(--green);
}
.nav-toggle{ display:none; background:var(--panel); border:1px solid var(--line-2); color:var(--green); font-size:1.4rem; cursor:pointer; padding:4px 14px; border-radius:5px; }
.nav-toggle:hover{ background:var(--raised); }

/* Hero */
.hero{ min-height:100vh; display:flex; align-items:center; padding-top:80px; border-bottom:1px solid var(--line-2); }
.hero-content{ max-width:820px; }
.hero h1{ font-size:2.6rem; margin-bottom:1rem; color:var(--green-hi); text-shadow:var(--glow); }
.hero h1 .highlight{ color:var(--green); }
/* blinking terminal cursor after the hero headline */
.hero h1::after{ content:"_"; color:var(--green); margin-left:4px; animation:cursor 1.05s steps(1) infinite; }
@keyframes cursor{ 50%{ opacity:0; } }
.hero .tagline{ font-size:1.2rem; color:var(--amber); margin-bottom:1.5rem; }
.hero .tagline::before{ content:"> "; color:var(--green); }
.hero p{ font-size:1rem; margin-bottom:1.5rem; max-width:620px; color:var(--txt); }

/* Buttons */
.btn{
  display:inline-block; padding:10px 20px; font-family:var(--mono); font-size:14px; font-weight:500;
  cursor:pointer; border:1px solid var(--line-hot); background:var(--raised); color:var(--green-hi);
  border-radius:6px; transition:all .15s ease; margin:5px;
}
.btn:hover{ background:#10261a; border-color:var(--green); box-shadow:var(--glow); }
.btn-primary{ background:var(--raised); border-color:var(--line-hot); color:var(--green-hi); }
.btn-primary:hover{ background:#10261a; }
.btn-secondary{ background:rgba(255,179,71,.08); border-color:rgba(255,179,71,.4); color:var(--amber); }
.btn-secondary:hover{ background:rgba(255,179,71,.16); box-shadow:var(--glow-amber); }
.btn-group{ display:flex; gap:10px; flex-wrap:wrap; margin-top:1rem; }

/* Panels / cards */
.card, .panel{
  background:var(--panel); border:1px solid var(--line-2); border-radius:8px; padding:20px; margin-bottom:20px;
  transition:all .2s ease;
}
.card:hover, .panel:hover{ border-color:var(--line-hot); box-shadow:0 0 0 1px rgba(67,224,138,.12), 0 8px 30px rgba(0,0,0,.35); transform:translateY(-2px); }
.card h3, .panel h3{ color:var(--amber); text-shadow:var(--glow-amber); margin-bottom:14px; font-size:1.05rem; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:20px; }

/* Section headers */
.section-header{ text-align:center; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.section-header h2{ margin-bottom:.5rem; }
.section-header h2::before{ content:"// "; color:var(--green); text-shadow:none; }
.section-header p{ color:var(--dim); max-width:620px; margin:0 auto; }

/* Project cards */
.project-card{ background:var(--panel); border:1px solid var(--line-2); border-radius:8px; overflow:hidden; transition:all .2s ease; }
.project-card:hover{ border-color:var(--line-hot); box-shadow:0 8px 30px rgba(0,0,0,.35); transform:translateY(-2px); }
.project-card-header{ padding:15px; border-bottom:1px solid var(--line); background:var(--inset); }
.project-card-body{ padding:15px; }
.project-card h3{ margin-bottom:.5rem; }
.project-card .description{ color:var(--dim); margin-bottom:1rem; font-size:.92rem; }
.tech-stack{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:1rem; }
.tech-badge{ background:rgba(95,176,255,.08); color:var(--blue); padding:3px 10px; border:1px solid rgba(95,176,255,.25); border-radius:4px; font-size:11px; }

.status-value{ color:var(--green); font-weight:700; }

/* Footer */
footer{ background:var(--panel); border-top:1px solid var(--line-2); padding:2rem 0; text-align:center; margin-top:2rem; }
footer p{ color:var(--dim); margin-bottom:0; }
footer .footer-links{ display:flex; justify-content:center; gap:16px; margin-bottom:1rem; flex-wrap:wrap; }
footer .footer-links a{ padding:5px 12px; border:1px solid var(--line); background:var(--panel); border-radius:5px; color:var(--dim); }
footer .footer-links a:hover{ border-color:var(--line-hot); background:var(--raised); color:var(--green-hi); }

/* Awareness page */
.awareness-hero{ background:linear-gradient(135deg,#1a0808 0%, var(--bg) 100%); padding:6rem 0 4rem; text-align:center; border-bottom:1px solid var(--red); }
.awareness-hero .warning-icon{ font-size:4rem; margin-bottom:1rem; }
.awareness-hero h1{ color:var(--red); text-shadow:0 0 10px rgba(255,91,91,.5); }
.awareness-content{ max-width:820px; margin:0 auto; }
.awareness-section{ margin-bottom:2rem; padding:20px; background:var(--panel); border:1px solid var(--line-2); border-left:3px solid var(--green); border-radius:6px; }
.awareness-section h2{ color:var(--amber); font-size:1.2rem; margin-bottom:1rem; }
.awareness-section ul{ list-style:none; padding:0; }
.awareness-section li{ padding:.5rem 0; padding-left:1.5rem; position:relative; }
.awareness-section li::before{ content:'✓'; position:absolute; left:0; color:var(--green); }
.warning-list li::before{ content:'⚠'; color:var(--amber); }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--inset); }
::-webkit-scrollbar-thumb{ background:#1c321f; border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#264a2b; }

/* Responsive */
@media (max-width:768px){
  body{ padding:10px; }
  h1{ font-size:1.5rem; } h2{ font-size:1.2rem; }
  .hero h1{ font-size:1.9rem; } .hero .tagline{ font-size:1rem; }
  nav .container{ flex-wrap:wrap; }
  .nav-links{ display:none; width:100%; flex-direction:column; padding-top:10px; }
  .nav-links.active{ display:flex; }
  .nav-links a{ text-align:center; }
  .nav-toggle{ display:block; }
  .btn-group{ flex-direction:column; }
  .btn{ text-align:center; }
  section{ padding:2rem 0; }
  .card-grid{ grid-template-columns:1fr; }
}