/* ═══════════════════════════════════════════════════════
   TOOL-VERSE · style.css
   Base: Pixel Constellation · Grafts: boot-overlay-DOM, LV counter, kill-feed
═══════════════════════════════════════════════════════ */

/* ── 1. Design tokens ───────────────────────────────── */
:root {
  --bg-void:    #06070A;
  --bg-panel:   #0D0F14;
  --bg-panel-2: #13161D;
  --ink-hi:     #F2F4F8;
  --ink-mid:    #9AA0AB;
  --ink-lo:     #5B616B;
  --grid-line:  rgba(255,255,255,0.04);
  --scanline:   rgba(255,255,255,0.025);
  --accent:     #38E1FF;
  --accent-glow: rgba(56,225,255,0.35);
  --accent-dim:  rgba(56,225,255,0.12);
  --premium:    #E8C36B;
  --premium-glow: rgba(232,195,107,0.30);
  --border:     rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --sans: -apple-system,'SF Pro Display','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --mono: 'SF Mono','JetBrains Mono','Cascadia Code','Consolas','Courier New',monospace;
  --r-card: 8px;
  --r-pill: 4px;
}

/* ── 2. Reset ────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg-void);
  color: var(--ink-hi);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}
body.booting { overflow: hidden; }
img,svg { display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:transparent; }
ul,ol { list-style:none; }

/* ── 3. Typography ───────────────────────────────────── */
.section-title {
  font-size: clamp(1.5rem,3.5vw,2.25rem);
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--ink-hi);
}
.section-sub { color:var(--ink-mid); margin-top:.5rem; }
/* ── 4. Skip link ───────────────────────────────────── */
.skip-link {
  position:absolute; top:-100px; left:1rem; z-index:9999;
  background:var(--accent); color:var(--bg-void);
  padding:.4rem 1rem; border-radius:var(--r-pill);
  font-weight:600; transition:top .2s;
}
.skip-link:focus { top:1rem; }

/* ── 5. Pixel-grid & scanline backdrops ─────────────── */
.section-inner {
  max-width:1120px; margin:0 auto;
  padding:5rem 1.5rem;
}
/* Repeating grid backdrop */
.hero__grid {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 32px);
  pointer-events:none;
}

/* ── 6. Top bar ─────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.5rem;
  background:rgba(6,7,10,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0; transform:translateY(-100%);
  transition:opacity .5s, transform .5s;
}
.topbar.will-boot { opacity:0; transform:translateY(-100%); }
.topbar.visible { opacity:1; transform:translateY(0); }
.topbar__left { display:flex; align-items:center; gap:.75rem; }
.topbar__glyph { color:var(--accent); flex-shrink:0; image-rendering:pixelated; }
.topbar__label { font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); }
.topbar__lv { font-family:var(--mono); font-size:.75rem; color:var(--accent); letter-spacing:.06em; }
.topbar__xpbar { width:64px; height:3px; background:var(--border-strong); border-radius:2px; overflow:hidden; }
.topbar__xpfill { height:100%; width:0%; background:var(--accent); transition:width .2s linear; will-change:width; }
.topbar__nav { display:flex; gap:1.5rem; }
.topbar__link {
  font-size:.875rem; color:var(--ink-mid);
  transition:color .2s; position:relative;
}
.topbar__link::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--accent); transform:scaleX(0);
  transition:transform .25s;
}
.topbar__link:hover, .topbar__link.active { color:var(--accent); }
.topbar__link:hover::after, .topbar__link.active::after { transform:scaleX(1); }
.topbar__link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
/* Hamburger button hidden on desktop */
.menu-btn { display:none; }
.nav-overlay { display:none; }
/* ── 7. Boot overlay (cosmetic layer; content in DOM beneath it) */
.boot-overlay {
  position:fixed; inset:0; z-index:500;
  background:var(--bg-void);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease;
}
.boot-overlay.done { opacity:0; pointer-events:none; }
.reduced-motion .boot-overlay { display:none; }
.boot-flash {
  position:absolute; inset:0;
  background:#fff; opacity:0;
  transition:opacity .1s;
}
.boot-stage { position:relative; z-index:2; text-align:center; }
.boot-glyph {
  position:relative;
  width:160px; height:160px; margin:0 auto 2rem;
  image-rendering:pixelated;
}
/* Individual tiles (injected by JS) */
.boot-tile {
  position:absolute; width:10px; height:10px;
  background:var(--accent);
  image-rendering:pixelated;
  will-change:transform,opacity;
}
.boot-log {
  font-family:var(--mono); font-size:.875rem;
  color:var(--accent); letter-spacing:.05em;
  min-height:1.4em;
}
.boot-caret {
  display:inline-block; width:.6em; height:1em;
  background:var(--accent); vertical-align:text-bottom;
  animation:blink .7s step-end infinite;
}
.boot-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, var(--scanline) 0 1px, transparent 1px 3px);
  animation:scanmove 4s linear infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes scanmove { from{background-position:0 0} to{background-position:0 120px} }

/* ── 8. Hero ─────────────────────────────────────────── */
.hero {
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:6rem 1.5rem 4rem;
}
.hero__backdrop { position:absolute; inset:0; pointer-events:none; }
.hero__stars { position:absolute; inset:0; width:100%; height:100%; opacity:.6; }
.hero__body {
  position:relative; z-index:2;
  max-width:720px; text-align:center;
  opacity:0; transform:translateY(24px);
  transition:opacity .8s ease .2s, transform .8s ease .2s;
}
.hero__body.visible { opacity:1; transform:translateY(0); }
.hero__mark { margin:0 auto 2rem; color:var(--accent); image-rendering:pixelated; }
.hero__title {
  font-size:clamp(2.5rem,7vw,5rem);
  font-weight:700; letter-spacing:-0.02em; line-height:1.05;
  color:var(--ink-hi);
}
.hero__title-accent { color:var(--accent); }
.hero__sub { color:var(--ink-mid); margin-top:1rem; font-size:1.0625rem; }
.hero__stat {
  margin:2rem auto 0; display:inline-flex; gap:.5rem; align-items:baseline;
  font-family:var(--mono); font-size:.9375rem;
  color:var(--ink-mid);
}
.hero__stat-num {
  font-size:2rem; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.hero__cta { margin-top:2.5rem; }
/* ── 9. CTA button ───────────────────────────────────── */
.btn-cta {
  display:inline-block;
  padding:.875rem 2.25rem;
  border:1.5px solid var(--accent);
  color:var(--accent);
  font-size:1rem; font-weight:600;
  letter-spacing:.04em;
  border-radius:var(--r-pill);
  position:relative; overflow:hidden;
  transition:background .25s, color .25s, box-shadow .25s;
  animation:ctapulse 2.8s ease infinite;
}
.btn-cta::before {
  content:''; position:absolute; inset:0;
  background:var(--accent); opacity:0;
  transition:opacity .25s;
}
.btn-cta:hover::before { opacity:.12; }
.btn-cta:hover { box-shadow:0 0 20px var(--accent-glow); }
.btn-cta:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.btn-cta--outline { background:transparent; }
@keyframes ctapulse {
  0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(56,225,255,0)}
}

/* ── 10. Catalog section ─────────────────────────────── */
.catalog { background:var(--bg-void); }
.filter-tabs {
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.filter-tab {
  padding:.4rem 1rem; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500;
  color:var(--ink-mid);
  border:1px solid var(--border);
  background:transparent;
  transition:color .2s, border-color .2s, background .2s;
}
.filter-tab:hover { color:var(--accent); border-color:var(--accent); }
.filter-tab.active, .filter-tab[aria-selected="true"] {
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-dim);
}
.filter-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.25rem;
}

/* ── 11. Card ────────────────────────────────────────── */
.card {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:1.5rem;
  display:flex; gap:1rem; align-items:flex-start;
  position:relative; overflow:hidden;
  cursor:pointer;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s, transform .5s, box-shadow .25s, border-color .25s;
  will-change:transform,opacity;
}
.card.is-revealed { opacity:1; transform:translateY(0); }
.card:hover, .card:focus-visible {
  border-color:var(--accent);
  box-shadow:0 0 24px var(--accent-glow);
  transform:translateY(-4px);
}
.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.card__icon svg { color:var(--accent); image-rendering:pixelated; }
.card__icon { flex-shrink:0; padding:.5rem; background:var(--accent-dim); border-radius:var(--r-pill); }
.card__name { font-weight:600; font-size:1rem; color:var(--ink-hi); }
.card__desc { font-size:.875rem; color:var(--ink-mid); margin:.25rem 0 .75rem; }
.card__meta { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
/* ── 12. Badges ──────────────────────────────────────── */
.badge {
  display:inline-block; padding:.15rem .5rem;
  font-size:.75rem; font-weight:600; letter-spacing:.04em;
  border-radius:var(--r-pill); text-transform:uppercase;
  border:1px solid;
}
.badge--free { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.badge--live { color:#5ef87f; border-color:rgba(94,248,127,.35); background:rgba(94,248,127,.08); }
.badge--soon { color:var(--ink-mid); border-color:var(--border); background:transparent; }
.badge--pro  { color:var(--premium); border-color:var(--premium); background:rgba(232,195,107,.1); }

/* ── 13. Mana bar ────────────────────────────────────── */
.card__manabar {
  height:3px; background:var(--bg-panel-2);
  border-radius:2px; overflow:hidden; margin-top:.75rem;
}
.card__manafill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),rgba(56,225,255,.5));
  transition:width 1s cubic-bezier(.16,1,.3,1) .3s;
  border-radius:2px;
}
.card.is-revealed .card__manafill { width:var(--fill,60%); }
.card.is-hidden { display:none; }

/* ── 14. Online tools dock ───────────────────────────── */
.tools-section { background:var(--bg-panel); }
.dock {
  display:flex; gap:1rem; flex-wrap:wrap;
  justify-content:center;
  margin-top:2rem;
}
.dock-tile {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1rem .75rem;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  min-width:88px;
  color:var(--ink-mid);
  transition:color .2s, border-color .2s, transform .2s, box-shadow .2s;
  will-change:transform;
}
.dock-tile:hover, .dock-tile:focus-visible {
  color:var(--accent); border-color:var(--accent);
  box-shadow:0 0 16px var(--accent-glow);
  transform:scale(1.08);
}
.dock-tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dock-tile__icon svg { image-rendering:pixelated; }
.dock-tile__label { font-size:.75rem; white-space:nowrap; text-align:center; }

/* ── 15. Premium tier ────────────────────────────────── */
.premium { background:var(--bg-void); }
.premium-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
  max-width:960px; margin:2.5rem auto 0;
}
.card--premium {
  border-color:rgba(232,195,107,.25);
}
.card--premium:hover, .card--premium:focus-visible {
  border-color:var(--premium);
  box-shadow:0 0 24px var(--premium-glow);
  transform:translateY(-4px);
}
.card--premium .card__icon { background:rgba(232,195,107,.1); }
.card--premium .card__icon svg { color:var(--premium); }
.premium-price { font-family:var(--mono); font-size:.75rem; color:var(--premium); }
/* ── 16. Services / terminal card ────────────────────── */
.services { background:var(--bg-panel); }
.terminal-card {
  max-width:720px; margin:0 auto;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden; position:relative;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s, transform .6s;
}
.terminal-card.is-revealed { opacity:1; transform:translateY(0); }
.terminal-card__bar {
  display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
}
.terminal-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--border-strong);
}
.terminal-dot:nth-child(1){background:#ff5f57}
.terminal-dot:nth-child(2){background:#febc2e}
.terminal-dot:nth-child(3){background:#28c840}
.terminal-card__title { font-family:var(--mono); font-size:.8125rem; color:var(--ink-mid); margin-left:.5rem; font-weight:400; }
.terminal-card__body { padding:2rem; }
.terminal-text {
  font-family:var(--mono); font-size:.9375rem;
  color:var(--ink-mid); line-height:1.7; min-height:3.5em;
  font-feature-settings:'kern' 1; white-space:pre-wrap;
}
.terminal-text .t-cursor {
  display:inline-block; width:.6em; height:1em;
  background:var(--accent); vertical-align:text-bottom;
  animation:blink .7s step-end infinite;
}
.services__cta { margin-top:2rem; }
.terminal-card__scanline {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, transparent 0 2px, var(--scanline) 2px 3px);
}

/* ── 17. Footer ──────────────────────────────────────── */
.footer {
  background:var(--bg-panel);
  border-top:1px solid var(--border);
  padding:3rem 1.5rem 2rem;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s, transform .6s;
}
.footer.is-revealed { opacity:1; transform:translateY(0); }
.footer__pixelstrip {
  height:4px; margin-bottom:2rem;
  display:flex; gap:1px;
  overflow:hidden;
}
.footer__px {
  height:100%; flex:1;
  background:var(--accent);
  opacity:.5;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.footer__px.lit { transform:scaleX(1); }
.footer__inner { max-width:1120px; margin:0 auto; }
.footer__brand { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; }
.footer__glyph { color:var(--accent); image-rendering:pixelated; opacity:.7; }
.footer__tagline { font-size:.9375rem; color:var(--ink-mid); }
.footer__links {
  display:flex; gap:1.5rem; flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.footer__links a { font-size:.875rem; color:var(--ink-mid); transition:color .2s; }
.footer__links a:hover { color:var(--accent); }
.footer__links a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.footer__company { font-size:.8125rem; color:var(--ink-mid); }
.footer__icp { font-size:.75rem; color:var(--ink-lo); margin-top:.35rem; }
.footer__icp a { color:var(--ink-lo); transition:color .2s; }
.footer__icp a:hover { color:var(--ink-mid); }
/* ── 18. Minimap ─────────────────────────────────────── */
.minimap {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:300;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:6px; padding:.75rem;
  width:96px; min-height:80px;
}
.minimap__inner { display:flex; flex-direction:column; gap:4px; }
.minimap__tile {
  height:6px; border-radius:2px;
  background:var(--border-strong); cursor:pointer;
  transition:background .2s, box-shadow .2s;
  border:none;
}
.minimap__tile:hover { background:var(--ink-mid); }
.minimap__tile.active {
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  animation:mapulse 1.6s ease infinite;
}
.minimap__tile:focus-visible { outline:2px solid var(--accent); }
@keyframes mapulse { 0%,100%{box-shadow:0 0 6px var(--accent-glow)} 50%{box-shadow:0 0 12px var(--accent-glow)} }

/* ── 19. Kill-feed ticker ────────────────────────────── */
.killfeed {
  position:fixed; top:4rem; right:1rem; z-index:250;
  pointer-events:none;
  display:flex; flex-direction:column; gap:.35rem;
  align-items:flex-end;
}
.killfeed-item {
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:.3rem .75rem;
  font-family:var(--mono); font-size:.7rem;
  color:var(--ink-mid);
  opacity:0; transform:translateX(20px);
  transition:opacity .3s, transform .3s;
}
.killfeed-item.visible { opacity:1; transform:translateX(0); }
.killfeed-item .kf-accent { color:var(--accent); }

/* ── 20. Reveal utility ──────────────────────────────── */
.reveal-target {
  opacity:0; transform:translateY(20px);
  transition:opacity .6s, transform .6s;
}
.reveal-target.is-revealed { opacity:1; transform:translateY(0); }

/* ── 21. Scroll-driven section dividers / padding ────── */
.hero    { padding-top:5rem; }
.catalog { padding-bottom:0; }
.catalog .section-inner { padding-top:5rem; padding-bottom:5rem; }
.tools-section .section-inner { padding-top:5rem; padding-bottom:5rem; }
.premium .section-inner { padding-top:5rem; padding-bottom:5rem; }
.services .section-inner { padding-top:5rem; padding-bottom:5rem; }
/* ── 22. Reduced-motion overrides ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .boot-overlay { display:none!important; }
  body.booting { overflow:auto!important; }
  .hero__body { opacity:1!important; transform:none!important; transition:none!important; }
  .card { opacity:1!important; transform:none!important; transition:none!important; }
  .terminal-card { opacity:1!important; transform:none!important; }
  .footer { opacity:1!important; transform:none!important; }
  .card.is-revealed .card__manafill { width:var(--fill,60%)!important; transition:none!important; }
  .topbar { opacity:1!important; transform:none!important; }
}
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
}
.reduced-motion .boot-overlay   { display:none!important; }
.reduced-motion body.booting    { overflow:auto!important; }
.reduced-motion .hero__body     { opacity:1!important; transform:none!important; transition:none!important; }
.reduced-motion .card           { opacity:1!important; transform:none!important; transition:none!important; }
.reduced-motion .terminal-card  { opacity:1!important; transform:none!important; }
.reduced-motion .footer         { opacity:1!important; transform:none!important; }
.reduced-motion .card.is-revealed .card__manafill { width:var(--fill,60%)!important; transition:none!important; }
.reduced-motion .topbar         { opacity:1!important; transform:none!important; }

/* ── 23. Mobile / responsive ─────────────────────────── */
@media (max-width:767px) {
  .minimap { display:none; }
  .killfeed { display:none; }
  .topbar__nav { gap:.75rem; }
  .topbar__label { display:none; }
  .cards-grid { grid-template-columns:1fr; }
  .dock { display:grid; grid-template-columns:1fr 1fr; }
  .dock-tile { transform:none!important; }/* disable magnification */
  .premium-grid { grid-template-columns:1fr; }
  .hero__title { font-size:clamp(2rem,10vw,3rem); }
}
@media (max-width:480px) {
  .section-inner { padding:3rem 1rem; }
  .topbar { padding:.6rem 1rem; }
  /* Nav collapses to drawer — toggled by #menuBtn */
  .topbar__nav {
    position:fixed; top:0; right:0; bottom:0; width:70vw; max-width:280px;
    background:var(--bg-panel-2); border-left:1px solid var(--border);
    display:flex; flex-direction:column; gap:1.5rem;
    padding:4rem 1.5rem 2rem;
    transform:translateX(100%); transition:transform .25s ease;
    z-index:200;
  }
  .topbar__nav.is-open { transform:translateX(0); }
  .topbar__link { font-size:1.1rem; }
  /* Hamburger button */
  .menu-btn {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; background:none; border:none; cursor:pointer;
    padding:6px; color:var(--ink-hi); flex-shrink:0;
  }
  .menu-btn span {
    display:block; width:100%; height:2px;
    background:currentColor; border-radius:1px;
    transition:transform .2s, opacity .2s;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  /* Overlay behind open drawer */
  .nav-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199;
  }
  .nav-overlay.is-open { display:block; }
}
/* Coarse pointer: disable magnification + hover-dependent effects */
@media (pointer:coarse) {
  .dock-tile { transform:none!important; }
}

/* ── 24. Premium shimmer (reduced on coarse pointer) ──── */
.card--premium::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(232,195,107,.07) 50%,transparent 60%);
  pointer-events:none; opacity:0; transition:opacity .4s;
}
.card--premium:hover::after { opacity:1; }
@media (pointer:coarse) { .card--premium::after { display:none; } }

/* ── 25. Section heading reveal helper ───────────────── */
.section-title.reveal-target, .section-sub.reveal-target {
  opacity:0; transform:translateY(16px);
  transition:opacity .6s, transform .6s;
}
.section-title.is-revealed, .section-sub.is-revealed {
  opacity:1; transform:translateY(0);
}