/* ═══════════ CSS CUSTOM PROPERTIES ═══════════ */
:root {
  --bg: hsl(220, 10%, 8%);
  --fg: hsl(210, 15%, 75%);
  --primary: hsl(210, 40%, 55%);
  --primary-70: hsla(210, 40%, 55%, 0.7);
  --accent: hsl(200, 60%, 70%);
  --border: hsl(215, 20%, 22%);
  --muted: hsl(215, 12%, 14%);
  --muted-fg: hsl(215, 10%, 45%);
  --secondary: hsl(215, 8%, 20%);
  --terminal-green: hsl(120, 60%, 50%);
  --terminal-amber: hsl(40, 90%, 55%);
  --glow-blue: hsl(210, 80%, 60%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --radius: 0.25rem;
}

/* ═══════════ RESET & BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 3.5rem; }

body {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--primary); }

.font-bold { font-weight: 700; }
.text-primary { color: var(--primary); }
.text-primary-70 { color: var(--primary-70); }
.text-accent { color: var(--accent); }
.text-fg { color: var(--fg); }
.text-muted-fg { color: var(--muted-fg); }

/* ═══════════ LAYOUT ═══════════ */
.section-container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 4rem 0;
}

.section-heading {
  font-size: 0.875rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.section-sub {
  font-size: 0.75rem;
  color: var(--muted-fg);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ═══════════ SCANLINE OVERLAY ═══════════ */
.scanline-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    hsla(210, 20%, 50%, 0.03) 2px,
    hsla(210, 20%, 50%, 0.03) 4px
  );
}

/* ═══════════ CRT SCREEN ═══════════ */
.crt-screen {
  border-radius: 8px;
  box-shadow:
    inset 0 0 60px hsla(210, 40%, 55%, 0.05),
    0 0 40px hsla(210, 40%, 55%, 0.08);
  position: relative;
}

.crt-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, transparent 60%, hsla(220, 10%, 4%, 0.4) 100%);
  pointer-events: none;
}

/* ═══════════ ASCII BORDER & HOVER GLOW ═══════════ */
.ascii-border {
  border: 1px solid var(--border);
  box-shadow: 0 0 12px hsla(210, 40%, 55%, 0.06);
}

.hover-glow {
  transition: box-shadow 0.2s, border-color 0.2s;
}

.hover-glow:hover {
  box-shadow: 0 0 20px hsla(210, 80%, 60%, 0.15);
  border-color: var(--primary);
}

/* ═══════════ STATUS BADGES ═══════════ */
.status-active, .status-stable {
  color: var(--terminal-green);
  text-shadow: 0 0 6px hsla(120, 60%, 50%, 0.5);
}

.status-beta {
  color: var(--terminal-amber);
  text-shadow: 0 0 6px hsla(40, 90%, 55%, 0.5);
}

.status-alpha {
  color: hsl(0, 70%, 55%);
  text-shadow: 0 0 6px hsla(0, 70%, 55%, 0.5);
}

.status-experimental {
  color: hsl(270, 60%, 65%);
  text-shadow: 0 0 6px hsla(270, 60%, 65%, 0.5);
}

.status-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ═══════════ BLINK CURSOR ═══════════ */
.blink-cursor::after {
  content: '\2588';
  color: var(--primary);
  animation: cursor-blink 1s step-end infinite;
}

/* ═══════════ KEYFRAMES ═══════════ */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes crt-flicker {
  0%, 92%, 94%, 97%, 100% { opacity: 1; }
  93% { opacity: 0.8; }
  96% { opacity: 0.9; }
}

@keyframes boot-line-in {
  from { transform: translateY(4px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px hsla(210, 80%, 60%, 0.3); }
  50% { box-shadow: 0 0 20px hsla(210, 80%, 60%, 0.5); }
}

@keyframes accordion-open {
  from { max-height: 0; opacity: 0; }
  to { max-height: 600px; opacity: 1; }
}

/* ═══════════ BOOT SEQUENCE ═══════════ */
#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s;
}

#boot.fade-out {
  opacity: 0;
  pointer-events: none;
}

.boot-content {
  font-size: 0.8125rem;
  line-height: 1.8;
  max-width: 36rem;
  padding: 1.5rem;
}

.boot-line {
  opacity: 0;
  transform: translateY(4px);
}

.boot-line.visible {
  animation: boot-line-in 0.15s ease-out forwards;
}

.boot-spacer { height: 0.75rem; }

.boot-cursor {
  display: inline-block;
  margin-top: 0.25rem;
}

#boot-skip {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: none;
  border: none;
  color: var(--muted-fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  cursor: pointer;
  transition: color 0.2s;
}

#boot-skip:hover { color: var(--fg); }

/* ═══════════ NAVBAR ═══════════ */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 3rem;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}

#navbar.scrolled {
  background: hsla(220, 10%, 8%, 0.95);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-logo {
  font-size: 0.875rem;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}

.nav-links a {
  color: var(--muted-fg);
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--fg); }

.nav-key { color: var(--primary-70); }

.nav-github {
  color: var(--muted-fg);
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-github:hover { color: var(--fg); }

#hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: auto;
}

#hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  margin: 3px 0;
  transition: transform 0.2s;
}

/* ═══════════ MOBILE MENU ═══════════ */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 1rem;
}

#mobile-menu.open { display: flex; }

#mobile-menu a {
  color: var(--muted-fg);
  transition: color 0.2s;
}

#mobile-menu a:hover { color: var(--primary); }

#mobile-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 1.75rem;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

/* ═══════════ HERO ═══════════ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4rem 1.5rem;
}

#hero .crt-screen {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 40rem;
  width: 100%;
}

.crt-flicker { animation: crt-flicker 8s infinite; }

.ascii-box {
  font-size: 0.625rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.tagline {
  font-size: 0.875rem;
  color: var(--muted-fg);
  max-width: 32rem;
  margin: 0 auto 2rem;
  min-height: 1.5em;
  font-family: 'Inter', sans-serif;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  color: var(--fg);
  transition: color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.cta-btn:first-child:hover { color: var(--primary); }
.cta-btn:last-child:hover { color: var(--accent); }

.hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero-bg-1 {
  width: 300px;
  height: 300px;
  background: hsla(210, 40%, 55%, 0.03);
  top: 20%;
  left: 10%;
}

.hero-bg-2 {
  width: 250px;
  height: 250px;
  background: hsla(200, 60%, 70%, 0.03);
  bottom: 20%;
  right: 10%;
  filter: blur(100px);
}

/* ═══════════ FEATURES / ACCORDION ═══════════ */
.feature-category {
  margin-bottom: 2rem;
}

.category-heading {
  font-size: 0.75rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.module {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.375rem;
  background: var(--muted);
  transition: border-color 0.2s;
}

.module:hover { border-color: hsla(210, 40%, 55%, 0.3); }

.module summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  font-size: 0.8125rem;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

.module summary::-webkit-details-marker { display: none; }

.module summary::after {
  content: '\25B8';
  position: absolute;
  right: 0.875rem;
  color: var(--muted-fg);
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.module[open] summary::after {
  transform: rotate(90deg);
}

.module-name {
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.module-desc {
  color: var(--muted-fg);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-content {
  padding: 0 0.875rem 0.875rem;
  animation: accordion-open 0.25s ease-out;
  overflow: hidden;
}

.module-content p {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  margin-bottom: 0.75rem;
  line-height: 1.7;
  font-family: 'Inter', sans-serif;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.tech-tag {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted-fg);
  white-space: nowrap;
}

.sub-features {
  list-style: none;
  font-size: 0.75rem;
}

.sub-features li {
  padding: 0.125rem 0;
  color: var(--muted-fg);
}

/* ═══════════ ARCHITECTURE ═══════════ */
.arch-diagram {
  padding: 1rem;
  overflow-x: auto;
}

.arch-svg {
  width: 100%;
  height: auto;
  min-width: 500px;
}

/* ═══════════ GALLERY ═══════════ */
.gallery-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.gallery-filelist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gallery-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted-fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, color 0.2s;
  width: 100%;
}

.gallery-file:hover { border-color: var(--primary); color: var(--fg); }

.gallery-file.active {
  border-color: var(--primary);
  color: var(--fg);
}

.file-viewing {
  color: var(--accent);
  margin-left: auto;
  display: none;
  white-space: nowrap;
}

.gallery-file.active .file-viewing { display: inline; }

.file-bar {
  color: var(--primary);
  white-space: nowrap;
}

.gallery-preview {
  padding: 1.5rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.preview-header {
  font-size: 0.75rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.preview-text {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.preview-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
}

.preview-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted-fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.preview-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--fg); }
.preview-btn:disabled { opacity: 0.3; cursor: default; }

#preview-counter { color: var(--muted-fg); }

/* ═══════════ INSTALL / TERMINAL ═══════════ */
.terminal-window {
  max-width: 40rem;
  margin: 0 auto;
  overflow: hidden;
}

.terminal-titlebar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red { background: hsla(0, 62.8%, 30.6%, 0.6); }
.dot-amber { background: hsla(40, 90%, 55%, 0.6); }
.dot-green { background: hsla(120, 60%, 50%, 0.6); }

.terminal-title {
  font-size: 0.6875rem;
  color: var(--muted-fg);
  margin-left: 0.5rem;
}

.terminal-body {
  padding: 1rem;
  background: var(--muted);
}

.terminal-line {
  font-size: 0.8125rem;
  padding: 0.125rem 0;
  transition: background 0.2s;
}

.terminal-line:hover { background: hsla(210, 40%, 55%, 0.08); }

.terminal-comment { color: var(--muted-fg); }

.terminal-prompt { margin-top: 0.75rem; }

.terminal-link-box {
  padding: 1rem 0;
  text-align: center;
}

.terminal-github-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.terminal-link-main {
  display: block;
  font-size: 0.875rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.terminal-link-sub {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted-fg);
}

/* ═══════════ COMMUNITY ═══════════ */
.community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 48rem;
  margin: 0 auto;
}

.community-links, .community-newsletter {
  padding: 1.25rem;
}

.box-header {
  font-size: 0.75rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.community-link {
  display: block;
  font-size: 0.8125rem;
  padding: 0.375rem 0;
  color: var(--muted-fg);
  transition: color 0.2s;
}

.community-link:hover { color: var(--primary); }

.newsletter-form label {
  font-size: 0.8125rem;
  color: var(--muted-fg);
  display: block;
  margin-bottom: 0.5rem;
}

.newsletter-input-row {
  display: flex;
  gap: 0.5rem;
}

.newsletter-input-row input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  outline: none;
  transition: border-color 0.2s;
}

.newsletter-input-row input:focus { border-color: var(--primary); }

.newsletter-input-row button {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.newsletter-input-row button:hover { border-color: var(--primary); color: var(--accent); }

.toast {
  font-size: 0.75rem;
  color: var(--terminal-green);
  margin-top: 0.5rem;
  animation: boot-line-in 0.2s ease-out;
}

/* ═══════════ FOOTER ═══════════ */
footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}

.footer-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6875rem;
  color: var(--muted-fg);
}

.footer-left p { margin-bottom: 0.25rem; }
.footer-left a { color: var(--muted-fg); transition: color 0.2s; }
.footer-left a:hover { color: var(--primary); }

.footer-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terminal-green);
  box-shadow: 0 0 6px hsla(120, 60%, 50%, 0.5);
}

/* ═══════════ SCROLL REVEAL ═══════════ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 768px) {
  .nav-links, .nav-github { display: none; }
  #hamburger { display: block; }

  .module-desc { display: none; }

  .ascii-box { font-size: 0.5rem; }

  .tagline { font-size: 0.75rem; }

  .gallery-layout {
    grid-template-columns: 1fr;
  }

  .community-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  section { padding: 3rem 0; }
}

@media (max-width: 640px) {
  .file-bar { display: none; }
  .file-label { font-size: 0.625rem; }
}

@media (min-width: 640px) {
  .ascii-box { font-size: 0.75rem; }
}

@media (min-width: 768px) {
  .ascii-box { font-size: 0.875rem; }
}