/* ══════════════════════════════════════════════════════════════════
   METALLIC EDITION DESIGN SYSTEM — ARMAN AHEMAD KHAN
   Exclusive Liquid Metal, Obsidian Black & Specular Chrome Experience
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Core Color Tokens: Obsidian Void & Platinum Metals ── */
  --bg-void: #030305;
  --bg-surface: #08080c;
  --bg-elevated: #0e0e14;
  --bg-card: rgba(14, 14, 20, 0.72);
  --bg-card-hover: rgba(22, 22, 32, 0.85);

  /* ── Metallic Gradients ── */
  --chrome-shine: linear-gradient(135deg, #ffffff 0%, #e2e8f0 20%, #64748b 45%, #cbd5e1 70%, #ffffff 100%);
  --chrome-bright: linear-gradient(135deg, #ffffff 0%, #cbd5e1 35%, #94a3b8 70%, #f8fafc 100%);
  --platinum-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(203, 213, 225, 0.6) 100%);
  --titanium-steel: linear-gradient(145deg, #27272a, #111115);
  --gold-accent: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #fef3c7 100%);
  --emerald-spec: #10b981;
  --cyan-spec: #06b6d4;

  /* ── Borders & Specular Bevels ── */
  --metal-border: 1px solid rgba(255, 255, 255, 0.12);
  --metal-border-bright: 1px solid rgba(255, 255, 255, 0.3);
  --metal-border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --metal-bevel: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.8);
  --metal-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 255, 255, 0.03);
  --metal-shadow-lg: 0 35px 70px -15px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 255, 255, 0.05);

  /* ── Typography ── */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Text Colors ── */
  --text-platinum: #f8fafc;
  --text-silver: #cbd5e1;
  --text-muted: #64748b;
  --text-dim: #475569;

  /* ── Layout & Radii ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --header-height: 72px;
  --container-max: 1280px;

  /* ── Fluid Easing ── */
  --ease-metal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset & Base Styles ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: auto;
  background-color: var(--bg-void);
  color: var(--text-silver);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  position: relative;
  background-color: var(--bg-void);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: clip;
}

::selection {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-void);
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-void);
}
::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* ── 3D & Ambient Background Layer ── */
#metallic-canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.metallic-ambient-grid {
  display: none;
}

.metallic-vignette {
  display: none;
}

/* ── Page Content Wrapper ── */
.metallic-page-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow-x: clip;
}

.metallic-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── NAVIGATION / HUD HEADER ── */
.metallic-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: all 0.3s var(--ease-metal);
  background: rgba(8, 8, 12, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--metal-border-subtle);
}

.metallic-header.scrolled {
  background: rgba(5, 5, 8, 0.9);
  border-bottom: var(--metal-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.metallic-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Brand Mark */
.metallic-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-platinum);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.metallic-brand-emblem {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #1f1f28 0%, #0d0d12 100%);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
}

.metallic-brand-emblem::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  transform: rotate(30deg);
  animation: emblemShimmer 6s infinite ease-in-out;
}

@keyframes emblemShimmer {
  0% { transform: translateX(-100%) rotate(30deg); }
  25%, 100% { transform: translateX(100%) rotate(30deg); }
}

.metallic-brand-letter {
  background: var(--chrome-shine);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 1.25rem;
}

.metallic-brand-label {
  display: flex;
  flex-direction: column;
}

.metallic-brand-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--chrome-shine);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

.metallic-brand-tag {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Nav Links */
.metallic-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.metallic-nav-link {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-silver);
  transition: all 0.2s var(--ease-metal);
  position: relative;
  padding: 6px 4px;
  letter-spacing: 0.03em;
}

.metallic-nav-link:hover {
  color: #ffffff;
}

.metallic-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--chrome-bright);
  transition: width 0.25s var(--ease-metal);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.metallic-nav-link:hover::after {
  width: 100%;
}

/* Nav Actions */
.metallic-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Return to Classic Button */
.btn-return-classic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-platinum);
  background: linear-gradient(145deg, #181820 0%, #0b0b10 100%);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.25s var(--ease-metal);
  cursor: pointer;
}

.btn-return-classic:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--metal-bevel), 0 6px 16px rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.btn-return-classic .return-icon {
  transition: transform 0.25s var(--ease-metal);
}

.btn-return-classic:hover .return-icon {
  transform: translateX(-3px);
}

/* Sound Ambiance Toggle */
.metallic-audio-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: var(--metal-border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease-metal);
}

.metallic-audio-toggle:hover {
  color: var(--text-platinum);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.metallic-audio-toggle.active {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

/* Mobile Nav Toggle */
.metallic-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-platinum);
  cursor: pointer;
  padding: 8px;
}

/* ── HERO SECTION ── */
.metallic-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 60px;
  overflow: hidden;
}

.metallic-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.metallic-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 10;
}

/* Exclusive Badge */
.metallic-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 0 15px rgba(255, 255, 255, 0.04);
  margin-bottom: 24px;
}

.metallic-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.metallic-pill-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-platinum);
  text-transform: uppercase;
}

/* Screen-Reader Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hero Typography & Metallic Name Image */
.metallic-hero-name {
  margin: 0 0 20px 0;
  padding: 0;
  position: relative;
  display: block;
}

.metallic-name-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  perspective: 1000px;
}

/* Ambient & Hover Glow Behind Metallic Name */
.metallic-name-glow {
  position: absolute;
  inset: -22px -32px;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(56, 189, 248, 0.28) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(56, 189, 248, 0.06) 60%,
    transparent 75%
  );
  filter: blur(26px);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.96);
  z-index: 1;
}

/* The Metallic Name PNG Image */
.metallic-name-img {
  position: relative;
  display: block;
  width: clamp(290px, 48vw, 560px);
  aspect-ratio: 2172 / 724;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
}

/* Subtle Hover Glow Effect */
.metallic-name-wrapper:hover .metallic-name-glow {
  opacity: 0.95;
  filter: blur(34px);
  transform: scale(1.1);
}

.metallic-name-wrapper:hover .metallic-name-img {
  transform: translateY(-3px) scale(1.025);
  filter: drop-shadow(0 12px 36px rgba(56, 189, 248, 0.48))
          drop-shadow(0 0 30px rgba(255, 255, 255, 0.4))
          drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95));
}

.metallic-hero-role {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-silver);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.metallic-role-divider {
  color: var(--text-dim);
}

.metallic-hero-desc {
  font-size: 1.05rem;
  color: var(--text-silver);
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 32px;
  opacity: 0.9;
}

.metallic-hero-desc strong {
  color: #ffffff;
  font-weight: 600;
}

/* Hero CTA Group */
/* ── GLASSMORPHISM CTA BUTTONS (METALLIC LUXURY EDITION) ── */
.metallic-cta-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap; /* Strictly in the same row */
  margin-bottom: 44px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px;
}

.metallic-cta-group::-webkit-scrollbar {
  display: none;
}

.glass-cta-btn {
  --spread: 90deg;
  --cta-shimmer-color: rgba(255, 255, 255, 0.75);
  --cta-speed: 4s;
  --cut: 1px;
  --bg: rgba(255, 255, 255, 0.05);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.06);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-cta-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 42px rgba(0, 0, 0, 0.75), 0 0 35px rgba(215, 230, 255, 0.3);
}

.glass-cta-btn:active {
  transform: scale(0.98);
}

/* Conic Rotating Shimmer Border Layer */
.glass-cta-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.glass-cta-conic {
  position: absolute;
  inset: -200%;
  width: 500%;
  height: 500%;
  transform-origin: center center;
  animation: rotateConicGradient var(--cta-speed, 4s) linear infinite;
  background: conic-gradient(
    from calc(270deg - (var(--spread, 90deg) * 0.5)),
    transparent 0deg,
    var(--cta-shimmer-color, rgba(255, 255, 255, 0.75)) var(--spread, 90deg),
    transparent var(--spread, 90deg)
  );
}

@keyframes rotateConicGradient {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Cut-in Blurred Glass Layer */
.glass-cta-blur-bg {
  position: absolute;
  inset: var(--cut, 1px);
  border-radius: 9999px;
  background: var(--bg, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
  pointer-events: none;
}

/* Inner Core Content Wrapper */
.glass-cta-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 9px;
  border-radius: 9999px;
  overflow: hidden;
  color: #ffffff;
  white-space: nowrap;
}

/* Rotating Border Beam Layer */
.glass-cta-beam {
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.15) 65%,
    transparent 100%
  );
  animation: borderBeamRotation 4s infinite linear;
  pointer-events: none;
  z-index: 0;
}

@keyframes borderBeamRotation {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Dark Obsidian Glass Layer */
.glass-cta-inner-glass {
  position: absolute;
  inset: 1px;
  background: rgba(10, 11, 20, 0.82);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}

/* Left Circular Badge / Eclipse Orb */
.glass-cta-badge {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a2e3d 0%, #0a0c14 80%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5),
              inset 0 -1px 2px rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(255, 255, 255, 0.14),
              0 2px 6px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  overflow: hidden;
}

.glass-cta-badge::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border-top: 1.5px solid rgba(255, 255, 255, 0.75);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
  border-left: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.glass-cta-badge-orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 14px rgba(200, 225, 255, 0.85);
}

.glass-cta-badge-icon {
  position: relative;
  z-index: 2;
  color: rgba(230, 240, 255, 0.9);
}

.glass-cta-badge-signal {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulseDot 2s infinite ease-in-out;
}

/* Button Typography */
.glass-cta-label {
  position: relative;
  z-index: 10;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  white-space: nowrap;
}

/* Right Circular Mini Action Icon */
.glass-cta-arrow {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.25s var(--ease-metal, cubic-bezier(0.16, 1, 0.3, 1)),
              background 0.25s ease,
              border-color 0.25s ease;
}

.glass-cta-btn:hover .glass-cta-arrow {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Primary Highlight Variation */
.glass-cta-primary .glass-cta-inner-glass {
  background: linear-gradient(135deg, rgba(16, 18, 30, 0.85) 0%, rgba(8, 9, 16, 0.88) 100%);
}

.glass-cta-primary .glass-cta-label {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* Liquid Chrome Button (Shared Utility) */
.btn-chrome-solid {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  color: #050508;
  background: var(--chrome-shine);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.25s var(--ease-metal);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.btn-chrome-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Brushed Titanium Secondary Button (Shared Utility) */
.btn-titanium-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-platinum);
  background: rgba(255, 255, 255, 0.03);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel);
  transition: all 0.25s var(--ease-metal);
  cursor: pointer;
}

.btn-titanium-outline:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--metal-bevel), 0 8px 24px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

/* Quick Metrics Strip */
.metallic-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  padding-top: 24px;
  border-top: var(--metal-border-subtle);
}

.metallic-metric-item {
  display: flex;
  flex-direction: column;
}

.metallic-metric-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--chrome-shine);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 4px;
}

.metallic-metric-label {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 3D Visual Centerpiece */
.metallic-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 580px;
  width: 100%;
}

/* ── HERO SPOTLIGHT EFFECT ── */
.hero-spotlight {
  position: absolute;
  top: -160px;
  right: 5%;
  width: 800px;
  height: 750px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(203, 213, 225, 0.05) 40%, transparent 70%);
  pointer-events: none;
  filter: blur(60px);
  z-index: 1;
}

/* ── 3D INTERACTIVE ROBOT (Spline) ── */
.spline-robot-wrapper {
  position: relative;
  width: 100%;
  height: 640px;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  overflow: visible;
  transform: scale(1.08);
  transform-origin: center center;
}

#hero-spline-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease, filter 0.3s ease;
}

#hero-spline-canvas:active {
  cursor: grabbing;
}

.robot-interactive-hint {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(14, 14, 22, 0.85);
  border: var(--metal-border-subtle);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--metal-bevel), 0 6px 18px rgba(0, 0, 0, 0.6);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-silver);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.hint-pulse {
  color: #38bdf8;
  animation: pulseDot 2s infinite ease-in-out;
}

.spline-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-metal);
  z-index: 4;
}

.spline-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #ffffff;
  animation: spinSlow 0.9s linear infinite;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
}

.spline-loader-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Floating HUD Tag Badges */
.metallic-hud-badge {
  position: absolute;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(10, 10, 16, 0.85);
  backdrop-filter: blur(12px);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 8px 20px rgba(0, 0, 0, 0.6);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-platinum);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  animation: floatHud 4s ease-in-out infinite;
}

.hud-pos-1 {
  top: 15%;
  right: -5%;
  animation-delay: 0s;
}

.hud-pos-2 {
  bottom: 20%;
  left: -8%;
  animation-delay: 2s;
}

@keyframes floatHud {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── SECTION COMMON STYLING ── */
.metallic-section {
  position: relative;
  padding: 100px 0;
}

.metallic-section-header {
  margin-bottom: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metallic-section-subtitle {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.metallic-section-subtitle::before,
.metallic-section-subtitle::after {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.metallic-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--chrome-shine);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.metallic-section-desc {
  max-width: 640px;
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 12px;
}

/* ── EXECUTIVE DOSSIER (ABOUT) ── */
.metallic-dossier-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: start;
}

.dossier-content-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.metallic-dossier-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), var(--metal-shadow);
  padding: 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.metallic-dossier-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

/* ── INTERACTIVE LANYARD PHYSICS STAGE ── */
.lanyard-stage-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), var(--metal-shadow);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible; /* Allows card and strap to swing outside component box without clipping */
  min-height: 575px;
  z-index: 25;
}

.lanyard-stage-card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lanyard-badge-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lanyard-badge-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.lanyard-status-pill {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.06em;
  user-select: none;
}

.lanyard-status-pill .status-dot {
  width: 6px;
  height: 6px;
  background: #38bdf8;
  border-radius: 50%;
  box-shadow: 0 0 6px #38bdf8;
  animation: lanyardStatusPulse 2s ease-in-out infinite;
}

@keyframes lanyardStatusPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Lanyard Stage */
.lanyard-profile-stage {
  position: relative;
  width: 100%;
  height: 510px;
  overflow: visible;
  display: flex;
  justify-content: center;
  z-index: 20;
}

/* Canvas for rope / strap */
.idcl-rope-canvas {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

/* Top rail */
.idcl-rail {
  position: absolute;
  top: 0;
  width: 64px;
  height: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #64748b, #1e293b 70%, #0f172a);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 15;
}

/* The Hanging Physics Card */
.idcl-card {
  position: absolute;
  width: 224px;
  max-width: min(224px, 80vw);
  height: 373px;
  max-height: 380px;
  aspect-ratio: 840 / 1400;
  perspective: 1400px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transform-origin: top center;
  pointer-events: auto;
  z-index: 30;
  will-change: transform;
  box-sizing: border-box;
}

.idcl-card a {
  pointer-events: auto;
}

.idcl-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Card Faces */
.idcl-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  padding: 13px 14px 11px;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(165deg, rgba(28, 30, 40, 0.96), rgba(10, 11, 16, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 26px 54px -12px rgba(0, 0, 0, 0.95),
    0 10px 22px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.35),
    inset 0 -1px 2px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(56, 189, 248, 0.08);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.idcl-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 35%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.3px) 0 0/4px 4px;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.idcl-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 48%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 8;
}

.idcl-card.idcl-hovering .idcl-face::after {
  opacity: 1;
}

.idcl-front {
  padding: 0;
  background: #0c1424;
  align-items: stretch;
  text-align: left;
  overflow: hidden;
}

/* Dual Theme Card Image Graphic Presentation */
.idcl-card-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.idcl-card-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block !important;
}

.idcl-card-img-dark {
  opacity: 1;
}

.idcl-card-img-light {
  opacity: 0;
}

html[data-metallic-theme="light"] .idcl-card-img-dark {
  opacity: 0;
}

html[data-metallic-theme="light"] .idcl-card-img-light {
  opacity: 1;
}

/* Interactive Link Hotspots Over Graphic */
.idcl-hotspots {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.idcl-hotspot {
  position: absolute;
  pointer-events: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}

.idcl-hotspot:hover {
  background: rgba(56, 189, 248, 0.12);
  outline: 1px dashed rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.idcl-hotspot-portfolio {
  left: 7%;
  top: 11.2%;
  width: 42%;
  height: 5%;
}

.idcl-hotspot-github {
  left: 52%;
  top: 11.2%;
  width: 42%;
  height: 5%;
}

.idcl-back {
  background: linear-gradient(165deg, #131520 0%, #0d0f15 55%, #1b1d28 100%);
  transform: rotateY(180deg);
  overflow: hidden;
}

/* Hologram */
.idcl-holo {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 5px;
  width: 6px;
  border-radius: 5px;
  background: repeating-linear-gradient(
    130deg,
    #38bdf8 0%,
    #818cf8 15%,
    #c084fc 30%,
    #34d399 45%,
    #f472b6 60%,
    #38bdf8 75%
  );
  background-size: 260% 260%;
  animation: idclFoilSweep 6s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Slot Hole */
.idcl-hole {
  width: 32px;
  height: 7px;
  background: #020305;
  border-radius: 4px;
  margin: 0 auto 8px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Header inside card */
.idcl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

/* Photo */
.idcl-photo {
  position: relative;
  width: 100%;
  height: 98px;
  border-radius: 10px;
  background: #090a0f;
  overflow: hidden;
  margin-bottom: 8px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.4);
}

.idcl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Name & Role */
.idcl-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.idcl-role {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #38bdf8;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.idcl-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  margin-bottom: 6px;
}

/* ID Row */
.idcl-idrow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.idcl-idrow-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
}

.idcl-idrow-labels div {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.idcl-idrow-labels span {
  width: 44px;
  flex-shrink: 0;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.idcl-idrow-labels b {
  font-size: 0.65rem;
  font-weight: 600;
  color: #f1f5f9;
}

/* QR code container */
.idcl-qr {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  width: 44px;
  height: 44px;
  background: #ffffff;
  padding: 2.5px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.idcl-qr i {
  background: transparent;
}

.idcl-qr i.on {
  background: #0b0f19;
}

.idcl-qr.idcl-small {
  width: 40px;
  height: 40px;
  padding: 2px;
}

/* Footer text */
.idcl-footer {
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.idcl-footer i {
  color: #38bdf8;
  font-style: normal;
  margin: 0 5px;
}

/* Back Face elements */
.idcl-stripe {
  width: 100%;
  height: 28px;
  background: repeating-linear-gradient(45deg, #090a0f, #090a0f 6px, #1a1c24 6px, #1a1c24 12px);
  border-radius: 3px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.idcl-idnum {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
}

.idcl-idnum em {
  font-style: normal;
  color: var(--text-muted);
}

.idcl-barcode {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  width: 100%;
  background: #ffffff;
  border-radius: 3px;
  padding: 0 4px;
  margin-bottom: 8px;
  overflow: hidden;
}

.idcl-barcode span {
  width: 2px;
  background: #0f172a;
}

.idcl-backrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.idcl-scan {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1.45;
  text-align: left;
}

.idcl-scan b {
  color: #f8fafc;
  display: block;
  font-size: 0.68rem;
  margin-bottom: 2px;
}

.idcl-connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.idcl-connect span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.idcl-connect-icons {
  display: flex;
  gap: 6px;
}

.idcl-connect-icons a {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  transition: all 0.2s ease;
}

.idcl-connect-icons a:hover {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  transform: translateY(-1px);
}

.idcl-connect-icons svg {
  width: 11px;
  height: 11px;
}

.idcl-sig {
  margin-top: 10px;
}

.idcl-sig .idcl-script {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.35rem;
  color: #f8fafc;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.idcl-sig small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 3px;
  padding-top: 3px;
}

/* Hint Badge */
.idcl-hint-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(8, 10, 15, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(56, 189, 248, 0.15);
  z-index: 10;
}

.idcl-hint-badge.idcl-hint-hidden {
  opacity: 0;
}

.idcl-hint-badge svg {
  width: 12px;
  height: 12px;
  color: #38bdf8;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.idcl-hint-badge.idcl-hint-flipped svg {
  transform: rotate(180deg);
}

/* Light Theme Styling for ID Card and Components */
html[data-metallic-theme="light"] .idcl-face {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    0 24px 48px -12px rgba(15, 23, 42, 0.22),
    0 8px 18px -6px rgba(15, 23, 42, 0.12),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9),
    0 0 25px rgba(2, 132, 199, 0.08);
}

html[data-metallic-theme="light"] .idcl-front {
  background: #f8fafc;
}

html[data-metallic-theme="light"] .idcl-back {
  background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 55%, #e2e8f0 100%);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-metallic-theme="light"] .idcl-idnum {
  color: #0f172a;
}

html[data-metallic-theme="light"] .idcl-idnum em {
  color: #64748b;
}

html[data-metallic-theme="light"] .idcl-scan b {
  color: #0f172a;
}

html[data-metallic-theme="light"] .idcl-scan {
  color: #475569;
}

html[data-metallic-theme="light"] .idcl-connect span {
  color: #64748b;
}

html[data-metallic-theme="light"] .idcl-connect-icons a {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
  color: #475569;
}

html[data-metallic-theme="light"] .idcl-connect-icons a:hover {
  background: rgba(2, 132, 199, 0.12);
  border-color: #0284c7;
  color: #0284c7;
}

html[data-metallic-theme="light"] .idcl-sig .idcl-script {
  color: #0f172a;
  text-shadow: none;
}

html[data-metallic-theme="light"] .idcl-sig small {
  color: #64748b;
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-metallic-theme="light"] .idcl-hint-badge {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.12);
  color: #475569;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), 0 0 10px rgba(2, 132, 199, 0.12);
}

html[data-metallic-theme="light"] .idcl-hint-badge svg {
  color: #0284c7;
}

/* ── ID CARD LAYOUT (METALLIC EDITION) ── */
.metallic-dossier-card.id-card-metallic {
  position: relative;
  background: linear-gradient(165deg, rgba(24, 26, 36, 0.92) 0%, rgba(9, 10, 15, 0.98) 60%, rgba(18, 20, 28, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 
    0 32px 64px -16px rgba(0, 0, 0, 0.95),
    0 12px 28px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.28),
    inset 0 -1px 2px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(56, 189, 248, 0.06);
  padding: 28px 36px 28px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.metallic-dossier-card.id-card-metallic:hover {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 
    0 36px 72px -16px rgba(0, 0, 0, 0.98),
    0 16px 32px -8px rgba(0, 0, 0, 0.7),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(56, 189, 248, 0.12);
}

/* Holographic Foil Strip */
.idcl-holo-strip {
  position: absolute;
  top: 18px;
  bottom: 18px;
  right: 8px;
  width: 7px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    130deg,
    #38bdf8 0%,
    #818cf8 15%,
    #c084fc 30%,
    #34d399 45%,
    #f472b6 60%,
    #38bdf8 75%
  );
  background-size: 260% 260%;
  animation: idclFoilSweep 6s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 10px rgba(56, 189, 248, 0.35);
  pointer-events: none;
  z-index: 5;
}

@keyframes idclFoilSweep {
  0% { background-position: 0% 0%; }
  100% { background-position: 260% 0%; }
}

/* Lanyard Slot & Clip Bracket */
.idcl-slot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}

.idcl-clip-bracket {
  width: 54px;
  height: 6px;
  background: linear-gradient(180deg, #94a3b8 0%, #334155 70%, #0f172a 100%);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}

.idcl-hole {
  width: 46px;
  height: 9px;
  background: #020306;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9);
}

/* Top Header */
.idcl-top-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.idcl-brand {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.idcl-brand-mark {
  font-size: 14px;
  color: #38bdf8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.7));
  line-height: 1.2;
}

.idcl-brand-text b {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #ffffff;
  display: block;
}

.idcl-brand-text small {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.idcl-pillars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.idcl-pillars span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: #94a3b8;
  text-transform: uppercase;
}

.idcl-pillars i {
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, transparent);
  margin-top: 2px;
}

/* Profile Header (Avatar + Name) */
.idcl-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}

.idcl-avatar-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 30%, #38bdf8 70%, #0369a1 100%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7), 0 0 16px rgba(56, 189, 248, 0.2);
  flex-shrink: 0;
}

.idcl-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #090b10;
  display: block;
}

.idcl-verified {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #030712;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 0 3px #15161e;
}

.idcl-verified svg {
  width: 13px;
  height: 13px;
}

.idcl-identity-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.idcl-name-display {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin: 0;
}

.idcl-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: #38bdf8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.idcl-sub-degree {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ID Meta Row + QR Container */
.idcl-idrow-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.idcl-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  flex: 1;
}

.idcl-badge-telemetry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.idcl-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.idcl-qr-container:hover {
  transform: scale(1.05);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

.idcl-qr-svg {
  border-radius: 4px;
  display: block;
}

.idcl-qr-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: #94a3b8;
  text-transform: uppercase;
}

/* Barcode & Serial */
.idcl-barcode-wrap {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(8, 10, 15, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.idcl-barcode-lines {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  width: 100%;
  margin-bottom: 6px;
  overflow: hidden;
}

.idcl-barcode-lines span {
  flex: 1;
  background: #cbd5e1;
  border-radius: 1px;
  opacity: 0.85;
}

.idcl-barcode-serial {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Footer Strap */
.idcl-footer-strap {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748b;
}

.idcl-footer-strap i {
  color: #38bdf8;
  font-style: normal;
}

@media (max-width: 768px) {
  .idcl-idrow-meta {
    flex-direction: column;
    align-items: stretch;
  }
  .idcl-badge-telemetry {
    align-items: flex-start;
    margin-top: 8px;
  }
  .idcl-meta-grid {
    grid-template-columns: 1fr;
  }
}


.dossier-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.dossier-avatar-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  padding: 3px;
  background: var(--chrome-shine);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dossier-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  background: #111;
  display: block;
}

.dossier-info-block h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.dossier-info-block p {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dossier-bio {
  font-size: 0.96rem;
  color: var(--text-silver);
  line-height: 1.75;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dossier-bio p strong {
  color: #ffffff;
}

.dossier-meta-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
  border-top: var(--metal-border-subtle);
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.meta-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-platinum);
}

/* Live Telemetry / What I'm Building Card */
.dossier-telemetry-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.telemetry-block {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), var(--metal-shadow);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.telemetry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.telemetry-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-silver);
  display: flex;
  align-items: center;
  gap: 8px;
}

.telemetry-status-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.telemetry-project-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.telemetry-desc {
  font-size: 0.92rem;
  color: var(--text-silver);
  line-height: 1.6;
  margin-bottom: 16px;
}

.telemetry-stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: var(--metal-border-subtle);
  color: var(--text-silver);
}

/* ── ARSENAL (SKILLS MATRIX) ── */
.metallic-arsenal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.arsenal-canister {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 28px;
  transition: all 0.3s var(--ease-metal);
  position: relative;
  overflow: hidden;
}

.arsenal-canister:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: var(--metal-bevel), 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.04);
}

.canister-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.canister-icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #1e1e26 0%, #0d0d12 100%);
  border: var(--metal-border);
  font-size: 1.1rem;
  color: #ffffff;
  box-shadow: var(--metal-bevel);
}

.canister-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.canister-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metal-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: var(--metal-border-subtle);
  color: var(--text-silver);
  transition: all 0.2s var(--ease-metal);
}

.arsenal-canister:hover .metal-tag {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* ── BLUEPRINTS (PROJECT SHOWCASE) ── */
.metallic-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.metallic-filter-btn {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: var(--metal-border-subtle);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.25s var(--ease-metal);
}

.metallic-filter-btn:hover {
  color: var(--text-platinum);
  background: rgba(255, 255, 255, 0.08);
}

.metallic-filter-btn.active {
  background: var(--chrome-shine);
  color: #050508;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.metallic-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}

/* ── 3D SCROLL STACK (PROJECT SHOWCASE) ── */
.scroll-stack-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.scroll-stack-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  padding-bottom: 40px;
}

/* Seamless transition between Projects deck and Experience */
#projects.metallic-section {
  position: relative;
  z-index: 30;
  padding-bottom: 20px;
}

#experience.metallic-section {
  padding-top: 60px;
}

.scroll-stack-card {
  position: sticky;
  top: calc(var(--stack-top, 92px) + var(--stack-offset, 0px));
  z-index: var(--card-z, 10);
  width: 100%;
  max-width: 980px;
  margin: 0 auto 70px;
  background: #0d0e16;
  border-radius: 28px;
  transform-origin: top center;
  backface-visibility: hidden;
  box-sizing: border-box;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  will-change: transform;
  opacity: 1 !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
  transition: box-shadow 0.3s ease;
}

html[data-metallic-theme="light"] .scroll-stack-card {
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(100, 116, 139, 0.18);
}

.scroll-stack-end {
  width: 100%;
  height: 1px;
}

.scroll-stack-card-inner {
  position: relative;
  background: #0d0e16 !important;
  background: linear-gradient(155deg, #121420 0%, #0a0b12 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 36px 42px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 8px 24px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: center top;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.scroll-stack-card:hover .scroll-stack-card-inner {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 
    0 32px 75px rgba(0, 0, 0, 0.96),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 35px rgba(255, 255, 255, 0.06);
}

/* Metallic top edge highlight */
.scroll-stack-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
}

/* Subtle ambient corner sheen */
.scroll-stack-card-inner::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.035) 0%, transparent 50%);
  pointer-events: none;
}

/* Card Header inside ScrollStack */
.scroll-stack-card .project-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.scroll-stack-card .project-badges-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll-stack-card .project-period-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: var(--metal-border-subtle);
  color: var(--text-dim);
}

.scroll-stack-card .project-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.scroll-stack-card .project-desc {
  font-size: 0.96rem;
  color: var(--text-silver);
  line-height: 1.7;
  margin-bottom: 22px;
}

.scroll-stack-card .project-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.scroll-stack-card .tech-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-silver);
  transition: all 0.2s ease;
}

.scroll-stack-card:hover .tech-tag {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.scroll-stack-card .project-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: var(--metal-border-subtle);
  margin-top: auto;
  flex-wrap: wrap;
  gap: 16px;
}

.scroll-stack-card .btn-project-primary {
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--metal-bevel);
  cursor: pointer;
  transition: all 0.25s var(--ease-metal);
}

.scroll-stack-card .btn-project-primary:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.scroll-stack-card .project-links-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scroll-stack-card .btn-project-demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: #050508;
  background: var(--chrome-shine);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: all 0.25s var(--ease-metal);
}

.scroll-stack-card .btn-project-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.35);
  filter: brightness(1.08);
}

.scroll-stack-card .btn-icon-link {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
}

.scroll-stack-end {
  height: 60px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .scroll-stack-card-inner {
    padding: 24px 20px;
    border-radius: 20px;
  }
  .scroll-stack-card .project-title {
    font-size: 1.25rem;
  }
  .scroll-stack-card .project-desc {
    font-size: 0.9rem;
  }
  .scroll-stack-card .project-action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .scroll-stack-card .project-links-side {
    justify-content: flex-end;
  }
}

/* 3D Interactive Project Card */
.metallic-project-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), var(--metal-shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-metal), border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}

.metallic-project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: var(--metal-bevel), var(--metal-shadow-lg), 0 0 30px rgba(255, 255, 255, 0.06);
}

/* Card Top Bar */
.project-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.project-category-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.project-metric-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: var(--metal-border-subtle);
  color: var(--text-platinum);
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.project-desc {
  font-size: 0.92rem;
  color: var(--text-silver);
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
}

.project-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

/* Project Actions */
.project-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: var(--metal-border-subtle);
  margin-top: auto;
}

.btn-project-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-platinum);
  background: rgba(255, 255, 255, 0.04);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel);
  transition: all 0.2s var(--ease-metal);
  cursor: pointer;
}

.btn-project-primary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.project-links-side {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon-link {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: var(--metal-border-subtle);
  color: var(--text-silver);
  text-decoration: none;
  transition: all 0.2s var(--ease-metal);
}

.btn-icon-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ── TIMELINE (EXPERIENCE & EDUCATION) ── */
.metallic-timeline-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

.metallic-timeline-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 70%, transparent 100%);
}

.timeline-item {
  position: relative;
  padding-left: 72px;
  margin-bottom: 48px;
}

.timeline-node {
  position: absolute;
  top: 4px;
  left: 17px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid #ffffff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), inset 0 0 6px rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.timeline-card {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 28px;
  transition: all 0.25s var(--ease-metal);
}

.timeline-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateX(4px);
}

.timeline-period {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.timeline-role {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.timeline-company {
  font-size: 0.92rem;
  color: var(--text-silver);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.timeline-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--text-silver);
  line-height: 1.6;
}

.timeline-bullets li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: #ffffff;
}

/* ── CREDENTIALS & SECURITY FORGE ── */
.metallic-certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.metallic-cert-card {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), 0 10px 25px rgba(0,0,0,0.5);
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-metal);
}

.metallic-cert-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: var(--metal-bevel), 0 20px 40px rgba(0,0,0,0.7), 0 0 25px rgba(255, 255, 255, 0.05);
}

.cert-badge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cert-issuer-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #27272a, #111115);
  border: var(--metal-border-subtle);
  color: #ffffff;
  font-weight: 600;
}

.cert-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cert-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.cert-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.cert-btn-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-platinum);
  background: rgba(255, 255, 255, 0.04);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel);
  transition: all 0.2s var(--ease-metal);
  margin-top: auto;
}

.cert-btn-verify:hover {
  background: var(--chrome-shine);
  color: #050508;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* ── COMMAND TERMINAL (CONTACT) ── */
.metallic-terminal-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  border: var(--metal-border);
  box-shadow: var(--metal-bevel), var(--metal-shadow-lg);
  overflow: hidden;
}

.terminal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, #181822 0%, #0e0e14 100%);
  border-bottom: var(--metal-border-subtle);
}

.terminal-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.terminal-dot.close { background: #ef4444; }
.terminal-dot.min { background: #eab308; }
.terminal-dot.max { background: #22c55e; }

.terminal-title-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.terminal-status-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #4ade80;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.terminal-body {
  padding: 40px;
}

.terminal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.terminal-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.terminal-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-silver);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.terminal-input,
.terminal-textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.4);
  border: var(--metal-border);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
  transition: all 0.2s var(--ease-metal);
}

.terminal-input:focus,
.terminal-textarea:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.terminal-textarea {
  min-height: 120px;
  resize: vertical;
}

.terminal-status-msg {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  margin-top: 10px;
  margin-bottom: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display: none;
  animation: termStatusFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.terminal-status-msg.success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.terminal-status-msg.error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

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

.terminal-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.terminal-direct-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.terminal-social-link {
  color: var(--text-muted);
  transition: color 0.2s;
  text-decoration: none;
}

.terminal-social-link:hover {
  color: #ffffff;
}

/* ── CASE STUDY DRAWER MODAL ── */
.metallic-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(3, 3, 5, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-metal);
  overscroll-behavior: contain;
}

.metallic-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.metallic-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 780px;
  height: 85vh;
  max-height: 85vh;
  background: #09090e;
  border-radius: var(--radius-lg);
  border: var(--metal-border-bright);
  box-shadow: var(--metal-bevel), var(--metal-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s var(--ease-metal);
  overscroll-behavior: contain;
}

.metallic-modal-backdrop.active .metallic-modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-header-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: linear-gradient(180deg, #14141c 0%, #09090e 100%);
  border-bottom: var(--metal-border-subtle);
}

.modal-title-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
}

.modal-close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: var(--metal-border-subtle);
  color: var(--text-silver);
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.modal-content-scroll {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Custom Metallic Scrollbar for modal content */
.modal-content-scroll::-webkit-scrollbar {
  width: 6px;
}

.modal-content-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.modal-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.modal-content-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.modal-section-h4 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.modal-section-body {
  font-size: 0.95rem;
  color: var(--text-silver);
  line-height: 1.7;
}

.modal-challenges-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-challenges-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  color: var(--text-silver);
  line-height: 1.6;
}

.modal-challenges-list li::before {
  content: '⚡';
  position: absolute;
  left: 0;
  font-size: 0.8rem;
}

/* ── FOOTER ── */
.metallic-footer {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  background: #040407;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.footer-gridscan-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
  overflow: hidden;
}

.footer-gridscan-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.footer-gridscan-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(180deg, #040407 0%, rgba(4, 4, 7, 0.5) 60%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.metallic-footer-inner {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-silver);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-silver);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-back-top:hover {
  color: #ffffff;
  border-color: rgba(210, 235, 255, 0.45);
  background: rgba(210, 235, 255, 0.1);
  box-shadow: 0 0 16px rgba(210, 235, 255, 0.28);
  transform: translateY(-2px);
}

/* ── RESPONSIVE ADAPTATIONS ── */
@media (min-width: 1280px) {
  .spline-robot-wrapper {
    height: 680px;
    min-height: 580px;
    transform: scale(1.12);
  }
}

@media (max-width: 1024px) {
  .metallic-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }
  .metallic-hero-content {
    display: contents;
  }
  .metallic-pill-badge {
    order: 1;
    margin-bottom: 16px;
  }
  .metallic-hero-name {
    order: 2;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .metallic-hero-role {
    order: 3;
    margin-bottom: 10px;
    justify-content: center;
  }
  .metallic-hero-visual {
    order: 4;
    min-height: 440px;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .spline-robot-wrapper {
    height: 480px;
    min-height: 400px;
    max-width: 540px;
    margin: 0 auto;
    transform: scale(1);
  }
  .metallic-hero-desc {
    order: 5;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    margin-bottom: 20px;
  }
  .metallic-cta-group {
    order: 6;
    justify-content: center;
    margin-bottom: 24px;
  }
  .metallic-metrics-strip {
    order: 7;
  }
  .hero-spotlight {
    width: 550px;
    height: 550px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: -80px;
  }
  .metallic-dossier-grid {
    grid-template-columns: 1fr;
  }
  .metallic-arsenal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── RESPONSIVE ADAPTATIONS: TABLET & MOBILE ── */
@media (max-width: 992px) {
  .metallic-dossier-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lanyard-stage-card {
    min-height: 540px;
    width: 100%;
  }
  .metallic-arsenal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .metallic-container {
    padding: 0 16px;
  }

  /* Header Navigation */
  .metallic-header {
    height: 60px;
  }
  .metallic-nav-links {
    display: none;
  }
  .metallic-nav-inner {
    padding: 0 4px;
  }

  /* Section Spacing & Headings */
  .metallic-section {
    padding: 56px 0;
  }
  .metallic-section-header {
    margin-bottom: 32px;
  }
  .metallic-section-title {
    font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  }
  .metallic-section-subtitle {
    font-size: clamp(0.85rem, 2.8vw, 0.98rem);
  }

  /* Hero Section */
  .metallic-hero {
    padding-top: calc(var(--header-height) + 12px);
    padding-bottom: 36px;
  }
  .metallic-hero-grid {
    gap: 0;
  }
  .metallic-pill-badge {
    order: 1;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    font-size: 0.72rem;
    padding: 6px 12px;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  .metallic-hero-name {
    order: 2;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 8px;
  }
  .metallic-name-img {
    width: clamp(230px, 86vw, 360px);
    max-width: 100%;
    transform-origin: center center;
  }
  .metallic-hero-role {
    order: 3;
    justify-content: center;
    font-size: clamp(0.85rem, 3.2vw, 1rem);
    flex-wrap: wrap;
    text-align: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .metallic-hero-visual {
    order: 4;
    min-height: 380px;
    margin-top: 4px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .spline-robot-wrapper {
    height: 400px;
    min-height: 340px;
    max-width: 100%;
    transform: scale(1);
  }
  .metallic-hud-badge {
    display: none;
  }
  .robot-interactive-hint {
    bottom: -6px;
    font-size: 0.65rem;
    padding: 3px 12px;
  }
  .metallic-hero-desc {
    order: 5;
    font-size: 0.92rem;
    line-height: 1.6;
    margin-top: 8px;
    margin-bottom: 20px;
    padding: 0 4px;
  }
  .metallic-cta-group {
    order: 6;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px 0;
  }
  .metallic-metrics-strip {
    order: 7;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 0;
  }
  .metallic-metric-card {
    padding: 16px 12px;
  }
  .metallic-metric-num {
    font-size: 1.45rem;
  }
  .metallic-metric-label {
    font-size: 0.72rem;
  }

  /* About / Lanyard Card */
  .lanyard-stage-card {
    padding: 16px 12px;
    min-height: 520px;
    overflow: hidden;
    border-radius: 20px;
  }
  .lanyard-profile-stage {
    height: 460px;
    width: 100%;
  }
  .idcl-card {
    width: clamp(180px, 72vw, 210px);
    height: auto;
    aspect-ratio: 840 / 1400;
  }
  .idcl-hint-badge {
    bottom: 8px;
    font-size: 0.62rem;
    padding: 5px 12px;
  }
  .metallic-dossier-card {
    padding: 22px 18px;
    border-radius: 20px;
  }
  .dossier-profile-header {
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
  }
  .dossier-avatar-wrap {
    width: 68px;
    height: 68px;
    padding: 2.5px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.15);
  }
  .dossier-avatar-wrap {
    width: 68px;
    height: 68px;
    padding: 3px;
  }
  .dossier-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
  }
  .dossier-bio {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .dossier-meta-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .idcl-idrow-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .idcl-badge-telemetry {
    align-items: flex-start;
    margin-top: 6px;
  }
  .idcl-meta-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Skills Arsenal */
  .metallic-arsenal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .metallic-category-card {
    padding: 22px 16px;
    border-radius: 18px;
  }

  /* Scroll Stack Projects */
  .scroll-stack-inner {
    padding: 0 8px 24px;
  }
  .scroll-stack-card {
    margin: 0 auto 20px;
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    width: 100%;
    max-width: 100%;
  }
  .scroll-stack-card-inner {
    padding: 16px 14px;
    border-radius: 18px;
    background: #0d0e16 !important;
    background: linear-gradient(155deg, #121420 0%, #0a0b12 100%) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .scroll-stack-card .project-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
  }
  .scroll-stack-card .project-title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .scroll-stack-card .project-desc {
    font-size: 0.82rem;
    line-height: 1.48;
    margin-bottom: 10px;
  }
  .scroll-stack-card .project-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
  }
  .scroll-stack-card .tech-tag {
    font-size: 0.65rem;
    padding: 2.5px 7px;
  }
  .scroll-stack-card .project-action-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
  }
  .scroll-stack-card .btn-project-primary {
    flex: 1 1 auto;
    min-width: 120px;
    width: auto;
    text-align: center;
    justify-content: center;
    padding: 9px 12px;
    font-size: 0.8rem;
  }
  .scroll-stack-card .project-links-side {
    flex: 1 1 auto;
    width: auto;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }
  .scroll-stack-card .btn-project-demo {
    flex: 1 1 auto;
    min-width: 90px;
    text-align: center;
    justify-content: center;
    padding: 9px 12px;
    font-size: 0.8rem;
  }
  .scroll-stack-card .btn-icon-link {
    flex: 0 0 auto;
    padding: 8px 10px;
  }
  .metallic-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
    padding: 0 4px;
  }
  .metallic-filter-btn {
    padding: 6px 12px;
    font-size: 0.74rem;
  }

  /* Experience Timeline */
  .metallic-timeline-wrap::before {
    left: 14px;
  }
  .timeline-item {
    padding-left: 40px;
    margin-bottom: 28px;
  }
  .timeline-node {
    left: 4px;
    width: 18px;
    height: 18px;
    top: 5px;
  }
  .timeline-card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .timeline-role {
    font-size: 1.1rem;
  }
  .timeline-company {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }
  .timeline-bullets li {
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 8px;
  }

  /* Certifications */
  .metallic-certs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .metallic-cert-card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .cert-name {
    font-size: 1.05rem;
  }
  .cert-btn-verify {
    width: 100%;
    justify-content: center;
  }

  /* Contact Terminal */
  .terminal-window {
    border-radius: 18px;
  }
  .terminal-titlebar {
    padding: 10px 14px;
  }
  .terminal-body {
    padding: 22px 14px;
  }
  .terminal-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }
  .terminal-actions-bar {
    flex-direction: column-reverse;
    gap: 16px;
    align-items: stretch;
  }
  #term-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }
  .terminal-direct-contact {
    justify-content: center;
    gap: 14px;
  }

  /* Case Study Modal Dialog */
  .metallic-modal-backdrop {
    padding: 10px;
  }
  .metallic-modal-dialog {
    max-height: 94vh;
    height: 94vh;
    border-radius: 16px;
    width: 100%;
  }
  .modal-header-bar {
    padding: 14px 18px;
  }
  .modal-title-text {
    font-size: 1.05rem;
  }
  .modal-content-scroll {
    padding: 18px 14px;
    gap: 18px;
  }

  /* Footer */
  .metallic-footer {
    padding: 30px 0 20px;
  }
  .metallic-footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }
  .footer-copy {
    font-size: 0.72rem;
  }
}

/* Small Smartphone Adaptation (<= 480px) */
@media (max-width: 480px) {
  .metallic-header {
    height: 56px;
  }
  .metallic-brand {
    gap: 8px;
  }
  .metallic-brand-emblem {
    width: 32px;
    height: 32px;
  }
  .metallic-brand-letter {
    font-size: 1.05rem;
  }
  .metallic-brand-title {
    font-size: 0.82rem;
    letter-spacing: 0.05em;
  }
  .metallic-brand-tag {
    display: none;
  }
  .btn-return-classic {
    padding: 5px 10px;
    font-size: 0.72rem;
    gap: 4px;
  }
  .metallic-audio-toggle {
    width: 30px;
    height: 30px;
  }
  .metallic-name-img {
    width: clamp(210px, 88vw, 320px);
  }
  .metallic-metrics-strip {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metallic-metric-card {
    padding: 14px 10px;
  }
  .metallic-metric-num {
    font-size: 1.35rem;
  }
  .metallic-hero-visual {
    order: 4;
    min-height: 290px;
    margin-top: 2px;
    margin-bottom: 8px;
  }
  .spline-robot-wrapper {
    height: 320px;
    min-height: 280px;
    transform: scale(1);
  }
  .metallic-hud-badge {
    display: none;
  }
  .robot-interactive-hint {
    bottom: -4px;
    font-size: 0.6rem;
    padding: 3px 10px;
  }
  .metallic-hero-desc {
    order: 5;
    margin-top: 6px;
    margin-bottom: 16px;
  }
  .metallic-cta-group {
    order: 6;
    margin-bottom: 20px;
  }
  .metallic-metrics-strip {
    order: 7;
  }
  .dossier-avatar-wrap {
    width: 62px;
    height: 62px;
    padding: 2px;
  }
  .scroll-stack-card-inner {
    padding: 16px 12px;
  }
  .metallic-section {
    padding: 48px 0;
  }
  .metallic-section-title {
    font-size: 1.6rem;
  }
  .metallic-section-subtitle {
    font-size: 0.85rem;
  }
}

/* ── GLOBAL 3D SWARM CURSOR (REACT BITS) ── */
.swarm-cursor-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}

.swarm-cursor-global canvas,
.swarm-cursor-global .swarm-cursor__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ── GLOBAL FLUID SPLASH CURSOR (REACT BITS) FOR LIGHT THEME ── */
.splash-cursor-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
  display: none; /* hidden in dark theme */
}

.splash-cursor-global canvas,
.splash-cursor-global .fluid-cursor__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Light Theme: Switch from Swarm to Splash Cursor */
html[data-metallic-theme="light"] .swarm-cursor-global {
  display: none !important;
}

html[data-metallic-theme="light"] .splash-cursor-global {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY CINEMATIC ENTRANCE VEIL & RETURN TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */
.metallic-entrance-veil {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: radial-gradient(ellipse 90% 80% at 50% 30%, rgba(20, 26, 38, 0.98) 0%, rgba(8, 11, 18, 0.99) 60%, #020407 100%);
  backdrop-filter: blur(36px) saturate(220%);
  -webkit-backdrop-filter: blur(36px) saturate(220%);
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  will-change: opacity, backdrop-filter, transform;
  transition: 
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
    backdrop-filter 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metallic-entrance-veil.is-revealed {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
}

.mev-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(56, 189, 248, 0.08) 35%, rgba(148, 163, 184, 0.03) 60%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   SKY THEME TOGGLE SWITCH (DAY / NIGHT CELESTIAL CONTROL)
   ══════════════════════════════════════════════════════════════════ */
.metallic-sky-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.theme-switch {
  --toggle-size: 13px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 
    0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 
    0em 0.062em 0.125em rgba(255, 255, 255, 0.94),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.35);
  transition: var(--transition);
  position: relative;
}

html[data-metallic-theme="light"] .theme-switch__container {
  box-shadow: 
    0em -0.062em 0.062em rgba(0, 0, 0, 0.15), 
    0em 0.062em 0.125em rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.15),
    0 4px 12px rgba(15, 23, 42, 0.12);
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

.theme-switch__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--transition);
}

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--transition);
}

/* Checked Actions (Night / Dark Mode) */
.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 480px) {
  .theme-switch {
    --toggle-size: 10px;
  }
  .metallic-sky-toggle-wrapper {
    margin-left: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EXCLUSIVE LIGHT MODE: LIQUID PLATINUM & WHITE RHODIUM EDITION
   ══════════════════════════════════════════════════════════════════ */
html[data-metallic-theme="light"] {
  /* ── Core Color Tokens: Liquid Platinum & Frosted White-Gold ── */
  --bg-void: #f1f5f9;
  --bg-surface: #e2e8f0;
  --bg-elevated: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.98);

  /* ── Specular Liquid Platinum & Chrome Sheen ── */
  --chrome-shine: linear-gradient(135deg, #ffffff 0%, #f1f5f9 25%, #cbd5e1 50%, #94a3b8 75%, #ffffff 100%);
  --chrome-bright: linear-gradient(135deg, #ffffff 0%, #e2e8f0 35%, #94a3b8 65%, #f8fafc 100%);
  --platinum-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(226, 232, 240, 0.85) 100%);
  --titanium-steel: linear-gradient(145deg, #ffffff 0%, #e2e8f0 50%, #cbd5e1 100%);
  --gold-accent: linear-gradient(135deg, #b45309 0%, #d97706 50%, #78350f 100%);
  --emerald-spec: #059669;
  --cyan-spec: #0284c7;

  /* ── Borders & Specular Bevels ── */
  --metal-border: 1px solid rgba(148, 163, 184, 0.35);
  --metal-border-bright: 1px solid rgba(148, 163, 184, 0.65);
  --metal-border-subtle: 1px solid rgba(148, 163, 184, 0.2);
  --metal-bevel: inset 0 1.5px 2px 0 rgba(255, 255, 255, 1.0), inset 0 -1.5px 2px 0 rgba(100, 116, 139, 0.15);
  --metal-shadow: 0 20px 40px -10px rgba(100, 116, 139, 0.12), 0 0 20px rgba(56, 189, 248, 0.08);
  --metal-shadow-lg: 0 30px 60px -15px rgba(100, 116, 139, 0.18), 0 0 35px rgba(56, 189, 248, 0.14);

  /* ── Text Colors ── */
  --text-platinum: #0f172a;
  --text-silver: #1e293b;
  --text-muted: #334155;
  --text-dim: #64748b;
}

html[data-metallic-theme="light"] {
  background-color: #f1f5f9;
  color: #1e293b;
}

html[data-metallic-theme="light"] body {
  background-color: transparent !important;
  color: #1e293b;
}

/* Ambient Layers in Light Mode */
html[data-metallic-theme="light"] .metallic-ambient-grid {
  background-image: radial-gradient(circle, rgba(100, 116, 139, 0.22) 1px, transparent 1px);
}

html[data-metallic-theme="light"] .metallic-vignette {
  background: radial-gradient(circle at center, transparent 40%, rgba(226, 232, 240, 0.45) 80%, #cbd5e1 100%);
}

/* Header in Light Mode */
html[data-metallic-theme="light"] .metallic-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 4px 24px rgba(100, 116, 139, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
}

html[data-metallic-theme="light"] .metallic-brand-emblem {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 35%, #cbd5e1 75%, #94a3b8 100%);
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 
    inset 0 1.5px 2px #ffffff,
    inset 0 -1px 2px rgba(100, 116, 139, 0.25),
    0 4px 14px rgba(100, 116, 139, 0.18);
  text-shadow: none;
}

html[data-metallic-theme="light"] .metallic-brand-letter {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-metallic-theme="light"] .metallic-brand-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
}

html[data-metallic-theme="light"] .metallic-brand-tag {
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: inset 0 1px 1px #fff;
}

html[data-metallic-theme="light"] .metallic-nav-link {
  color: #334155;
}

html[data-metallic-theme="light"] .metallic-nav-link:hover {
  color: #0284c7;
}

html[data-metallic-theme="light"] .btn-return-classic {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #eef2f6 100%);
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: inset 0 1.5px 1px #fff, 0 3px 10px rgba(100, 116, 139, 0.1);
  font-weight: 600;
}

html[data-metallic-theme="light"] .btn-return-classic:hover {
  border-color: #0284c7;
  color: #0284c7;
  box-shadow: inset 0 1.5px 1px #fff, 0 6px 18px rgba(2, 132, 199, 0.18);
}

html[data-metallic-theme="light"] .metallic-audio-toggle {
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #475569;
  box-shadow: inset 0 1px 1px #fff;
}

html[data-metallic-theme="light"] .metallic-audio-toggle:hover {
  background: #ffffff;
  color: #0284c7;
  border-color: #0284c7;
  box-shadow: inset 0 1px 1px #fff, 0 0 10px rgba(2, 132, 199, 0.15);
}

html[data-metallic-theme="light"] .metallic-audio-toggle.active {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  border-color: #0284c7;
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.25);
}

/* Hero Section in Light Mode */
html[data-metallic-theme="light"] .metallic-pill-badge {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #0f172a;
  box-shadow: inset 0 1.5px 1px #fff, 0 4px 16px rgba(100, 116, 139, 0.1);
}

html[data-metallic-theme="light"] .metallic-name-img {
  filter: drop-shadow(0 14px 28px rgba(100, 116, 139, 0.35));
}

html[data-metallic-theme="light"] .metallic-name-glow {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(203, 213, 225, 0.2) 40%, transparent 70%);
}

html[data-metallic-theme="light"] .metallic-hero-desc {
  color: #334155;
}

html[data-metallic-theme="light"] .metallic-hero-desc strong {
  color: #0f172a;
  font-weight: 700;
}

html[data-metallic-theme="light"] .metallic-hero-desc em {
  color: #475569;
}

/* Floating HUD Badges & 3D Hint in Light Mode */
html[data-metallic-theme="light"] .metallic-hud-badge {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 60%, #eef2f6 100%);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: inset 0 1.5px 2px #ffffff, 0 10px 26px rgba(100, 116, 139, 0.14);
  color: #0f172a;
}

html[data-metallic-theme="light"] .hud-pos-2 span:first-child {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .robot-interactive-hint {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: inset 0 1.5px 1px #ffffff, 0 6px 18px rgba(100, 116, 139, 0.1);
  color: #1e293b;
}

html[data-metallic-theme="light"] .robot-interactive-hint .hint-pulse {
  color: #0284c7;
}

/* Metrics Ribbon in Light Mode */
html[data-metallic-theme="light"] .metallic-metric-num {
  background: linear-gradient(135deg, #0f172a 0%, #334155 45%, #0284c7 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-metallic-theme="light"] .metallic-metric-label {
  color: #64748b;
}

/* Glass CTA Buttons in Light Mode: Liquid Platinum & White Rhodium */
html[data-metallic-theme="light"] .glass-cta-btn {
  --bg: rgba(255, 255, 255, 0.85);
  --cta-shimmer-color: rgba(2, 132, 199, 0.65);
  box-shadow: 
    0 10px 30px rgba(100, 116, 139, 0.16), 
    0 0 16px rgba(56, 189, 248, 0.15),
    inset 0 1px 1px #ffffff;
}

html[data-metallic-theme="light"] .glass-cta-btn:hover {
  box-shadow: 
    0 14px 40px rgba(2, 132, 199, 0.25), 
    0 0 28px rgba(56, 189, 248, 0.35),
    inset 0 1.5px 2px #ffffff;
}

html[data-metallic-theme="light"] .glass-cta-inner-glass {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 35%, #e2e8f0 75%, #ffffff 100%) !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(100, 116, 139, 0.2);
}

html[data-metallic-theme="light"] .glass-cta-content {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .glass-cta-badge {
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 50%, #bae6fd 100%) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.4) !important;
  box-shadow: 
    inset 0 1px 2px #ffffff,
    0 2px 8px rgba(2, 132, 199, 0.25) !important;
}

html[data-metallic-theme="light"] .glass-cta-badge-orb {
  background: #0284c7 !important;
  box-shadow: 0 0 8px #0284c7, 0 0 14px rgba(56, 189, 248, 0.6) !important;
}

html[data-metallic-theme="light"] .glass-cta-badge-icon {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .glass-cta-label {
  color: #0f172a !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html[data-metallic-theme="light"] .glass-cta-arrow {
  background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  color: #0284c7 !important;
  box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(100, 116, 139, 0.1) !important;
}

html[data-metallic-theme="light"] .glass-cta-btn:hover .glass-cta-arrow {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.25) !important;
}

/* Timeline in Light Mode */
html[data-metallic-theme="light"] .timeline-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.90) 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1.5px 2px #ffffff, 0 14px 34px rgba(100, 116, 139, 0.1);
}

html[data-metallic-theme="light"] .timeline-role {
  color: #0f172a;
}

html[data-metallic-theme="light"] .timeline-company {
  color: #0284c7;
}

html[data-metallic-theme="light"] .timeline-bullets li {
  color: #334155;
}

html[data-metallic-theme="light"] .timeline-node {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.18);
}

html[data-metallic-theme="light"] .btn-metallic-primary {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 22%, #cbd5e1 52%, #e2e8f0 82%, #ffffff 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.65) !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -1.5px 2px rgba(100, 116, 139, 0.25),
    0 8px 24px rgba(100, 116, 139, 0.18),
    0 0 14px rgba(2, 132, 199, 0.12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-metallic-theme="light"] .btn-metallic-primary:hover {
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 30%, #94a3b8 55%, #f8fafc 85%, #ffffff 100%) !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(2, 132, 199, 0.35),
    0 12px 32px rgba(2, 132, 199, 0.24),
    0 0 25px rgba(56, 189, 248, 0.3) !important;
  transform: translateY(-2px);
}

html[data-metallic-theme="light"] .btn-metallic-secondary {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #eef2f6 100%);
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: inset 0 1.5px 1px #fff, 0 4px 12px rgba(100, 116, 139, 0.1);
  font-weight: 600;
}

html[data-metallic-theme="light"] .btn-metallic-secondary:hover {
  background: #ffffff;
  border-color: #0284c7;
  color: #0369a1;
  box-shadow: inset 0 1.5px 1px #fff, 0 8px 20px rgba(2, 132, 199, 0.16);
  transform: translateY(-2px);
}

/* Cards & Surface Components in Light Mode */
html[data-metallic-theme="light"] .metallic-card,
html[data-metallic-theme="light"] .metallic-project-card,
html[data-metallic-theme="light"] .metallic-dossier-card,
html[data-metallic-theme="light"] .arsenal-canister,
html[data-metallic-theme="light"] .metallic-cert-card,
html[data-metallic-theme="light"] .metallic-exp-card,
html[data-metallic-theme="light"] .metallic-metric-card,
html[data-metallic-theme="light"] .metallic-contact-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(243, 246, 251, 0.88) 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 
    0 16px 40px -10px rgba(100, 116, 139, 0.12), 
    0 0 0 1px rgba(255, 255, 255, 0.8), 
    inset 0 1.5px 2px #ffffff;
}

html[data-metallic-theme="light"] .metallic-card:hover,
html[data-metallic-theme="light"] .metallic-project-card:hover,
html[data-metallic-theme="light"] .metallic-dossier-card:hover,
html[data-metallic-theme="light"] .arsenal-canister:hover,
html[data-metallic-theme="light"] .metallic-cert-card:hover,
html[data-metallic-theme="light"] .metallic-exp-card:hover {
  background: linear-gradient(145deg, #ffffff 0%, rgba(248, 250, 252, 0.98) 100%);
  border-color: rgba(2, 132, 199, 0.45);
  box-shadow: 
    0 24px 55px -12px rgba(100, 116, 139, 0.18), 
    0 0 25px rgba(56, 189, 248, 0.18), 
    inset 0 1.5px 2px #ffffff;
}

/* ── ScrollStack Project Cards in Light Mode ── */
html[data-metallic-theme="light"] .scroll-stack-card-inner {
  background: #ffffff !important;
  background: linear-gradient(155deg, #ffffff 0%, #f4f6fa 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 
    0 24px 60px rgba(100, 116, 139, 0.22),
    0 8px 20px rgba(100, 116, 139, 0.12),
    inset 0 2px 2px #ffffff,
    0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}

html[data-metallic-theme="light"] .scroll-stack-card:hover .scroll-stack-card-inner {
  border-color: rgba(2, 132, 199, 0.5) !important;
  box-shadow: 
    0 32px 75px rgba(100, 116, 139, 0.28),
    0 10px 25px rgba(2, 132, 199, 0.15),
    inset 0 2px 2px #ffffff,
    0 0 28px rgba(56, 189, 248, 0.2) !important;
}

html[data-metallic-theme="light"] .scroll-stack-card-inner::before {
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.35), transparent) !important;
}

html[data-metallic-theme="light"] .scroll-stack-card-inner::after {
  background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 60%) !important;
}

html[data-metallic-theme="light"] .scroll-stack-card .project-title {
  color: #0f172a !important;
  font-weight: 800;
}

html[data-metallic-theme="light"] .scroll-stack-card .project-desc {
  color: #334155 !important;
  font-weight: 450;
  line-height: 1.7;
}

/* ── Filter Pills & Buttons in Light Mode ── */
html[data-metallic-theme="light"] .metallic-filter-pill {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.38);
  color: #334155;
  font-weight: 600;
  box-shadow: inset 0 1px 1px #fff, 0 2px 6px rgba(100, 116, 139, 0.06);
}

html[data-metallic-theme="light"] .metallic-filter-pill:hover {
  background: #ffffff;
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: inset 0 1px 1px #fff, 0 4px 12px rgba(2, 132, 199, 0.12);
}

html[data-metallic-theme="light"] .metallic-filter-pill.active {
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 40%, #e0f2fe 80%, #bae6fd 100%) !important;
  color: #0369a1 !important;
  border: 1px solid rgba(2, 132, 199, 0.6) !important;
  box-shadow: 
    inset 0 1.5px 2px #ffffff,
    0 4px 16px rgba(2, 132, 199, 0.22),
    0 0 12px rgba(56, 189, 248, 0.25) !important;
  font-weight: 700 !important;
}

/* ── Arsenal Canister & Tags in Light Mode ── */
html[data-metallic-theme="light"] .canister-title {
  color: #0f172a !important;
  font-weight: 700;
}

html[data-metallic-theme="light"] .canister-icon-wrap {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 35%, #e2e8f0 70%, #cbd5e1 100%) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(148, 163, 184, 0.55) !important;
  box-shadow: 
    inset 0 1.5px 2px #ffffff,
    inset 0 -1px 2px rgba(100, 116, 139, 0.2),
    0 4px 12px rgba(100, 116, 139, 0.15) !important;
}

html[data-metallic-theme="light"] .metal-tag,
html[data-metallic-theme="light"] .scroll-stack-card .tech-tag,
html[data-metallic-theme="light"] .scroll-stack-card .project-tag,
html[data-metallic-theme="light"] .scroll-stack-card .project-period-badge,
html[data-metallic-theme="light"] .cert-badge {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.85)) !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(100, 116, 139, 0.08) !important;
}

html[data-metallic-theme="light"] .arsenal-canister:hover .metal-tag,
html[data-metallic-theme="light"] .scroll-stack-card:hover .tech-tag {
  background: linear-gradient(145deg, #ffffff, #f1f5f9) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .metal-tag:hover,
html[data-metallic-theme="light"] .arsenal-canister:hover .metal-tag:hover,
html[data-metallic-theme="light"] .scroll-stack-card .tech-tag:hover {
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%) !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
  box-shadow: 
    inset 0 1px 1px #fff, 
    0 3px 10px rgba(2, 132, 199, 0.2), 
    0 0 8px rgba(56, 189, 248, 0.25) !important;
  transform: translateY(-1px);
}

/* ── Section Titles, Subtitles, Descriptions in Light Mode ── */
html[data-metallic-theme="light"] .metallic-section-subtitle {
  color: #0284c7 !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
}

html[data-metallic-theme="light"] .metallic-section-subtitle::before,
html[data-metallic-theme="light"] .metallic-section-subtitle::after {
  background: rgba(100, 116, 139, 0.35) !important;
}

html[data-metallic-theme="light"] .metallic-section-title {
  background: linear-gradient(135deg, #0f172a 0%, #334155 35%, #64748b 60%, #1e293b 85%, #0f172a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(100, 116, 139, 0.12));
}

html[data-metallic-theme="light"] .metallic-section-desc {
  color: #334155 !important;
  font-weight: 450 !important;
  font-size: 1.05rem !important;
}

/* ── Executive Dossier & Avatar in Light Mode ── */
html[data-metallic-theme="light"] .dossier-avatar-wrap {
  background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 35%, #cbd5e1 70%, #94a3b8 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 6px 18px rgba(100, 116, 139, 0.16), inset 0 1px 1px #ffffff !important;
}

html[data-metallic-theme="light"] .dossier-avatar {
  background: #e2e8f0 !important;
  box-shadow: inset 0 0 4px rgba(100, 116, 139, 0.2) !important;
}

html[data-metallic-theme="light"] .dossier-info-block h3 {
  color: #0f172a !important;
  font-weight: 700;
}

html[data-metallic-theme="light"] .dossier-info-block p {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .dossier-bio {
  color: #334155 !important;
}

html[data-metallic-theme="light"] .dossier-bio p strong {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .dossier-bio p em {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .meta-item {
  border-bottom-color: rgba(148, 163, 184, 0.28) !important;
}

html[data-metallic-theme="light"] .meta-label {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .meta-value {
  color: #0f172a !important;
}

/* ── 3D Interactive Lanyard & iCard in Light Mode ── */
html[data-metallic-theme="light"] .lanyard-badge-title {
  color: #475569 !important;
}

html[data-metallic-theme="light"] .lanyard-badge-title::before {
  background: #0284c7 !important;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.4) !important;
}

html[data-metallic-theme="light"] .btn-toggle-lanyard-mode {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.08) !important;
}

html[data-metallic-theme="light"] .btn-toggle-lanyard-mode:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .lanyard-stage-card-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
}

html[data-metallic-theme="light"] .idcl-rail {
  background: linear-gradient(180deg, #ffffff, #cbd5e1 70%, #94a3b8) !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.22), inset 0 1px 1px #ffffff !important;
}

/* Light Theme Card Bodies */
html[data-metallic-theme="light"] .idcl-face {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 50%, rgba(241, 245, 249, 0.95) 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow:
    0 28px 56px -14px rgba(100, 116, 139, 0.28),
    0 10px 20px -8px rgba(100, 116, 139, 0.16),
    inset 0 1.5px 2px #ffffff,
    inset 0 -1px 2px rgba(203, 213, 225, 0.6),
    0 0 24px rgba(2, 132, 199, 0.08) !important;
}

html[data-metallic-theme="light"] .idcl-front {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
}

html[data-metallic-theme="light"] .idcl-back {
  background: linear-gradient(165deg, #f1f5f9 0%, #f8fafc 55%, #ffffff 100%) !important;
}

html[data-metallic-theme="light"] .idcl-face::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, transparent 40%, rgba(203, 213, 225, 0.25) 100%),
    radial-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1.3px) 0 0/4px 4px !important;
  mix-blend-mode: normal !important;
  opacity: 0.7 !important;
}

html[data-metallic-theme="light"] .idcl-face::after {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(2, 132, 199, 0.12), transparent 50%) !important;
  mix-blend-mode: multiply !important;
}

html[data-metallic-theme="light"] .idcl-hole {
  background: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.5) !important;
  box-shadow: inset 0 2px 4px rgba(100, 116, 139, 0.35) !important;
}

html[data-metallic-theme="light"] .idcl-brand-text b {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .idcl-brand-text small {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .idcl-brand-mark {
  color: #0284c7 !important;
  filter: drop-shadow(0 0 5px rgba(2, 132, 199, 0.5)) !important;
}

html[data-metallic-theme="light"] .idcl-pillars span {
  color: #475569 !important;
}

html[data-metallic-theme="light"] .idcl-pillars i {
  background: linear-gradient(90deg, #0284c7, transparent) !important;
}

html[data-metallic-theme="light"] .idcl-photo {
  background: #f1f5f9 !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: inset 0 0 8px rgba(100, 116, 139, 0.12), 0 3px 10px rgba(100, 116, 139, 0.1) !important;
}

html[data-metallic-theme="light"] .idcl-verified {
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.25), 0 0 0 3px #ffffff !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
}

html[data-metallic-theme="light"] .idcl-name {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-metallic-theme="light"] .idcl-role {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .idcl-divider {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.45), transparent) !important;
}

html[data-metallic-theme="light"] .idcl-idrow-labels span {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .idcl-idrow-labels b {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .idcl-qr {
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4) !important;
}

html[data-metallic-theme="light"] .idcl-qr i.on {
  background: #0f172a !important;
}

html[data-metallic-theme="light"] .idcl-footer {
  border-top-color: rgba(148, 163, 184, 0.35) !important;
  color: #64748b !important;
}

html[data-metallic-theme="light"] .idcl-footer i {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .idcl-stripe {
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 6px, #e2e8f0 6px, #e2e8f0 12px) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

html[data-metallic-theme="light"] .idcl-idnum {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .idcl-idnum em {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .idcl-barcode {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

html[data-metallic-theme="light"] .idcl-barcode span {
  background: #0f172a !important;
}

html[data-metallic-theme="light"] .idcl-scan {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .idcl-scan b {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .idcl-connect span {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .idcl-connect-icons a {
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  color: #475569 !important;
}

html[data-metallic-theme="light"] .idcl-connect-icons a:hover {
  background: rgba(224, 242, 254, 0.9) !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .idcl-sig .idcl-script {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-metallic-theme="light"] .idcl-sig small {
  color: #64748b !important;
  border-top-color: rgba(148, 163, 184, 0.35) !important;
}

html[data-metallic-theme="light"] .idcl-hint-badge {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  color: #334155 !important;
  box-shadow: 0 4px 14px rgba(100, 116, 139, 0.16), inset 0 1px 0 #ffffff !important;
}

html[data-metallic-theme="light"] .idcl-holo {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 8px rgba(2, 132, 199, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-filter-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.38);
  color: #334155;
  font-weight: 600;
  box-shadow: inset 0 1px 1px #fff, 0 2px 6px rgba(100, 116, 139, 0.06);
}

html[data-metallic-theme="light"] .metallic-filter-btn:hover {
  background: #ffffff;
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: inset 0 1px 1px #fff, 0 4px 12px rgba(2, 132, 199, 0.12);
}

html[data-metallic-theme="light"] .metallic-filter-btn.active {
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 40%, #e0f2fe 80%, #bae6fd 100%) !important;
  color: #0369a1 !important;
  border: 1px solid rgba(2, 132, 199, 0.6) !important;
  box-shadow: 
    inset 0 1.5px 2px #ffffff,
    0 4px 16px rgba(2, 132, 199, 0.22),
    0 0 12px rgba(56, 189, 248, 0.25) !important;
  font-weight: 700 !important;
}

/* ── Certifications in Light Mode ── */
html[data-metallic-theme="light"] .cert-issuer {
  color: #0284c7 !important;
  font-weight: 600;
}

html[data-metallic-theme="light"] .cert-issuer-badge {
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.25) !important;
  font-weight: 600 !important;
}

html[data-metallic-theme="light"] .cert-date {
  color: #64748b !important;
  font-weight: 500 !important;
}

html[data-metallic-theme="light"] .cert-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-metallic-theme="light"] .cert-id {
  color: #475569 !important;
  font-weight: 500 !important;
}

html[data-metallic-theme="light"] .cert-btn-verify {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #eef2f6 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1.5px 1px #fff, 0 3px 10px rgba(100, 116, 139, 0.1) !important;
}

html[data-metallic-theme="light"] .cert-btn-verify:hover {
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: inset 0 1.5px 1px #fff, 0 6px 18px rgba(2, 132, 199, 0.16) !important;
  transform: translateY(-2px);
}

/* ── Action Buttons in Light Mode ── */
html[data-metallic-theme="light"] .btn-project-primary {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 22%, #cbd5e1 52%, #e2e8f0 82%, #ffffff 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.65) !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -1.5px 2px rgba(100, 116, 139, 0.25),
    0 8px 24px rgba(100, 116, 139, 0.18),
    0 0 14px rgba(2, 132, 199, 0.12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-metallic-theme="light"] .btn-project-primary:hover {
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 30%, #94a3b8 55%, #f8fafc 85%, #ffffff 100%) !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(2, 132, 199, 0.35),
    0 12px 32px rgba(2, 132, 199, 0.24),
    0 0 25px rgba(56, 189, 248, 0.3) !important;
  transform: translateY(-2px);
}

html[data-metallic-theme="light"] .btn-project-demo {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #eef2f6 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1.5px 1px #fff, 0 3px 8px rgba(100, 116, 139, 0.08) !important;
}

html[data-metallic-theme="light"] .btn-project-demo:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: inset 0 1.5px 1px #fff, 0 6px 16px rgba(2, 132, 199, 0.14) !important;
  transform: translateY(-2px);
}

html[data-metallic-theme="light"] .btn-icon-link {
  background: rgba(100, 116, 139, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  color: #334155 !important;
}

html[data-metallic-theme="light"] .btn-icon-link:hover {
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%) !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2) !important;
}

/* ── Terminal & Contact Form in Light Mode ── */
html[data-metallic-theme="light"] .metallic-terminal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.92) 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 24px 60px rgba(100, 116, 139, 0.14), inset 0 1.5px 2px #ffffff !important;
}

html[data-metallic-theme="light"] .terminal-titlebar {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
}

html[data-metallic-theme="light"] .terminal-title-text {
  color: #334155 !important;
  font-weight: 600 !important;
}

html[data-metallic-theme="light"] .terminal-status-badge {
  color: #16a34a !important;
  background: rgba(22, 163, 74, 0.1) !important;
  border: 1px solid rgba(22, 163, 74, 0.25) !important;
}

html[data-metallic-theme="light"] .terminal-label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html[data-metallic-theme="light"] .terminal-input,
html[data-metallic-theme="light"] .terminal-textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: inset 0 1px 2px rgba(100, 116, 139, 0.08) !important;
}

html[data-metallic-theme="light"] .terminal-input:focus,
html[data-metallic-theme="light"] .terminal-textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

html[data-metallic-theme="light"] .terminal-social-link {
  color: #475569 !important;
}

html[data-metallic-theme="light"] .terminal-social-link:hover {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .terminal-status-msg.success {
  background: rgba(22, 163, 74, 0.12) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
  color: #15803d !important;
}

html[data-metallic-theme="light"] .terminal-status-msg.error {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  color: #b91c1c !important;
}

html[data-metallic-theme="light"] .btn-chrome-solid,
html[data-metallic-theme="light"] #term-submit-btn {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 22%, #cbd5e1 52%, #e2e8f0 82%, #ffffff 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.65) !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -1.5px 2px rgba(100, 116, 139, 0.25),
    0 8px 24px rgba(100, 116, 139, 0.18),
    0 0 14px rgba(2, 132, 199, 0.12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-metallic-theme="light"] .btn-chrome-solid:hover,
html[data-metallic-theme="light"] #term-submit-btn:hover {
  background: linear-gradient(145deg, #ffffff 0%, #e0f2fe 30%, #94a3b8 55%, #f8fafc 85%, #ffffff 100%) !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: 
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(2, 132, 199, 0.35),
    0 12px 32px rgba(2, 132, 199, 0.24),
    0 0 25px rgba(56, 189, 248, 0.3) !important;
}

/* ── Modals & Architecture Drawer in Light Mode ── */
html[data-metallic-theme="light"] .metallic-modal-dialog {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 35px 85px rgba(100, 116, 139, 0.25) !important;
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .modal-header-bar {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3) !important;
}

html[data-metallic-theme="light"] .modal-title-text {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .modal-close-btn {
  background: rgba(100, 116, 139, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #334155 !important;
}

html[data-metallic-theme="light"] .modal-close-btn:hover {
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%) !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2) !important;
}

html[data-metallic-theme="light"] .modal-section-h4 {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

html[data-metallic-theme="light"] .modal-section-body {
  color: #334155 !important;
  line-height: 1.7;
}

html[data-metallic-theme="light"] .modal-challenges-list li {
  color: #1e293b !important;
  line-height: 1.6;
}

/* ── Footer in Light Mode ── */
html[data-metallic-theme="light"] .metallic-footer {
  background: #eef2f6 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-metallic-theme="light"] .footer-gridscan-fade {
  background: linear-gradient(180deg, #eef2f6 0%, rgba(238, 242, 246, 0.5) 60%, transparent 100%) !important;
}

html[data-metallic-theme="light"] .footer-credit,
html[data-metallic-theme="light"] .footer-copy {
  color: #475569 !important;
}

html[data-metallic-theme="light"] .footer-social-link {
  color: #475569 !important;
}

html[data-metallic-theme="light"] .footer-social-link:hover {
  color: #0284c7 !important;
}

/* Custom Scrollbar in Light Mode */
html[data-metallic-theme="light"] ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html[data-metallic-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 2px solid #f1f5f9;
}
html[data-metallic-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ── 3D Interactive Robot & Hero Visual in Light Mode ── */
html[data-metallic-theme="light"] #hero-spline-canvas {
  filter: drop-shadow(0 20px 40px rgba(100, 116, 139, 0.25)) !important;
}


html[data-metallic-theme="light"] .hero-spotlight {
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.16) 0%, rgba(203, 213, 225, 0.35) 35%, transparent 70%) !important;
}

html[data-metallic-theme="light"] .robot-interactive-hint {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 6px 18px rgba(148, 163, 184, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  color: #1e293b !important;
}

html[data-metallic-theme="light"] .hint-pulse {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-hud-badge {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 10px 28px rgba(148, 163, 184, 0.2), inset 0 1.5px 1px rgba(255, 255, 255, 1) !important;
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .spline-spinner {
  border: 2.5px solid rgba(148, 163, 184, 0.25) !important;
  border-top-color: #0284c7 !important;
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.3) !important;
}

html[data-metallic-theme="light"] .spline-loader-text {
  color: #475569 !important;
}

/* ══════════════════════════════════════════════════════════════════
   METALLIC EDITION — AI ASSISTANT CHATBOT INTEGRATION
   Liquid Metal & Obsidian Black Luxury Design System
   ══════════════════════════════════════════════════════════════════ */

/* ── Floating Launcher HUD ── */
.metallic-chat-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 10005;
  pointer-events: none;
  font-family: var(--font-body);
}

.metallic-bot-toggle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 96px;
  height: 104px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10010;
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.metallic-bot-toggle:hover {
  transform: scale(1.12) translateY(-4px);
}

.metallic-bot-toggle:active {
  transform: scale(0.95) translateY(0);
}

/* Pulsing metallic halo ring - disabled so website background shows through directly */
.metallic-bot-halo {
  display: none !important;
}

/* Float & Levitation Keyframes */
@keyframes metallic-bot-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(1.5deg);
  }
}

@keyframes metallic-bot-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* Avatar Wrapper - 100% transparent so website background grid flows seamlessly behind bot */
.metallic-bot-avatar-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  animation: metallic-bot-float 4.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
  overflow: visible;
}

.metallic-bot-sprite {
  width: 96px;
  height: 104px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.82)) drop-shadow(0 4px 12px rgba(168, 85, 247, 0.35));
  transition: filter 0.35s ease, transform 0.35s ease;
  will-change: transform, filter;
  animation: metallic-bot-breathe 4.6s ease-in-out infinite;
}

.metallic-bot-toggle:hover .metallic-bot-sprite {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.92)) drop-shadow(0 0 22px rgba(168, 85, 247, 0.65));
}

/* Nudge Tooltip */
.metallic-nudge-tooltip {
  position: absolute;
  right: 110px;
  bottom: 30px;
  background: rgba(14, 14, 22, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f8fafc;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(168, 85, 247, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10008;
}

.metallic-nudge-icon {
  color: #c084fc;
  font-size: 14px;
}

#ts-chat-widget.ts-nudge-active .metallic-nudge-tooltip {
  opacity: 1;
  transform: translateX(0);
}

#ts-chat-widget.ts-nudge-active .metallic-bot-toggle {
  transform: translateY(-4px) rotate(-3deg) scale(1.05);
}

/* While docked in header */
#ts-chat-widget.is-open .metallic-bot-halo {
  opacity: 0;
  pointer-events: none;
}

#ts-chat-widget.is-open #ts-chat-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: scale(0.6) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.metallic-header-avatar {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* ── Chat Panel Metallic Aesthetic ── */
.metallic-chat-panel {
  position: fixed;
  top: 50%;
  right: 28px;
  width: 440px;
  height: calc(100vh - 90px);
  max-height: 820px;
  background: rgba(10, 10, 16, 0.9) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.9), 0 0 45px rgba(139, 92, 246, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-46%) scale(0.96);
  transform-origin: right center;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  overflow: hidden;
  z-index: 10009 !important;
}

#ts-chat-panel.is-open,
.metallic-chat-panel.is-open,
.ts-chat-panel.is-open {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Chat Header */
.metallic-chat-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(14, 14, 22, 0.85);
  flex-shrink: 0;
}

.metallic-avatar-stage {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 27, 75, 0.6) 0%, rgba(15, 15, 25, 0.9) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.metallic-chat-header .ts-header-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.metallic-chat-header .ts-header-text p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #94a3b8;
  font-family: var(--font-body);
}

.metallic-chat-header .ts-chat-header-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border-radius: 10px;
  padding: 7px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.metallic-chat-header .ts-chat-header-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.metallic-chat-header .ts-chat-voice-btn.is-active {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.45);
}

.metallic-chat-header .ts-wave-bar {
  background: #c084fc;
}

/* Personality Mode Bar */
.metallic-mode-bar {
  padding: 9px 18px;
  background: rgba(8, 8, 14, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.metallic-mode-bar .ts-mode-pill-group {
  display: flex;
  gap: 8px;
}

.metallic-mode-bar .ts-mode-pill {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-display);
  color: #94a3b8;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.metallic-mode-bar .ts-mode-pill:hover {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.2);
}

.metallic-mode-bar .ts-mode-pill.is-active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(59, 130, 246, 0.9) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.35);
}

/* Chat Body & Scroll */
.metallic-chat-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.metallic-chat-body::-webkit-scrollbar {
  width: 5px;
}
.metallic-chat-body::-webkit-scrollbar-track {
  background: transparent;
}
.metallic-chat-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Message Rows & Avatars */
.metallic-chat-body .ts-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.metallic-msg-avatar,
.metallic-chat-body .ts-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: radial-gradient(circle, rgba(30, 27, 75, 0.7) 0%, rgba(15, 15, 25, 0.95) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
  padding: 2px;
}

/* Message Bubbles */
.metallic-chat-body .ts-msg {
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.58;
  font-family: var(--font-body);
  word-break: break-word;
}

.metallic-msg-bubble,
.metallic-chat-body .ts-msg-ai {
  background: rgba(20, 20, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.metallic-chat-body .ts-msg-user {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(59, 130, 246, 0.4) 100%);
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #ffffff;
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  margin-left: auto;
}

.metallic-chat-body .ts-msg-tools {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}

.metallic-chat-body .ts-msg-copy-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.metallic-chat-body .ts-msg-copy-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

/* Starter Chips in Metallic Panel */
.metallic-starter-chips,
.metallic-chat-body .ts-starter-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.metallic-chat-body .ts-starter-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-body);
}

.metallic-chat-body .ts-starter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(168, 85, 247, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(168, 85, 247, 0.2);
}

.metallic-chat-body .ts-chip-badge {
  font-size: 11px;
  font-weight: 600;
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  display: block;
}

.metallic-chat-body .ts-chip-text {
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
}

.metallic-chat-body .ts-chip-arrow {
  color: #94a3b8;
  font-size: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.metallic-chat-body .ts-starter-chip:hover .ts-chip-arrow {
  transform: translateX(4px);
  color: #c084fc;
}

/* Action Cards */
.metallic-chat-body .ts-action-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.metallic-chat-body .ts-action-card {
  background: rgba(20, 20, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.metallic-chat-body .ts-action-card:hover {
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(28, 28, 44, 0.95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(168, 85, 247, 0.25);
  transform: translateY(-1px);
}

.metallic-chat-body .ts-card-badge {
  font-size: 18px;
}

.metallic-chat-body .ts-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  display: block;
}

.metallic-chat-body .ts-card-desc {
  font-size: 11.5px;
  color: #94a3b8;
  display: block;
  margin-top: 1px;
}

.metallic-chat-body .ts-card-arrow {
  color: #c084fc;
  font-size: 14px;
}

/* Contextual Followup Chips */
.metallic-chat-body .ts-followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.metallic-chat-body .ts-followup-chip {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #e2e8f0;
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}

.metallic-chat-body .ts-followup-chip:hover {
  background: rgba(168, 85, 247, 0.28);
  border-color: rgba(168, 85, 247, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Typing Indicator */
.metallic-chat-body .ts-typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
}

.metallic-chat-body .ts-dot {
  width: 7px;
  height: 7px;
  background: #c084fc;
  border-radius: 50%;
  animation: ts-dot-pulse 1.4s infinite ease-in-out both;
}
.metallic-chat-body .ts-dot:nth-child(1) { animation-delay: -0.32s; }
.metallic-chat-body .ts-dot:nth-child(2) { animation-delay: -0.16s; }

/* Chat Footer & Input */
.metallic-chat-footer {
  padding: 16px 20px;
  background: rgba(14, 14, 22, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.metallic-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 6px 10px;
  transition: all 0.2s ease;
}

.metallic-input-wrapper:focus-within {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.metallic-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f8fafc;
  font-family: var(--font-body);
  font-size: 13.5px;
}

.metallic-chat-input::placeholder {
  color: #64748b;
}

.metallic-mic-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color 0.2s ease;
}

.metallic-mic-btn:hover {
  color: #c084fc;
}

.metallic-mic-btn.is-listening {
  color: #ef4444 !important;
}

.metallic-send-btn {
  background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
  border: none;
  color: #ffffff;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
}

.metallic-send-btn:hover {
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.55);
  transform: scale(1.04);
}

.metallic-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════
   METALLIC CHATBOT — LIGHT THEME SPECIFIC OVERRIDES
   Exclusive Liquid Platinum, Polished Rhodium & Cyan Sky Glow
   ══════════════════════════════════════════════════════════════════ */

html[data-metallic-theme="light"] .metallic-bot-halo {
  display: none !important;
}

html[data-metallic-theme="light"] .metallic-bot-avatar-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-metallic-theme="light"] .metallic-bot-toggle:hover .metallic-bot-avatar-wrap {
  border: none !important;
  box-shadow: none !important;
}

html[data-metallic-theme="light"] .metallic-bot-sprite {
  filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.22)) drop-shadow(0 4px 10px rgba(2, 132, 199, 0.25)) !important;
}

html[data-metallic-theme="light"] .metallic-bot-toggle:hover .metallic-bot-sprite {
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.3)) drop-shadow(0 0 20px rgba(2, 132, 199, 0.55)) !important;
}

html[data-metallic-theme="light"] .metallic-nudge-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 12px 28px rgba(100, 116, 139, 0.22), 0 0 16px rgba(2, 132, 199, 0.18) !important;
}

html[data-metallic-theme="light"] .metallic-nudge-icon {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-chat-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  box-shadow: 0 35px 80px -15px rgba(100, 116, 139, 0.32), 0 0 45px rgba(2, 132, 199, 0.22), inset 0 1.5px 1px rgba(255, 255, 255, 1) !important;
}

html[data-metallic-theme="light"] .metallic-chat-header {
  background: rgba(248, 250, 252, 0.95) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-avatar-stage {
  background: radial-gradient(circle, rgba(224, 242, 254, 0.85) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.45) !important;
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.3), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}

html[data-metallic-theme="light"] .metallic-chat-header .ts-header-text h3 {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .metallic-chat-header .ts-header-text p {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .metallic-chat-header .ts-chat-header-btn {
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #475569 !important;
}

html[data-metallic-theme="light"] .metallic-chat-header .ts-chat-header-btn:hover {
  background: #ffffff !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-chat-header .ts-chat-voice-btn.is-active {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.15) !important;
  border-color: rgba(2, 132, 199, 0.45) !important;
}

html[data-metallic-theme="light"] .metallic-chat-header .ts-wave-bar {
  background: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-mode-bar {
  background: rgba(241, 245, 249, 0.85) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

html[data-metallic-theme="light"] .metallic-mode-bar .ts-mode-pill {
  color: #64748b !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
}

html[data-metallic-theme="light"] .metallic-mode-bar .ts-mode-pill:hover {
  color: #0f172a !important;
  border-color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-mode-bar .ts-mode-pill.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35) !important;
}

html[data-metallic-theme="light"] .metallic-chat-body {
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent !important;
}

html[data-metallic-theme="light"] .metallic-msg-avatar,
html[data-metallic-theme="light"] .metallic-chat-body .ts-msg-avatar {
  background: radial-gradient(circle, rgba(224, 242, 254, 0.85) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.45) !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-msg-bubble,
html[data-metallic-theme="light"] .metallic-chat-body .ts-msg-ai {
  background: rgba(241, 245, 249, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(100, 116, 139, 0.14) !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-msg-user {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  border: 1px solid rgba(2, 132, 199, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-starter-chip {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  color: #1e293b !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-starter-chip:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 6px 18px rgba(100, 116, 139, 0.2), 0 0 12px rgba(2, 132, 199, 0.2) !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-chip-badge {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-chip-text {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-action-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-action-card:hover {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.2), 0 0 14px rgba(2, 132, 199, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-card-title {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-card-desc {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-card-arrow {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-followup-chip {
  background: rgba(2, 132, 199, 0.1) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  color: #0369a1 !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-followup-chip:hover {
  background: rgba(2, 132, 199, 0.22) !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-chat-body .ts-dot {
  background: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-chat-footer {
  background: rgba(248, 250, 252, 0.95) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-input-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
}

html[data-metallic-theme="light"] .metallic-input-wrapper:focus-within {
  border-color: #0284c7 !important;
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.25) !important;
}

html[data-metallic-theme="light"] .metallic-chat-input {
  color: #0f172a !important;
}

html[data-metallic-theme="light"] .metallic-chat-input::placeholder {
  color: #94a3b8 !important;
}

html[data-metallic-theme="light"] .metallic-mic-btn {
  color: #64748b !important;
}

html[data-metallic-theme="light"] .metallic-mic-btn:hover {
  color: #0284c7 !important;
}

html[data-metallic-theme="light"] .metallic-send-btn {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

html[data-metallic-theme="light"] .metallic-send-btn:hover {
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.55) !important;
}

/* ── Active Bot Model Theme Switch Logic ── */
/* In light mode: show light sprite and light avatar, hide dark */
html[data-metallic-theme="light"] .dark-sprite,
html[data-metallic-theme="light"] .dark-avatar {
  display: none !important;
}
html[data-metallic-theme="light"] .light-sprite,
html[data-metallic-theme="light"] .light-avatar {
  display: block !important;
}

/* In dark mode: show dark sprite and dark avatar, hide light */
html:not([data-metallic-theme="light"]) .light-sprite,
html:not([data-metallic-theme="light"]) .light-avatar {
  display: none !important;
}
html:not([data-metallic-theme="light"]) .dark-sprite,
html:not([data-metallic-theme="light"]) .dark-avatar {
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE CHATBOT WINDOW (LIGHT & DARK METALLIC EDITIONS)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent background page scroll bleed when chat is open */
  html.ts-chat-open,
  body.ts-chat-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .metallic-chat-widget {
    bottom: 16px !important;
    right: 16px !important;
  }

  .metallic-bot-toggle {
    width: 68px !important;
    height: 76px !important;
  }

  .metallic-bot-sprite {
    width: 68px !important;
    height: 76px !important;
  }

  /* Hide floating launcher when chat panel is open on mobile */
  #ts-chat-widget.is-open .ts-bot-container,
  #ts-chat-widget.is-open .metallic-bot-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  /* Full viewport mobile bottom-sheet/modal window */
  #ts-chat-panel,
  .metallic-chat-panel,
  .ts-chat-panel {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 100005 !important;
    /* Clean slide up from bottom animation */
    transform: translateY(100%) !important;
    transform-origin: bottom center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s !important;
  }

  /* Open State: slides smoothly to full view */
  #ts-chat-panel.is-open,
  .metallic-chat-panel.is-open,
  .ts-chat-panel.is-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ── DARK THEME MOBILE WINDOW ── */
  html:not([data-metallic-theme="light"]) #ts-chat-panel,
  html:not([data-metallic-theme="light"]) .metallic-chat-panel {
    background: #090a12 !important;
    background: rgba(9, 10, 18, 0.985) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }

  html:not([data-metallic-theme="light"]) .metallic-chat-header,
  html:not([data-metallic-theme="light"]) #ts-chat-panel .ts-chat-header {
    background: #0f111c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    padding: max(12px, env(safe-area-inset-top, 12px)) 16px 12px 16px !important;
    min-height: 56px !important;
  }

  html:not([data-metallic-theme="light"]) .metallic-mode-bar,
  html:not([data-metallic-theme="light"]) #ts-chat-panel .ts-mode-bar {
    background: #0b0d16 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 8px 14px !important;
  }

  html:not([data-metallic-theme="light"]) .metallic-chat-body,
  html:not([data-metallic-theme="light"]) #ts-chat-panel .ts-chat-body {
    background: #090a12 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px 10px 14px !important;
  }

  html:not([data-metallic-theme="light"]) .metallic-chat-footer,
  html:not([data-metallic-theme="light"]) #ts-chat-panel .ts-chat-footer {
    background: #0f111c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom, 12px)) 14px !important;
  }

  html:not([data-metallic-theme="light"]) .metallic-input-wrapper {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
  }

  html:not([data-metallic-theme="light"]) .metallic-chat-input {
    color: #f8fafc !important;
    font-size: 16px !important; /* Prevents auto-zoom in mobile Safari */
  }

  html:not([data-metallic-theme="light"]) .metallic-chat-input::placeholder {
    color: #94a3b8 !important;
  }

  html:not([data-metallic-theme="light"]) .ts-starter-chip {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
  }

  html:not([data-metallic-theme="light"]) .ts-chip-text {
    color: #f1f5f9 !important;
    font-size: 13px !important;
  }

  html:not([data-metallic-theme="light"]) .ts-chip-badge {
    color: #c084fc !important;
    background: rgba(168, 85, 247, 0.12) !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
  }

  html:not([data-metallic-theme="light"]) .ts-chip-arrow {
    color: #c084fc !important;
  }

  /* ── LIGHT THEME MOBILE WINDOW ── */
  html[data-metallic-theme="light"] #ts-chat-panel,
  html[data-metallic-theme="light"] .metallic-chat-panel {
    background: #f8fafc !important;
    background: rgba(248, 250, 252, 0.99) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }

  html[data-metallic-theme="light"] .metallic-chat-header,
  html[data-metallic-theme="light"] #ts-chat-panel .ts-chat-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
    padding: max(12px, env(safe-area-inset-top, 12px)) 16px 12px 16px !important;
    min-height: 56px !important;
  }

  html[data-metallic-theme="light"] .metallic-chat-header .ts-header-text h3 {
    color: #0f172a !important;
    font-size: 15px !important;
  }

  html[data-metallic-theme="light"] .metallic-chat-header .ts-header-text p {
    color: #64748b !important;
    font-size: 11px !important;
  }

  html[data-metallic-theme="light"] .metallic-mode-bar,
  html[data-metallic-theme="light"] #ts-chat-panel .ts-mode-bar {
    background: #f1f5f9 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
    padding: 8px 14px !important;
  }

  html[data-metallic-theme="light"] .metallic-chat-body,
  html[data-metallic-theme="light"] #ts-chat-panel .ts-chat-body {
    background: #f8fafc !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 14px 10px 14px !important;
  }

  html[data-metallic-theme="light"] .metallic-chat-footer,
  html[data-metallic-theme="light"] #ts-chat-panel .ts-chat-footer {
    background: #ffffff !important;
    border-top: 1px solid rgba(148, 163, 184, 0.28) !important;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom, 12px)) 14px !important;
  }

  html[data-metallic-theme="light"] .metallic-input-wrapper {
    background: #ffffff !important;
    border: 1.5px solid rgba(148, 163, 184, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.1) !important;
  }

  html[data-metallic-theme="light"] .metallic-chat-input {
    color: #0f172a !important;
    font-size: 16px !important; /* Prevents auto-zoom in mobile Safari */
  }

  html[data-metallic-theme="light"] .metallic-chat-input::placeholder {
    color: #64748b !important;
  }

  html[data-metallic-theme="light"] .ts-starter-chip {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.08) !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
  }

  html[data-metallic-theme="light"] .ts-chip-text {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  html[data-metallic-theme="light"] .ts-chip-badge {
    color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.08) !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
  }

  html[data-metallic-theme="light"] .ts-chip-arrow {
    color: #0284c7 !important;
  }

  /* Accessible close button on mobile header */
  .ts-chat-close,
  .metallic-chat-header .ts-chat-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  html[data-metallic-theme="light"] .ts-chat-close {
    background: #f1f5f9 !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #0f172a !important;
  }

  html:not([data-metallic-theme="light"]) .ts-chat-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
  }
}