/* ╔══════════════════════════════════════════════════════╗
   ║  THEMES                                              ║
   ╚══════════════════════════════════════════════════════╝ */
:root,
[data-theme="enterprise"] {
  --bg: #0a0e27;
  --surface: #101535;
  --card: #151e3f;
  --card-h: #1a2550;
  --border: rgba(59, 130, 246, 0.15);
  --border-s: rgba(59, 130, 246, 0.07);
  --a: #3b82f6;
  --al: #60a5fa;
  --ad: rgba(59, 130, 246, 0.24);
  --txt: #f0f4f8;
  --txtm: #94a3b8;
  --txtd: #475569;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 59, 130, 246;
}
[data-theme="startup"] {
  --bg: #0f0416;
  --surface: #1a0b2e;
  --card: #2d1b4e;
  --card-h: #3d2a62;
  --border: rgba(168, 85, 247, 0.18);
  --border-s: rgba(168, 85, 247, 0.07);
  --a: #a855f7;
  --al: #d8b4fe;
  --ad: rgba(168, 85, 247, 0.28);
  --txt: #f3e8ff;
  --txtm: #d8b4fe;
  --txtd: #6b21a8;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 168, 85, 247;
}
[data-theme="creative"] {
  --bg: #1a0f2e;
  --surface: #2d1b47;
  --card: #3d2a5e;
  --card-h: #4d3a7e;
  --border: rgba(236, 72, 153, 0.18);
  --border-s: rgba(236, 72, 153, 0.07);
  --a: #ec4899;
  --al: #f472b6;
  --ad: rgba(236, 72, 153, 0.28);
  --txt: #fdf2f8;
  --txtm: #fbcfe8;
  --txtd: #831843;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 236, 72, 153;
}
[data-theme="fintech"] {
  --bg: #0a0f1f;
  --surface: #0f1729;
  --card: #151f35;
  --card-h: #1a2747;
  --border: rgba(34, 197, 94, 0.15);
  --border-s: rgba(34, 197, 94, 0.07);
  --a: #22c55e;
  --al: #86efac;
  --ad: rgba(34, 197, 94, 0.24);
  --txt: #f0fdf4;
  --txtm: #bbf7d0;
  --txtd: #15803d;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 34, 197, 94;
}
[data-theme="saas"] {
  --bg: #f8fafc;
  --surface: #f1f5f9;
  --card: #e2e8f0;
  --card-h: #cbd5e1;
  --border: rgba(15, 23, 42, 0.12);
  --border-s: rgba(15, 23, 42, 0.06);
  --a: #0f172a;
  --al: #1e293b;
  --ad: rgba(15, 23, 42, 0.12);
  --txt: #0f172a;
  --txtm: #475569;
  --txtd: #94a3b8;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 15, 23, 42;
}
[data-theme="luxury"] {
  --bg: #0f0805;
  --surface: #1a1410;
  --card: #2a2016;
  --card-h: #3a3020;
  --border: rgba(217, 119, 6, 0.18);
  --border-s: rgba(217, 119, 6, 0.07);
  --a: #d97706;
  --al: #f59e0b;
  --ad: rgba(217, 119, 6, 0.24);
  --txt: #fffbeb;
  --txtm: #fcd34d;
  --txtd: #78350f;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 217, 119, 6;
}
[data-theme="gaming"] {
  --bg: #0a0a0f;
  --surface: #141428;
  --card: #1f1f3a;
  --card-h: #2a2a4a;
  --border: rgba(16, 185, 129, 0.18);
  --border-s: rgba(16, 185, 129, 0.07);
  --a: #10b981;
  --al: #6ee7b7;
  --ad: rgba(16, 185, 129, 0.28);
  --txt: #ecf0f1;
  --txtm: #d1fae5;
  --txtd: #065f46;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 16, 185, 129;
}
[data-theme="sustainable"] {
  --bg: #051a0a;
  --surface: #0d2e14;
  --card: #16401d;
  --card-h: #1f5626;
  --border: rgba(34, 197, 94, 0.18);
  --border-s: rgba(34, 197, 94, 0.07);
  --a: #22c55e;
  --al: #4ade80;
  --ad: rgba(34, 197, 94, 0.28);
  --txt: #f0fdf4;
  --txtm: #bbfcb6;
  --txtd: #166534;
  --ff-d: "Bebas Neue", sans-serif;
  --ff-s: "DM Serif Display", serif;
  --ff-m: "JetBrains Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --prgb: 34, 197, 94;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  BASE                                                ║
   ╚══════════════════════════════════════════════════════╝ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
  background: var(--bg);
}
body {
  font-family: var(--ff-m);
  font-size: 14px;
  color: var(--txt);
  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(59, 130, 246, 0.07),
      transparent 24%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(59, 130, 246, 0.05),
      transparent 22%
    ),
    radial-gradient(circle at 50% 100%, rgba(10, 14, 39, 0.9), transparent 34%),
    linear-gradient(180deg, #0a0e27 0%, #0c1230 42%, #080c22 100%);
  overflow-x: hidden;
  cursor: none;
  transition:
    background 0.5s,
    color 0.5s;
}
[data-theme] * {
  transition:
    background-color 0.45s,
    color 0.45s,
    border-color 0.45s,
    box-shadow 0.45s;
}
[data-theme] canvas,
[data-theme] .hero-name,
[data-theme] .hero-name * {
  transition: none !important;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* ── Noise ── */
#noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  opacity: 0.045;
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── Cursor ── */
#cdot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--al);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
#cring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--a);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
  transition:
    width 0.3s var(--ease),
    height 0.3s var(--ease),
    opacity 0.3s;
}
#cring.big {
  width: 60px;
  height: 60px;
  opacity: 0.55;
}
@media (hover: none) {
  #cdot,
  #cring {
    display: none;
  }
  body {
    cursor: auto;
  }
}

/* ── Scroll Progress ── */
#sp {
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  z-index: 8000;
  pointer-events: none;
}
#sp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-s);
}
#sp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--al), var(--a));
  transition: height 0.1s linear;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  NAVIGATION                                          ║
   ╚══════════════════════════════════════════════════════╝ */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 52px;
  transition:
    background 0.4s,
    backdrop-filter 0.4s,
    border-color 0.4s;
}
#nav.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: var(--ff-d);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--al);
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  font-family: var(--ff-m);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--txtm);
  position: relative;
  transition: color 0.3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--a);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover {
  color: var(--txt);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-game-link {
  padding: 5px 14px;
  border: 1px solid rgba(var(--prgb), 0.35);
  border-radius: 5px;
  color: var(--a) !important;
  letter-spacing: 2.5px;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s !important;
}
.nav-game-link:hover {
  background: rgba(var(--prgb), 0.12);
  border-color: rgba(var(--prgb), 0.65);
}
.nav-game-link::after {
  display: none !important;
}
.nav-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-s);
  padding: 8px;
}
.nav-ham span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--txt);
  transition:
    transform 0.35s var(--ease),
    opacity 0.3s;
  transform-origin: center;
}
.nav-ham.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-ham.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-ham.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile Overlay ── */
#mob-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
#mob-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.mob-link {
  font-family: var(--ff-d);
  font-size: clamp(40px, 10vw, 60px);
  letter-spacing: 4px;
  color: var(--txtm);
  transition:
    color 0.3s,
    transform 0.3s;
  transform: translateY(20px);
  opacity: 0;
}
#mob-overlay.open .mob-link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease),
    color 0.3s;
}
#mob-overlay.open .mob-link:nth-child(1) {
  transition-delay: 0.05s;
}
#mob-overlay.open .mob-link:nth-child(2) {
  transition-delay: 0.1s;
}
#mob-overlay.open .mob-link:nth-child(3) {
  transition-delay: 0.15s;
}
#mob-overlay.open .mob-link:nth-child(4) {
  transition-delay: 0.2s;
}
#mob-overlay.open .mob-link:nth-child(5) {
  transition-delay: 0.25s;
}
.mob-link:hover {
  color: var(--al);
}
.mob-theme-row {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  opacity: 0;
  transition: opacity 0.5s 0.3s;
}
#mob-overlay.open .mob-theme-row {
  opacity: 1;
}
.mob-tswatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.25s,
    border-color 0.25s;
}
.mob-tswatch:hover,
.mob-tswatch.active {
  transform: scale(1.2);
  border-color: var(--txt);
}

/* ╔══════════════════════════════════════════════════════╗
   ║  HERO                                                ║
   ╚══════════════════════════════════════════════════════╝ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(var(--prgb), 0.28) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(var(--prgb), 0.2) 0%,
      transparent 50%
    );
}
#hero::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--ad) 25%,
    var(--ad) 75%,
    transparent
  );
  z-index: 1;
}
#hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#hero-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.hero-vgr {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--bg) 92%, transparent) 28%,
    color-mix(in srgb, var(--bg) 62%, transparent) 52%,
    color-mix(in srgb, var(--bg) 10%, transparent) 75%,
    transparent 100%
  );
}
#hero::after {
  content: "";
  position: absolute;
  inset: auto 6% 10% auto;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--prgb), 0.18) 0%,
    rgba(var(--prgb), 0.08) 36%,
    transparent 70%
  );
  filter: blur(6px);
}
.hero-c {
  position: relative;
  z-index: 2;
  padding: 0 92px;
  max-width: 960px;
}
.hero-eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: 26px;
  opacity: 0;
  transform: translateY(12px);
  animation: fsu 0.9s var(--ease) 0.2s forwards;
}
.hero-dot {
  width: 6px;
  height: 6px;
  background: var(--a);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2.5s ease infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.55);
  }
}
.hero-name {
  font-family: var(--ff-d);
  font-size: clamp(64px, 11.5vw, 164px);
  line-height: 0.88;
  letter-spacing: 2px;
  color: var(--txt);
  margin-bottom: 34px;
}
.hero-name .ln {
  display: block;
  overflow: hidden;
}
.hero-name .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) skewX(-8deg);
}
/* ── Per-theme hero-name corrections ──
   Each display font has different metrics: cap-height, width, optical size.
   These overrides ensure the name renders beautifully in every theme.        */
.hero-sub {
  font-family: var(--ff-m);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--al);
  margin-bottom: 14px;
  min-height: 22px;
  opacity: 0;
  animation: fsu 0.9s var(--ease) 1.5s forwards;
}
.hero-tag {
  font-size: 13px;
  color: var(--txtm);
  letter-spacing: 1.5px;
  margin-bottom: 50px;
  opacity: 0;
  animation: fsu 0.9s var(--ease) 1.7s forwards;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fsu 0.9s var(--ease) 1.9s forwards;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid var(--border);
  font-family: var(--ff-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition:
    color 0.35s,
    border-color 0.35s,
    border-radius 0.35s,
    box-shadow 0.35s,
    transform 0.3s;
  background: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
  animation: fadeSlideUp 0.6s var(--ease) backwards;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--a);
  transform: translateX(-102%);
  transition: transform 0.4s var(--ease);
}
.btn:hover::before {
  transform: translateX(0);
}
.btn:hover {
  color: var(--bg);
  border-color: var(--a);
  box-shadow: 0 8px 24px rgba(var(--prgb), 0.16);
  transform: translateY(-2px);
}
.btn > * {
  position: relative;
  z-index: 1;
}
.btn-p {
  border-color: var(--a);
  color: var(--a);
}
.btn-s {
  color: var(--txtm);
}
.btn-arr {
  font-size: 15px;
  transition: transform 0.3s;
}
.btn:hover .btn-arr {
  transform: translateX(5px);
}
.hero-scroll {
  position: absolute;
  bottom: 42px;
  right: 52px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fsu 0.9s var(--ease) 2.1s forwards;
  transition: transform 0.3s;
}
.hero-scroll:hover {
  transform: translateY(-4px);
}
.hs-txt {
  writing-mode: vertical-rl;
  font-family: var(--ff-m);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--txtm);
}
.hs-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--a), transparent);
  animation: hl 2.4s ease infinite;
  box-shadow: 0 0 12px rgba(var(--prgb), 0.2);
}
@keyframes hl {
  0%,
  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0.2);
    transform-origin: top;
  }
}
@keyframes fsu {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ╔══════════════════════════════════════════════════════╗
   ║  MARQUEE                                             ║
   ╚══════════════════════════════════════════════════════╝ */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
  background: var(--surface);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: mq 22s linear infinite;
}
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes mq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.mq-item {
  font-family: var(--ff-d);
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--txtd);
  padding: 0 28px;
  flex-shrink: 0;
}
.mq-sep {
  color: var(--a);
}

/* ╔══════════════════════════════════════════════════════╗
   ║  SECTIONS COMMON                                     ║
   ╚══════════════════════════════════════════════════════╝ */
section {
  position: relative;
  padding: 140px 80px;
}
.sec-lbl {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sec-lbl .n {
  color: var(--txtm);
}
.sec-lbl::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ╔══════════════════════════════════════════════════════╗
   ║  ABOUT                                               ║
   ╚══════════════════════════════════════════════════════╝ */
#about {
  background: var(--surface);
  overflow: hidden;
}
.about-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
}
.about-ghost {
  font-family: var(--ff-d);
  font-size: clamp(120px, 15vw, 200px);
  color: transparent;
  -webkit-text-stroke: 1px var(--txtd);
  line-height: 1;
  user-select: none;
  position: sticky;
  top: 120px;
}
.about-h {
  font-family: var(--ff-s);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--txt);
  margin-bottom: 32px;
  animation: fadeSlideUp 0.7s var(--ease) backwards;
}
.about-h em {
  font-style: italic;
  color: var(--al);
}
.about-body {
  font-size: 13px;
  font-weight: 300;
  line-height: 2;
  color: var(--txtm);
  margin-bottom: 48px;
  animation: fadeSlideUp 0.8s var(--ease) backwards 0.2s;
}
.about-body p + p {
  margin-top: 16px;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
}
.stat {
  padding: 26px 22px;
  background: var(--card);
  border-right: 1px solid var(--border);
  animation: scaleIn 0.6s var(--ease) both;
  transition:
    transform 0.3s,
    background 0.3s;
}
.stat:nth-child(1) {
  animation-delay: 0.1s;
}
.stat:nth-child(2) {
  animation-delay: 0.2s;
}
.stat:nth-child(3) {
  animation-delay: 0.3s;
}
.stat:hover {
  transform: translateY(-6px);
  background: var(--card-h);
}
.stat:last-child {
  border-right: none;
}
.stat-v {
  font-family: var(--ff-d);
  font-size: 44px;
  color: var(--al);
  letter-spacing: 2px;
  display: block;
  animation: floatUp 3s ease-in-out infinite;
}
.stat:nth-child(2) .stat-v {
  animation-delay: -0.5s;
}
.stat:nth-child(3) .stat-v {
  animation-delay: -1s;
}
.stat-l {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--txtm);
  margin-top: 4px;
  display: block;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  STACK                                               ║
   ╚══════════════════════════════════════════════════════╝ */
#stack {
  background: var(--bg);
}
.stack-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 2px;
}
.tc {
  background: var(--card);
  border: 1px solid var(--border-s);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition:
    background 0.3s,
    border-color 0.3s,
    border-radius 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
  border-radius: 10px;
  animation: scaleIn 0.5s var(--ease) both;
}
.tc:nth-child(-n + 3) {
  animation-delay: 0.05s;
}
.tc:nth-child(n + 4):nth-child(-n + 6) {
  animation-delay: 0.1s;
}
.tc:nth-child(n + 7):nth-child(-n + 9) {
  animation-delay: 0.15s;
}
.tc:nth-child(n + 10) {
  animation-delay: 0.2s;
}
.tc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.tc:hover {
  background: var(--card-h);
  border-color: var(--border);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(var(--prgb), 0.12);
}
.tc:hover::after {
  transform: scaleX(1);
}
.tc-icon,
.tc-fallback {
  width: 26px;
  height: 26px;
  opacity: 0.82;
  transition: opacity 0.3s;
  flex-shrink: 0;
}
.tc:hover .tc-icon {
  opacity: 1;
}
.tc:hover .tc-fallback {
  opacity: 1;
  border-color: var(--a);
  color: var(--a);
}
.tc-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--txtm);
  text-transform: uppercase;
  border-radius: 4px;
}
.tc-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--txt);
  letter-spacing: 0.5px;
}
.tc-type {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txtm);
}

/* ╔══════════════════════════════════════════════════════╗
   ║  WORK                                                ║
   ╚══════════════════════════════════════════════════════╝ */
#work {
  background: var(--surface);
}
.work-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
#projects {
  background: var(--bg);
  overflow: hidden;
}
.projects-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.projects-note {
  max-width: 680px;
  margin: 0 auto 36px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--txtm);
}

/* ── Work loading skeleton ── */
.work-loading {
  display: none;
}
.work-loading.show {
  display: block;
  margin-bottom: 16px;
}
.wl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.wl-skel {
  height: 340px;
  background: var(--card);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-s);
  border-radius: 12px;
}
.wl-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  animation: shimmer 1.8s infinite;
}
@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
/* ── Enhanced 2D animations ── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes glow {
  0%,
  100% {
    opacity: 0.6;
    filter: drop-shadow(0 0 6px rgba(var(--prgb), 0.2));
  }
  50% {
    opacity: 0.95;
    filter: drop-shadow(0 0 12px rgba(var(--prgb), 0.4));
  }
}
@keyframes floatUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes shimmerBorder {
  from {
    border-color: var(--border);
  }
  50% {
    border-color: var(--a);
  }
  to {
    border-color: var(--border);
  }
}
/* ── Work error state ── */
.work-error {
  display: none;
  text-align: center;
  padding: 64px 20px;
  font-size: 13px;
  color: var(--txtm);
  border: 1px solid var(--border-s);
  background: var(--card);
  border-radius: 12px;
}
.we-ico {
  font-size: 28px;
  display: block;
  margin-bottom: 14px;
  opacity: 0.5;
}
.work-error a {
  color: var(--a);
  border-bottom: 1px solid var(--ad);
  transition: opacity 0.3s;
}
.work-error a:hover {
  opacity: 0.7;
}
/* ── Work pagination ── */
.work-pager {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.work-pager.show {
  display: flex;
}
.pg-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--txtm);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border-radius: 8px;
}
.pg-btn:hover:not(:disabled) {
  border-color: var(--a);
  color: var(--a);
  background: var(--card-h);
}
.pg-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.pg-pages {
  display: flex;
  gap: 7px;
  align-items: center;
}
.pg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--txtd);
  cursor: pointer;
  border: none;
  transition: all 0.35s var(--ease);
  padding: 0;
  animation: scaleIn 0.5s var(--ease) backwards;
}
.pg-dot:nth-child(1) {
  animation-delay: 0.05s;
}
.pg-dot:nth-child(2) {
  animation-delay: 0.1s;
}
.pg-dot:nth-child(3) {
  animation-delay: 0.15s;
}
.pg-dot.active {
  background: var(--a);
  width: 28px;
  border-radius: 4px;
}
.pg-dot:hover:not(.active) {
  background: var(--txtm);
}
.pg-info {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--txtm);
  text-transform: uppercase;
}
/* ── Updated timestamp ── */
.pc-updated {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--txtm);
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

/* ── PROJECT CARD ── */
.pc {
  background: var(--card);
  border: 1px solid var(--border); /* full border, always visible */
  border-top: 2px solid var(--a); /* accent top bar */
  padding: 36px 32px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  transition:
    border-color 0.35s,
    background 0.35s,
    box-shadow 0.35s,
    border-radius 0.35s,
    transform 0.35s;
  border-radius: 14px;
  animation: fadeSlideUp 0.6s var(--ease) both;
  /* always fully visible — no transform-style to avoid stacking glitches */
}
.pc:nth-child(1) {
  animation-delay: 0.1s;
}
.pc:nth-child(2) {
  animation-delay: 0.2s;
}
.pc:nth-child(3) {
  animation-delay: 0.3s;
}
.pc:nth-child(4) {
  animation-delay: 0.4s;
}
.pc:nth-child(5) {
  animation-delay: 0.5s;
}
.pc:nth-child(n + 6) {
  animation-delay: 0.6s;
}
.pc:hover {
  border-color: var(--al);
  background: var(--card-h);
  box-shadow:
    0 18px 60px rgba(20, 33, 31, 0.14),
    0 0 0 1px var(--border);
  transform: translateY(-6px) scale(1.01);
}
/* Accent glow strip on left edge */
.pc::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--al), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.pc:hover::after {
  opacity: 1;
}
/* Pattern texture */
.pc-bg {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  background-size: auto;
  background-repeat: repeat;
  transition: opacity 0.4s;
}
.pc:hover .pc-bg {
  opacity: 0.12;
}

.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.pc-num {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--a);
  position: relative;
  z-index: 1;
}
.pc-stars {
  font-family: var(--ff-m);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--txtm);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pc-cat {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--al);
  border: 1px solid var(--border);
  padding: 4px 12px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  background: rgba(var(--prgb), 0.06);
  border-radius: 6px;
}
.pc-name {
  font-family: var(--ff-s);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--txt);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.pc:hover .pc-name {
  color: var(--al);
}
.pc-desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--txt);
  opacity: 0.72; /* lighter txt instead of muted txtm */
  flex: 1;
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
}
.pc:hover .pc-desc {
  opacity: 0.9;
}
.pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-s);
}
.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pt {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--al);
  background: rgba(var(--prgb), 0.12);
  border: 1px solid rgba(var(--prgb), 0.3);
  padding: 4px 10px;
  transition:
    background 0.25s,
    border-color 0.25s;
  border-radius: 6px;
}
.pc:hover .pt {
  background: rgba(var(--prgb), 0.2);
  border-color: rgba(var(--prgb), 0.5);
}
.pc-lnk {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt);
  flex-shrink: 0;
  transition: all 0.3s;
  border-radius: 8px;
  background: rgba(var(--prgb), 0.05);
}
.pc-lnk:hover {
  background: var(--a);
  border-color: var(--a);
  color: var(--bg);
  box-shadow: 0 8px 16px rgba(var(--prgb), 0.24);
  transform: scale(1.08);
}
.pc-lnk svg {
  width: 15px;
  height: 15px;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  GAMES SECTION                                       ║
   ╚══════════════════════════════════════════════════════╝ */
#games {
  background: var(--bg);
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
}
.games-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.games-intro {
  font-size: 13px;
  font-weight: 300;
  color: var(--txtm);
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 560px;
}
/* ── Realm Explorer banner ── */
.realm-explorer-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(
    135deg,
    rgba(var(--prgb), 0.08) 0%,
    rgba(var(--prgb), 0.04) 100%
  );
  border: 1px solid rgba(var(--prgb), 0.22);
  border-radius: 16px;
  padding: 22px 28px;
  margin-bottom: 44px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.25s;
}
.realm-explorer-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(var(--prgb), 0.12),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.realm-explorer-banner:hover {
  border-color: rgba(var(--prgb), 0.55);
  background: linear-gradient(
    135deg,
    rgba(var(--prgb), 0.14) 0%,
    rgba(var(--prgb), 0.07) 100%
  );
  transform: translateY(-2px);
}
.realm-explorer-banner:hover::before {
  opacity: 1;
}
.reb-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  background: var(--a);
  color: #fff;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}
.reb-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  color: var(--a);
  opacity: 0.7;
  line-height: 1;
}
.reb-text {
  flex: 1;
  min-width: 0;
}
.reb-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.reb-sub {
  font-size: 0.72rem;
  color: var(--txtm);
  letter-spacing: 0.04em;
}
.reb-cta {
  flex-shrink: 0;
  color: var(--a);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border: 1px solid rgba(var(--prgb), 0.3);
  border-radius: 8px;
  padding: 8px 18px;
  transition:
    background 0.2s,
    color 0.2s;
}
.realm-explorer-banner:hover .reb-cta {
  background: var(--a);
  color: #fff;
}

/* ── Arcade Game Cards Grid ── */
.arcade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 28px;
}
.arcade-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(
    145deg,
    rgba(var(--prgb), 0.07) 0%,
    rgba(var(--prgb), 0.02) 100%
  );
  border: 1px solid rgba(var(--prgb), 0.18);
  border-radius: 14px;
  padding: 22px 20px 18px;
  text-decoration: none;
  color: var(--txt);
  transition:
    transform 0.3s,
    border-color 0.3s,
    background 0.3s;
}
.arcade-card-glow {
  position: absolute;
  top: -40%;
  left: -20%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(var(--prgb), 0.2),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.arcade-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--prgb), 0.5);
  background: linear-gradient(
    145deg,
    rgba(var(--prgb), 0.13) 0%,
    rgba(var(--prgb), 0.06) 100%
  );
}
.arcade-card:hover .arcade-card-glow {
  opacity: 1;
}
.arcade-card-icon {
  font-size: 2rem;
  color: var(--a);
  text-shadow: 0 0 16px rgba(var(--prgb), 0.7);
  margin-bottom: 4px;
}
.arcade-card-badge {
  font-size: 0.65rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 1.5px;
  color: var(--a);
  text-transform: uppercase;
  opacity: 0.75;
}
.arcade-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--txt);
  margin-top: 2px;
}
.arcade-card-desc {
  font-size: 0.78rem;
  color: var(--txtm);
  line-height: 1.5;
  flex: 1;
}
.arcade-card-cta {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--a);
  transition: letter-spacing 0.2s;
}
.arcade-card:hover .arcade-card-cta {
  letter-spacing: 3px;
}
@media (max-width: 640px) {
  .arcade-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 380px) {
  .arcade-grid {
    grid-template-columns: 1fr;
  }
}

.g-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.g-tab {
  flex: 1;
  min-width: 160px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border-s);
  text-align: left;
  transition: all 0.3s;
  border-radius: 8px 8px 0 0;
}
.g-tab:hover,
.g-tab.active {
  background: var(--card-h);
  border-color: var(--border);
}
.g-tab.active {
  border-bottom-color: var(--a);
}
.g-tab-rom {
  font-family: var(--ff-m);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--a);
  margin-bottom: 5px;
}
.g-tab-name {
  font-family: var(--ff-d);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--txt);
  display: block;
  margin-bottom: 2px;
}
.g-tab-desc {
  font-family: var(--ff-m);
  font-size: 10px;
  color: var(--txtm);
}
.game-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2px;
  border: 1px solid var(--border);
  background: var(--border-s);
}
.game-cvs-wrap {
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 400px;
  overflow: hidden;
}
.game-cvs-wrap canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
.g-panel {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.g-panel.active {
  display: flex;
}
.g-sidebar {
  background: var(--card);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.g-stat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.g-stat-lbl {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txtm);
}
.g-stat-val {
  font-family: var(--ff-d);
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--al);
}
.g-hint {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--txtm);
  border-top: 1px solid var(--border-s);
  padding-top: 16px;
  line-height: 1.7;
}
.g-start {
  padding: 13px 20px;
  border: 1px solid var(--a);
  background: none;
  color: var(--a);
  font-family: var(--ff-m);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: all 0.3s;
  border-radius: 8px;
}
.g-start:hover {
  background: var(--a);
  color: var(--bg);
}

/* Overlay for start/end screens */
.g-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 12px;
}
.g-overlay.gone {
  display: none;
}
.g-ov-title {
  font-family: var(--ff-d);
  font-size: clamp(28px, 6vw, 52px);
  letter-spacing: 4px;
  color: var(--al);
  text-align: center;
}
.g-ov-sub {
  font-family: var(--ff-m);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--txtm);
  margin-bottom: 8px;
  text-align: center;
}
.g-ov-btn {
  padding: 12px 32px;
  border: 1px solid var(--a);
  background: none;
  color: var(--a);
  font-family: var(--ff-m);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: all 0.3s;
  border-radius: 8px;
}
.g-ov-btn:hover {
  background: var(--a);
  color: var(--bg);
}

/* Memory grid */
#mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
}
.mem-card {
  aspect-ratio: 1;
  perspective: 900px;
  cursor: pointer;
}
.mem-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.mem-card.flipped .mem-inner {
  transform: rotateY(180deg);
}
.mem-card.matched .mem-inner {
  transform: rotateY(180deg) scale(1.02);
  animation: glow 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mem-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-s);
  background: var(--card);
  border-radius: 10px;
}
.mem-back {
  transform: rotateY(180deg);
  background: var(--card-h);
  border-color: var(--border);
}
.mem-card.matched .mem-back {
  border-color: var(--a);
  box-shadow:
    0 0 16px var(--ad),
    inset 0 0 16px rgba(var(--prgb), 0.04);
}
.mem-sym {
  font-family: var(--ff-m);
  font-size: clamp(13px, 2.5vw, 18px);
  color: var(--al);
  font-weight: 500;
  letter-spacing: 1px;
  transition: text-shadow 0.3s;
}
.mem-card.matched .mem-sym {
  text-shadow: 0 0 12px var(--al);
}
.mem-q {
  font-family: var(--ff-d);
  font-size: 24px;
  color: var(--txtd);
}

/* D-Pad for Snake mobile */
.dpad-wrap {
  display: none;
  padding: 20px 0 4px;
}
.dpad {
  display: grid;
  grid-template-areas: ". u ." "l . r" ". d .";
  gap: 4px;
  width: 120px;
}
.dp-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--txtm);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
}
.dp-btn:active {
  background: var(--a);
  color: var(--bg);
}
.dp-u {
  grid-area: u;
}
.dp-l {
  grid-area: l;
}
.dp-r {
  grid-area: r;
}
.dp-d {
  grid-area: d;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  CONTACT                                             ║
   ╚══════════════════════════════════════════════════════╝ */
#contact {
  background: var(--surface);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact-inner {
  max-width: 700px;
  padding: 0 24px;
}
.contact-eye {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.contact-eye::before,
.contact-eye::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--border);
}
.contact-h {
  font-family: var(--ff-d);
  font-size: clamp(56px, 8.5vw, 120px);
  line-height: 0.88;
  letter-spacing: 2px;
  color: var(--txt);
  margin-bottom: 52px;
}
.contact-h .hl {
  color: var(--al);
}
.contact-sub {
  font-size: 16px;
  color: var(--txtm);
  margin-bottom: 40px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.contact-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  FOOTER                                              ║
   ╚══════════════════════════════════════════════════════╝ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 20px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ft-l {
  font-size: 11px;
  color: var(--txtm);
  letter-spacing: 1px;
}
.ft-r {
  font-size: 11px;
  color: var(--txtd);
  letter-spacing: 1px;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  THEME SWITCHER                                      ║
   ╚══════════════════════════════════════════════════════╝ */
#ts {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 7000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#ts-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.3s,
    background 0.3s;
  color: var(--a);
}
#ts-toggle:hover {
  border-color: var(--a);
  background: var(--card-h);
}
#ts-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
#ts-panel {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
  min-width: 154px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
#ts-panel.open {
  opacity: 1;
  pointer-events: all;
  transform: none;
}
.ts-lbl {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--txtm);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border-s);
  margin-bottom: 2px;
}
.ts-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  background: none;
  border: 1px solid transparent;
  transition: all 0.25s;
  width: 100%;
  color: var(--txtm);
}
.ts-opt:hover,
.ts-opt.active {
  background: var(--card-h);
  border-color: var(--border);
}
.ts-sw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid transparent;
}
.ts-opt.active .ts-sw {
  border-color: var(--txt);
}
.ts-nm {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ╔══════════════════════════════════════════════════════╗
   ║  RESPONSIVE                                          ║
   ╚══════════════════════════════════════════════════════╝ */
@media (max-width: 1100px) {
  .wl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-ghost {
    display: none;
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .game-wrap {
    grid-template-columns: 1fr;
  }
  .g-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
  }
  .g-stat-row {
    min-width: 80px;
  }
  .g-hint {
    width: 100%;
    border-top: 1px solid var(--border-s);
    padding-top: 12px;
  }
  .g-start {
    margin-left: auto;
  }
}
@media (max-width: 900px) {
  #nav {
    padding: 16px 28px;
  }
  .nav-links {
    display: none;
  }
  .nav-ham {
    display: flex;
  }
  #ts {
    display: none;
  }
  section {
    padding: 88px 28px;
  }
  #hero::before {
    left: 28px;
  }
  .hero-c {
    padding: 0 28px;
  }
  .hero-scroll {
    right: 28px;
  }
  .hero-ctas {
    flex-wrap: wrap;
  }
  footer {
    padding: 18px 28px;
  }
  .work-grid,
  .wl-grid {
    grid-template-columns: 1fr;
  }
  .g-tabs {
    flex-direction: column;
  }
  .g-tab {
    flex: none;
  }
  .dpad-wrap {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .stat:last-child {
    border-bottom: none;
  }
  .stack-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #mem-grid {
    gap: 5px;
    padding: 14px;
  }
  .g-tabs .g-tab-name {
    font-size: 15px;
  }
}
/* ╔══════════════════════════════════════════════════════╗
   ║  ASCII RAIN + VISUAL ENHANCEMENTS                    ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── ASCII Rain canvas — above hero-vgr (z1), below hero-c text (z2 later in DOM) ── */
#ascii-rain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  display: block;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.22) 46%,
    rgba(0, 0, 0, 0.75) 64%,
    #000 82%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.22) 46%,
    rgba(0, 0, 0, 0.75) 64%,
    #000 82%
  );
}
[data-theme="saas"] #ascii-rain {
  opacity: 0.22;
}

/* ══════════════════════════════════════════════════════
   3D DECORATIVE ELEMENTS — one per section
══════════════════════════════════════════════════════ */

/* ── Atom rings — About ── */
.deco-atom {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 1;
  perspective: 500px;
}
.atom-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--prgb), 0.28);
}
.ar1 {
  animation: orbit1 7s linear infinite;
}
.ar2 {
  animation: orbit2 10s linear infinite;
}
.ar3 {
  animation: orbit3 14s linear infinite;
}
@keyframes orbit1 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes orbit2 {
  from {
    transform: rotateX(60deg) rotateY(0deg);
  }
  to {
    transform: rotateX(60deg) rotateY(360deg);
  }
}
@keyframes orbit3 {
  from {
    transform: rotateX(-60deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-60deg) rotateY(360deg);
  }
}
.atom-core {
  position: absolute;
  width: 14px;
  height: 14px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--a);
  box-shadow:
    0 0 24px rgba(var(--prgb), 0.6),
    0 0 8px rgba(var(--prgb), 1);
  animation: corePulse 2.8s ease-in-out infinite;
}
@keyframes corePulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(var(--prgb), 0.5),
      0 0 6px rgba(var(--prgb), 1);
  }
  50% {
    box-shadow:
      0 0 40px rgba(var(--prgb), 0.8),
      0 0 14px rgba(var(--prgb), 1);
  }
}

/* ── Spinning wireframe cube — Stack ── */
.deco-cube-wrap {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  perspective: 600px;
  pointer-events: none;
  z-index: 1;
}
.deco-cube {
  width: 90px;
  height: 90px;
  transform-style: preserve-3d;
  animation: spinCube 11s linear infinite;
}
@keyframes spinCube {
  from {
    transform: rotateX(12deg) rotateY(0deg);
  }
  to {
    transform: rotateX(12deg) rotateY(360deg);
  }
}
.cube-face {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(var(--prgb), 0.32);
  background: rgba(var(--prgb), 0.03);
}
.cf-f {
  transform: translateZ(45px);
}
.cf-b {
  transform: rotateY(180deg) translateZ(45px);
}
.cf-l {
  transform: rotateY(-90deg) translateZ(45px);
}
.cf-r {
  transform: rotateY(90deg) translateZ(45px);
}
.cf-t {
  transform: rotateX(90deg) translateZ(45px);
}
.cf-d {
  transform: rotateX(-90deg) translateZ(45px);
}

/* ── Helix nodes — Work ── */
.deco-helix {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 200px;
  pointer-events: none;
  z-index: 1;
  perspective: 300px;
}
.helix-strand {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--prgb), 0.3),
    transparent
  );
  transform-style: preserve-3d;
}
.s1 {
  animation: helixSpin1 5s linear infinite;
}
.s2 {
  animation: helixSpin2 5s linear infinite;
}
@keyframes helixSpin1 {
  from {
    transform: rotateY(0deg) translateX(22px);
  }
  to {
    transform: rotateY(360deg) translateX(22px);
  }
}
@keyframes helixSpin2 {
  from {
    transform: rotateY(180deg) translateX(22px);
  }
  to {
    transform: rotateY(540deg) translateX(22px);
  }
}
.helix-node {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--a);
  margin-left: -4.5px;
  box-shadow: 0 0 12px rgba(var(--prgb), 0.6);
  animation: nodeGlow 2.4s ease-in-out infinite;
}
.hn1 {
  top: 15%;
  animation-delay: 0s;
}
.hn2 {
  top: 48%;
  animation-delay: -0.8s;
}
.hn3 {
  top: 80%;
  animation-delay: -1.6s;
}
@keyframes nodeGlow {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(18px);
    box-shadow: 0 0 20px rgba(var(--prgb), 0.9);
  }
}

/* ── Expanding rings — Contact ── */
.deco-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.contact-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--prgb), 0.18);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: expandRing 5.2s ease-out infinite;
}
.cr1 {
  animation-delay: 0s;
}
.cr2 {
  animation-delay: 1.3s;
}
.cr3 {
  animation-delay: 2.6s;
}
.cr4 {
  animation-delay: 3.9s;
}
@keyframes expandRing {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0.8;
  }
  100% {
    width: 1000px;
    height: 1000px;
    opacity: 0;
  }
}

/* ── Rotating crystal prism — Projects ── */
.deco-prism {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 1;
  perspective: 500px;
}
.prism-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--prgb), 0.3);
}
.pf1 {
  animation: prismSpin1 6s linear infinite;
}
.pf2 {
  animation: prismSpin2 8s linear infinite;
}
.pf3 {
  animation: prismSpin3 11s linear infinite;
}
@keyframes prismSpin1 {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(180deg);
  }
}
@keyframes prismSpin2 {
  from {
    transform: rotateX(60deg) rotateY(0deg) rotateZ(30deg);
  }
  to {
    transform: rotateX(60deg) rotateY(360deg) rotateZ(30deg);
  }
}
@keyframes prismSpin3 {
  from {
    transform: rotateX(-40deg) rotateY(120deg) rotateZ(-20deg);
  }
  to {
    transform: rotateX(-40deg) rotateY(480deg) rotateZ(-20deg);
  }
}
.prism-core {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--al);
  box-shadow: 0 0 20px rgba(var(--prgb), 0.7);
  animation: prismCoreSpin 4s linear infinite;
}
@keyframes prismCoreSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ── 3D Torus rings — Games / Playground ── */
.deco-torus-wrap {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 1;
  perspective: 500px;
}
.torus-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 12px solid rgba(var(--prgb), 0.25);
  box-sizing: border-box;
}
.tor1 {
  animation: torusSpin1 4s linear infinite;
}
.tor2 {
  animation: torusSpin2 5.5s linear infinite;
}
.tor3 {
  animation: torusSpin3 7s linear infinite;
}
@keyframes torusSpin1 {
  from {
    transform: rotateX(75deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(75deg) rotateZ(360deg);
  }
}
@keyframes torusSpin2 {
  from {
    transform: rotateX(75deg) rotateY(60deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(75deg) rotateY(60deg) rotateZ(360deg);
  }
}
@keyframes torusSpin3 {
  from {
    transform: rotateX(75deg) rotateY(120deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(75deg) rotateY(120deg) rotateZ(360deg);
  }
}

/* hide decorations on small screens */
@media (max-width: 900px) {
  .deco-atom,
  .deco-cube-wrap,
  .deco-helix,
  .deco-prism,
  .deco-torus-wrap {
    display: none;
  }
}

/* ── Section number badge ── */
.sec-lbl .n {
  color: var(--a) !important;
  background: rgba(var(--prgb), 0.1);
  border: 1px solid rgba(var(--prgb), 0.24);
  padding: 3px 10px;
  letter-spacing: 2px;
  font-size: 9px;
}

/* ── Project card hover — richer depth glow ── */
.pc:hover {
  box-shadow:
    0 22px 70px rgba(var(--prgb), 0.22),
    0 0 0 1px rgba(var(--prgb), 0.32),
    inset 0 0 40px rgba(var(--prgb), 0.04) !important;
}

/* ── Stat value ambient glow ── */
.stat-v {
  text-shadow: 0 0 44px rgba(var(--prgb), 0.28);
}

/* ── Contact heading depth ── */
.contact-h {
  text-shadow: 0 6px 50px rgba(var(--prgb), 0.14);
}

/* ── Hero eye — pill badge ── */
.hero-eye {
  border: 1px solid rgba(var(--prgb), 0.32);
  padding: 6px 18px;
  border-radius: 100px;
  background: rgba(var(--prgb), 0.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 18px rgba(var(--prgb), 0.1);
}

/* ── Hero name subtle depth ── */
.hero-name {
  text-shadow: 0 8px 64px rgba(var(--prgb), 0.07);
}

/* ── Hero CTA buttons stagger ── */
.hero-ctas .btn:nth-child(1) {
  animation-delay: 1.9s;
}
.hero-ctas .btn:nth-child(2) {
  animation-delay: 2.05s;
}
.hero-ctas .btn:nth-child(3) {
  animation-delay: 2.2s;
}
.hero-ctas .btn:nth-child(4) {
  animation-delay: 2.35s;
}

/* ── Marquee accent separator pulse ── */
.mq-sep {
  color: var(--a);
  animation: pulse 3.5s ease infinite;
}

/* ── Stack card — shimmer border on hover ── */
.tc:hover {
  box-shadow: 0 10px 28px rgba(var(--prgb), 0.14);
}

/* ── About stat hover lift enhancement ── */
.stat:hover .stat-v {
  text-shadow: 0 0 60px rgba(var(--prgb), 0.5);
}

/* ── Games section scanline overlay ── */
.game-cvs-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(var(--prgb), 0.018) 2px,
    rgba(var(--prgb), 0.018) 3px
  );
  border-radius: inherit;
}

/* ── Terminal animation — contact section ── */
.terminal-anim {
  font-family: var(--ff-m);
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--a);
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(var(--prgb), 0.22);
  padding: 11px 20px;
  background: rgba(var(--prgb), 0.06);
  backdrop-filter: blur(4px);
  max-width: 440px;
  width: 100%;
  box-shadow:
    0 0 24px rgba(var(--prgb), 0.08),
    inset 0 0 20px rgba(var(--prgb), 0.02);
  opacity: 0;
  animation: fsu 0.8s var(--ease) 0.6s forwards;
  white-space: nowrap;
  overflow: hidden;
}
.ta-prompt {
  color: var(--al);
  opacity: 0.75;
  margin-right: 10px;
  flex-shrink: 0;
}
.ta-text {
  color: var(--txt);
  flex: 1;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.ta-cursor {
  color: var(--al);
  margin-left: 1px;
  flex-shrink: 0;
  animation: blink 1.05s step-end infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ── Footer enhancement ── */
footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* ── Nav logo glow on hover ── */
.nav-logo {
  position: relative;
  transition:
    color 0.3s,
    text-shadow 0.3s;
}
.nav-logo:hover {
  text-shadow: 0 0 20px rgba(var(--prgb), 0.4);
}

/* ── Scroll progress glow ── */
#sp-fill {
  box-shadow: 2px 0 12px rgba(var(--prgb), 0.4);
}

/* ── About heading italic accent ── */
.about-h em {
  text-shadow: 0 0 30px rgba(var(--prgb), 0.2);
}

/* ── Work error fallback ── */
.work-error.show {
  display: block;
}

@media (max-width: 440px) {
  .hero-name {
    font-size: clamp(56px, 17vw, 120px);
  }
  .hero-c {
    padding: 0 20px;
  }
  .hero-ctas {
    flex-direction: column;
    gap: 12px;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .stack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .game-cvs-wrap {
    min-height: 280px;
  }
  .contact-links {
    flex-direction: column;
    align-items: center;
  }
  footer {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* ╔══════════════════════════════════════════════════════╗
   ║  SECTION BACKGROUND CANVASES                         ║
   ╚══════════════════════════════════════════════════════╝ */
.sec-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#stack {
  overflow: hidden;
}
#work {
  overflow: hidden;
}
#contact {
  overflow: hidden;
}
/* Content sits above canvas */
#about > .sec-lbl,
#about > .about-grid,
#stack > .sec-lbl,
#stack > .stack-inner,
#work > .sec-lbl,
#work > .work-inner,
#projects > .sec-lbl,
#projects > .projects-inner,
#games > .sec-lbl,
#games > .games-inner,
#contact > .contact-inner {
  position: relative;
  z-index: 2;
}