/* ==========================================================================
   KENGSLEYS LOUISSAINT // NEO-TOKYO DEV TERMINAL
   ========================================================================== */

:root {
  --bg-0: #06070b;
  --bg-1: #0a0c12;
  --bg-2: #11141c;
  --bg-3: #1a1e29;
  --fg-0: #e8ecf2;
  --fg-1: #aeb6c6;
  --fg-2: #6b7589;
  --fg-3: #3d4456;
  --line: #1f2433;
  --line-2: #2a3145;

  --neon-cy: #00f0ff;
  --neon-mg: #ff2bd6;
  --neon-gn: #39ff8b;
  --neon-yl: #ffd84d;
  --warn: #ff4757;

  --accent: var(--neon-cy);
  --accent-2: var(--neon-mg);
  --accent-3: var(--neon-gn);

  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-jp: "Noto Sans JP", "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg-0); }
body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #000; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── Global background: grid + katakana filigree + scanlines ─────────── */
.bg-grid,
.bg-kana,
.bg-scanlines,
.bg-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
.bg-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: .6;
}
.bg-vignette {
  background: radial-gradient(ellipse at 50% 0%, transparent 30%, rgba(0,0,0,.6) 100%);
}
.bg-kana {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--fg-3);
  opacity: .12;
  white-space: pre;
  overflow: hidden;
  padding: 24px;
  line-height: 1.6;
  letter-spacing: 0.15em;
  user-select: none;
}

/* CRT flicker */
@keyframes crtflicker {
  0%,100% { opacity: .6; }
  45% { opacity: .55; }
  46% { opacity: .8; }
  47% { opacity: .58; }
}
.bg-scanlines { animation: crtflicker 6s infinite; }

/* ─── Layout shell ────────────────────────────────────────────────────── */
.shell { position: relative; z-index: 1; }
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── Top status bar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 7, 11, 0.85);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 20px; }
.topbar .dot {
  width: 7px; height: 7px;
  background: var(--neon-gn);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--neon-gn);
  animation: pulse 1.6s infinite;
}
.topbar a:hover { color: var(--accent); }
.topbar .sep { color: var(--fg-3); }
.topbar .kana { font-family: var(--font-jp); color: var(--fg-1); letter-spacing: 0.2em; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ─── Primary nav ─────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.brand-mark {
  width: 46px; height: 46px;
  position: relative;
  background-image: url("assets/logo.png");
  background-size: 180%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line-2);
  filter: saturate(1.1) contrast(1.05);
  transition: border-color .2s, filter .2s;
}
.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border: 1.5px solid var(--accent);
  pointer-events: none;
}
.brand-mark::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.brand-mark::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.brand:hover .brand-mark {
  border-color: var(--accent);
  filter: saturate(1.3) brightness(1.1);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}

/* Logo badge — bigger version used as hero / footer accent */
.logo-badge {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-image: url("assets/logo.png");
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-2);
  position: relative;
}
.logo-badge::before, .logo-badge::after,
.logo-badge .tl, .logo-badge .tr, .logo-badge .bl, .logo-badge .br {
  position: absolute; width: 10px; height: 10px; content: "";
  border: 1px solid var(--accent);
}
.logo-badge .tl { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.logo-badge .tr { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.logo-badge .bl { bottom: -4px; left: -4px; border-right: 0; border-top: 0; }
.logo-badge .br { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.logo-badge::before, .logo-badge::after { display: none; }

.brand-text { line-height: 1.2; }
.brand-text .n1 { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--fg-0); }
.brand-text .n2 { font-size: 10px; color: var(--fg-2); letter-spacing: 0.2em; text-transform: uppercase; }

.nav-links { display: flex; gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; }
.nav-links a { color: var(--fg-1); position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--accent); }
.nav-links a .num { color: var(--fg-3); margin-right: 6px; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 9px 16px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  transition: background .15s, color .15s;
}
.nav-cta:hover {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 18px var(--accent);
}
.nav-cta::before, .nav-cta::after {
  content: ""; position: absolute; width: 6px; height: 6px; border: 1px solid var(--accent);
}
.nav-cta::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.nav-cta::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 80px 0 100px;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-2);
  margin-bottom: 28px;
}
.hero-tag .bracket { color: var(--accent); }
.hero-tag .kana { font-family: var(--font-jp); color: var(--accent-2); letter-spacing: 0.15em; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 9.5vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  text-transform: uppercase;
  position: relative;
}
.hero-title .line { display: block; }
.hero-title .stroke {
  -webkit-text-stroke: 1.5px var(--fg-0);
  color: transparent;
}
.hero-title .accent {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
}

.hero-typer {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg-1);
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 18px;
  margin: 36px 0 0;
  max-width: 700px;
}
.hero-typer .prompt { color: var(--accent); margin-right: 8px; }
.hero-typer .caret {
  display: inline-block;
  width: 9px;
  height: 1em;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero-meta {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-meta-cell {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
}
.hero-meta-cell:last-child { border-right: 0; }
.hero-meta-cell .k {
  font-size: 10px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.hero-meta-cell .v {
  font-size: 18px;
  color: var(--fg-0);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero-meta-cell .v .accent { color: var(--accent); }

.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  background: var(--bg-1);
  transition: all .15s;
}
.btn::before, .btn::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1px solid currentColor;
}
.btn::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.btn::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.btn .glyph { color: var(--accent); }
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 240, 255, 0.08);
}
.btn-primary {
  border-color: var(--accent);
  color: #000;
  background: var(--accent);
}
.btn-primary .glyph { color: #000; }
.btn-primary:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.45);
}

/* Hero side panel */
.hero-side {
  position: absolute;
  right: 32px;
  top: 120px;
  width: 280px;
  border: 1px solid var(--line-2);
  background: rgba(10, 12, 18, 0.7);
  font-family: var(--font-mono);
  font-size: 11px;
  display: none;
}
@media (min-width: 1100px) { .hero-side { display: block; } }
.hero-side-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-2);
}
.hero-side-hd .dots span {
  display: inline-block; width: 8px; height: 8px; margin-left: 4px;
  background: var(--fg-3);
}
.hero-side-hd .dots span:nth-child(1) { background: var(--warn); }
.hero-side-hd .dots span:nth-child(2) { background: var(--neon-yl); }
.hero-side-hd .dots span:nth-child(3) { background: var(--neon-gn); }
.hero-side-body { padding: 14px; line-height: 1.7; }
.hero-side-body .ln { display: flex; gap: 12px; }
.hero-side-body .lnum { color: var(--fg-3); width: 18px; text-align: right; }
.hero-side-body .kw { color: var(--accent-2); }
.hero-side-body .fn { color: var(--accent); }
.hero-side-body .str { color: var(--neon-gn); }
.hero-side-body .com { color: var(--fg-3); font-style: italic; }
.hero-side-body .pn { color: var(--neon-yl); }

/* Glitch text */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%;
  overflow: hidden;
}
.glitch::before {
  color: var(--accent-2);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(2px, -1px);
  opacity: .9;
  animation: glitchA 4s infinite linear;
}
.glitch::after {
  color: var(--accent);
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(-2px, 1px);
  opacity: .9;
  animation: glitchB 4.7s infinite linear;
}
@keyframes glitchA {
  0%, 92%, 100% { transform: translate(0, 0); }
  93% { transform: translate(3px, -1px) skewX(-6deg); }
  95% { transform: translate(-2px, 2px); }
  97% { transform: translate(1px, -2px); }
}
@keyframes glitchB {
  0%, 90%, 100% { transform: translate(0, 0); }
  91% { transform: translate(-3px, 1px) skewX(4deg); }
  94% { transform: translate(2px, -2px); }
  98% { transform: translate(-1px, 1px); }
}

/* ─── Section heading ─────────────────────────────────────────────────── */
.section {
  position: relative;
  padding: 110px 0;
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 56px;
}
.sec-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 12px;
}
.sec-idx .accent { color: var(--accent); }
.sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 76px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.sec-title .stroke { -webkit-text-stroke: 1.2px var(--fg-0); color: transparent; }
.sec-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  max-width: 320px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.sec-sub .accent { color: var(--accent); }

/* ─── Services (Terminal modules) ─────────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 880px) { .svc-grid { grid-template-columns: 1fr; } }

.svc {
  position: relative;
  border: 1px solid var(--line-2);
  background: rgba(10, 12, 18, 0.6);
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.svc:hover { border-color: var(--accent); transform: translate(-2px, -2px); }
.svc:hover .svc-glow { opacity: 1; }
.svc-glow {
  position: absolute; inset: -1px;
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 24px rgba(0, 240, 255, 0.05);
}
.svc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(255,255,255,.02), transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.svc-hd .l { display: flex; align-items: center; gap: 10px; }
.svc-hd .dots span {
  display: inline-block; width: 8px; height: 8px; margin-left: 4px;
  background: var(--fg-3);
}
.svc-hd .dots span:nth-child(1) { background: var(--warn); }
.svc-hd .dots span:nth-child(2) { background: var(--neon-yl); }
.svc-hd .dots span:nth-child(3) { background: var(--neon-gn); }

.svc-body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.svc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}
.svc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.svc-jp {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--accent-2);
  letter-spacing: 0.18em;
  margin-bottom: 22px;
}
.svc-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 46ch;
}
.svc-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-1);
}
.svc-list li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.svc-list li:last-child { border-bottom: 0; }
.svc-list .ok { color: var(--neon-gn); }
.svc-list .val { color: var(--fg-2); font-size: 11px; }
.svc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.svc-foot .price { color: var(--fg-0); font-size: 14px; font-family: var(--font-display); }
.svc-foot .price .accent { color: var(--accent); }
.svc-foot a {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-foot a:hover { text-decoration: underline; }

/* ─── Portfolio manga grid ────────────────────────────────────────────── */
.mg {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
}
@media (max-width: 880px) {
  .mg { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; }
}

.cell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  transition: border-color .2s, transform .2s;
  cursor: pointer;
}
.cell:hover { border-color: var(--accent); transform: translate(-2px, -2px); }

/* Halftone + diagonal hatch placeholders for each cell */
.cell .img {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,240,255,0.12), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,43,214,0.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px),
    var(--bg-2);
}
.cell.v2 .img {
  background:
    radial-gradient(circle at 70% 30%, rgba(57,255,139,0.14), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(0,240,255,0.08), transparent 55%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 6px, transparent 6px 12px),
    var(--bg-1);
}
.cell.v3 .img {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,216,77,0.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px),
    var(--bg-2);
}
.cell.v4 .img {
  background:
    radial-gradient(circle at 40% 60%, rgba(255,43,214,0.16), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,240,255,0.05) 0 1px, transparent 2px 5px),
    var(--bg-1);
}

/* Halftone overlay */
.cell .halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.5px);
  background-size: 6px 6px;
  mix-blend-mode: overlay;
  opacity: .7;
}

/* Scan line overlay (animates on hover) */
.cell .scan {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 30%;
  top: -30%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,240,255,0.0) 20%,
    rgba(0,240,255,0.35) 50%,
    rgba(0,240,255,0.0) 80%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
}
.cell:hover .scan {
  opacity: 1;
  animation: scanmove 1.4s linear infinite;
}
@keyframes scanmove {
  0% { top: -30%; }
  100% { top: 130%; }
}

/* Corner ticks */
.cell .ticks span {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  opacity: .85;
}
.cell .ticks span:nth-child(1) { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.cell .ticks span:nth-child(2) { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.cell .ticks span:nth-child(3) { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.cell .ticks span:nth-child(4) { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* Cell content */
.cell .meta {
  position: absolute;
  top: 14px; left: 18px; right: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
  z-index: 2;
}
.cell .meta .acc { color: var(--accent); }
.cell .info {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 2;
}
.cell .info .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.cell .info .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-1);
  letter-spacing: 0.06em;
}
.cell .info .tag .accent { color: var(--accent); }

/* Cell stack chips */
.cell .stack {
  position: absolute;
  bottom: 18px;
  right: 18px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.cell .stack span {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 7px;
  border: 1px solid var(--line-2);
  background: rgba(6,7,11,0.7);
  color: var(--fg-1);
}

/* Hover reveal panel */
.cell .reveal {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 11, 0.88);
  backdrop-filter: blur(2px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  opacity: 0;
  transition: opacity .2s;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--accent);
}
.cell:hover .reveal { opacity: 1; }
.cell .reveal .row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  border-bottom: 1px dashed var(--line);
  padding: 6px 0;
  font-size: 11px;
}
.cell .reveal .row:last-of-type { border-bottom: 0; }
.cell .reveal .k { color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.15em; font-size: 10px; }
.cell .reveal .v { color: var(--fg-0); }
.cell .reveal .v .ok { color: var(--neon-gn); }
.cell .reveal { overflow-y: auto; }
.cell .reveal .hl {
  margin-top: 12px;
  border-top: 1px dashed var(--line-2);
  padding-top: 10px;
}
.cell .reveal .hl-label {
  color: var(--accent-2);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cell .reveal .hl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cell .reveal .hl li {
  position: relative;
  padding-left: 14px;
  color: var(--fg-1);
  font-size: 10.5px;
  line-height: 1.4;
}
.cell .reveal .hl li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.cell .reveal .open {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-top: 1px solid var(--accent);
  padding-top: 12px;
  margin-top: 12px;
}

/* big cell */
.cell.big .info .name { font-size: 42px; }
.cell.tall .info .name { font-size: 36px; }

/* Spans */
.s-1 { grid-column: span 1; }
.s-2 { grid-column: span 2; }
.s-3 { grid-column: span 3; }
.s-4 { grid-column: span 4; }
.s-5 { grid-column: span 5; }
.s-6 { grid-column: span 6; }
.s-7 { grid-column: span 7; }
.s-8 { grid-column: span 8; }
.s-12 { grid-column: span 12; }
.r-1 { grid-row: span 1; }
.r-2 { grid-row: span 2; }
.r-3 { grid-row: span 3; }
.r-4 { grid-row: span 4; }

/* ─── Stack rail ──────────────────────────────────────────────────────── */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line-2);
}
@media (max-width: 880px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
.stk {
  position: relative;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  transition: background .15s;
}
.stk:hover { background: rgba(0, 240, 255, 0.05); }
.stk .num { font-size: 10px; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 12px; }
.stk .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 6px;
}
.stk .lvl {
  font-size: 10px;
  color: var(--fg-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.stk .bar {
  height: 3px;
  background: var(--bg-2);
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}
.stk .bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--accent);
}
.stk .bar i::after {
  content: ""; position: absolute; right: 0; top: -2px; bottom: -2px;
  width: 2px; background: var(--fg-0);
}

/* ─── Process timeline ─────────────────────────────────────────────────── */
.proc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) { .proc { grid-template-columns: 1fr 1fr; } }
.proc-step {
  padding: 28px 22px 32px;
  border-right: 1px solid var(--line);
  position: relative;
  font-family: var(--font-mono);
}
.proc-step:last-child { border-right: 0; }
.proc-step .id {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.22em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proc-step .id::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
}
.proc-step .nm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.proc-step .dc {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.65;
}
.proc-step .ja {
  position: absolute;
  top: 18px;
  right: 16px;
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.2em;
}

/* ─── Contact CLI ─────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
}
@media (max-width: 980px) { .contact { grid-template-columns: 1fr; } }
.term {
  border: 1px solid var(--line-2);
  background: rgba(10, 12, 18, 0.7);
  font-family: var(--font-mono);
  font-size: 13px;
}
.term-hd {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--bg-2);
}
.term-hd .dots span { display: inline-block; width: 9px; height: 9px; margin-left: 4px; }
.term-hd .dots span:nth-child(1) { background: var(--warn); }
.term-hd .dots span:nth-child(2) { background: var(--neon-yl); }
.term-hd .dots span:nth-child(3) { background: var(--neon-gn); }
.term-body { padding: 20px; line-height: 1.85; color: var(--fg-1); min-height: 320px; }
.term-body .prompt { color: var(--accent); margin-right: 8px; }
.term-body .out { color: var(--fg-1); padding-left: 0; }
.term-body .ok { color: var(--neon-gn); }
.term-body .err { color: var(--warn); }
.term-body .warn { color: var(--neon-yl); }
.term-body .kw { color: var(--accent-2); }
.term-body .ln { padding: 1px 0; }
.term-body .caret {
  display: inline-block;
  width: 8px; height: 1em;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret 1s steps(1) infinite;
}

.form {
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form .grp { display: flex; flex-direction: column; gap: 6px; }
.form label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-2);
}
.form label .req { color: var(--accent); margin-left: 4px; }
.form input, .form select, .form textarea {
  appearance: none;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 0;
  outline: none;
  transition: border-color .15s, background .15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--accent);
  background: rgba(0,240,255,0.04);
}
.form textarea { resize: vertical; min-height: 110px; font-family: var(--font-mono); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.form .chip.on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,240,255,0.08);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.form .chip .x { color: var(--accent); }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding: 60px 0 30px;
  margin-top: 80px;
}
.foot-feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 14px 14px 14px 14px;
  margin-bottom: 50px;
  border: 1px solid var(--line-2);
  background: rgba(10, 12, 18, 0.5);
}
@media (max-width: 880px) { .foot-feature { grid-template-columns: 1fr; } }
.foot-feature .logo-badge { aspect-ratio: 16 / 8; }
.foot-feature-side { padding: 4px 12px 4px 0; }
.foot .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
}
.foot .mark-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 14vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 60px 0 0;
  -webkit-text-stroke: 1.5px var(--fg-2);
  color: transparent;
  text-transform: uppercase;
}
.foot .mark-big .accent {
  color: var(--accent);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 30px rgba(0,240,255,0.4);
}
.foot .legal {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ─── Boot overlay ─────────────────────────────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  transition: opacity .4s;
}
.boot.done { opacity: 0; pointer-events: none; }
.boot-inner {
  width: min(720px, 100%);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
}
.boot-hd {
  font-size: 10px;
  color: var(--fg-2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
}
.boot-hd .acc { color: var(--accent); }
.boot-lines { min-height: 280px; }
.boot-logo { margin: 0 0 26px; }
.boot-logo .logo-badge { aspect-ratio: 16 / 7; }
.boot-lines .ln { padding: 2px 0; }
.boot-lines .ok { color: var(--neon-gn); }
.boot-lines .pr { color: var(--accent); margin-right: 8px; }
.boot-lines .dim { color: var(--fg-3); }
.boot-lines .err { color: var(--warn); }
.boot-bar {
  margin-top: 22px;
  border: 1px solid var(--line-2);
  height: 12px;
  position: relative;
  overflow: hidden;
}
.boot-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(to right, var(--accent), var(--accent-2));
  width: 0%;
  transition: width .12s linear;
  box-shadow: 0 0 12px var(--accent);
}
.boot-skip {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--fg-2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.boot-skip button {
  background: none;
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.boot-skip button:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Marquee strip ────────────────────────────────────────────────────── */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 18px 0;
}
.marquee-track {
  display: inline-flex;
  gap: 36px;
  animation: marquee 30s linear infinite;
}
.marquee-track .star { color: var(--accent); }
.marquee-track .stroke { -webkit-text-stroke: 1px var(--fg-2); color: transparent; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}