/* ═══════════════════════════════════════════════
   THEME SYSTEM
   ═══════════════════════════════════════════════ */
:root {
  --crimson: #FF1744;
  --crimson-deep: #D50032;
  --crimson-bright: #FF3D5F;
  --gold: #FFD700;
  --gold-deep: #FFB800;
  --mystic: #A855F7;
  --mystic-bright: #C084FC;
  --magenta: #D946B0;
  --obsidian: #0A0A12;
  --obsidian-surface: #12121C;
  --obsidian-card: #1A1A26;
  --white: #FFFFFF;
  --white-surface: #F7F7FA;
  --white-card: #EFEFF5;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="light"] {
  --bg: var(--white);
  --bg-alt: var(--white-surface);
  --bg-card: var(--white-card);
  --bg-subtle: rgba(10, 10, 18, 0.04);
  --border: rgba(10, 10, 18, 0.10);
  --border-strong: rgba(10, 10, 18, 0.30);
  --text: var(--obsidian);
  --text-soft: #4A4A5A;
  --text-muted: #707080; /* WCAG AA on white ≈ 4.70:1 */
  --accent: var(--crimson);
  --accent-hover: var(--crimson-deep);
  --glow: var(--gold-deep);
  --glow-bg: rgba(255, 184, 0, 0.08);
  --mystic-bg: rgba(168, 85, 247, 0.08);
  --hero-wash: radial-gradient(ellipse 120% 80% at 70% 50%, rgba(255,23,68,0.16) 0%, rgba(255,215,0,0.05) 35%, transparent 65%);
  --shadow-pop: 0 8px 40px rgba(255, 23, 68, 0.20);
  --shadow-mystic: 0 8px 50px rgba(168, 85, 247, 0.25);
  --shadow-elevated: 0 20px 60px rgba(10, 10, 18, 0.14);
}

html[data-theme="dark"] {
  --bg: var(--obsidian);
  --bg-alt: var(--obsidian-surface);
  --bg-card: var(--obsidian-card);
  --bg-subtle: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.30);
  --text: var(--white);
  --text-soft: #B8B8C8;
  --text-muted: #8080A0; /* WCAG AA on obsidian ≈ 5.31:1 */
  --accent: var(--crimson-bright);
  --accent-hover: #FF5674;
  --glow: var(--gold);
  --glow-bg: rgba(255, 215, 0, 0.08);
  --mystic-bg: rgba(168, 85, 247, 0.14);
  --hero-wash: radial-gradient(ellipse 120% 80% at 70% 50%, rgba(255,23,68,0.25) 0%, rgba(255,215,0,0.08) 35%, transparent 65%);
  --shadow-pop: 0 8px 40px rgba(255, 23, 68, 0.35);
  --shadow-mystic: 0 8px 50px rgba(168, 85, 247, 0.5);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: var(--obsidian); --bg-alt: var(--obsidian-surface); --bg-card: var(--obsidian-card);
    --bg-subtle: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.30);
    --text: var(--white); --text-soft: #B8B8C8; --text-muted: #8080A0; /* WCAG AA on obsidian ≈ 5.31:1 */
    --accent: var(--crimson-bright); --accent-hover: #FF5674;
    --glow: var(--gold); --glow-bg: rgba(255,215,0,0.08); --mystic-bg: rgba(168,85,247,0.14);
    --hero-wash: radial-gradient(ellipse 120% 80% at 70% 50%, rgba(255,23,68,0.25) 0%, rgba(255,215,0,0.08) 35%, transparent 65%);
    --shadow-pop: 0 8px 40px rgba(255,23,68,0.35); --shadow-mystic: 0 8px 50px rgba(168,85,247,0.5);
    --shadow-elevated: 0 20px 60px rgba(0,0,0,0.6);
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: var(--white); --bg-alt: var(--white-surface); --bg-card: var(--white-card);
    --bg-subtle: rgba(10,10,18,0.04); --border: rgba(10,10,18,0.10); --border-strong: rgba(10,10,18,0.30);
    --text: var(--obsidian); --text-soft: #4A4A5A; --text-muted: #707080; /* WCAG AA on white ≈ 4.70:1 */
    --accent: var(--crimson); --accent-hover: var(--crimson-deep);
    --glow: var(--gold-deep); --glow-bg: rgba(255,184,0,0.08); --mystic-bg: rgba(168,85,247,0.08);
    --hero-wash: radial-gradient(ellipse 120% 80% at 70% 50%, rgba(255,23,68,0.16) 0%, rgba(255,215,0,0.05) 35%, transparent 65%);
    --shadow-pop: 0 8px 40px rgba(255,23,68,0.20); --shadow-mystic: 0 8px 50px rgba(168,85,247,0.25);
    --shadow-elevated: 0 20px 60px rgba(10,10,18,0.14);
  }
}

/* ═══════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* No global scroll-snap — it forces the page to ping back to the nearest
     section on light scrolls, which makes "peek down to read more" awkward
     on mobile. Any page that genuinely needs snapping (e.g. Profile.html's
     full-screen deck) can opt in locally. */

  /* Clip horizontal overflow at the html level. Without this, any stray
     wide element (hero edge text, decorative barcode, etc.) widens the
     initial containing block — which is what `position: fixed` measures.
     The result is a mobile nav drawer that renders 600+px wide on a 400px
     screen, pushing the close button and hint off-screen. Using `clip`
     avoids creating a scroll container so sticky descendants still work. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: clip;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

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

.snap-section { scroll-snap-align: start; }

/* ═══════════════════════════════════════════════
   NAV — cleaner, no logo SVG
   ═══════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0;
  width: 100vw;
  width: 100dvw;        /* Belt-and-braces: anchor to viewport width regardless */
  max-width: 100%;
  z-index: 100;
  padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: all 0.4s var(--ease-out);
}

.nav-brand {
  text-decoration: none;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 5px;
  transition: color 0.3s var(--ease-out);
}

.nav-brand:hover { color: var(--accent); }

.nav-links { display: flex; gap: 4px; list-style: none; }

.nav-links a {
  color: var(--text-soft); text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 14px;
  transition: color 0.3s var(--ease-out);
  position: relative;
}

.nav-links a::before {
  content: ''; position: absolute;
  bottom: 0; left: 14px; right: 14px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}

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

.nav-links a:hover::before { transform: scaleX(1); }

.theme-toggle {
  display: flex; align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 3px; gap: 2px;
  border-radius: 4px;
}

.theme-btn {
  width: 32px; height: 28px;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted);
  transition: all 0.25s var(--ease-out);
  border-radius: 4px;
}

.theme-btn:hover { color: var(--text); }

.theme-btn.active {
  background: var(--accent); color: var(--white);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);
}

.theme-btn svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════
   SHARED BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.35s var(--ease-out);
  position: relative; overflow: hidden;
}

.btn svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }

.btn-primary {
  background: var(--accent); color: var(--white);
  border-color: var(--accent);
  box-shadow: var(--shadow-pop);
}

.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}

.btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 50px color-mix(in srgb, var(--accent) 50%, transparent);
}

.btn-primary:hover::before { transform: translateX(120%); }

.btn-primary:hover svg { transform: translateX(4px); }

.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--text);
  background: var(--bg-subtle);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════
   SECTIONS SCAFFOLDING
   ═══════════════════════════════════════════════ */
section { padding: 140px 40px; position: relative; }

.container { max-width: 1400px; margin: 0 auto; }

.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 4px;
  color: var(--accent);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}

.section-label::before {
  content: ''; width: 28px; height: 2px; background: var(--accent);
}

.section-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.section-title .pop {
  background: linear-gradient(135deg, var(--glow) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title .mystic {
  background: linear-gradient(135deg, var(--mystic) 0%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-lead {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--text-soft);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 72px;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
footer {
  background: var(--bg);
  border-top: 2px solid var(--border);
  padding: 60px 4vw 40px;
  width: 100%;
  margin-top: 5vh;
}

.footer-container {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px; margin-bottom: 60px;
}

/* Footer brand row — small Echo Kitsune logo mark beside the wordmark */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.footer-mark {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
  flex-shrink: 0;
}
.footer-brand-row .footer-brand { margin-bottom: 4px; }
.footer-brand-row .footer-tag   { margin: 0; }

.footer-brand {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 16px; letter-spacing: 5px;
  margin-bottom: 18px;
  color: var(--text);
}

.footer-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  color: var(--text-soft); line-height: 1.6;
  max-width: 320px;
  margin-bottom: 24px;
}

.footer-studio {
  display: flex; align-items: center; gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  max-width: 280px;
}

.footer-studio img {
  width: 38px; height: 38px;
  border-radius: 6px;
}

.footer-studio-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1.4;
}

.footer-studio-text strong {
  display: block;
  color: var(--text);
  font-size: 11px;
  letter-spacing: 3px;
  margin-top: 2px;
}

.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 10px; }

.footer-col a {
  color: var(--text-soft); text-decoration: none;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  transition: color 0.3s var(--ease-out);
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1400px; margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 3px;
  color: var(--text-muted);
}

/* Footer responsive — collapse 4-col → 2-col → 1-col so mobile doesn't
   overflow sideways. Previously only per-page overrides handled this,
   which is why Commission/Reel/etc. had footer columns running off-screen. */
@media (max-width: 960px) {
  .footer-container { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
}
@media (max-width: 560px) {
  .footer-container { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* ═══════════════════════════════════════════════
   SHARED ANIMATIONS + REVEAL
   ═══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.reveal {
  opacity: 0; transform: translateY(30px);
  transition: all 0.9s var(--ease-out);
}

.reveal.in-view {
  opacity: 1; transform: translateY(0);

}



@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ═══════ BACK TO TOP BUTTON ═══════ */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 45px;
  height: 45px;
  background: color-mix(in srgb, var(--bg-card) 40%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s var(--ease-out);
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
  overflow: hidden;
}


.back-to-top.show {
  opacity: 0.6;
  visibility: visible;
}


.back-to-top:hover {
  opacity: 1 !important;
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 20px var(--accent);
  border-color: var(--accent);
}


.back-to-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-25deg);
  animation: glass-shine 4s infinite ease-in-out;
}

@keyframes glass-shine {
  0% { left: -150%; }
  25% { left: 150%; }
  100% { left: 150%; }
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5px;
  position: relative;
  z-index: 2;
}

  /* ═══════════════════════════════════════════════
     PROFILE-PAGE SPECIFIC TOKENS
     (Augment main theme tokens above — do NOT override --bg/--text/--border)
     ═══════════════════════════════════════════════ */
  :root {
    /* SURREAL BRAND GRADIENT (For Headers) */
    --brand-gold: #FFD700;
    --brand-crimson: #FF1744;

    /* SKILL TAG EXACT COLORS (DO NOT TOUCH) */
    --max-color: #00f0ff;
    --up-color: #FF3D00;
    --core-color: #c77dff;
    --focus-color: #FFB300;
    --shipped-color: #ff3c78;

    /* Profile-specific semantic aliases — inherit from main theme defaults */
    --panel: var(--bg-card);
    --text-dim: var(--text-muted);
    --social-bg: var(--bg-subtle);
    --social-hover-text: var(--white);
    --t-shape-title: var(--text);
    --t-shape-shadow: rgba(255,255,255,0.1);
    --matrix-color: var(--accent);
  }

  html[data-theme="light"] {
    --social-hover-text: var(--crimson);
    --t-shape-shadow: rgba(0,0,0,0.15);
    --matrix-color: rgba(255, 23, 68, 0.25); /* Subtle crimson matrix in light mode */
  }

/* ═══════════════════════════════════════════════
   GLOBAL LOADER (first-visit only) + PAGE FADE-IN
   ═══════════════════════════════════════════════ */

/* Body starts invisible, fades in once shared.js bootstraps. Keeps nav
   from flashing in with unstyled content between pages. */
body { opacity: 0; transition: opacity 0.35s var(--ease-out); }
body.ready { opacity: 1; }

/* ═══════ Hide Netlify Deploy Preview Drawer ═══════
   On deploy-preview URLs Netlify auto-injects an iframe pointing at
   app.netlify.com/cdp/?deployID=... which renders as a small grey bar
   bottom-center (CSP blocks its content from loading; the empty iframe
   shell still paints). It's harmless dev chrome, not on production
   echokitsune.art — but every iteration through deploy previews shows
   it, which Binh's been catching as a "bar appeared" regression.
   Selector covers both the iframe + any wrapper Netlify mounts it in. */
iframe[src*="app.netlify.com"],
iframe[src*="netlify.com/cdp"],
[data-netlify-drawer],
#netlify-drawer,
.netlify-drawer-toggle {
  display: none !important;
}

#global-loader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s var(--ease-out);
  overflow: hidden;
}
#global-loader::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255,23,68,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(168,85,247,0.08) 0%, transparent 60%);
  pointer-events: none;
}
#global-loader::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 3px,
    rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px);
  pointer-events: none;
}
#global-loader.hidden {
  opacity: 0; visibility: hidden;
}

.loader-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  width: min(360px, 70vw);
}

.loader-logo {
  width: 64px; height: 64px;
  filter: drop-shadow(0 0 20px rgba(255,23,68,0.45));
  animation: loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255,23,68,0.45)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 32px rgba(255,23,68,0.7)); }
}

.loader-word {
  font-family: 'Orbitron', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 6px;
  color: var(--text);
  text-align: center;
  margin-top: 6px;
}

.loader-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 4px;
  color: var(--accent); text-transform: uppercase;
  opacity: 0.85;
}

.loader-bar-wrap {
  display: flex; align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
}
.loader-bar {
  flex: 1;
  height: 2px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.loader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--glow), var(--accent));
  transition: width 0.12s linear;
  box-shadow: 0 0 12px var(--accent);
}
.loader-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 2px;
  color: var(--text-soft); font-weight: 700;
  min-width: 32px; text-align: right;
}
.loader-pct::after { content: '%'; margin-left: 2px; opacity: 0.6; }

/* ═══════ SKIP-TO-CONTENT LINK (a11y) ═══════ */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 2px;
  font-weight: 700;
  text-decoration: none;
  z-index: 10000;
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ═══════ MOBILE HAMBURGER ═══════ */
.nav-hamburger {
  display: none;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
  border-radius: 4px;
  color: var(--text);
}
.nav-hamburger:hover { border-color: var(--accent); color: var(--accent); }
.nav-hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Two SVG icons swap on .open — using display:block/none so the toggle is
   bulletproof across mobile browsers (Samsung Chrome had issues with the
   opacity+transform cross-fade). The cost is no animation, but the state
   change is never ambiguous. */
.nav-hamburger .hamburger-icon {
  width: 20px; height: 20px;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}
.nav-hamburger .icon-menu  { display: block; }
.nav-hamburger .icon-close { display: none; color: var(--accent); }
.nav-hamburger.open .icon-menu  { display: none; }
.nav-hamburger.open .icon-close { display: block; }
.nav-hamburger.open { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ═══════ BACKDROP OVERLAY (mobile only, shown with body.nav-open) ═══════ */
.nav-backdrop {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.65);
  /* backdrop-filter is progressive enhancement — many Samsung browsers
     render the plain tint reliably even when blur doesn't */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  z-index: 90;
  cursor: pointer;
}
body.nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ═══════ DRAWER LABEL (mobile only) ═══════ */
.nav-drawer-label {
  display: none;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Close hint at bottom of drawer */
.nav-close-hint {
  display: none;
  margin-top: auto;
  padding-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Lock body scroll while mobile nav open */
body.nav-open { overflow: hidden; }

/* Reduced Motion Override (A11y) */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-wrap { scroll-snap-type: none !important; }
  body { opacity: 1 !important; }
}

/* Reduced Motion Override (A11y) */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-wrap {
    scroll-snap-type: none !important;
  }
}

/* ═══════════════════════════════════════════════
   SERVICE CARD VARIANTS — color cohesion rule:
   tag color, border, glow/shadow, and link colour all share
   the same family. No gold border under a purple tag.
   ═══════════════════════════════════════════════ */
.service-card[data-mystic] {
  border-color: color-mix(in srgb, var(--mystic) 40%, var(--border));
  background: linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--mystic) 6%, transparent));
}
.service-card[data-mystic]:hover {
  transform: translateY(-5px);
  border-color: var(--mystic);
  box-shadow: var(--shadow-mystic);
}

.service-card[data-enterprise] {
  border-color: color-mix(in srgb, var(--mystic) 55%, var(--border));
  background: linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--mystic) 8%, transparent));
  position: relative;
  overflow: hidden;
}
.service-card[data-enterprise]::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mystic-bright), transparent);
  animation: scanline 2s infinite linear;
  pointer-events: none;
}
@keyframes scanline {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.service-card[data-enterprise]:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-mystic);
  border-color: var(--mystic);
}

  /* SLIDE 1: HERO VISUAL */
  .hero-grid {
    position: relative; z-index: 10;
    display: grid; grid-template-columns: 1.2fr 0.8fr;
    gap: 4vw; align-items: center; 
    width: 100%; 
    max-width: 1400px; /* Chặn dãn cho màn ultrawide */
    margin: 0 auto;
  }

  /* SLIDE 1 RIGHT: Holo Card - Enhanced Glassmorphism */
  .holo-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 12px;
    padding: 4vh 2.5vw; position: relative; overflow: hidden;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    transform-style: preserve-3d; transition: transform 0.1s;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255, 23, 68, 0.2);
  }
  
  html[data-theme="light"] .holo-card {
    background: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255, 23, 68, 0.1);
  }

/* ═══════════════════════════════════════════════
   MOBILE NAV (≤860px) — hamburger + drawer + backdrop
   Visual order: [brand] ────gap──── [hamburger] [theme-toggle]
   ═══════════════════════════════════════════════ */
@media (max-width: 860px) {
  nav {
    padding: 10px 14px;
    gap: 6px;
    justify-content: flex-start;
  }
  /* Brand on far left; margin-right:auto pushes everything else right */
  .nav-brand {
    font-size: 12px; letter-spacing: 2.5px;
    flex-shrink: 0;
    margin-right: auto;
  }

  /* Hamburger appears between brand and theme-toggle. Explicit z-index
     keeps the X icon reachable above the drawer panel (z:99). */
  .nav-hamburger {
    display: block;
    position: relative;
    z-index: 101;
    flex-shrink: 0;
  }

  /* Theme toggle stays in the top bar — compacted to fit on ≥320px phones */
  nav > .theme-toggle {
    padding: 2px;
    gap: 1px;
    flex-shrink: 0;
  }
  nav > .theme-toggle .theme-btn {
    width: 26px; height: 24px;
  }
  nav > .theme-toggle .theme-btn svg {
    width: 11px; height: 11px;
  }

  /* Drawer panel — slides from top, sized to content, max 85vh/dvh.
     Dark backdrop covers the rest of the screen behind it (tap to close).
     Top padding = nav bar height (58px) + gap so the drawer's close row
     doesn't collide visually with the hamburger X on the nav bar. */
  .nav-links {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;          /* anchor to device viewport, not ICB */
    width: 100dvw;         /* dvw wins if supported — excludes scrollbar */
    max-width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 68px 24px 28px;
    max-height: 85vh;
    max-height: 85dvh; /* Progressive enhancement — dvh wins if supported */
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transform: translateY(-110%);
    transition: transform 0.4s var(--ease-out);
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { width: 100%; border-bottom: 1px dashed var(--border); }
  .nav-links a {
    display: block;
    padding: 16px 8px;
    font-size: 15px;
    letter-spacing: 4px;
  }
  .nav-links a::before { display: none; }

  /* Show drawer label + bottom hint on mobile (hamburger-X is the close) */
  .nav-drawer-label { display: block; }
  .nav-close-hint   { display: block; }
}

/* Desktop: hamburger hidden, nav-links inline, backdrop stays invisible */
@media (min-width: 861px) {
  .nav-hamburger { display: none !important; }
  .nav-links { display: flex !important; transform: none !important; }
  .nav-backdrop { display: none !important; }
}