/* ==========================================================================
   PARMEET SINGH — FULL-STACK PRODUCT & WEB DEVELOPER PORTFOLIO
   Design System: Default Light Mode + Flawless Dark Mode
   Vibrant Multi-Accent Palette: Royal Indigo, Electric Cyan, Emerald, Amber, Coral
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"],
html:not([data-theme="dark"]) {
  /* Surface & Background */
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-surface-subtle: #f1f5f9;
  --bg-surface-glass: rgba(255, 255, 255, 0.92);
  --bg-os-window: #ffffff;
  --bg-os-header: #f1f5f9;
  --bg-os-inner: #f8fafc;

  /* Borders */
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-hover: #94a3b8;
  --border-focus: #2563eb;

  /* Brand & Multi-Accent Colors */
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-primary-light: #3b82f6;
  --accent-primary-subtle: rgba(37, 99, 235, 0.08);
  --accent-primary-glow: rgba(37, 99, 235, 0.2);

  --accent-indigo: #4f46e5;
  --accent-indigo-subtle: rgba(79, 70, 229, 0.08);

  --accent-cyan: #0284c7;
  --accent-cyan-light: #0ea5e9;
  --accent-cyan-subtle: rgba(2, 132, 199, 0.08);
  --accent-cyan-glow: rgba(2, 132, 199, 0.2);

  --accent-emerald: #059669;
  --accent-emerald-light: #10b981;
  --accent-emerald-subtle: rgba(5, 150, 105, 0.08);
  --accent-emerald-glow: rgba(16, 185, 129, 0.2);

  --accent-amber: #d97706;
  --accent-amber-light: #f59e0b;
  --accent-amber-subtle: rgba(217, 119, 6, 0.08);

  --accent-coral: #e11d48;
  --accent-coral-light: #f43f5e;
  --accent-coral-subtle: rgba(225, 29, 72, 0.08);

  /* Typography Colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #ffffff;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 40px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-os: 0 20px 50px -10px rgba(37, 99, 235, 0.15), 0 0 1px 1px rgba(15, 23, 42, 0.06);

  /* Ambient Grid */
  --grid-line-color: rgba(15, 23, 42, 0.035);
  --radial-gradient-1: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05) 0%, transparent 45%);
  --radial-gradient-2: radial-gradient(circle at 90% 80%, rgba(5, 150, 105, 0.04) 0%, transparent 45%);

  --color-scheme: light;
}

html[data-theme="dark"] {
  /* Surface & Background */
  --bg-base: #090d16;
  --bg-surface: #0f172a;
  --bg-surface-elevated: #1e293b;
  --bg-surface-hover: #27354f;
  --bg-surface-subtle: #162032;
  --bg-surface-glass: rgba(15, 23, 42, 0.88);
  --bg-os-window: #0f172a;
  --bg-os-header: #090d16;
  --bg-os-inner: #070b14;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(59, 130, 246, 0.5);
  --border-focus: #3b82f6;

  /* Brand & Multi-Accent Colors */
  --accent-primary: #3b82f6;
  --accent-primary-hover: #2563eb;
  --accent-primary-light: #60a5fa;
  --accent-primary-subtle: rgba(59, 130, 246, 0.12);
  --accent-primary-glow: rgba(59, 130, 246, 0.3);

  --accent-indigo: #6366f1;
  --accent-indigo-subtle: rgba(99, 102, 241, 0.12);

  --accent-cyan: #06b6d4;
  --accent-cyan-light: #38bdf8;
  --accent-cyan-subtle: rgba(6, 182, 212, 0.12);
  --accent-cyan-glow: rgba(6, 182, 212, 0.25);

  --accent-emerald: #10b981;
  --accent-emerald-light: #34d399;
  --accent-emerald-subtle: rgba(16, 185, 129, 0.12);
  --accent-emerald-glow: rgba(16, 185, 129, 0.25);

  --accent-amber: #f59e0b;
  --accent-amber-light: #fbbf24;
  --accent-amber-subtle: rgba(245, 158, 11, 0.12);

  --accent-coral: #f43f5e;
  --accent-coral-light: #fb7185;
  --accent-coral-subtle: rgba(244, 63, 94, 0.12);

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dim: #475569;
  --text-inverse: #0f172a;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7);
  --shadow-os: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);

  /* Ambient Grid */
  --grid-line-color: rgba(255, 255, 255, 0.02);
  --radial-gradient-1: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 45%);
  --radial-gradient-2: radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 45%);

  --color-scheme: dark;
}

/* Global Constants */
:root {
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;

  --nav-height: 72px;
  --max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   BASE RESET & TYPOGRAPHY
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  color-scheme: var(--color-scheme);
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  background-image: var(--radial-gradient-1), var(--radial-gradient-2);
  background-attachment: fixed;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Ambient Background Grid */
.bg-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 60%, transparent 100%);
}

.app-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main.main-content {
  flex: 1 0 auto;
  padding-top: var(--nav-height);
}

.site-container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Headings & Text */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

h4 {
  font-size: 1.2rem;
}

p {
  color: var(--text-secondary);
  font-size: 1rem;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-primary-hover);
}

code,
.font-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   NAVIGATION BAR
   -------------------------------------------------------------------------- */
.site-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height, 72px);
  background: var(--bg-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 9999 !important;
  transition: all var(--transition-normal);
}

.site-navbar.scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--border-medium);
}

.site-navbar .site-container {
  padding-left: 0.75rem;
  padding-right: 1.25rem;
}

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

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-left: -0.6rem; /* Shift avatar and name to the left in web view */
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.brand-logo:hover {
  color: var(--text-primary);
  opacity: 0.92;
}

.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.brand-logo:hover .brand-icon {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

.brand-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0.4rem;
}

.nav-link-item {
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-link-item:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface-hover);
}

.nav-link-item.active {
  color: var(--accent-primary);
  font-weight: 600;
  background-color: var(--accent-primary-subtle);
}

/* Day in Life Nav Pill */
.nav-link-story-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Dedicated Page Return Navigation (Constant / Sticky Back to Home) */
.page-nav-bar {
  position: sticky;
  top: 76px;
  z-index: 990;
  display: inline-flex;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  pointer-events: none;
}

/* Fixed constant Back to Home / Back to Projects buttons */
.split-about-wrapper .page-nav-bar,
.project-detail-nav-bar {
  position: fixed !important;
  top: calc(var(--nav-height, 72px) + 12px) !important;
  left: max(1.25rem, calc((100vw - var(--max-width, 1400px)) / 2 + 1.25rem)) !important;
  z-index: 1000 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.btn-page-back {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  background: var(--bg-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: all var(--transition-fast);
}

.btn-page-back i {
  font-size: 0.95rem;
  transition: transform var(--transition-fast);
}

.btn-page-back:hover {
  color: #ffffff;
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  transform: translateX(-3px);
  box-shadow: 0 4px 20px var(--accent-primary-glow);
}

/* Story Intro Prompt (Placed Above Chapter 1 Cue Card) */
.story-intro-prompt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: promptFloat 2.5s infinite ease-in-out;
}

.story-intro-prompt.hint-hidden {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

.prompt-pulse-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulseDot 1.8s infinite ease-in-out;
}

.story-intro-prompt i {
  color: var(--accent-cyan);
}

/* Story Scroll Indicator Banner (Mobile Only, Hidden on Desktop) */
.story-scroll-banner {
  display: none;
}

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

@keyframes chevronNudge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

.scroll-banner-arrow {
  font-size: 0.82rem;
  animation: chevronNudge 1.6s infinite ease-in-out;
}

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

@keyframes chevronNudge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

/* Embedded Nested PDF Viewer with Exact A4 Aspect Ratio (No Black Space, No Scrollbars) */
.resume-iframe-container {
  max-width: 920px;
  width: 100%;
  margin: 0 auto 2.5rem auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16);
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  position: relative;
}

.resume-iframe-exact {
  width: 100%;
  aspect-ratio: 1 / 1.414; /* Exact A4 1-page document ratio */
  min-height: 520px;
  border: none;
  display: block;
  background: #ffffff;
}

.resume-pdf-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Official Resume Paper Preview Document */
.resume-paper-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 3rem 3.5rem;
  max-width: 960px;
  margin: 0 auto 2.5rem auto;
  box-shadow: var(--shadow-md);
  position: relative;
}

.resume-header-block {
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
}

.resume-section-block {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.resume-section-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.resume-section-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.resume-contact-bar {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.resume-skills-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.resume-skill-cat-card {
  display: flex;
  gap: 0.5rem;
}

.skill-cat-label {
  color: var(--text-primary);
  min-width: 170px;
}

.skill-cat-items {
  color: var(--text-secondary);
}

/* Contact Methods List */
.contact-methods-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-method-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-method-card.featured-whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.05), transparent 75%), var(--bg-surface-subtle);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
}

html[data-theme="dark"] .contact-method-card.featured-whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), rgba(11, 16, 27, 0.95));
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.arch-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  margin-top: 2px;
}

.arch-icon.blue {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

.arch-icon.cyan {
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.2);
}

.arch-icon.emerald {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
}

.arch-icon.amber {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
}

.arch-icon.whatsapp-icon {
  color: #25D366;
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.3);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.18);
}

.contact-method-content {
  min-width: 0;
  flex: 1;
}

.contact-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

.whatsapp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(37, 211, 102, 0.12);
  color: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.28);
}

.contact-val-row {
  margin: 0.15rem 0 0.4rem 0;
}

.contact-phone-link {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.contact-phone-link:hover {
  color: #25D366;
}

.contact-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.btn-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  line-height: 1.2;
}

.btn-action-whatsapp {
  background: #25D366;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.28);
}

.btn-action-whatsapp:hover {
  background: #20bd5a;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  transform: translateY(-1px);
}

.btn-action-call,
.btn-action-copy {
  background: var(--bg-surface);
  color: var(--text-primary) !important;
  border-color: var(--border-medium);
}

.btn-action-call:hover,
.btn-action-copy:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-hover);
  color: var(--accent-primary) !important;
  transform: translateY(-1px);
}

.btn-action-pill:active {
  transform: scale(0.94);
}

.contact-method-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  display: block;
}

.contact-method-link,
.contact-method-text {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mobile App-Style Bottom Dock & Onboarding Hint (Hidden on Desktop) */
.mobile-bottom-dock,
.mobile-dock-hint {
  display: none !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1.15rem;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.theme-toggle-btn .icon-sun {
  display: none;
  color: var(--accent-amber);
}

.theme-toggle-btn .icon-moon {
  display: block;
  color: var(--accent-indigo);
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: none;
}

/* Mobile Nav */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
}

.mobile-drawer {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 100%;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transform: translateY(-120%);
  transition: transform var(--transition-normal);
  z-index: 999;
}

.mobile-drawer.open {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   BUTTONS & ACTIONS
   -------------------------------------------------------------------------- */
.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  font-size: 0.93rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn-modern:hover {
  transform: translateY(-1px);
}

.btn-modern:active {
  transform: translateY(0);
}

.btn-primary-glow {
  background-color: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 4px 14px var(--accent-primary-glow);
}

.btn-primary-glow:hover {
  background-color: var(--accent-primary-hover);
  color: #ffffff;
  box-shadow: 0 6px 20px var(--accent-primary-glow);
}

.btn-secondary-outline {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn-secondary-outline:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.btn-subtle {
  background: transparent;
  color: var(--text-secondary);
}

.btn-subtle:hover {
  color: var(--accent-primary);
  background-color: var(--accent-primary-subtle);
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.84rem;
}

.btn-lg {
  padding: 0.85rem 1.75rem;
  font-size: 1.02rem;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   BADGES & STATUS PILLS
   -------------------------------------------------------------------------- */
.badge-tech {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background-color: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.badge-tech:hover {
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.badge-tech.accent {
  background-color: var(--accent-primary-subtle);
  color: var(--accent-primary);
  border-color: rgba(37, 99, 235, 0.2);
}

.badge-category {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  background-color: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
  animation: pulseStatus 2.2s infinite ease-in-out;
}

@keyframes pulseStatus {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.7;
  }
}

.hero-section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 1rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: clamp(2.35rem, 5vw, 3.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.name-highlight {
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-roles-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 1.25rem;
  min-height: 2.2rem;
}

.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1.2em;
  background-color: var(--accent-primary);
  margin-left: 2px;
  animation: blinkCursor 0.85s infinite;
  vertical-align: middle;
}

@keyframes blinkCursor {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 2.25rem;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-box-col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   LO-FI ANIMATED DEVELOPER WORKSPACE SCENE
   -------------------------------------------------------------------------- */
.lofi-card-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #070a14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(37, 99, 235, 0.22);
  cursor: pointer;
  perspective: 1000px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.lofi-card-wrap:hover {
  border-color: rgba(108, 168, 255, 0.45);
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.6), 0 0 50px -5px rgba(37, 99, 235, 0.35);
}

/* Isolated 3D Tilt Layer (Synchronized image + animation reveal) */
.lofi-tilt-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, opacity 0.35s ease-in;
  pointer-events: none;
  opacity: 0;
}

.lofi-card-wrap.is-loaded .lofi-tilt-layer,
.lofi-tilt-layer.is-loaded {
  opacity: 1;
}

/* Day, Sunset & Night Base Artworks (Smooth 1.2s Crossfade) */
.lofi-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: lofiBreathe 8s ease-in-out infinite alternate;
}

.lofi-bg-day {
  opacity: 1;
  z-index: 1;
}

.lofi-bg-sunset {
  opacity: 0;
  z-index: 2;
}

.lofi-bg-night {
  opacity: 0;
  z-index: 3;
}

/* Explicit Active Mode Overrides (Card & Expanded Modal Sync) */
.lofi-card-wrap.day-mode .lofi-bg-day,
.lofi-modal-art-pane.day-mode .lofi-bg-day,
.lofi-modal-dialog.day-mode .lofi-bg-day {
  opacity: 1;
}

.lofi-card-wrap.day-mode .lofi-bg-sunset,
.lofi-modal-art-pane.day-mode .lofi-bg-sunset,
.lofi-modal-dialog.day-mode .lofi-bg-sunset {
  opacity: 0;
}

.lofi-card-wrap.day-mode .lofi-bg-night,
.lofi-modal-art-pane.day-mode .lofi-bg-night,
.lofi-modal-dialog.day-mode .lofi-bg-night {
  opacity: 0;
}

.lofi-card-wrap.sunset-mode .lofi-bg-day,
.lofi-modal-art-pane.sunset-mode .lofi-bg-day,
.lofi-modal-dialog.sunset-mode .lofi-bg-day {
  opacity: 0;
}

.lofi-card-wrap.sunset-mode .lofi-bg-sunset,
.lofi-modal-art-pane.sunset-mode .lofi-bg-sunset,
.lofi-modal-dialog.sunset-mode .lofi-bg-sunset {
  opacity: 1;
}

.lofi-card-wrap.sunset-mode .lofi-bg-night,
.lofi-modal-art-pane.sunset-mode .lofi-bg-night,
.lofi-modal-dialog.sunset-mode .lofi-bg-night {
  opacity: 0;
}

.lofi-card-wrap.night-mode .lofi-bg-day,
.lofi-modal-art-pane.night-mode .lofi-bg-day,
.lofi-modal-dialog.night-mode .lofi-bg-day {
  opacity: 0;
}

.lofi-card-wrap.night-mode .lofi-bg-sunset,
.lofi-modal-art-pane.night-mode .lofi-bg-sunset,
.lofi-modal-dialog.night-mode .lofi-bg-sunset {
  opacity: 0;
}

.lofi-card-wrap.night-mode .lofi-bg-night,
.lofi-modal-art-pane.night-mode .lofi-bg-night,
.lofi-modal-dialog.night-mode .lofi-bg-night {
  opacity: 1;
}

@keyframes lofiBreathe {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.02);
  }
}

/* Canvas Overlays */
.lofi-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* Atmospheric Lighting Glows */
.lofi-lamp-glow {
  position: absolute;
  top: 45%;
  left: 8%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(242, 182, 109, 0.24) 0%, rgba(242, 182, 109, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lofi-monitor-glow {
  position: absolute;
  top: 32%;
  left: 20%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(108, 168, 255, 0.22) 0%, rgba(108, 168, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lofi-sunlight-beam {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 70%;
  background: linear-gradient(135deg, rgba(255, 245, 220, 0.12) 0%, rgba(255, 245, 220, 0) 65%);
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lofi-sunset-beam {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 80%;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(217, 70, 239, 0.08) 50%, transparent 80%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lighting Mode Multipliers (Card & Modal) */
.lofi-card-wrap.day-mode .lofi-sunlight-beam,
.lofi-modal-dialog.day-mode .lofi-sunlight-beam {
  opacity: 1;
}

.lofi-card-wrap.day-mode .lofi-sunset-beam,
.lofi-modal-dialog.day-mode .lofi-sunset-beam {
  opacity: 0;
}

.lofi-card-wrap.day-mode .lofi-lamp-glow,
.lofi-modal-dialog.day-mode .lofi-lamp-glow {
  opacity: 0;
}

.lofi-card-wrap.day-mode .lofi-monitor-glow,
.lofi-modal-dialog.day-mode .lofi-monitor-glow {
  opacity: 0;
}

.lofi-card-wrap.sunset-mode .lofi-sunlight-beam,
.lofi-modal-dialog.sunset-mode .lofi-sunlight-beam {
  opacity: 0;
}

.lofi-card-wrap.sunset-mode .lofi-sunset-beam,
.lofi-modal-dialog.sunset-mode .lofi-sunset-beam {
  opacity: 1;
}

.lofi-card-wrap.sunset-mode .lofi-lamp-glow,
.lofi-modal-dialog.sunset-mode .lofi-lamp-glow {
  opacity: 0.55;
}

.lofi-card-wrap.sunset-mode .lofi-monitor-glow,
.lofi-modal-dialog.sunset-mode .lofi-monitor-glow {
  opacity: 0.45;
}

.lofi-card-wrap.night-mode .lofi-sunlight-beam,
.lofi-modal-dialog.night-mode .lofi-sunlight-beam {
  opacity: 0;
}

.lofi-card-wrap.night-mode .lofi-sunset-beam,
.lofi-modal-dialog.night-mode .lofi-sunset-beam {
  opacity: 0;
}

.lofi-card-wrap.night-mode .lofi-lamp-glow,
.lofi-modal-dialog.night-mode .lofi-lamp-glow {
  opacity: 1;
}

.lofi-card-wrap.night-mode .lofi-monitor-glow,
.lofi-modal-dialog.night-mode .lofi-monitor-glow {
  opacity: 1;
}

/* Floating Top Glass Bar (Completely Flat & Untilted) */
.lofi-top-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
}

.lofi-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(11, 16, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lofi-top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
}

.lofi-mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  background: rgba(11, 16, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #f1f5f9;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lofi-mode-toggle-btn:hover {
  background: rgba(242, 182, 109, 0.3);
  border-color: rgba(242, 182, 109, 0.5);
  color: #ffffff;
}

.lofi-expand-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  background: rgba(11, 16, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lofi-expand-hint:hover {
  background: rgba(37, 99, 235, 0.8);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   EXPANDED LO-FI WORKSPACE MODAL
   -------------------------------------------------------------------------- */
.lofi-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 10, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lofi-modal-backdrop.open {
  display: flex;
  opacity: 1;
}

.lofi-modal-dialog {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 60px rgba(37, 99, 235, 0.25);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  color: #f1f5f9;
  position: relative;
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lofi-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.4);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.lofi-modal-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.08);
}

.lofi-modal-art-pane {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #070a14;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.lofi-modal-art-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lofi-modal-ctrl-pane {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #0b1120;
}

.lofi-modal-header h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.lofi-modal-header p {
  font-size: 0.88rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.lofi-soundtrack-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 1.15rem;
}

.lofi-screen-viewer {
  background: #030712;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #38bdf8;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .lofi-modal-backdrop {
    padding: 0.5rem !important;
  }

  .lofi-modal-dialog {
    grid-template-columns: 1fr !important;
    max-height: 94vh !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: var(--radius-md) !important;
  }

  .lofi-modal-close-btn {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8) !important;
  }

  .lofi-modal-art-pane {
    width: 100% !important;
    height: clamp(140px, 22vh, 180px) !important;
    aspect-ratio: auto !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .lofi-modal-ctrl-pane {
    padding: 0.75rem 0.85rem !important;
    gap: 0.5rem !important;
    background: #0b1120 !important;
  }

  .lofi-modal-header h3 {
    font-size: 1.05rem !important;
    margin-bottom: 0.1rem !important;
    line-height: 1.2 !important;
  }

  .lofi-modal-header p {
    font-size: 0.68rem !important;
    margin-bottom: 0 !important;
  }

  .lofi-soundtrack-card {
    padding: 0.55rem 0.7rem !important;
    border-radius: 8px !important;
  }

  .lofi-screen-viewer {
    padding: 0.45rem 0.6rem !important;
    font-size: 0.65rem !important;
    line-height: 1.35 !important;
  }

  .lofi-screen-viewer pre {
    font-size: 0.65rem !important;
  }

  .lofi-play-toggle-btn {
    padding: 0.24rem 0.65rem !important;
    font-size: 0.68rem !important;
  }

  .lofi-modal-ctrl-pane .btn-modern {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.6rem !important;
  }
}

/* --------------------------------------------------------------------------
   PROJECT CARDS & WORK SHOWCASE
   -------------------------------------------------------------------------- */
.project-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  content-visibility: auto;
  contain-intrinsic-size: auto 450px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.project-card:active {
  transform: scale(0.988);
}

.project-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.project-card-image-wrap {
  width: 100%;
  height: 220px;
  background-color: var(--bg-surface-subtle);
  overflow: hidden;
  position: relative;
}

.project-card-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-card-image {
  transform: scale(1.04);
}

.project-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.project-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.project-card-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.project-card-title a:hover {
  color: var(--accent-primary);
}

.project-card-description {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.project-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

/* Category Filter Tabs */
.filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

.filter-btn {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.filter-btn.active {
  background-color: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 10px var(--accent-primary-glow);
}

/* --------------------------------------------------------------------------
   SERVICES & CAPABILITIES
   -------------------------------------------------------------------------- */
.service-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.service-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.service-card-image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.service-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-card-image {
  transform: scale(1.05);
}

.service-image-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.service-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-primary-subtle);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.service-short-summary {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.service-offering-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-included-section {
  margin-bottom: 1rem;
}

.service-included-heading {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.service-included-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.service-included-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.service-included-item i {
  color: var(--accent-emerald);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.service-deliverable-box {
  background-color: var(--bg-surface-subtle);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-top: 1.25rem;
  border: 1px solid var(--border-subtle);
}

.service-deliverable-item {
  margin-bottom: 0.5rem;
}

.service-deliverable-item:last-child {
  margin-bottom: 0;
}

.service-deliverable-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}

.service-deliverable-label.label-cyan {
  color: var(--accent-cyan);
}

.service-deliverable-label.label-primary {
  color: var(--accent-primary);
}

.service-deliverable-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.service-deliverable-text.font-bold {
  color: var(--text-primary);
  font-weight: 600;
}

/* How We Work Process Cue Cards */
.process-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.process-step-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.35rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-normal);
}

.process-step-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   COMPACT CERTIFICATION CHIPS (A Day in My Life - Chapter 03)
   -------------------------------------------------------------------------- */
.cert-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.cert-chip-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.75rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  width: 100%;
}

.cert-chip-card:hover {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.cert-chip-card i {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.cert-chip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cert-chip-info strong {
  font-size: 0.76rem;
  color: #f8fafc;
}

.cert-chip-info span {
  font-size: 0.68rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.project-card-image-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
}

/* --------------------------------------------------------------------------
   INTERACTIVE STANDING COMPANION AVATAR (A Day in My Life - Parmeet Mascot)
   -------------------------------------------------------------------------- */
.stage-companion-avatar {
  display: none !important; /* Hidden on Desktop/Web view, enabled only on Mobile */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  position: relative;
  pointer-events: none;
  animation: companionFloat 4s ease-in-out infinite alternate;
}

@keyframes companionFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

.companion-avatar-img {
  max-width: 140px;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.18));
  transition: transform 0.3s ease;
}

.companion-avatar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-top: -0.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

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

.process-step-number {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-primary);
  background: var(--accent-primary-subtle);
  border: 1px solid rgba(37, 99, 235, 0.2);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all var(--transition-fast);
}

.process-step-card:hover .process-step-number {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px var(--accent-primary-glow);
}

.process-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.process-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ABOUT & RESUME
   -------------------------------------------------------------------------- */
.about-intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
}

.skills-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.skill-category-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.skill-category-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timeline-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 2rem;
  border-left: 2px solid var(--border-subtle);
}

.timeline-dot {
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  border: 2px solid var(--bg-base);
}

.resume-paper-preview {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-md);
  max-width: 900px;
  margin: 0 auto;
}

.resume-header-block {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2rem;
}

.resume-section-block {
  margin-bottom: 2rem;
}

.resume-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary-subtle);
  padding-bottom: 0.4rem;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   CONTACT FORM & INPUTS
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}

textarea.form-control {
  resize: vertical;
  min-height: 130px;
}

/* --------------------------------------------------------------------------
   CTA BANNERS & FOOTER
   -------------------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-subtle));
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem;
  box-shadow: var(--shadow-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-cyan), var(--accent-emerald));
}

.cta-banner-content {
  max-width: 650px;
  margin: 0 auto;
}

.site-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-col h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

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

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.88rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   LAYOUT UTILITIES & RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ==========================================================================
   HOMEPAGE HERO TO TOOLKIT TRANSITION & SKILLS STRIP
   ========================================================================== */
.home-hero-transition-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1.25rem;
  margin-bottom: 1.5rem;
  pointer-events: none;
}

.home-hero-transition-line {
  width: 100%;
  max-width: var(--max-width);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 20%, rgba(59, 130, 246, 0.45) 50%, var(--border-subtle) 80%, transparent 100%);
  opacity: 0.9;
}

.home-hero-transition-glow {
  position: absolute;
  width: 280px;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.22) 0%, transparent 70%);
  filter: blur(8px);
}

.home-skills-strip {
  padding: 3.25rem 0 3.5rem 0;
  position: relative;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-subtle);
  margin-top: 0.5rem;
}

.skills-strip-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.skills-strip-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.skills-strip-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.26rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-full);
}

.skills-strip-heading {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text-primary);
}

.skills-explore-link {
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.skills-explore-link:hover {
  color: var(--accent-primary);
  transform: translateX(2px);
}

.skills-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.95rem;
}

.skill-mini-category {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.skill-mini-category:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.skill-cat-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.skill-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 500;
  font-family: var(--font-mono);
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.skill-chip:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary-subtle);
  background: var(--accent-primary-subtle);
}

.section-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section-header {
  margin-bottom: 2.75rem;
}

.section-subtitle {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  margin-bottom: 0.75rem;
}

.section-description {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   CASE STUDY & PROJECT DETAIL STYLES
   -------------------------------------------------------------------------- */
.case-study-hero {
  padding: 2.5rem 0 2rem 0;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.breadcrumbs a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--accent-primary);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  transition: all var(--transition-fast);
}

.back-link:hover {
  color: var(--accent-primary);
  transform: translateX(-3px);
}

.project-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 1.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-top: 2rem;
}

.meta-strip-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.meta-strip-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.meta-strip-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.project-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  margin-top: 2.5rem;
  align-items: start;
}

.case-study-main {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.case-study-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.case-study-block:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
}

.case-study-block h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.case-study-block h3 i {
  font-size: 1.4rem;
}

.case-study-block p {
  margin-bottom: 0;
}

.case-study-block p:not(:last-child) {
  margin-bottom: 1.25rem;
}

.case-study-block ul {
  margin-bottom: 0;
}

.case-study-sidebar {
  position: relative;
}

/* --------------------------------------------------------------------------
   INTERACTIVE PRODUCT SHOWCASE ENGINE (GaadiMandi & Flagship Case Studies)
   -------------------------------------------------------------------------- */
.interactive-showcase-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 3.5rem;
}

.showcase-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: rgba(11, 16, 32, 0.9);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.showcase-nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.showcase-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.showcase-tab-btn:hover {
  background: rgba(0, 242, 254, 0.12);
  color: #ffffff;
  border-color: rgba(0, 242, 254, 0.35);
}

.showcase-tab-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.showcase-auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-full);
  color: #34d399;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.showcase-auto-btn:hover {
  background: rgba(16, 185, 129, 0.22);
}

.showcase-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 580px;
  overflow: hidden;
  background: #07090e;
}

.showcase-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.65s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.showcase-layer.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.showcase-cursor {
  position: absolute;
  top: 60%;
  left: 65%;
  color: #38bdf8;
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  pointer-events: none;
  z-index: 10;
  transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), left 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  opacity: 0;
}

.showcase-caption-bar {
  padding: 1rem 1.5rem;
  background: var(--bg-surface-subtle);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.showcase-caption-item {
  display: none;
}

.showcase-caption-item.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.showcase-caption-item strong {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   GAADIMANDI HIGH-IMPACT CASE STUDY DESIGN SYSTEM
   -------------------------------------------------------------------------- */
.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.cs-meta-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.cs-meta-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.cs-meta-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.cs-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 860px) {
  .cs-problem-grid {
    grid-template-columns: 1fr;
  }
}

.cs-problem-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.cs-problem-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.35);
}

.cs-problem-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-amber);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cs-problem-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-flow-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
}

.cs-flow-node {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.cs-flow-node.highlight {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.cs-flow-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.cs-url-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  background: rgba(11, 16, 27, 0.95);
  border: 1px solid rgba(0, 242, 254, 0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.12);
  font-family: var(--font-mono);
  font-size: 0.98rem;
  color: #00f2fe;
  font-weight: 700;
  margin: 1rem 0;
}

.cs-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.cs-feature-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.cs-feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 242, 254, 0.35);
}

.cs-feature-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.cs-feature-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.cs-workflow-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.35rem;
}

.cs-workflow-step {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: 0.45rem;
}

.cs-workflow-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.cs-callout-box {
  background: rgba(0, 242, 254, 0.04);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-left: 4px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
}

.cs-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cs-swatch-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.cs-swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cs-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.cs-metric-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.cs-metric-num {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent-cyan);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.cs-metric-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cs-footer-summary {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.cs-footer-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-cyan), var(--accent-emerald));
}

.cs-footer-summary h3,
.cs-footer-summary .cs-footer-title {
  color: var(--text-primary);
  font-family: var(--font-display);
}

.cs-footer-summary p {
  color: var(--text-secondary);
}

html[data-theme="dark"] .cs-footer-summary {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .cs-footer-summary h3,
html[data-theme="dark"] .cs-footer-summary .cs-footer-title {
  color: #ffffff;
}

html[data-theme="dark"] .cs-footer-summary p {
  color: #cbd5e1;
}

@media (max-width: 992px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2rem;
    align-items: center;
  }

  .about-intro-grid,
  .project-detail-layout {
    grid-template-columns: 1fr;
  }

  .case-study-block {
    padding: 1.75rem;
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .grid-4,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  /* Grid of 3 (3 vertical columns across Home Featured Engineering, What I Build, Work, Services) */
  .grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .process-workflow-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }

  .project-card,
  .service-card {
    border-radius: var(--radius-sm) !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .project-card-image-wrap,
  .service-card-image-wrap {
    width: 100% !important;
    height: 80px !important;
    max-height: 80px !important;
    aspect-ratio: auto !important;
  }

  .project-card-image,
  .service-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .service-image-tag {
    top: 4px !important;
    left: 4px !important;
    padding: 0.12rem 0.28rem !important;
    font-size: 0.46rem !important;
    gap: 0.15rem !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  .service-image-tag i {
    font-size: 0.48rem !important;
  }

  .project-card-body,
  .service-card-body {
    padding: 0.5rem 0.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  /* Domain / Category Micro-Pill (Sleek, Single-Line, Compact) */
  .project-card-badge-row {
    margin-bottom: 0.2rem !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .badge-project-category {
    font-size: 0.44rem !important;
    padding: 0.08rem 0.32rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--radius-full) !important;
    border-width: 1px !important;
  }

  /* Headings: 100% fully readable without ugly dotted ellipsis truncation, wraps cleanly to next line */
  .project-card-title,
  .service-card-title {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    display: block !important;
  }

  .project-card-title a,
  .service-card-title a {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    display: inline !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .project-card-description,
  .service-short-summary,
  .service-card-body > p {
    font-size: 0.54rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.35rem !important;
    color: var(--text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .service-offering-badge {
    font-size: 0.46rem !important;
    letter-spacing: 0.04em !important;
  }

  /* Technology Badges in Featured Engineering (Compact & Professional) */
  .project-tech-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.14rem !important;
    margin-top: auto !important;
    margin-bottom: 0.3rem !important;
  }

  .badge-tech {
    font-size: 0.46rem !important;
    padding: 0.05rem 0.2rem !important;
    border-radius: 3px !important;
    line-height: 1.15 !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    border: 1px solid var(--border-subtle) !important;
  }

  /* Services Checklist & Tick Marks (Clean, Proportional & High-Precision) */
  .service-included-section {
    margin-bottom: 0.35rem !important;
  }

  .service-included-heading {
    font-size: 0.48rem !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted) !important;
    margin-bottom: 0.2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .service-included-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.16rem !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
  }

  .service-included-item {
    display: flex !important;
    gap: 0.2rem !important;
    align-items: flex-start !important;
    line-height: 1.25 !important;
  }

  .service-included-item i {
    color: var(--accent-emerald) !important;
    font-size: 0.52rem !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
  }

  .service-included-item span {
    font-size: 0.48rem !important;
    line-height: 1.25 !important;
    color: var(--text-secondary) !important;
  }

  /* Deliverable Boxes */
  .service-deliverable-box {
    padding: 0.28rem 0.35rem !important;
    margin-top: auto !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--bg-surface-subtle) !important;
  }

  .service-deliverable-item {
    margin-bottom: 0.15rem !important;
  }

  .service-deliverable-item:last-child {
    margin-bottom: 0 !important;
  }

  .service-deliverable-label {
    font-size: 0.44rem !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.04rem !important;
    display: block !important;
  }

  .service-deliverable-text {
    font-size: 0.5rem !important;
    line-height: 1.25 !important;
    display: block !important;
  }

  /* Action Bar on Project Cards */
  .project-card-body .d-flex.align-items-center {
    padding-top: 0.3rem !important;
    margin-top: auto !important;
  }

  .project-card-body .btn-modern.btn-subtle {
    font-size: 0.52rem !important;
    padding: 0 !important;
    font-weight: 600 !important;
  }

  .project-card-body .btn-modern.btn-subtle.btn-sm {
    font-size: 0.52rem !important;
  }

  .project-card-body div[style*="display: flex; gap: 0.5rem"] {
    gap: 0.25rem !important;
  }

  .project-card-body .btn-modern.btn-subtle i {
    font-size: 0.54rem !important;
  }

  /* Mobile Top Navbar (Clean: Avatar + Name on Left, Theme Toggle on Right) */
  .site-navbar {
    height: 60px !important;
    min-height: 60px !important;
    z-index: 9999 !important;
    background: var(--bg-surface) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  }

  .site-navbar .nav-inner {
    height: 60px !important;
    min-height: 60px !important;
  }

  main.main-content {
    padding-top: 60px !important;
    padding-bottom: 96px !important; /* Clears generous space for floating vibe-coding bottom dock */
  }

  /* Global screen lock on mobile without breaking position: sticky */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
  }

  .site-container {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .split-about-wrapper,
  .split-about-grid {
    overflow: visible !important;
  }

  /* Constant / Sticky Back Navigation on Mobile Subpages */
  .page-nav-bar {
    top: 64px !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.5rem !important;
  }

  .split-about-wrapper .page-nav-bar,
  .project-detail-nav-bar {
    top: 66px !important;
    left: 0.65rem !important;
  }

  .btn-page-back {
    padding: 0.28rem 0.7rem !important;
    font-size: 0.72rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  }

  /* ==========================================================================
     PROJECT DETAIL & CASE STUDY MOBILE INTERFACE OPTIMIZATION
     ========================================================================== */
  .project-detail-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .case-study-hero {
    padding: 2.25rem 0 1.25rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .case-study-hero .hero-title {
    font-size: clamp(1.45rem, 5vw, 1.95rem) !important;
    line-height: 1.2 !important;
    margin: 0.5rem 0 !important;
    word-break: break-word !important;
  }

  .case-study-hero .lead {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  .breadcrumbs {
    font-size: 0.7rem !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.5rem !important;
  }

  .project-meta-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    padding: 0.85rem 1rem !important;
    margin-top: 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .meta-strip-item div[style*="display: flex; gap: 0.75rem"] {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .meta-strip-item .btn-modern {
    font-size: 0.72rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  /* Interactive Showcase Container Mobile (GaadiMandi, TourCraze, TradeLab) */
  .interactive-showcase-container {
    border-radius: var(--radius-md) !important;
    margin-bottom: 1.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .showcase-control-bar {
    padding: 0.5rem 0.65rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .showcase-nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0.35rem !important;
    padding-bottom: 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .showcase-nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .showcase-tab-btn {
    padding: 0.25rem 0.55rem !important;
    font-size: 0.64rem !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .showcase-tab-btn i {
    font-size: 0.65rem !important;
  }

  .showcase-auto-btn {
    padding: 0.22rem 0.55rem !important;
    font-size: 0.6rem !important;
    align-self: flex-start !important;
  }

  .showcase-caption-bar {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
  }

  /* Case Study Main Column & Content Blocks */
  .case-study-main {
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .case-study-block {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .case-study-block h2 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .case-study-block h3 {
    font-size: 1.05rem !important;
    gap: 0.45rem !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.5rem !important;
  }

  .case-study-block h3 i {
    font-size: 1.1rem !important;
  }

  .case-study-block p {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }

  .case-study-block p:not(:last-child) {
    margin-bottom: 0.85rem !important;
  }

  /* Case Study Cue Grids & Cards */
  .cs-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }

  .cs-meta-card {
    padding: 0.65rem 0.8rem !important;
  }

  .cs-meta-label {
    font-size: 0.62rem !important;
    margin-bottom: 0.2rem !important;
  }

  .cs-meta-value {
    font-size: 0.8rem !important;
  }

  .cs-problem-grid,
  .cs-feature-grid,
  .cs-workflow-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    margin-top: 0.85rem !important;
    width: 100% !important;
  }

  .cs-problem-card,
  .cs-feature-card,
  .cs-workflow-card {
    padding: 0.85rem 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-problem-title,
  .cs-feature-title {
    font-size: 0.74rem !important;
    margin-bottom: 0.35rem !important;
  }

  .cs-problem-text,
  .cs-feature-text {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .cs-workflow-step {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
  }

  .cs-workflow-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.25rem !important;
  }

  .cs-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-top: 0.85rem !important;
    width: 100% !important;
  }

  .cs-metric-card {
    padding: 0.75rem 0.5rem !important;
  }

  .cs-metric-num {
    font-size: 1.25rem !important;
    margin-bottom: 0.15rem !important;
  }

  .cs-metric-label {
    font-size: 0.68rem !important;
  }

  .cs-flow-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    padding: 0.65rem 0.75rem !important;
    margin-top: 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-flow-node {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.25rem !important;
  }

  .cs-flow-arrow {
    font-size: 0.7rem !important;
  }

  .cs-url-highlight {
    font-size: 0.72rem !important;
    padding: 0.5rem 0.75rem !important;
    max-width: 100% !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
    display: flex !important;
    gap: 0.4rem !important;
    margin: 0.65rem 0 !important;
  }

  .cs-callout-box {
    padding: 0.85rem 0.95rem !important;
    margin-top: 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-callout-box strong,
  .cs-callout-box div {
    font-size: 0.92rem !important;
  }

  .cs-callout-box span {
    font-size: 0.8rem !important;
  }

  .cs-swatches-grid {
    gap: 0.35rem !important;
    margin-top: 0.65rem !important;
    width: 100% !important;
  }

  .cs-swatch-item {
    font-size: 0.68rem !important;
    padding: 0.25rem 0.45rem !important;
    gap: 0.35rem !important;
  }

  .cs-swatch-dot {
    width: 10px !important;
    height: 10px !important;
  }

  .cs-footer-summary {
    padding: 1.5rem 1rem !important;
    border-radius: var(--radius-md) !important;
    margin-top: 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-footer-summary h3 {
    font-size: 1.35rem !important;
  }

  .cs-footer-summary p {
    font-size: 0.82rem !important;
    margin-bottom: 1rem !important;
  }

  .cs-footer-summary .btn-modern {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
  }

  /* Case Study Sidebar (Stacked & Unpinned on Mobile) */
  .case-study-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .case-study-sidebar .modern-card {
    position: static !important;
    padding: 1.25rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bottom Prev / Next Nav */
  nav[aria-label="Project Navigation"] {
    flex-direction: column !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
    padding: 1.5rem 0 1rem 0 !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
  }

  nav[aria-label="Project Navigation"] a.btn-modern {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    padding: 0.55rem 0.85rem !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     MOBILE FOOTER: HIDDEN COMPLETELY (VIBE-CODING NATIVE APP LAYOUT)
     ========================================================================== */
  .site-footer {
    display: none !important;
  }

  .site-navbar .site-container {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  /* ==========================================================================
     VIBE-CODING FLOATING PILL NAVBAR (MOBILE BOTTOM DOCK)
     ========================================================================== */
  .mobile-bottom-dock {
    display: block !important;
    position: fixed !important;
    bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    max-width: 440px !important;
    height: 60px !important;
    background: rgba(10, 15, 29, 0.86) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border: 1px solid rgba(0, 242, 254, 0.28) !important;
    border-radius: 9999px !important;
    z-index: 9999 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 242, 254, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  [data-theme="light"] .mobile-bottom-dock {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.15), 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  }

  /* First-Time Onboarding Pointer Hint Floating Above the Bottom Dock (Shows after 15s) */
  .mobile-dock-hint {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translate(-50%, 14px) scale(0.92) !important;
    z-index: 10000 !important;
    display: none !important;
    opacity: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
    width: max-content !important;
    max-width: 90vw !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .mobile-dock-hint.show {
    display: flex !important;
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
    animation: dockHintBounce 2.2s ease-in-out infinite !important;
  }

  .mobile-dock-hint.dismissed {
    opacity: 0 !important;
    transform: translate(-50%, 14px) scale(0.9) !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .dock-hint-bubble {
    background: var(--bg-surface) !important;
    border: 1.5px solid #3b82f6 !important;
    border-radius: 16px !important;
    padding: 0.55rem 0.95rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 16px rgba(59, 130, 246, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.18rem !important;
    text-align: center !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  [data-theme="light"] .dock-hint-bubble {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  [data-theme="dark"] .dock-hint-bubble {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(96, 165, 250, 0.3) !important;
  }

  .dock-hint-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.78rem !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  .dock-hint-content strong {
    color: #2563eb !important;
    font-weight: 700 !important;
  }

  [data-theme="dark"] .dock-hint-content strong {
    color: #93c5fd !important;
  }

  .dock-hint-sparkle {
    font-size: 0.95rem !important;
    animation: sparkleRotate 2s ease-in-out infinite alternate !important;
    display: inline-block !important;
  }

  .dock-hint-sub {
    font-size: 0.62rem !important;
    color: var(--text-muted, #94a3b8) !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.02em !important;
  }

  .dock-hint-arrow {
    color: #2563eb !important;
    font-size: 1.1rem !important;
    margin-top: -3px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
    line-height: 1 !important;
  }

  [data-theme="dark"] .dock-hint-arrow {
    color: #60a5fa !important;
  }

  @keyframes dockHintBounce {
    0%, 100% {
      transform: translate(-50%, 0);
    }
    50% {
      transform: translate(-50%, 6px);
    }
  }

  @keyframes sparkleRotate {
    0% {
      transform: rotate(0deg) scale(1);
    }
    100% {
      transform: rotate(18deg) scale(1.2);
    }
  }

  .mobile-bottom-dock-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    gap: 3px !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
  }

  .dock-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 4px 2px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .dock-item i {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    transition: transform 0.22s ease, color 0.22s ease, filter 0.22s ease !important;
    color: #94a3b8 !important;
  }

  .dock-item span {
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    color: #94a3b8 !important;
    transition: color 0.22s ease !important;
  }

  .dock-item:hover {
    color: #38bdf8 !important;
  }

  .dock-item:hover i,
  .dock-item:hover span {
    color: #38bdf8 !important;
  }

  .dock-item:active {
    transform: scale(0.92) !important;
  }

  /* Active Vibe-Coding Pill Capsule (Dark Mode) */
  html[data-theme="dark"] .mobile-bottom-dock .dock-item.active,
  .mobile-bottom-dock .dock-item.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(0, 242, 254, 0.22)) !important;
    border: 1px solid rgba(0, 242, 254, 0.45) !important;
    box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.25), 0 2px 10px rgba(0, 242, 254, 0.2) !important;
  }

  html[data-theme="dark"] .mobile-bottom-dock .dock-item.active i,
  .mobile-bottom-dock .dock-item.active i {
    color: #00f2fe !important;
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.85)) !important;
    transform: translateY(-1px) scale(1.06) !important;
  }

  html[data-theme="dark"] .mobile-bottom-dock .dock-item.active span,
  .mobile-bottom-dock .dock-item.active span {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.6) !important;
  }

  /* Light Mode Mobile Dock Styles */
  html[data-theme="light"] .mobile-bottom-dock .dock-item {
    color: #475569 !important;
  }

  html[data-theme="light"] .mobile-bottom-dock .dock-item i,
  html[data-theme="light"] .mobile-bottom-dock .dock-item span {
    color: #475569 !important;
  }

  html[data-theme="light"] .mobile-bottom-dock .dock-item:hover i,
  html[data-theme="light"] .mobile-bottom-dock .dock-item:hover span {
    color: #2563eb !important;
  }

  html[data-theme="light"] .mobile-bottom-dock .dock-item.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.1)) !important;
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
    box-shadow: inset 0 0 8px rgba(37, 99, 235, 0.18), 0 2px 8px rgba(37, 99, 235, 0.14) !important;
  }

  html[data-theme="light"] .mobile-bottom-dock .dock-item.active i {
    color: #2563eb !important;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.5)) !important;
    transform: translateY(-1px) scale(1.06) !important;
  }

  html[data-theme="light"] .mobile-bottom-dock .dock-item.active span {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
  }

  .nav-resume-btn {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.74rem !important;
    gap: 0.25rem !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
  }



  /* Services Page Mobile Typography Hierarchy */
  .service-card-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.25 !important;
  }

  .service-card-body {
    padding: 1.15rem 1rem !important;
  }

  .service-card-body p {
    font-size: 0.76rem !important;
    line-height: 1.42 !important;
    margin-bottom: 0.65rem !important;
  }

  .service-card-body h4 {
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.3rem !important;
  }

  .service-card-body ul {
    gap: 0.25rem !important;
  }

  .service-card-body ul li {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  .service-deliverable-box {
    padding: 0.6rem 0.75rem !important;
    margin-top: 0.65rem !important;
  }

  .service-deliverable-box span {
    font-size: 0.72rem !important;
  }

  /* How We Work Process Cue Cards on Mobile (Matching Web View Cue Card Aesthetics) */
  .process-workflow-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .process-step-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.95rem 0.85rem !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  .process-step-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.45rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .process-card-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.3rem !important;
    color: var(--text-primary) !important;
    line-height: 1.25 !important;
  }

  .process-card-desc {
    font-size: 0.72rem !important;
    line-height: 1.38 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0 !important;
  }

  /* ==========================================================================
     MOBILE RESPONSIVE CASE STUDY & PROJECT DETAIL (GaadiMandi, TourCraze, TradeLab)
     ========================================================================== */
  .case-study-hero {
    padding: 1.25rem 0 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .case-study-hero .hero-title {
    font-size: clamp(1.45rem, 5.5vw, 1.95rem) !important;
    line-height: 1.2 !important;
    margin: 0.5rem 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .case-study-hero .lead {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .project-meta-strip {
    padding: 0.85rem 1rem !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .project-meta-strip .meta-strip-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  .interactive-showcase-container {
    margin-bottom: 2rem !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .showcase-control-bar {
    padding: 0.55rem 0.65rem !important;
    gap: 0.45rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .showcase-nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .showcase-tab-btn {
    padding: 0.32rem 0.6rem !important;
    font-size: 0.68rem !important;
    gap: 0.3rem !important;
  }

  .showcase-status-badge {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .showcase-auto-btn {
    font-size: 0.68rem !important;
    padding: 0.28rem 0.65rem !important;
  }

  .showcase-caption-bar {
    padding: 0.85rem !important;
  }

  .showcase-caption-item {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .project-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .case-study-main {
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .case-study-block {
    padding: 1.25rem 1rem !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .case-study-block h3 {
    font-size: 1.15rem !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.65rem !important;
    word-break: break-word !important;
  }

  .case-study-block p,
  .case-study-block li {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .cs-workflow-grid,
  .cs-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-workflow-card,
  .cs-metric-card {
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-flow-strip {
    padding: 0.75rem 0.85rem !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cs-flow-node {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.6rem !important;
  }

  .case-study-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar-card {
    padding: 1.25rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Resume Page Mobile PDF Preview (Zero Black Space, Zero Scroll Trap) & Compact Grids */
  .resume-iframe-container {
    border-radius: var(--radius-sm) !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  }

  .resume-iframe-exact {
    width: 100% !important;
    aspect-ratio: 1 / 1.414 !important;
    height: auto !important;
    min-height: 480px !important;
    pointer-events: none !important; /* Prevents touch-scroll capture on mobile */
  }

  .resume-paper-preview {
    padding: 1.15rem 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .resume-header-block {
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
  }

  .resume-header-block h2 {
    font-size: 1.4rem !important;
    margin-bottom: 0.15rem !important;
  }

  .resume-header-block .font-mono {
    font-size: 0.78rem !important;
    margin-bottom: 0.4rem !important;
  }

  .resume-contact-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem 0.5rem !important;
    text-align: left !important;
    font-size: 0.72rem !important;
    margin-top: 0.4rem !important;
  }

  .resume-contact-bar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .resume-section-block {
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
  }

  .resume-section-title {
    font-size: 0.98rem !important;
    margin-bottom: 0.4rem !important;
  }

  .resume-section-block p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  .resume-section-block strong {
    font-size: 0.85rem !important;
  }

  .resume-section-block span {
    font-size: 0.75rem !important;
  }

  .resume-skills-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  .resume-skill-cat-card {
    flex-direction: column !important;
    gap: 0.15rem !important;
    background: var(--bg-surface-subtle);
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
  }

  .skill-cat-label {
    min-width: 0 !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
  }

  .skill-cat-items {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
  }

  .resume-edu-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .resume-edu-card {
    background: var(--bg-surface-subtle);
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    margin-bottom: 0 !important;
  }

  .resume-section-block ul {
    padding-left: 1rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .resume-section-block ul li {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.2rem !important;
  }

  /* Contact Page on Mobile: Clean Native App Layout with Zero Overlap */
  .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .contact-grid .modern-card {
    padding: 1.15rem 1rem !important;
    border-radius: var(--radius-md) !important;
  }

  .contact-grid h2 {
    font-size: 1.15rem !important;
    margin-bottom: 0.35rem !important;
  }

  .contact-grid p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.85rem !important;
  }

  .contact-methods-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .contact-method-card {
    background: var(--bg-surface-subtle);
    padding: 0.85rem 0.95rem !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-subtle) !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
  }

  .contact-method-card .arch-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }

  .contact-method-label {
    font-size: 0.68rem !important;
    margin-bottom: 0.15rem !important;
  }

  .contact-method-link,
  .contact-method-text {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
  }

  .contact-phone-link {
    font-size: 1.02rem !important;
  }

  .contact-actions-toolbar {
    margin-top: 0.45rem !important;
    gap: 0.4rem !important;
  }

  .btn-action-pill {
    font-size: 0.74rem !important;
    padding: 0.32rem 0.68rem !important;
  }

  .btn-copy-email {
    font-size: 0.7rem !important;
  }

  .contact-grid .form-group {
    margin-bottom: 0.7rem !important;
  }

  .contact-grid .form-label {
    font-size: 0.75rem !important;
    margin-bottom: 0.2rem !important;
    font-weight: 600 !important;
  }

  .contact-grid .form-control {
    padding: 0.45rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .contact-grid textarea.form-control {
    min-height: 85px !important;
  }

  .contact-grid .btn-modern {
    font-size: 0.8rem !important;
    padding: 0.5rem 1rem !important;
    width: 100% !important;
  }

  .brand-logo {
    margin-left: 0 !important;
    font-size: 0.94rem !important;
    gap: 0.4rem !important;
  }

  .brand-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }

  .nav-resume-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    padding: 0.28rem 0.58rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    line-height: 1 !important;
  }

  .nav-resume-text {
    display: inline !important;
    font-size: 0.7rem !important;
  }

  .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    border-radius: var(--radius-full) !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav-toggle {
    display: none !important;
  }

  .mobile-drawer {
    display: none !important;
  }

  .site-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* --------------------------------------------------------------------------
     HERO SECTION ON MOBILE (ZOOMED ELEGANT PROPORTIONS MATCHING SCREENSHOT)
     -------------------------------------------------------------------------- */
  .hero-section {
    padding-top: 1.85rem !important;
    padding-bottom: 2.1rem !important;
    min-height: auto !important;
    display: block !important;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 0.85rem;
    align-items: center;
    margin-top: 0 !important;
  }

  .hero-content {
    min-width: 0;
  }

  .hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.2rem 0.52rem !important;
    font-size: clamp(0.52rem, 2.1vw, 0.62rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.52rem !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: var(--radius-full) !important;
    letter-spacing: -0.01em !important;
  }

  .hero-tag-text {
    display: inline-block !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
  }

  .hero-tag .status-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
  }

  .hero-title {
    font-size: clamp(1.35rem, 4.4vw, 1.75rem);
    line-height: 1.15;
    margin-bottom: 0.35rem;
  }

  /* Reserved stable height prevents typing animation from jumping or shifting layout */
  .hero-roles-bar {
    font-size: clamp(0.74rem, 2.5vw, 0.88rem) !important;
    min-height: 2.35rem !important;
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.25 !important;
  }

  .hero-description {
    font-size: clamp(0.72rem, 2.35vw, 0.82rem);
    line-height: 1.42;
    margin-bottom: 0.85rem;
    max-width: 100%;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
  }

  .hero-actions .btn-modern {
    font-size: 0.7rem;
    padding: 0.38rem 0.68rem;
    gap: 0.28rem;
    border-radius: var(--radius-full);
  }

  .hero-box-col {
    min-width: 0;
    width: 100%;
  }

  .lofi-card-wrap {
    max-width: 100%;
    border-radius: var(--radius-md);
  }

  .lofi-top-badge {
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    z-index: 10;
    pointer-events: none;
  }

  .lofi-status-pill {
    padding: 0.18rem 0.38rem;
    font-size: 0.52rem;
    gap: 0.2rem;
    white-space: nowrap !important;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    line-height: 1;
    pointer-events: auto;
  }

  .lofi-status-pill .lofi-status-mode-label,
  .lofi-status-pill .lofi-status-sep {
    display: none !important;
  }

  .lofi-status-pill .status-dot {
    width: 4px;
    height: 4px;
    flex-shrink: 0;
  }

  .lofi-status-pill #lofiLiveClock {
    font-size: 0.52rem;
    font-weight: 700;
  }

  .lofi-top-actions {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    flex-shrink: 0;
    pointer-events: auto;
  }

  .lofi-mode-toggle-btn {
    padding: 0.16rem 0.42rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.54rem;
    font-weight: 700;
    white-space: nowrap !important;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #f8fafc;
  }

  .lofi-mode-toggle-btn span {
    display: inline !important;
    font-size: 0.52rem;
  }

  .lofi-mode-toggle-btn i {
    font-size: 0.58rem;
    margin: 0;
  }

  .lofi-expand-hint {
    padding: 0.18rem 0.3rem;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    gap: 0;
    white-space: nowrap !important;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--radius-full);
  }

  .lofi-expand-hint span {
    display: none !important;
  }

  .lofi-expand-hint i {
    font-size: 0.62rem;
    margin: 0;
  }

  /* --------------------------------------------------------------------------
     SECTION HEADINGS & GENERAL PADDING ON MOBILE
     -------------------------------------------------------------------------- */
  .section-padding {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .section-header {
    margin-bottom: 1.25rem;
    gap: 0.5rem !important;
  }

  .section-subtitle {
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
  }

  .section-title {
    font-size: clamp(1.15rem, 3.8vw, 1.45rem);
    margin-bottom: 0.25rem;
  }

  .section-description {
    font-size: 0.74rem;
    line-height: 1.35;
    margin-bottom: 0.4rem;
  }

  .section-header .btn-modern {
    font-size: 0.65rem;
    padding: 0.28rem 0.58rem;
  }

  /* --------------------------------------------------------------------------
     3-COLUMN GRID ON MOBILE (PROJECTS & SERVICES SIDE-BY-SIDE)
     -------------------------------------------------------------------------- */
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .grid-2,
  .grid-4,
  .skills-matrix-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Compact Project Cards on Mobile */
  .project-card {
    border-radius: var(--radius-sm);
    min-width: 0;
  }

  .project-card-image-wrap {
    height: 72px;
    min-height: 60px;
  }

  .project-card-body {
    padding: 0.45rem 0.35rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .project-card-badge-row {
    margin-bottom: 0.18rem !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .badge-project-category {
    font-size: 0.44rem !important;
    padding: 0.08rem 0.32rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--radius-full) !important;
  }

  .project-card-title,
  .project-card-title a {
    font-size: 0.72rem !important;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .project-card-description {
    font-size: 0.58rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .project-tech-tags {
    gap: 0.18rem;
    margin-bottom: 0.35rem;
    margin-top: auto;
  }

  .project-tech-tags .badge-tech {
    font-size: 0.48rem;
    padding: 0.1rem 0.25rem;
    line-height: 1.2;
    border-radius: 3px;
  }

  .project-card-body > div:last-child {
    padding-top: 0.35rem !important;
    margin-top: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.28rem !important;
  }

  .project-card-body > div:last-child > a.btn-modern {
    font-size: 0.56rem !important;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }

  .project-card-body > div:last-child > div {
    display: flex;
    justify-content: center;
    gap: 0.3rem !important;
  }

  .project-card-body > div:last-child > div .btn-modern {
    padding: 0.12rem 0.32rem !important;
    font-size: 0.65rem !important;
  }

  /* Compact Service Cards on Mobile */
  .service-card {
    border-radius: var(--radius-sm);
    min-width: 0;
  }

  .service-card-image-wrap {
    aspect-ratio: 16 / 10;
    max-height: 72px;
    min-height: 55px;
  }

  .service-image-tag {
    top: 4px;
    left: 4px;
    padding: 0.1rem 0.32rem;
    font-size: 0.48rem;
    gap: 0.2rem;
  }

  .service-card-body {
    padding: 0.45rem 0.35rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .service-card-body .font-mono.text-muted {
    font-size: 0.5rem !important;
    margin-bottom: 0.15rem;
  }

  .service-card-title {
    font-size: 0.72rem !important;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 0.22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .service-card-body > p {
    font-size: 0.58rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.35rem !important;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .service-deliverable-box {
    padding: 0.28rem 0.32rem;
    border-radius: 4px;
    margin-top: auto !important;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
  }

  .service-deliverable-box span:first-child {
    font-size: 0.46rem !important;
    margin-bottom: 0.08rem !important;
  }

  .service-deliverable-box span:last-child {
    font-size: 0.56rem !important;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Compact CTA Banner & Other Elements on Mobile */
  .cta-banner {
    padding: 1.75rem 1rem;
    border-radius: var(--radius-md);
  }

  .cta-banner h2 {
    font-size: 1.3rem !important;
    margin-bottom: 0.6rem !important;
  }

  .cta-banner p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  .resume-paper-preview {
    padding: 1.5rem;
  }

  .case-study-block {
    padding: 1.4rem;
  }
}

/* ==========================================================================
   PARMEET SINGH — SPLIT-SCREEN INTERACTIVE ABOUT EXPERIENCE
   Left Half: Scrolling Narrative Chapters
   Right Half: Sticky Cinematic Visual Stage (Changes Dynamically as You Scroll)
   ========================================================================== */
.split-about-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 3rem 0 6rem;
  background: var(--bg-primary);
}

.split-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================================
   LEFT HALF: SCROLLING STORY CHAPTERS
   ========================================================================== */
.about-story-col {
  position: relative;
  z-index: 10;
}

.story-chapter-block {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 0;
  scroll-margin-top: calc(var(--nav-height) + 2rem);
}

.story-chapter-block:first-child {
  padding-top: 2.5rem;
}

.story-chapter-block:last-child {
  min-height: 90vh;
  padding-bottom: 42vh;
}

.chapter-content-card {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.story-chapter-block.active .chapter-content-card {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(56, 189, 248, 0.08);
  transform: translateY(-3px);
}

.chapter-title {
  font-size: clamp(1.85rem, 2.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.chapter-subtitle {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
  line-height: 1.5;
}

.chapter-lead {
  font-size: 1.02rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.chapter-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}

.c-chip.chip-build {
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.c-chip.chip-learn {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.c-chip.chip-explore {
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}

.chapter-meta-footer {
  font-size: 0.82rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.85rem;
  margin-top: 0.5rem;
}

.chapter-note {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.chapter-quote {
  padding: 0.85rem 1.2rem;
  background: rgba(56, 189, 248, 0.08);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #f8fafc;
  font-size: 0.92rem;
  margin-top: 1rem;
}

.c-chip.chip-clickable {
  cursor: pointer;
  background: rgba(15, 23, 42, 0.85);
  transition: all var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.35rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.c-chip.chip-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  border-color: var(--accent-cyan);
  background: rgba(15, 23, 42, 0.98);
  color: #fff;
}

.cert-instruction-text {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.project-concise-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scroll-prompt-container {
  margin-top: 1.25rem;
}

.scroll-prompt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.15rem;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-full);
  color: var(--accent-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.12);
  transition: all var(--transition-fast);
}

.scroll-prompt-chip:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--accent-cyan);
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.25);
  transform: translateY(-2px);
}

.scroll-bounce-icon {
  display: inline-block;
  animation: scrollBounce 2s infinite ease-in-out;
}

@keyframes scrollBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.chapter-project-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.mini-project-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.mini-project-tag:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.mini-project-tag.tag-tourcraze {
  border-color: rgba(245, 158, 11, 0.4);
}

.mini-project-tag.tag-gaadimandi {
  border-color: rgba(56, 189, 248, 0.4);
}

.mini-project-tag.tag-tradelab {
  border-color: rgba(16, 185, 129, 0.4);
}

.split-terminals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.closing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.chapter-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.closing-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-lg);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.closing-btn.btn-linkedin {
  background: rgba(10, 102, 194, 0.2);
  border: 1px solid #0a66c2;
  color: #fff;
}

.closing-btn.btn-linkedin:hover {
  background: #0a66c2;
  box-shadow: 0 0 20px rgba(10, 102, 194, 0.4);
}

.closing-btn.btn-github {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.closing-btn.btn-github:hover {
  background: #fff;
  color: #0c111f;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.closing-btn.btn-email {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid var(--accent-cyan);
  color: #fff;
}

.closing-btn.btn-email:hover {
  background: var(--accent-cyan);
  color: #0c111f;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.closing-btn.btn-work {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid var(--accent-amber);
  color: #fff;
}

.closing-btn.btn-work:hover {
  background: var(--accent-amber);
  color: #0c111f;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

/* ==========================================================================
   RIGHT HALF: STICKY CINEMATIC VISUAL STAGE (100% FIXED LOCKED SIZE)
   ========================================================================== */
.about-visual-col {
  position: sticky;
  top: calc(var(--nav-height) + 1.25rem);
  height: calc(100vh - var(--nav-height) - 2.5rem);
  max-height: 780px;
  min-height: 520px;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.mobile-story-nav,
.about-mobile-action-bar {
  display: none !important;
}

/* Outer Style Controls: Sits directly against the top right of the photo frame */
.stage-outer-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.28rem;
  padding-right: 0.2rem;
  width: 100%;
  flex-shrink: 0;
  z-index: 25;
}

.outer-style-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0.9;
}

.sticky-visual-stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #070a13;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(56, 189, 248, 0.08);
  transform: none !important;
}

.stage-telemetry-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.85rem;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  background: rgba(11, 17, 32, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 700;
  color: #f8fafc;
  z-index: 5;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.telemetry-left {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.telemetry-timecode {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  display: inline-block;
}

/* Style Switcher Toggle Pills */
.stage-style-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(15, 23, 42, 0.85);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 12px rgba(56, 189, 248, 0.1);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  white-space: nowrap;
}

.stage-style-pills:hover {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 18px rgba(56, 189, 248, 0.2);
}

.style-pills-label {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.2rem;
  padding-right: 0.15rem;
  font-weight: 800;
  white-space: nowrap;
}

.style-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.style-pill-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.style-pill-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(37, 99, 235, 0.35));
  border-color: var(--accent-cyan);
  color: #fff;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  font-weight: 800;
}

.style-name-short {
  display: none;
}

.style-name-full {
  display: inline;
}



.telemetry-right {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.scene-counter-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--accent-amber);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.stage-canvas-frame {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c111f;
}

.stage-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 1;
  transform: none !important;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  pointer-events: none;
}

/* Incoming active image fades in directly on top with zero coordinate shift */
.stage-image.active {
  opacity: 1;
  z-index: 3;
  transform: none !important;
}

/* Outgoing image stays pinned at 100% opacity underneath for 100% seamless optical morph */
.stage-image.prev-active {
  opacity: 1;
  z-index: 2;
  transform: none !important;
}

/* Stage Initial Loading Synchronization:
   Keep all cinemagraph animations, canvases, and overlays strictly hidden 
   until the initial Scene 1 image has fully loaded to prevent floating animations on a black screen */
.stage-canvas-frame:not(.stage-ready) .stage-atmosphere-canvas,
.stage-canvas-frame:not(.stage-ready) .stage-living-window,
.stage-canvas-frame:not(.stage-ready) .stage-window-exterior,
.stage-canvas-frame:not(.stage-ready) .stage-window-breeze,
.stage-canvas-frame:not(.stage-ready) .stage-lamp-glow,
.stage-canvas-frame:not(.stage-ready) .stage-monitor-glow,
.stage-canvas-frame:not(.stage-ready) .stage-screen-fx,
.stage-canvas-frame:not(.stage-ready) .stage-coffee-steam,
.stage-canvas-frame:not(.stage-ready) .stage-vignette-overlay,
.fs-image-frame:not(.stage-ready) .stage-atmosphere-canvas,
.fs-image-frame:not(.stage-ready) .stage-living-window,
.fs-image-frame:not(.stage-ready) .stage-window-exterior,
.fs-image-frame:not(.stage-ready) .stage-window-breeze,
.fs-image-frame:not(.stage-ready) .stage-lamp-glow,
.fs-image-frame:not(.stage-ready) .stage-monitor-glow,
.fs-image-frame:not(.stage-ready) .stage-screen-fx,
.fs-image-frame:not(.stage-ready) .stage-coffee-steam,
.fs-image-frame:not(.stage-ready) .stage-vignette-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

.stage-canvas-frame.stage-ready .stage-atmosphere-canvas,
.stage-canvas-frame.stage-ready .stage-window-breeze,
.stage-canvas-frame.stage-ready .stage-lamp-glow,
.stage-canvas-frame.stage-ready .stage-monitor-glow,
.stage-canvas-frame.stage-ready .stage-screen-fx,
.stage-canvas-frame.stage-ready .stage-vignette-overlay,
.fs-image-frame.stage-ready .stage-atmosphere-canvas,
.fs-image-frame.stage-ready .stage-window-breeze,
.fs-image-frame.stage-ready .stage-lamp-glow,
.fs-image-frame.stage-ready .stage-monitor-glow,
.fs-image-frame.stage-ready .stage-screen-fx,
.fs-image-frame.stage-ready .stage-vignette-overlay {
  transition: opacity 0.5s ease-out;
}

/* ==========================================================================
   CINEMAGRAPH ATMOSPHERIC OVERLAYS & AMBIENCE
   ========================================================================== */
.stage-atmosphere-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* ==========================================================================
   THE LIVING WINDOW: DYNAMIC ANIMATED SKY & CITY VIEW
   ========================================================================== */
.stage-living-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* STRICT: Only visible in Lofi Anime mode — completely disabled in 3D Cinematic mode */
.stage-canvas-frame[data-active-style="real"] .stage-living-window,
.fs-image-frame[data-active-style="real"] .stage-living-window,
.stage-living-window.living-window-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Glass Panes: Clipped with sub-pixel precision to the window sash */
.window-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* Upper Sky Pane (between curtain and window frame) - STRICT GLASS APERTURE */
.window-pane-upper {
  clip-path: polygon(80.5% 8.9%, 94.2% 12.8%, 93.7% 26.0%, 79.5% 24.9%);
}

/* Lower Skyline Pane (between sash and windowsill) - STRICT GLASS APERTURE */
.window-pane-lower {
  clip-path: polygon(78.5% 30.6%, 93.2% 34.1%, 92.6% 43.4%, 78.0% 39.5%);
}

/* Cozy Rain on Glass Canvas (Layered inside Upper & Lower Panes) */
.window-rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  opacity: 0.88;
  mix-blend-mode: screen;
}

/* Time-of-Day Transition Layers */
.window-time-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
  pointer-events: none;
}

/* Day State */
.stage-living-window.window-state-day .layer-day {
  opacity: 1;
  visibility: visible;
}

/* Sunset State */
.stage-living-window.window-state-sunset .layer-sunset {
  opacity: 1;
  visibility: visible;
}

/* Night State */
.stage-living-window.window-state-night .layer-night {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   1. DAYTIME ANIME CLOUDS & BIRDS
   -------------------------------------------------------------------------- */
.cloud-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Cloud Track 1: Slow background cumulus clouds */
.cloud-track-1 {
  animation: cloudDriftSlow 42s linear infinite;
}

/* Cloud Track 2: Midground fluffy cloud */
.cloud-track-2 {
  animation: cloudDriftFast 26s linear infinite;
  animation-delay: -10s;
}

/* Cloud Track 3: Lower horizon cloud */
.cloud-track-3 {
  animation: cloudDriftSlow 50s linear infinite;
  animation-delay: -18s;
}

.anime-cloud {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(240, 246, 255, 0.6) 55%, transparent 75%);
  border-radius: 50%;
  filter: blur(5px);
  mix-blend-mode: overlay;
  opacity: 0.65;
}

/* Cloud 1: Upper Sky */
.anime-cloud.cloud-1 {
  top: 11%;
  left: 77%;
  width: 12%;
  height: 8%;
  box-shadow:
    -20px 5px 0 2px rgba(255, 255, 255, 0.7),
    20px 8px 0 0 rgba(255, 255, 255, 0.6),
    -8px 12px 0 4px rgba(240, 246, 255, 0.65);
}

/* Cloud 2: Follower */
.anime-cloud.cloud-2 {
  top: 15%;
  left: 64%;
  width: 10%;
  height: 6%;
  box-shadow:
    -14px 4px 0 1px rgba(255, 255, 255, 0.55),
    12px 6px 0 0 rgba(255, 255, 255, 0.5);
}

/* Cloud 3: Higher Wisp */
.anime-cloud.cloud-3 {
  top: 9%;
  left: 72%;
  width: 14%;
  height: 6%;
  box-shadow:
    -24px 6px 0 0 rgba(255, 255, 255, 0.6),
    18px 4px 0 0 rgba(255, 255, 255, 0.5);
}

/* Cloud 4: Lower Skyline Wisp */
.anime-cloud.cloud-4 {
  top: 27%;
  left: 70%;
  width: 15%;
  height: 7%;
  opacity: 0.45;
  box-shadow:
    -18px 4px 0 0 rgba(255, 255, 255, 0.5),
    16px 5px 0 0 rgba(255, 255, 255, 0.4);
}

/* Sunset Cloud: Warm Peach & Copper Tint */
.anime-cloud.cloud-sunset-1 {
  top: 12%;
  left: 75%;
  width: 14%;
  height: 8%;
  background: radial-gradient(circle, rgba(254, 215, 170, 0.85) 0%, rgba(251, 146, 60, 0.5) 60%, transparent 80%);
  box-shadow:
    -18px 5px 0 2px rgba(253, 186, 116, 0.7),
    22px 8px 0 0 rgba(249, 115, 22, 0.45);
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.75;
}

@keyframes cloudDriftSlow {
  0% {
    transform: translateX(20%);
  }

  100% {
    transform: translateX(-40%);
  }
}

@keyframes cloudDriftFast {
  0% {
    transform: translateX(25%);
  }

  100% {
    transform: translateX(-45%);
  }
}

/* Gliding Silhouette Birds */
.window-birds-flock {
  position: absolute;
  top: 13%;
  left: 75%;
  width: 8%;
  height: 5%;
  pointer-events: none;
  animation: birdGlide 18s ease-in-out infinite;
}

.v-bird {
  position: absolute;
  display: inline-block;
  width: 5px;
  height: 2.5px;
  border-top: 1px solid rgba(30, 41, 59, 0.85);
  border-right: 1px solid rgba(30, 41, 59, 0.85);
  transform: rotate(-35deg) skewX(20deg);
  opacity: 0.7;
}

.v-bird::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -4px;
  width: 4px;
  height: 2.5px;
  border-top: 1px solid rgba(30, 41, 59, 0.85);
  border-left: 1px solid rgba(30, 41, 59, 0.85);
  transform: rotate(70deg);
}

.v-bird.bird-1 {
  top: 0;
  left: 0;
  transform: scale(0.9) rotate(-35deg);
}

.v-bird.bird-2 {
  top: 6px;
  left: 8px;
  transform: scale(0.7) rotate(-35deg);
  opacity: 0.55;
}

.v-bird.bird-3 {
  top: 2px;
  left: 14px;
  transform: scale(0.8) rotate(-35deg);
  opacity: 0.6;
}

@keyframes birdGlide {
  0% {
    transform: translate(25px, 8px) scale(0.7);
    opacity: 0;
  }

  15% {
    opacity: 0.85;
  }

  85% {
    opacity: 0.75;
  }

  100% {
    transform: translate(-45px, -18px) scale(1.1);
    opacity: 0;
  }
}

/* Daylight Glass Sunlight Sheen */
.window-sun-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.08) 55%, transparent 68%);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Sunset Warm Sky Sheen */
.window-sunset-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(249, 115, 22, 0.18) 0%, rgba(251, 191, 36, 0.1) 60%, transparent 100%);
  mix-blend-mode: screen;
}

.window-sunset-lower-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(234, 88, 12, 0.22) 0%, transparent 80%);
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   2. NIGHTTIME SKY & CITY SKYLINE TWINKLE
   -------------------------------------------------------------------------- */
/* Twinkling Stars in Upper Window Pane */
.window-stars-cluster {
  position: absolute;
  top: 9%;
  left: 80%;
  width: 12%;
  height: 14%;
  pointer-events: none;
}

.n-star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 3px #ffffff, 0 0 6px rgba(186, 230, 253, 0.8);
  animation: starTwinkle 3.2s infinite ease-in-out;
}

.n-star.star-1 {
  top: 15%;
  left: 25%;
  width: 1.5px;
  height: 1.5px;
  animation-delay: 0s;
}

.n-star.star-2 {
  top: 35%;
  left: 70%;
  width: 2px;
  height: 2px;
  animation-delay: 0.9s;
}

.n-star.star-3 {
  top: 60%;
  left: 40%;
  width: 1.5px;
  height: 1.5px;
  animation-delay: 1.8s;
}

.n-star.star-4 {
  top: 20%;
  left: 85%;
  width: 1.2px;
  height: 1.2px;
  animation-delay: 0.4s;
}

.n-star.star-5 {
  top: 75%;
  left: 80%;
  width: 1.8px;
  height: 1.8px;
  animation-delay: 1.3s;
}

.n-star.star-6 {
  top: 45%;
  left: 15%;
  width: 1.2px;
  height: 1.2px;
  animation-delay: 2.2s;
}

@keyframes starTwinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Rare Shooting Star Streak */
.shooting-star-streak {
  position: absolute;
  top: 11%;
  left: 90%;
  width: 35px;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, rgba(186, 230, 253, 0.8), transparent);
  transform: rotate(-30deg);
  opacity: 0;
  animation: shootingStar 24s ease-in-out infinite;
  animation-delay: 6s;
  pointer-events: none;
}

@keyframes shootingStar {

  0%,
  96%,
  100% {
    opacity: 0;
    transform: translate(0, 0) rotate(-30deg) scaleX(0.2);
  }

  97% {
    opacity: 1;
    transform: translate(-45px, 25px) rotate(-30deg) scaleX(1);
  }

  98.5% {
    opacity: 0;
    transform: translate(-90px, 50px) rotate(-30deg) scaleX(1.4);
  }
}

/* Twinkling Skyscraper Windows */
.city-twinkle-cluster {
  position: absolute;
  top: 26%;
  left: 78%;
  width: 14%;
  height: 14%;
  pointer-events: none;
}

.c-light {
  position: absolute;
  border-radius: 1px;
  background: #fde047;
  box-shadow: 0 0 2px #fde047;
  animation: cityWindowTwinkle 2.8s infinite ease-in-out;
}

.c-light.cl-1 {
  top: 52%;
  left: 22%;
  width: 2px;
  height: 2px;
  animation-delay: 0.2s;
}

.c-light.cl-2 {
  top: 58%;
  left: 35%;
  width: 1.8px;
  height: 1.8px;
  background: #38bdf8;
  box-shadow: 0 0 2px #38bdf8;
  animation-delay: 1.1s;
}

.c-light.cl-3 {
  top: 68%;
  left: 18%;
  width: 2px;
  height: 1.5px;
  animation-delay: 0.7s;
}

.c-light.cl-4 {
  top: 72%;
  left: 45%;
  width: 2px;
  height: 2px;
  animation-delay: 1.9s;
}

.c-light.cl-5 {
  top: 62%;
  left: 62%;
  width: 1.8px;
  height: 1.8px;
  background: #fed7aa;
  box-shadow: 0 0 2px #fed7aa;
  animation-delay: 0.4s;
}

.c-light.cl-6 {
  top: 78%;
  left: 72%;
  width: 2px;
  height: 2px;
  animation-delay: 1.5s;
}

.c-light.cl-7 {
  top: 82%;
  left: 30%;
  width: 1.8px;
  height: 1.8px;
  animation-delay: 2.3s;
}

.c-light.cl-8 {
  top: 85%;
  left: 55%;
  width: 2px;
  height: 1.5px;
  background: #38bdf8;
  box-shadow: 0 0 2px #38bdf8;
  animation-delay: 0.8s;
}

.c-light.cl-9 {
  top: 56%;
  left: 78%;
  width: 1.8px;
  height: 1.8px;
  animation-delay: 1.7s;
}

.c-light.cl-10 {
  top: 74%;
  left: 85%;
  width: 2px;
  height: 2px;
  animation-delay: 2.6s;
}

@keyframes cityWindowTwinkle {

  0%,
  100% {
    opacity: 0.35;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.95;
    filter: brightness(1.4);
  }
}

/* Pulsing Red Aviation Warning Beacons on Distant Spire Towers */
.tower-beacons {
  position: absolute;
  top: 26%;
  left: 78%;
  width: 14%;
  height: 14%;
  pointer-events: none;
}

.beacon-light {
  position: absolute;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444, 0 0 8px rgba(239, 68, 68, 0.85);
  animation: towerBeacon 1.4s infinite ease-in-out;
}

.beacon-light.beacon-1 {
  top: 41%;
  left: 36%;
  width: 2.5px;
  height: 2.5px;
  animation-delay: 0s;
}

.beacon-light.beacon-2 {
  top: 48%;
  left: 76%;
  width: 2.2px;
  height: 2.2px;
  animation-delay: 0.35s;
}

.beacon-light.beacon-3 {
  top: 56%;
  left: 14%;
  width: 2px;
  height: 2px;
  animation-delay: 0.7s;
}

@keyframes towerBeacon {

  0%,
  15% {
    opacity: 1;
    filter: brightness(1.6);
    box-shadow: 0 0 5px #ef4444, 0 0 10px rgba(239, 68, 68, 0.95);
  }

  25%,
  100% {
    opacity: 0.15;
    filter: brightness(0.6);
    box-shadow: 0 0 1px #ef4444;
  }
}

/* ==========================================================================
   3D CINEMATIC LIVING WINDOW EXTERIOR (PHOTOS 1 TO 7 ONLY)
   Strictly restricted inside the window glass aperture - Zero room spill.
   ========================================================================== */
/* ==========================================================================
   3D CINEMATIC LIVING WINDOW EXTERIOR (DAY, SUNSET & NIGHT)
   Strictly restricted inside the window glass aperture - Zero room spill.
   ========================================================================== */
.stage-window-exterior {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Strictly hide when in Lofi mode or disabled */
.stage-canvas-frame[data-active-style="lofi"] .stage-window-exterior,
.stage-window-exterior.exterior-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Glass Panes: Clipped with sub-pixel precision to the window glass aperture - ZERO ROOM SPILL */
.exterior-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* Upper Glass Pane (Sky, Sunbeams, Moon, Stars & Birds) */
.exterior-pane.exterior-pane-upper {
  clip-path: polygon(88.30% 9.00%, 99.10% 10.70%, 99.10% 19.30%, 87.80% 17.60%);
}

/* Lower Glass Pane (Rustling Canopy, Sunset Rays, Skyline & City Twinkles) */
.exterior-pane.exterior-pane-lower {
  clip-path: polygon(87.60% 22.00%, 99.10% 23.70%, 99.10% 40.50%, 86.20% 38.80%);
}

/* Time-of-Day Transition Layers */
.exterior-time-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
  pointer-events: none;
}

/* Active Time-of-Day States */
.stage-window-exterior.exterior-state-day .ext-layer-day {
  opacity: 1;
  visibility: visible;
}

.stage-window-exterior.exterior-state-sunset .ext-layer-sunset {
  opacity: 1;
  visibility: visible;
}

.stage-window-exterior.exterior-state-night .ext-layer-night {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   A. DAYTIME WINDOW VISUALS (SCENES 01 TO 07)
   -------------------------------------------------------------------------- */
/* Ambient Daylight Sky Luminance Drift - DISABLED REFLECTIVE GLARE */
.exterior-sky-drift {
  display: none !important;
}

/* Subtle daylight glass sheen - DISABLED REFLECTIVE GLARE */
.exterior-day-sheen {
  display: none !important;
}

/* Distant Soaring Sky Birds */
.exterior-bird {
  position: absolute;
  width: 6px;
  height: 3px;
  border-top: 1.2px solid rgba(75, 65, 55, 0.45);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.exterior-bird.bird-alpha {
  top: 12%;
  left: 87%;
  animation: birdGlide1 22s infinite linear;
}

.exterior-bird.bird-beta {
  top: 15%;
  left: 86%;
  transform: scale(0.75);
  animation: birdGlide2 28s infinite linear 8s;
}

@keyframes birdGlide1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  50% {
    transform: translate(140px, -4px) scale(0.95);
  }

  85% {
    opacity: 0.6;
  }

  100% {
    transform: translate(250px, -8px) scale(0.85);
    opacity: 0;
  }
}

@keyframes birdGlide2 {
  0% {
    transform: translate(0, 0) scale(0.75);
    opacity: 0;
  }

  12% {
    opacity: 0.55;
  }

  55% {
    transform: translate(120px, 3px) scale(0.7);
  }

  88% {
    opacity: 0.55;
  }

  100% {
    transform: translate(240px, 6px) scale(0.65);
    opacity: 0;
  }
}

/* Outdoor Tree Canopy Leaf Rustle (Light Caustics Over Tree Crowns) */
.exterior-foliage-rustle {
  position: absolute;
  top: 25%;
  left: 86%;
  width: 14%;
  height: 18%;
  background:
    radial-gradient(ellipse 40% 30% at 35% 45%, rgba(254, 240, 138, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 70% 65%, rgba(253, 224, 71, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 30% 20% at 50% 85%, rgba(254, 240, 138, 0.2) 0%, transparent 50%);
  background-size: 140% 140%;
  mix-blend-mode: overlay;
  filter: blur(4px);
  animation: treeCanopyRustle 6.5s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes treeCanopyRustle {
  0% {
    transform: translate(0, 0) scale(1);
    background-position: 0% 0%;
    opacity: 0.6;
  }

  50% {
    transform: translate(-1.5px, 1.5px) scale(1.02);
    background-position: 5% 4%;
    opacity: 0.95;
  }

  100% {
    transform: translate(1.5px, -1px) scale(0.98);
    background-position: 2% 8%;
    opacity: 0.7;
  }
}

/* Distant Skyscraper Facade Sun Glints */
.exterior-glint {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px #ffffff, 0 0 7px rgba(254, 240, 138, 0.85);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}

.exterior-glint.glint-tower-1 {
  top: 24.5%;
  left: 92.5%;
  width: 2.5px;
  height: 2.5px;
  animation: skyscraperSunGlint 7.0s infinite ease-in-out 1.2s;
}

.exterior-glint.glint-tower-2 {
  top: 27.2%;
  left: 96.8%;
  width: 2px;
  height: 2px;
  animation: skyscraperSunGlint 8.5s infinite ease-in-out 3.5s;
}

.exterior-glint.glint-tower-3 {
  top: 22.4%;
  left: 94.2%;
  width: 1.5px;
  height: 1.5px;
  animation: skyscraperSunGlint 6.2s infinite ease-in-out 5.0s;
}

@keyframes skyscraperSunGlint {

  0%,
  75% {
    opacity: 0;
    transform: scale(0.5);
  }

  85% {
    opacity: 0.95;
    transform: scale(1.4);
  }

  92% {
    opacity: 0.2;
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* --------------------------------------------------------------------------
   B. SUNSET LIVING WINDOW RAYS & TWILIGHT (SCENE 08)
   Strictly confined to window glass panes - ZERO ROOM SPILL
   -------------------------------------------------------------------------- */
.exterior-sunset-twilight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 93% 16%, rgba(251, 146, 60, 0.32) 0%, rgba(217, 70, 239, 0.18) 50%, transparent 80%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.exterior-sunset-horizon {
  position: absolute;
  top: 20%;
  left: 85%;
  width: 20%;
  height: 22%;
  background: radial-gradient(circle at 55% 40%, rgba(254, 215, 170, 0.42) 0%, rgba(249, 115, 22, 0.26) 45%, transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: sunsetGlowPulse 6s infinite alternate ease-in-out;
}

@keyframes sunsetGlowPulse {
  0% {
    opacity: 0.65;
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Volumetric Sunset God-Rays Streaming Strictly Across Window Glass Panes */
.exterior-sun-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.exterior-sun-rays .ray {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(2.5px);
  transform-origin: top right;
  opacity: 0.65;
  animation: sunsetRayDrift 7s infinite alternate ease-in-out;
}

.upper-sun-rays .ray-1 {
  top: 6%;
  left: 86%;
  width: 24px;
  height: 190px;
  background: linear-gradient(135deg, rgba(255, 237, 213, 0.48) 0%, rgba(251, 146, 60, 0.25) 50%, transparent 80%);
  transform: rotate(-35deg);
  animation-duration: 6.5s;
}

.upper-sun-rays .ray-2 {
  top: 7%;
  left: 90%;
  width: 36px;
  height: 210px;
  background: linear-gradient(135deg, rgba(254, 215, 170, 0.55) 0%, rgba(249, 115, 22, 0.28) 55%, transparent 85%);
  transform: rotate(-38deg);
  animation-duration: 8.2s;
  animation-delay: 1.2s;
}

.upper-sun-rays .ray-3 {
  top: 9%;
  left: 94%;
  width: 26px;
  height: 200px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.42) 0%, rgba(251, 146, 60, 0.22) 50%, transparent 80%);
  transform: rotate(-33deg);
  animation-duration: 7.4s;
  animation-delay: 2.5s;
}

.lower-sun-rays .ray-4 {
  top: 17%;
  left: 87%;
  width: 44px;
  height: 380px;
  background: linear-gradient(135deg, rgba(255, 237, 213, 0.45) 0%, rgba(251, 146, 60, 0.24) 45%, transparent 75%);
  transform: rotate(-36deg);
  animation-duration: 8s;
}

.lower-sun-rays .ray-5 {
  top: 20%;
  left: 91%;
  width: 52px;
  height: 420px;
  background: linear-gradient(135deg, rgba(254, 215, 170, 0.52) 0%, rgba(249, 115, 22, 0.28) 50%, transparent 80%);
  transform: rotate(-39deg);
  animation-duration: 9.5s;
  animation-delay: 1.5s;
}

.lower-sun-rays .ray-6 {
  top: 23%;
  left: 94%;
  width: 32px;
  height: 360px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.4) 0%, rgba(251, 146, 60, 0.22) 45%, transparent 75%);
  transform: rotate(-34deg);
  animation-duration: 7.2s;
  animation-delay: 3s;
}

@keyframes sunsetRayDrift {
  0% {
    opacity: 0.45;
    transform: rotate(-35deg) scaleX(0.92);
  }

  50% {
    opacity: 0.88;
    transform: rotate(-37deg) scaleX(1.08);
  }

  100% {
    opacity: 0.52;
    transform: rotate(-34deg) scaleX(0.96);
  }
}

.exterior-sunset-glint {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 4px #fff, 0 0 8px rgba(251, 146, 60, 0.9);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}

.exterior-sunset-glint.glint-sunset-1 {
  top: 26.5%;
  left: 93.8%;
  width: 2.5px;
  height: 2.5px;
  animation: skyscraperSunGlint 6.5s infinite ease-in-out 1s;
}

.exterior-sunset-glint.glint-sunset-2 {
  top: 28.2%;
  left: 97.2%;
  width: 2px;
  height: 2px;
  animation: skyscraperSunGlint 7.8s infinite ease-in-out 3s;
}

.exterior-bird.bird-sunset {
  top: 14%;
  left: 97%;
  border-top: 1.2px solid rgba(254, 215, 170, 0.7);
  animation: birdGlideSunset 18s infinite linear;
}

@keyframes birdGlideSunset {
  0% {
    transform: translate(0, 0) scale(0.65);
    opacity: 0;
  }

  15% {
    opacity: 0.7;
  }

  85% {
    opacity: 0.7;
  }

  100% {
    transform: translate(-180px, 12px) scale(0.55);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   C. NIGHT WINDOW VISUALS: LUNAR HALO, STARS & SKYLINE (SCENES 09 TO 11)
   Strictly confined to window glass panes - ZERO ROOM SPILL
   -------------------------------------------------------------------------- */
/* Luminous Crescent Moon Halo - DISABLED REFLECTIVE GLARE */
.exterior-moon-halo {
  display: none !important;
}

/* Twinkling Night Stars Cluster */
.exterior-stars-cluster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ext-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 3px #ffffff, 0 0 6px rgba(186, 230, 253, 0.9);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: starTwinklePulse 3.5s infinite ease-in-out;
}

.ext-star.star-1 {
  top: 10.5%;
  left: 89.5%;
  animation-delay: 0.2s;
}

.ext-star.star-2 {
  top: 11.2%;
  left: 96.5%;
  animation-delay: 1.1s;
}

.ext-star.star-3 {
  top: 14.8%;
  left: 90.2%;
  animation-delay: 2.3s;
}

.ext-star.star-4 {
  top: 15.6%;
  left: 97.2%;
  animation-delay: 0.7s;
}

.ext-star.star-5 {
  top: 9.6%;
  left: 94.8%;
  animation-delay: 1.8s;
}

.ext-star.star-6 {
  top: 16.5%;
  left: 91.8%;
  animation-delay: 2.9s;
}

@keyframes starTwinklePulse {

  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.35);
  }
}

/* Subtle Night Shooting Star Streak */
.exterior-shooting-star {
  position: absolute;
  top: 10.2%;
  left: 97.5%;
  width: 35px;
  height: 1px;
  background: linear-gradient(to left, #ffffff, rgba(224, 242, 254, 0.6), transparent);
  transform: rotate(-35deg) scale(0);
  opacity: 0;
  pointer-events: none;
  animation: shootingStarGlide 16s infinite ease-in;
  animation-delay: 4s;
}

@keyframes shootingStarGlide {

  0%,
  93% {
    transform: rotate(-35deg) translate(0, 0) scale(0);
    opacity: 0;
  }

  94% {
    opacity: 1;
    transform: rotate(-35deg) translate(-10px, 6px) scale(1);
  }

  97% {
    opacity: 0;
    transform: rotate(-35deg) translate(-50px, 30px) scale(0.6);
  }

  100% {
    opacity: 0;
    transform: rotate(-35deg) translate(-60px, 36px) scale(0);
  }
}

/* Distant Night City Skyline Windows (Twinkling Yellow/Warm Lights) */
.exterior-city-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.city-dot {
  position: absolute;
  width: 2px;
  height: 2.5px;
  border-radius: 1px;
  background: rgba(254, 240, 138, 0.95);
  box-shadow: 0 0 3px rgba(254, 240, 138, 0.8), 0 0 5px rgba(245, 158, 11, 0.5);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cityLightTwinkle 4.5s infinite ease-in-out;
}

.city-dot.c-dot-1 {
  top: 27.2%;
  left: 91.5%;
  animation-delay: 0.3s;
  animation-duration: 3.8s;
}

.city-dot.c-dot-2 {
  top: 29.5%;
  left: 94.0%;
  animation-delay: 1.5s;
  animation-duration: 5.1s;
}

.city-dot.c-dot-3 {
  top: 28.1%;
  left: 96.2%;
  animation-delay: 2.7s;
  animation-duration: 4.2s;
}

.city-dot.c-dot-4 {
  top: 32.4%;
  left: 93.2%;
  animation-delay: 0.9s;
  animation-duration: 3.5s;
}

.city-dot.c-dot-5 {
  top: 31.0%;
  left: 97.5%;
  animation-delay: 3.1s;
  animation-duration: 4.8s;
}

.city-dot.c-dot-6 {
  top: 30.2%;
  left: 90.8%;
  animation-delay: 1.8s;
  animation-duration: 4.0s;
}

.city-dot.c-dot-7 {
  top: 34.0%;
  left: 95.1%;
  animation-delay: 2.2s;
  animation-duration: 5.5s;
}

.city-dot.c-dot-8 {
  top: 26.5%;
  left: 92.6%;
  animation-delay: 3.6s;
  animation-duration: 3.9s;
}

@keyframes cityLightTwinkle {

  0%,
  100% {
    opacity: 0.35;
  }

  45% {
    opacity: 0.95;
    box-shadow: 0 0 4px #fef08a, 0 0 7px rgba(245, 158, 11, 0.7);
  }

  75% {
    opacity: 0.2;
  }
}

/* Pulsing Red Aviation Warning Beacons on Distant Skyscraper Tower Spires */
.exterior-tower-beacons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ext-beacon {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 3px #ef4444, 0 0 6px rgba(239, 68, 68, 0.85);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: towerBeaconBlink 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.ext-beacon.beacon-tower-1 {
  top: 23.8%;
  left: 91.2%;
  animation-delay: 0s;
}

.ext-beacon.beacon-tower-2 {
  top: 24.2%;
  left: 95.8%;
  animation-delay: 0.8s;
}

.ext-beacon.beacon-tower-3 {
  top: 23.1%;
  left: 98.4%;
  animation-delay: 1.6s;
}

@keyframes towerBeaconBlink {

  0%,
  80%,
  100% {
    opacity: 0.15;
    transform: scale(0.8);
    box-shadow: 0 0 1px #ef4444;
  }

  15%,
  25% {
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 4px #ef4444, 0 0 8px rgba(239, 68, 68, 0.9);
  }
}

/* Window Breeze Shimmer Sheen (Strictly clipped to window glass - NO ROOM SPILL) */
.stage-window-breeze {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(135deg, transparent 35%, rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.02) 53%, transparent 65%);
  background-size: 250% 250%;
  animation: windowBreezeShimmer 9s infinite ease-in-out;
  mix-blend-mode: overlay;
  clip-path: polygon(88.30% 9.00%, 99.10% 10.70%, 99.10% 40.50%, 86.20% 38.80%);
}

@keyframes windowBreezeShimmer {

  0%,
  100% {
    background-position: 0% 0%;
    opacity: 0.25;
  }

  50% {
    background-position: 100% 100%;
    opacity: 0.7;
  }
}

/* Lamp Glow Warmth (Active during evening & night scenes) */
.stage-lamp-glow {
  position: absolute;
  bottom: 22%;
  left: 14%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.05) 45%, transparent 70%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  animation: lampBreathe 5s infinite ease-in-out alternate;
  opacity: 0.25;
  transition: opacity 1s ease, background 1s ease;
}

.stage-canvas-frame.ambient-night .stage-lamp-glow,
.fs-image-frame.ambient-night .stage-lamp-glow {
  opacity: 0.85;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.26) 0%, rgba(245, 158, 11, 0.09) 45%, transparent 70%);
}

.stage-canvas-frame.ambient-sunset .stage-lamp-glow,
.fs-image-frame.ambient-sunset .stage-lamp-glow {
  opacity: 0.6;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(249, 115, 22, 0.07) 45%, transparent 70%);
}

@keyframes lampBreathe {
  0% {
    transform: scale(0.96);
    opacity: 0.65;
  }

  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Monitor Screen Glow */
.stage-monitor-glow {
  position: absolute;
  bottom: 28%;
  right: 20%;
  width: 290px;
  height: 200px;
  border-radius: 25%;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.12) 0%, rgba(37, 99, 235, 0.04) 55%, transparent 75%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  animation: monitorPulse 4.5s infinite alternate ease-in-out;
}

@keyframes monitorPulse {
  0% {
    opacity: 0.5;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.95;
    transform: scale(1.03);
  }

  100% {
    opacity: 0.6;
    transform: scale(1.0);
  }
}

/* ==========================================================================
   AMBIENT COMPUTER SCREEN CINEMAGRAPH: SMOOTH ARROW POINTER
   ========================================================================== */
.stage-screen-fx {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3D Cinematic Screen Bounds (Strictly confined inside monitor screen) */
[data-active-style="real"] .stage-screen-fx {
  top: 38.6%;
  left: 26.2%;
  width: 12.0%;
  height: 9.2%;
  transform: perspective(600px) rotateY(6.5deg) rotateX(-2deg);
  transform-origin: top left;
}

/* Lofi Anime Mode Screen Bounds */
[data-active-style="lofi"] .stage-screen-fx {
  top: 34.5%;
  left: 54.0%;
  width: 11.5%;
  height: 8.0%;
  transform: perspective(600px) rotateY(-2deg) rotateX(1deg);
  transform-origin: top left;
}

/* Crisp Vector Mouse Arrow Pointer Moving Forwards & Backwards */
.screen-mouse-pointer {
  position: absolute;
  width: clamp(7px, 0.75vw, 10px);
  height: clamp(7px, 0.75vw, 10px);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  animation: pointerForwardBackward 9s infinite cubic-bezier(0.42, 0, 0.58, 1);
  pointer-events: none;
  opacity: 0.95;
}

.screen-mouse-pointer svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Smooth Forwards & Backwards Navigation Across the Screen (Pure Percentages = 100% Mobile & Web Safe) */
@keyframes pointerForwardBackward {
  0% {
    /* Origin: Upper left inside screen */
    left: 14%;
    top: 16%;
    transform: scale(1);
  }

  24% {
    /* Moves smoothly forwards across the screen (towards center-right) */
    left: 64%;
    top: 35%;
    transform: scale(1);
  }

  28% {
    /* Subtle natural click */
    left: 64%;
    top: 35%;
    transform: scale(0.9);
  }

  32% {
    left: 64%;
    top: 35%;
    transform: scale(1);
  }

  48% {
    /* Moves further forward towards lower-right content */
    left: 74%;
    top: 68%;
    transform: scale(1);
  }

  52% {
    /* Subtle natural click */
    left: 74%;
    top: 68%;
    transform: scale(0.9);
  }

  56% {
    left: 74%;
    top: 68%;
    transform: scale(1);
  }

  74% {
    /* Moves backward towards the left side */
    left: 28%;
    top: 55%;
    transform: scale(1);
  }

  86% {
    /* Glides backwards back towards origin */
    left: 18%;
    top: 25%;
    transform: scale(1);
  }

  100% {
    /* Back to starting position */
    left: 14%;
    top: 16%;
    transform: scale(1);
  }
}

/* ==========================================================================
   WHISPERING THERMAL COFFEE STEAM CINEMAGRAPH
   ========================================================================== */
.stage-coffee-steam {
  position: absolute;
  top: 46%;
  left: 52.5%;
  width: 44px;
  height: 95px;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    top 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.stage-coffee-steam.steam-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Individual delicate curling steam puffs */
.stage-coffee-steam .steam-puff {
  position: absolute;
  bottom: 0;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 60%,
      rgba(255, 252, 245, 0.45) 0%,
      rgba(255, 248, 235, 0.22) 45%,
      transparent 75%);
  filter: blur(5px) drop-shadow(0 -3px 5px rgba(255, 255, 255, 0.18));
}

.stage-coffee-steam .steam-puff.puff-1 {
  width: 22px;
  height: 50px;
  margin-left: -11px;
  animation: thermalSteamRise1 3.4s infinite ease-out;
}

.stage-coffee-steam .steam-puff.puff-2 {
  width: 28px;
  height: 60px;
  margin-left: -14px;
  animation: thermalSteamRise2 4.2s infinite ease-out 1.1s;
}

.stage-coffee-steam .steam-puff.puff-3 {
  width: 20px;
  height: 46px;
  margin-left: -10px;
  animation: thermalSteamRise3 3.8s infinite ease-out 2.0s;
}

.stage-coffee-steam .steam-wisp {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 36px;
  height: 72px;
  margin-left: -18px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 250, 240, 0.12) 55%,
      transparent 80%);
  filter: blur(7px);
  animation: thermalSteamDisperse 5.0s infinite ease-in-out 0.5s;
}

@keyframes thermalSteamRise1 {
  0% {
    transform: translateY(6px) scale(0.6) skewX(0deg);
    opacity: 0;
  }

  20% {
    opacity: 0.45;
    transform: translateY(-12px) scale(0.8) skewX(3deg);
  }

  55% {
    opacity: 0.35;
    transform: translateY(-38px) scale(1.15) skewX(-5deg);
  }

  80% {
    opacity: 0.16;
    transform: translateY(-62px) scale(1.5) skewX(4deg);
    filter: blur(7px);
  }

  100% {
    transform: translateY(-84px) scale(1.9) skewX(-2deg);
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes thermalSteamRise2 {
  0% {
    transform: translateY(6px) scale(0.5) skewX(0deg);
    opacity: 0;
  }

  25% {
    opacity: 0.48;
    transform: translateY(-16px) scale(0.85) skewX(-4deg);
  }

  60% {
    opacity: 0.32;
    transform: translateY(-44px) scale(1.25) skewX(6deg);
  }

  85% {
    opacity: 0.14;
    transform: translateY(-70px) scale(1.65) skewX(-3deg);
    filter: blur(8px);
  }

  100% {
    transform: translateY(-92px) scale(2.1) skewX(1deg);
    opacity: 0;
    filter: blur(12px);
  }
}

@keyframes thermalSteamRise3 {
  0% {
    transform: translateY(4px) scale(0.55) skewX(1deg);
    opacity: 0;
  }

  22% {
    opacity: 0.42;
    transform: translateY(-14px) scale(0.8) skewX(5deg);
  }

  55% {
    opacity: 0.28;
    transform: translateY(-36px) scale(1.1) skewX(-4deg);
  }

  80% {
    opacity: 0.12;
    transform: translateY(-58px) scale(1.4) skewX(2deg);
    filter: blur(7px);
  }

  100% {
    transform: translateY(-78px) scale(1.8) skewX(-1deg);
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes thermalSteamDisperse {
  0% {
    transform: translateY(0px) scale(0.7) rotate(0deg);
    opacity: 0;
  }

  30% {
    opacity: 0.30;
    transform: translateY(-25px) scale(1.1) rotate(4deg);
  }

  70% {
    opacity: 0.18;
    transform: translateY(-55px) scale(1.5) rotate(-3deg);
  }

  100% {
    transform: translateY(-80px) scale(2.0) rotate(1deg);
    opacity: 0;
  }
}

/* Sunset Mode Steam Tint */
.stage-canvas-frame.ambient-sunset .stage-coffee-steam .steam-puff,
.stage-canvas-frame.ambient-sunset .stage-coffee-steam .steam-wisp,
.fs-image-frame.ambient-sunset .stage-coffee-steam .steam-puff,
.fs-image-frame.ambient-sunset .stage-coffee-steam .steam-wisp {
  background: radial-gradient(ellipse at 50% 60%,
      rgba(254, 215, 170, 0.46) 0%,
      rgba(253, 186, 116, 0.22) 45%,
      transparent 75%);
}

/* Night Mode Steam Tint */
.stage-canvas-frame.ambient-night .stage-coffee-steam .steam-puff,
.stage-canvas-frame.ambient-night .stage-coffee-steam .steam-wisp,
.fs-image-frame.ambient-night .stage-coffee-steam .steam-puff,
.fs-image-frame.ambient-night .stage-coffee-steam .steam-wisp {
  background: radial-gradient(ellipse at 50% 60%,
      rgba(226, 232, 240, 0.36) 0%,
      rgba(203, 213, 225, 0.16) 45%,
      transparent 75%);
  filter: blur(5px) drop-shadow(0 -2px 4px rgba(226, 232, 240, 0.15));
}

.stage-vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, transparent 65%, rgba(7, 10, 19, 0.5) 100%);
  pointer-events: none;
  z-index: 3;
}

.stage-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1.15rem;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  background: rgba(11, 17, 32, 0.88);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 5;
}

/* Living Diorama Badge */
.stage-vfx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent-emerald);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.vfx-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
  animation: vfxPulse 1.8s infinite ease-in-out;
}

@keyframes vfxPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

.stage-lens-text {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.stage-dots-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.stage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.stage-dot:hover {
  background: #fff;
  transform: scale(1.2);
}

.stage-dot.active {
  width: 18px;
  border-radius: var(--radius-full);
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS
   ========================================================================== */
/* Tablet Screens (768px to 992px) */
@media (max-width: 992px) and (min-width: 768px) {
  .split-about-wrapper {
    padding: 2.5rem 0 4rem;
  }

  .split-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.5rem;
    padding: 0 1.25rem;
  }

  .about-visual-col {
    position: sticky;
    top: calc(var(--nav-height) + 1.5rem);
    height: calc(100vh - var(--nav-height) - 2.5rem);
    max-height: 650px;
    min-height: 440px;
    width: 100%;
    z-index: 20;
  }

  .story-chapter-block {
    min-height: 65vh;
    padding: 1.25rem 0;
  }

  .story-chapter-block:first-child {
    padding-top: 3.5rem;
  }

  .chapter-content-card {
    padding: 1.75rem 1.4rem;
  }

  .split-terminals-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

/* Mobile Screens (All devices <= 767px: iPhone, Galaxy, Pixel, etc.) */
@media (max-width: 767px) {
  /* Landing Page Hero: Option 1 Modern Vertical Stack Flow */
  .hero-section {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 1.5rem !important;
    padding-bottom: 2.75rem !important;
  }

  .hero-section .site-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }

  .hero-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-tag {
    margin-bottom: 0.75rem !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    width: fit-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .hero-tag-text {
    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;
    display: inline !important;
  }

  .hero-title {
    font-size: clamp(2.2rem, 7.5vw, 2.75rem) !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
  }

  .hero-roles-bar {
    font-size: clamp(1.02rem, 3.6vw, 1.25rem) !important;
    min-height: 1.9rem !important;
    height: auto !important;
    margin-bottom: 0.85rem !important;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .hero-description {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.25rem !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    color: var(--text-secondary) !important;
  }

  .hero-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-actions .btn-modern {
    font-size: 0.88rem !important;
    padding: 0.65rem 1.25rem !important;
    border-radius: var(--radius-md) !important;
  }

  .hero-actions .btn-subtle {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.85rem !important;
  }

  .hero-box-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 0.85rem !important;
    margin-bottom: 1.5rem !important;
  }

  .lofi-card-wrap {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    max-height: 310px !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55), 0 0 35px rgba(37, 99, 235, 0.25) !important;
  }

  .lofi-top-badge {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
  }

  .lofi-status-pill {
    padding: 0.22rem 0.6rem !important;
    font-size: 0.68rem !important;
    gap: 0.35rem !important;
  }

  .lofi-mode-toggle-btn,
  .lofi-expand-hint {
    padding: 0.22rem 0.55rem !important;
    font-size: 0.68rem !important;
    gap: 0.3rem !important;
  }

  .home-hero-transition-wrap {
    margin-top: -0.5rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* Compact Skills & Toolkit Strip on Mobile */
  .home-skills-strip {
    padding: 2.25rem 0 2.25rem 0 !important;
    margin-top: 0.75rem !important;
  }

  .skills-strip-inner {
    gap: 0.75rem !important;
  }

  .skills-strip-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
  }

  .skills-strip-badge {
    font-size: 0.58rem !important;
    padding: 0.16rem 0.48rem !important;
    gap: 0.25rem !important;
  }

  .skills-strip-heading {
    font-size: 1rem !important;
  }

  .skills-strip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }

  .skill-mini-category {
    padding: 0.55rem 0.65rem !important;
    gap: 0.4rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .skill-cat-title {
    font-size: 0.66rem !important;
    gap: 0.25rem !important;
  }

  .skill-chips-wrap {
    gap: 0.25rem !important;
  }

  .skill-chip {
    font-size: 0.64rem !important;
    padding: 0.12rem 0.4rem !important;
  }

  .section-padding {
    padding-top: 3rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* On mobile About page: Keep full navbar at top at scroll 0, scrolls away naturally on scroll */
  body.page-about-view .site-navbar {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 55 !important;
  }

  body.page-about-view main.main-content {
    padding-top: 0 !important;
  }

  .split-about-wrapper {
    padding-top: var(--nav-height, 60px) !important;
    padding-bottom: 3.5rem !important;
  }

  /* Mobile-Only Compact Action Bar: Sits flush below navbar, pins at top y = 0 */
  .about-mobile-action-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    background: var(--bg-surface) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 0.35rem 0.75rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .about-mobile-action-bar .btn-page-back {
    font-size: 0.76rem !important;
    padding: 0.32rem 0.72rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    border-radius: var(--radius-full) !important;
    background: var(--bg-surface-subtle, rgba(255, 255, 255, 0.9)) !important;
    border: 1.5px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .about-mobile-action-bar .btn-page-back i,
  .about-mobile-action-bar .btn-page-back span {
    color: var(--text-primary) !important;
  }

  /* Light Mode Specific High-Contrast Overrides */
  [data-theme="light"] .about-mobile-action-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  [data-theme="light"] .about-mobile-action-bar .btn-page-back {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] .about-mobile-action-bar .btn-page-back i,
  [data-theme="light"] .about-mobile-action-bar .btn-page-back span {
    color: #0f172a !important;
  }

  [data-theme="light"] .stage-style-pills {
    background: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  [data-theme="light"] .stage-style-pills .style-pill-btn {
    color: #475569 !important;
  }

  [data-theme="light"] .stage-style-pills .style-pill-btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
  }

  /* Dark Mode Specific Overrides */
  [data-theme="dark"] .about-mobile-action-bar {
    background: rgba(12, 17, 31, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  [data-theme="dark"] .about-mobile-action-bar .btn-page-back {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
  }

  [data-theme="dark"] .about-mobile-action-bar .btn-page-back i,
  [data-theme="dark"] .about-mobile-action-bar .btn-page-back span {
    color: #ffffff !important;
  }

  .desktop-only-nav {
    display: none !important;
  }

  /* Full-Width Mobile Scrollytelling Layout */
  .split-about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 0.65rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sticky Top Visual Stage Column: Pinned directly under the 44px header bar */
  .about-visual-col {
    order: 1 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 44px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 45 !important;
    margin-bottom: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Outer style switcher removed from inside column since it's now in the top header bar */
  .stage-outer-controls {
    display: none !important;
  }

  .stage-style-pills {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(56, 189, 248, 0.15) !important;
    padding: 0.16rem 0.35rem !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }

  .style-name-full {
    display: none !important;
  }

  .style-name-short {
    display: inline !important;
    font-weight: 800 !important;
  }

  .stage-style-pills .style-pill-btn {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.68rem !important;
    gap: 0.22rem !important;
    border-radius: var(--radius-full) !important;
    font-weight: 800 !important;
  }

  .stage-style-pills .style-pill-btn i {
    font-size: 0.72rem !important;
  }

  /* The Sticky Visual Stage: Fills the entire yellow area in true 1600x1986 vertical portrait */
  .sticky-visual-stage {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 1600 / 1986 !important;
    max-height: calc(52vh - 44px) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--border-subtle) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #0c111f !important;
  }

  [data-theme="light"] .sticky-visual-stage {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #cbd5e1 !important;
  }

  [data-theme="dark"] .sticky-visual-stage {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .stage-telemetry-bar {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 0.65rem !important;
    gap: 0.35rem !important;
    font-size: 0.65rem !important;
  }

  .telemetry-timecode {
    font-size: 0.65rem !important;
  }

  .scene-counter-badge {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.42rem !important;
  }

  .stage-canvas-frame {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1600 / 1986 !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0c111f !important;
  }

  .stage-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* User requested: Remove bottom footer bar from the photo frame on mobile */
  .stage-footer-bar {
    display: none !important;
  }

  /* User requested: Avatar removed for now */
  .stage-companion-avatar {
    display: none !important;
  }

  /* Story Chapters Stream: Scrolls Smoothly Below the Sticky Top Stage */
  .about-story-col {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding-top: 0 !important;
    margin-top: 0.15rem !important;
    padding-bottom: 50vh !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .story-scroll-banner {
    position: absolute !important;
    top: -0.45rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.16rem 0.65rem !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
    margin: 0 !important;
    animation: scrollBannerBounce 2s ease-in-out infinite !important;
  }

  [data-theme="light"] .story-scroll-banner {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: #2563eb !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.18) !important;
  }

  .story-scroll-banner.dismissed {
    opacity: 0 !important;
    transform: translate(-50%, -8px) scale(0.95) !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .story-chapter-block {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 55vh !important;
    padding: 0.75rem 0 !important;
    scroll-margin-top: calc(54vh + 20px) !important;
  }

  .story-chapter-block:first-child {
    min-height: 36vh !important;
    padding-top: 0 !important;
    padding-bottom: 0.75rem !important;
    justify-content: flex-start !important;
  }

  .story-chapter-block:last-child {
    min-height: 60vh !important;
    padding-bottom: 30vh !important;
  }

  .chapter-content-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border-subtle) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal) !important;
  }

  .story-chapter-block.active .chapter-content-card {
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(56, 189, 248, 0.15) !important;
  }

  .terminal-os-badge {
    font-size: 0.65rem !important;
    padding: 0.18rem 0.48rem !important;
    margin-bottom: 0.45rem !important;
    gap: 0.3rem !important;
    display: inline-flex !important;
    width: fit-content !important;
  }

  .chapter-title {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
  }

  .chapter-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.65rem !important;
  }

  .chapter-lead {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0.85rem !important;
    color: var(--text-secondary) !important;
  }

  .chapter-chips-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin-bottom: 0.75rem !important;
  }

  .c-chip {
    font-size: 0.72rem !important;
    padding: 0.22rem 0.55rem !important;
    gap: 0.25rem !important;
    line-height: 1.25 !important;
    border-radius: var(--radius-sm) !important;
  }

  .c-chip.chip-clickable {
    width: 100% !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    text-align: left !important;
    margin-bottom: 0.25rem !important;
  }

  .chapter-meta-footer {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    padding-top: 0.65rem !important;
    margin-top: 0.65rem !important;
    border-top: 1px solid var(--border-subtle) !important;
  }

  .chapter-quote {
    font-size: 0.76rem !important;
    padding: 0.55rem 0.75rem !important;
    line-height: 1.4 !important;
    margin-top: 0.65rem !important;
    border-left-width: 3px !important;
  }

  .chapter-note {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    margin-top: 0.5rem !important;
  }

  .cert-instruction-text {
    font-size: 0.68rem !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.35 !important;
  }

  .project-concise-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-bottom: 0.5rem !important;
  }

  .mini-project-tag {
    font-size: 0.72rem !important;
    padding: 0.22rem 0.55rem !important;
  }

  .split-terminals-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
  }

  .closing-btn {
    font-size: 0.82rem !important;
    padding: 0.6rem 1rem !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .btn-modern.btn-sm {
    font-size: 0.78rem !important;
    padding: 0.55rem 0.95rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .scroll-prompt-container {
    display: none !important;
  }

  /* Cozy Rain on Mobile: Enabled & Beautifully Layered */
  .window-rain-canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 0.88 !important;
    pointer-events: none !important;
  }

  /* Compact Mobile Cert Chips */
  .cert-chips-grid {
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cert-chip-card {
    padding: 0.45rem 0.65rem !important;
    gap: 0.5rem !important;
    border-radius: var(--radius-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .cert-chip-card i {
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
  }

  .cert-chip-info {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
    line-height: 1.25 !important;
  }

  .cert-chip-info strong {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    color: var(--text-primary) !important;
  }

  .cert-chip-info span {
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text-secondary) !important;
  }

  /* Certificate Lightbox Mobile Enhancements */
  .cert-modal-backdrop {
    padding: 0.75rem !important;
  }

  .cert-modal-dialog {
    padding: 1.85rem 1.15rem 1.35rem 1.15rem !important;
    width: calc(100% - 0.75rem) !important;
    max-width: 420px !important;
    border-radius: var(--radius-lg) !important;
  }

  .cert-modal-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 1.35rem !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border: 2px solid rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html[data-theme="light"] .cert-modal-close,
  html:not([data-theme="dark"]) .cert-modal-close {
    background: #ffffff !important;
    border: 2px solid #64748b !important;
    color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }

  .cert-modal-title {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.35rem !important;
  }
}

/* Extra Small Phones (max-width: 390px, iPhone SE, etc.) */
@media (max-width: 390px) {
  .hero-section {
    min-height: calc(75vh - 60px) !important;
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }

  .hero-title {
    font-size: 1.95rem !important;
  }

  .hero-roles-bar {
    font-size: 0.95rem !important;
    min-height: 1.8rem !important;
    height: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.35 !important;
  }

  .hero-description {
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  .hero-actions .btn-modern {
    font-size: 0.82rem !important;
    padding: 0.55rem 1rem !important;
  }

  .skills-strip-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
  }

  .skill-mini-category {
    padding: 0.45rem 0.5rem !important;
  }

  .skill-cat-title {
    font-size: 0.62rem !important;
  }

  .skill-chip {
    font-size: 0.58rem !important;
    padding: 0.1rem 0.32rem !important;
  }

  .split-about-wrapper {
    padding: 4.5rem 0 2.5rem !important;
  }

  .grid-3 {
    gap: 0.4rem !important;
  }

  .project-card-image-wrap,
  .service-card-image-wrap {
    height: 68px !important;
    max-height: 68px !important;
  }

  .project-card-body,
  .service-card-body {
    padding: 0.4rem 0.28rem !important;
  }

  .project-card-title,
  .service-card-title {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .project-card-description,
  .service-short-summary,
  .service-card-body > p {
    font-size: 0.5rem !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }

  .badge-tech {
    font-size: 0.42rem !important;
    padding: 0.04rem 0.16rem !important;
  }

  .service-included-item i {
    font-size: 0.46rem !important;
  }

  .service-included-item span {
    font-size: 0.44rem !important;
  }

  .story-chapter-block:first-child {
    min-height: auto !important;
    padding-top: 1.65rem !important;
    padding-bottom: 1.25rem !important;
    justify-content: flex-start !important;
  }

  .split-about-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 0.7rem;
    padding: 0 0.35rem;
    align-items: start !important;
  }

  .about-visual-col {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
    z-index: 50 !important;
  }

  .chapter-content-card {
    padding: 0.6rem 0.42rem;
  }

  .telemetry-timecode {
    font-size: 0.54rem;
  }

  .chapter-title {
    font-size: 0.84rem;
  }

  .chapter-lead {
    font-size: 0.6rem;
  }

  .stage-style-pills .style-pill-btn {
    padding: 0.12rem 0.28rem;
    font-size: 0.52rem;
  }
}

/* ==========================================================================
   CERTIFICATE LIGHTBOX MODAL
   ========================================================================== */
.cert-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 10, 19, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
}

.cert-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cert-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(56, 189, 248, 0.15);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cert-modal-backdrop.open .cert-modal-dialog {
  transform: scale(1);
}

.cert-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all var(--transition-fast);
}

.cert-modal-close:hover,
.cert-modal-close:active {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg) scale(1.06);
}

.cert-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.cert-icon-seal {
  font-size: 2.75rem;
  margin-bottom: 0.6rem;
}

.cert-modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.cert-modal-issuer {
  font-size: 0.86rem;
  margin-bottom: 1.25rem;
}

.cert-badge-details {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.84rem;
}

.cert-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cert-modal-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   SPLIT ABOUT EXPERIENCE — LIGHT THEME ADAPTATIONS
   ========================================================================== */
html[data-theme="light"] .split-about-wrapper,
html:not([data-theme="dark"]) .split-about-wrapper {
  background: var(--bg-base);
}

html[data-theme="light"] .chapter-content-card,
html:not([data-theme="dark"]) .chapter-content-card {
  background: #ffffff;
  border-color: rgba(203, 213, 225, 0.85);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .story-chapter-block.active .chapter-content-card,
html:not([data-theme="dark"]) .story-chapter-block.active .chapter-content-card {
  border-color: rgba(2, 132, 199, 0.55);
  box-shadow: 0 20px 45px rgba(2, 132, 199, 0.12), 0 0 25px rgba(2, 132, 199, 0.06);
}

html[data-theme="light"] .chapter-title,
html:not([data-theme="dark"]) .chapter-title {
  color: #0f172a;
}

html[data-theme="light"] .chapter-lead,
html:not([data-theme="dark"]) .chapter-lead {
  color: #334155;
}

html[data-theme="light"] .terminal-os-badge,
html:not([data-theme="dark"]) .terminal-os-badge {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.3);
  color: var(--accent-cyan);
}

html[data-theme="light"] .c-chip,
html:not([data-theme="dark"]) .c-chip {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .c-chip.chip-build,
html:not([data-theme="dark"]) .c-chip.chip-build {
  background: rgba(2, 132, 199, 0.06);
  border-color: rgba(2, 132, 199, 0.35);
  color: #0284c7;
}

html[data-theme="light"] .c-chip.chip-learn,
html:not([data-theme="dark"]) .c-chip.chip-learn {
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.35);
  color: #d97706;
}

html[data-theme="light"] .c-chip.chip-explore,
html:not([data-theme="dark"]) .c-chip.chip-explore {
  background: rgba(5, 150, 105, 0.06);
  border-color: rgba(5, 150, 105, 0.35);
  color: #059669;
}

html[data-theme="light"] .c-chip.chip-clickable:hover,
html:not([data-theme="dark"]) .c-chip.chip-clickable:hover {
  background: #f8fafc;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

html[data-theme="light"] .chapter-meta-footer,
html:not([data-theme="dark"]) .chapter-meta-footer {
  border-top-color: #e2e8f0;
  color: #64748b;
}

html[data-theme="light"] .chapter-meta-footer strong,
html:not([data-theme="dark"]) .chapter-meta-footer strong {
  color: #0f172a !important;
}

html[data-theme="light"] .chapter-quote,
html:not([data-theme="dark"]) .chapter-quote {
  background: rgba(2, 132, 199, 0.06);
  border-left-color: var(--accent-cyan);
  color: #0f172a;
}

html[data-theme="light"] .mini-project-tag,
html:not([data-theme="dark"]) .mini-project-tag {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme="light"] .scroll-prompt-chip,
html:not([data-theme="dark"]) .scroll-prompt-chip {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.35);
  color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
}

html[data-theme="light"] .scroll-prompt-chip:hover,
html:not([data-theme="dark"]) .scroll-prompt-chip:hover {
  background: rgba(2, 132, 199, 0.16);
  border-color: #0284c7;
}

html[data-theme="light"] .closing-btn,
html:not([data-theme="dark"]) .closing-btn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme="light"] .closing-btn:hover,
html:not([data-theme="dark"]) .closing-btn:hover {
  background: #ffffff;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Right Visual Stage in Light Theme */
html[data-theme="light"] .sticky-visual-stage,
html:not([data-theme="dark"]) .sticky-visual-stage {
  border-color: #cbd5e1;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 0 30px rgba(2, 132, 199, 0.06);
}

html[data-theme="light"] .stage-telemetry-bar,
html:not([data-theme="dark"]) .stage-telemetry-bar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme="light"] .stage-footer-bar,
html:not([data-theme="dark"]) .stage-footer-bar {
  background: rgba(255, 255, 255, 0.96);
  border-top-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme="light"] .stage-dot,
html:not([data-theme="dark"]) .stage-dot {
  background: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .stage-dot:hover,
html:not([data-theme="dark"]) .stage-dot:hover {
  background: #0f172a;
}

html[data-theme="light"] .stage-dot.active,
html:not([data-theme="dark"]) .stage-dot.active {
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
}

/* Style Switcher in Light Theme */
html[data-theme="light"] .stage-style-pills,
html:not([data-theme="dark"]) .stage-style-pills {
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .style-pills-label,
html:not([data-theme="dark"]) .style-pills-label,
html[data-theme="light"] .outer-style-label,
html:not([data-theme="dark"]) .outer-style-label {
  color: #0284c7;
}

html[data-theme="light"] .style-pill-btn,
html:not([data-theme="dark"]) .style-pill-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

html[data-theme="light"] .style-pill-btn:hover,
html:not([data-theme="dark"]) .style-pill-btn:hover {
  color: #0f172a;
  border-color: #94a3b8;
}

html[data-theme="light"] .style-pill-btn.active,
html:not([data-theme="dark"]) .style-pill-btn.active {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
}

html[data-theme="light"] .scene-counter-badge,
html:not([data-theme="dark"]) .scene-counter-badge {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.3);
  color: #d97706;
}

html[data-theme="light"] .stage-vfx-badge,
html:not([data-theme="dark"]) .stage-vfx-badge {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.3);
  color: #059669;
}

/* Certificate Modal in Light Theme */
html[data-theme="light"] .cert-modal-backdrop,
html:not([data-theme="dark"]) .cert-modal-backdrop {
  background: rgba(15, 23, 42, 0.65);
}

html[data-theme="light"] .cert-modal-dialog,
html:not([data-theme="dark"]) .cert-modal-dialog {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .cert-modal-title,
html:not([data-theme="dark"]) .cert-modal-title {
  color: #0f172a;
}

html[data-theme="light"] .cert-modal-header,
html:not([data-theme="dark"]) .cert-modal-header {
  border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .cert-badge-details,
html:not([data-theme="dark"]) .cert-badge-details {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

html[data-theme="light"] .cert-modal-close,
html:not([data-theme="dark"]) .cert-modal-close {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .cert-modal-close:hover,
html[data-theme="light"] .cert-modal-close:active,
html:not([data-theme="dark"]) .cert-modal-close:hover,
html:not([data-theme="dark"]) .cert-modal-close:active {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

html[data-theme="light"] .cert-detail-row strong,
html:not([data-theme="dark"]) .cert-detail-row strong {
  color: #0f172a;
}

html[data-theme="light"] .cert-chips-grid,
html:not([data-theme="dark"]) .cert-chips-grid {
  grid-template-columns: repeat(2, 1fr);
}

html[data-theme="light"] .cert-chip-card,
html:not([data-theme="dark"]) .cert-chip-card {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .cert-chip-card:hover,
html:not([data-theme="dark"]) .cert-chip-card:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15) !important;
  transform: translateY(-2px);
}

html[data-theme="light"] .cert-chip-info strong,
html:not([data-theme="dark"]) .cert-chip-info strong {
  color: #0f172a !important;
}

html[data-theme="light"] .cert-chip-info span,
html:not([data-theme="dark"]) .cert-chip-info span {
  color: #475569 !important;
}

/* ==========================================================================
   STAGE CANVAS EXPAND TRIGGER & FULLSCREEN LIGHTBOX
   ========================================================================== */
.stage-canvas-frame {
  cursor: pointer;
}

.stage-expand-trigger {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  color: #f8fafc;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  z-index: 10;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.stage-expand-trigger:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .stage-expand-trigger {
    bottom: 6px;
    right: 6px;
    padding: 0.18rem 0.45rem;
    font-size: 0.52rem;
    gap: 0.2rem;
  }
}

/* Fullscreen Lightbox Modal */
.stage-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
}

.stage-fullscreen-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fs-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 7, 14, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.fs-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  box-sizing: border-box;
}

.fs-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1rem;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  color: #f8fafc;
  font-size: 0.76rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  gap: 0.75rem;
}

.fs-telemetry {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.fs-divider {
  color: rgba(255, 255, 255, 0.25);
}

.fs-style-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.15rem 0.3rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.fs-style-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fs-style-btn:hover {
  color: #ffffff;
}

.fs-style-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.fs-counter {
  font-weight: 700;
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
}

/* Clear, Prominent Cross Return Button */
.fs-close-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.18);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25);
}

.fs-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
}

/* Main Viewport (Zero Sliding, In-Place Pure Optical Crossfade, 100% Uncropped) */
.fs-stage-viewport {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
  overflow: hidden;
  min-height: 0;
}

.fs-image-frame {
  position: relative;
  width: min(calc(100vw - 32px), calc((100vh - 140px) * (1600 / 1986)));
  height: min(calc(100vh - 140px), calc((100vw - 32px) * (1986 / 1600)));
  aspect-ratio: 1600 / 1986;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  opacity: 0;
  transform: none !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: opacity;
  pointer-events: none;
}

.fs-img.active {
  opacity: 1 !important;
  z-index: 2;
}

.fs-img.prev-active {
  opacity: 1 !important;
  z-index: 1;
}

.fs-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.fs-nav-arrow:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-50%) scale(1.1);
}

.fs-nav-arrow.fs-prev {
  left: 1.5rem;
}

.fs-nav-arrow.fs-next {
  right: 1.5rem;
}

/* Bottom Navigation */
.fs-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.fs-dots-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
}

.fs-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-size: 0.64rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fs-dot:hover {
  color: #fff;
  border-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.2);
}

.fs-dot.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
  transform: scale(1.15);
}

.fs-keyboard-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 768px) {
  .fs-container {
    padding: 0.4rem 0.5rem;
  }

  .fs-top-bar {
    padding: 0.3rem 0.65rem;
    font-size: 0.66rem;
  }

  .fs-close-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.95rem;
  }

  .fs-stage-viewport {
    margin: 0.35rem 0;
  }

  .fs-image-frame {
    width: min(calc(100vw - 16px), calc((100vh - 120px) * (1600 / 1986))) !important;
    height: min(calc(100vh - 120px), calc((100vw - 16px) * (1986 / 1600))) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 120px) !important;
    aspect-ratio: 1600 / 1986 !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
  }

  .fs-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .fs-nav-arrow {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .fs-nav-arrow.fs-prev {
    left: 0.25rem;
  }

  .fs-nav-arrow.fs-next {
    right: 0.25rem;
  }

  .fs-dot {
    width: 18px;
    height: 18px;
    font-size: 0.54rem;
  }

  .fs-keyboard-hint {
    display: none;
  }
}

/* ==========================================================================
   PROPRIETARY PRIVATE REPOSITORY MODAL
   ========================================================================== */
.private-repo-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 12, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.private-repo-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.private-repo-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #0f172a;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7), 0 0 40px rgba(245, 158, 11, 0.15);
  transform: scale(0.95) translateY(8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.private-repo-modal-backdrop.open .private-repo-modal-dialog {
  transform: scale(1) translateY(0);
}

.private-repo-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.private-repo-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.private-repo-modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 1.25rem auto;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.private-repo-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.private-repo-lead {
  font-size: 0.92rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin-bottom: 1.35rem;
}

.private-repo-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: #94a3b8;
  margin-bottom: 1.5rem;
}

.private-repo-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.private-repo-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Light Mode Overrides for Private Repo Modal */
html[data-theme="light"] .private-repo-modal-dialog,
html:not([data-theme="dark"]) .private-repo-modal-dialog {
  background: #ffffff;
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .private-repo-title,
html:not([data-theme="dark"]) .private-repo-title {
  color: #0f172a;
}

html[data-theme="light"] .private-repo-lead,
html:not([data-theme="dark"]) .private-repo-lead {
  color: #475569;
}

html[data-theme="light"] .private-repo-box,
html:not([data-theme="dark"]) .private-repo-box {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

html[data-theme="light"] .private-repo-modal-close,
html:not([data-theme="dark"]) .private-repo-modal-close {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

/* ==========================================================================
   MODERN SYSTEM ALERT NOTIFICATIONS
   ========================================================================== */
.alert-modern {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  animation: alertFadeIn 0.3s ease-out;
}

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

.alert-modern.alert-success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.alert-modern.alert-error {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fb7185;
}

.alert-modern.alert-info {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

html[data-theme="light"] .alert-modern.alert-success,
html:not([data-theme="dark"]) .alert-modern.alert-success {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: #065f46;
}

html[data-theme="light"] .alert-modern.alert-error,
html:not([data-theme="dark"]) .alert-modern.alert-error {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.5);
  color: #9f1239;
}

/* ==========================================================================
   GENERATIVE AI & PROMPT ENGINEERING LAB MODAL
   ========================================================================== */
.ai-lab-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 8, 16, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.ai-lab-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ai-lab-modal-dialog {
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(7, 11, 22, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(56, 189, 248, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(15px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-lab-modal-overlay.active .ai-lab-modal-dialog {
  transform: scale(1) translateY(0);
}

/* Modal Header */
.ai-lab-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.4);
}

.ai-lab-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.ai-lab-modal-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  line-height: 1.25;
}

.ai-lab-modal-subtitle {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.4;
}

.ai-lab-modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.ai-lab-modal-close:hover {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fb7185;
  transform: rotate(90deg);
}

/* Modal Tab Nav */
.ai-lab-tab-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: rgba(10, 15, 29, 0.6);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.ai-lab-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.ai-lab-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.ai-lab-tab-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(168, 85, 247, 0.25));
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.15);
}

/* Modal Body */
.ai-lab-modal-body {
  padding: 1.75rem;
  overflow-y: auto;
  flex: 1;
}

.ai-lab-tab-panel {
  display: none;
  animation: tabFadeIn 0.3s ease-out;
}

.ai-lab-tab-panel.active {
  display: block;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-tab-intro p {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   TAB 1: PROMPTS & RECIPES
   -------------------------------------------------------------------------- */
.ai-prompts-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ai-prompt-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: all var(--transition-fast);
}

.ai-prompt-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.ai-prompt-preview-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1/1;
  background: #000;
}

.ai-prompt-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ai-prompt-card:hover .ai-prompt-preview-img {
  transform: scale(1.05);
}

.ai-prompt-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(10, 15, 29, 0.85);
  backdrop-filter: blur(8px);
  color: var(--accent-cyan);
  border-radius: var(--radius-xs);
  text-align: center;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ai-prompt-details {
  display: flex;
  flex-direction: column;
}

.ai-prompt-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.ai-prompt-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0;
}

.ai-token-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.ai-token {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--accent-cyan);
  border-radius: var(--radius-xs);
}

.ai-code-block-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  margin-top: auto;
}

.ai-prompt-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: #e2e8f0;
  margin-bottom: 0;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 4rem;
}

.ai-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--accent-cyan);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-copy-btn:hover {
  background: var(--accent-cyan);
  color: #050810;
}

.ai-copy-btn.copied {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #050810;
}

/* --------------------------------------------------------------------------
   TAB 2: BEFORE & AFTER SLIDER
   -------------------------------------------------------------------------- */
.ai-comparison-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.ai-comparison-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  user-select: none;
  cursor: ew-resize;
  background: #000;
}

.ai-comp-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ai-comp-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  border-right: 2px solid #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.ai-comp-overlay .ai-comp-img {
  width: 520px;
  max-width: none;
}

.ai-comp-badge {
  position: absolute;
  top: 12px;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  z-index: 5;
  pointer-events: none;
}

.ai-comp-badge.badge-after {
  right: 12px;
  background: rgba(16, 185, 129, 0.85);
  color: #fff;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.ai-comp-badge.badge-before {
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ai-comp-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

.ai-comp-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: #fff;
  color: #0f172a;
  border: 3px solid rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.8rem;
  font-weight: 800;
}

/* Workflow Step Cards */
.ai-comp-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}

.ai-workflow-item {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  position: relative;
}

.ai-workflow-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-cyan);
  display: block;
  margin-bottom: 0.35rem;
}

.ai-workflow-item h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.ai-workflow-item p {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   TAB 3: CREATION CAPABILITIES MATRIX
   -------------------------------------------------------------------------- */
.ai-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.ai-capability-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: all var(--transition-fast);
}

.ai-capability-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.ai-cap-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

.ai-capability-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.ai-capability-card p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 0;
}

.ai-modal-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

/* Light Theme Support */
html[data-theme="light"] .ai-lab-modal-dialog,
html:not([data-theme="dark"]) .ai-lab-modal-dialog {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .ai-lab-modal-header,
html:not([data-theme="dark"]) .ai-lab-modal-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .ai-lab-tab-nav,
html:not([data-theme="dark"]) .ai-lab-tab-nav {
  background: #f1f5f9;
  border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .ai-prompt-card,
html:not([data-theme="dark"]) .ai-prompt-card,
html[data-theme="light"] .ai-workflow-item,
html:not([data-theme="dark"]) .ai-workflow-item,
html[data-theme="light"] .ai-capability-card,
html:not([data-theme="dark"]) .ai-capability-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .ai-code-block-wrap,
html:not([data-theme="dark"]) .ai-code-block-wrap {
  background: #0f172a;
}

html[data-theme="light"] .ai-prompt-code,
html:not([data-theme="dark"]) .ai-prompt-code {
  color: #f1f5f9;
}

/* Responsive Scaling for Mobile */
@media (max-width: 768px) {
  .ai-lab-modal-dialog {
    max-height: 94vh;
  }
  
  .ai-lab-modal-header {
    padding: 1rem 1.25rem;
  }

  .ai-lab-modal-title {
    font-size: 1.05rem;
  }

  .ai-lab-modal-body {
    padding: 1.15rem 1rem;
  }

  .ai-prompt-card {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .ai-prompt-preview-wrap {
    max-height: 180px;
  }

  .ai-comp-workflow-grid,
  .ai-capabilities-grid {
    grid-template-columns: 1fr;
  }

  .ai-modal-bottom-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ==========================================================================
   DAY IN THE LIFE — HOMEPAGE GLIMPSE & TEASER SECTION
   ========================================================================== */
.day-in-life-teaser-section {
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.07), transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(168, 85, 247, 0.05), transparent 50%);
}

.teaser-card-wrapper {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(8, 12, 24, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-xl);
  padding: 2.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.08);
  position: relative;
  overflow: hidden;
}

.teaser-card-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-primary), var(--accent-purple));
}

.teaser-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.teaser-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.teaser-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--accent-cyan);
  border-radius: var(--radius-full);
}

.teaser-pill-scenes {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.teaser-title {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.teaser-description {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.teaser-timeline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.teaser-timeline-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: all var(--transition-fast);
}

.teaser-timeline-box:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.9);
  transform: translateY(-2px);
}

.teaser-time-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.teaser-time-tag .status-dot {
  width: 5px;
  height: 5px;
  background: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-cyan);
}

.teaser-scene-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Right Film Frame */
.teaser-film-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.1);
  aspect-ratio: 1 / 1;
  background: #000;
  display: block;
  text-decoration: none;
}

.teaser-film-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.teaser-film-frame:hover .teaser-film-img {
  transform: scale(1.06);
  filter: brightness(1.1);
}

.teaser-film-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  z-index: 2;
}

.teaser-film-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 700;
  background: rgba(10, 15, 29, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #fff;
  border-radius: var(--radius-xs);
  align-self: flex-start;
}

.teaser-film-center-badge {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(10, 15, 30, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: all var(--transition-fast);
  opacity: 0.75;
}

.teaser-film-frame:hover .teaser-film-center-badge {
  transform: scale(1.1);
  opacity: 1;
  background: rgba(56, 189, 248, 0.35);
  border-color: var(--accent-cyan);
  color: #ffffff;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.6);
}

.teaser-film-caption {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
  text-align: center;
  margin-bottom: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* Light Theme */
html[data-theme="light"] .teaser-card-wrapper,
html:not([data-theme="dark"]) .teaser-card-wrapper {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .teaser-timeline-box,
html:not([data-theme="dark"]) .teaser-timeline-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

/* Mobile Responsive: Keep Text on Left & Photo on Right (Synchronized 2-Column Grid) */
@media (max-width: 992px) {
  .teaser-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.25rem;
    align-items: center;
  }

  .teaser-card-wrapper {
    padding: 1.5rem 1.25rem;
  }

  .teaser-film-frame {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 767px) {
  .teaser-grid {
    grid-template-columns: 1.18fr 0.82fr;
    gap: 0.85rem;
    align-items: center;
  }

  .teaser-card-wrapper {
    padding: 1.25rem 0.85rem;
    border-radius: var(--radius-md);
  }

  .teaser-badge-row {
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }

  .teaser-pill {
    font-size: 0.62rem;
    padding: 0.18rem 0.45rem;
    gap: 0.25rem;
  }

  .teaser-title {
    font-size: 1.05rem;
    line-height: 1.2;
    margin-bottom: 0.4rem;
  }

  .teaser-description {
    font-size: 0.74rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
  }

  .teaser-timeline-grid {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
  }

  .teaser-timeline-box {
    padding: 0.32rem 0.5rem;
    gap: 0.12rem;
    border-radius: var(--radius-xs);
  }

  .teaser-time-tag {
    font-size: 0.62rem;
    gap: 0.25rem;
  }

  .teaser-time-tag .status-dot {
    width: 4px;
    height: 4px;
  }

  .teaser-scene-label {
    font-size: 0.68rem;
  }

  .teaser-cta-btn {
    font-size: 0.72rem !important;
    padding: 0.42rem 0.75rem !important;
    gap: 0.35rem !important;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .teaser-film-frame {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm);
  }

  .teaser-film-overlay {
    padding: 0.5rem;
  }

  .teaser-film-header-badge {
    font-size: 0.55rem;
    padding: 0.18rem 0.35rem;
  }

  .teaser-film-center-badge {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    opacity: 0.65;
    background: rgba(10, 15, 30, 0.2);
  }

  .teaser-film-caption {
    font-size: 0.62rem;
    line-height: 1.2;
  }
}

@media (max-width: 420px) {
  .teaser-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.65rem;
  }

  .teaser-card-wrapper {
    padding: 1rem 0.65rem;
  }

  .teaser-title {
    font-size: 0.94rem;
  }

  .teaser-description {
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .teaser-timeline-box {
    padding: 0.25rem 0.4rem;
  }

  .teaser-time-tag {
    font-size: 0.56rem;
  }

  .teaser-scene-label {
    font-size: 0.62rem;
  }

  .teaser-cta-btn {
    font-size: 0.68rem !important;
    padding: 0.38rem 0.6rem !important;
  }
}

/* ==========================================================================
   LAB SECTION & 3D INTERACTIVE EXPERIMENTS (THREE.JS CUE CARDS)
   ========================================================================== */
.lab-experiments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.lab-cue-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.lab-cue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 25px rgba(0, 242, 254, 0.18);
  border-color: var(--accent-cyan);
}

.lab-card-poster-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0f19;
  position: relative;
  overflow: hidden;
}

.lab-card-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.lab-cue-card:hover .lab-card-poster-img {
  transform: scale(1.05);
}

.lab-card-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lab-cue-card:hover .lab-card-play-overlay {
  opacity: 1;
}

.lab-play-btn-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0, 242, 254, 0.95);
  color: #070a14;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 24px rgba(0, 242, 254, 0.65);
  transform: scale(0.9);
  transition: transform 0.25s ease;
}

.lab-cue-card:hover .lab-play-btn-circle {
  transform: scale(1.06);
}

.lab-card-body {
  padding: 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lab-card-tagline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.lab-card-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

.lab-card-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 1.1rem;
}

.lab-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

/* 3D Theatre Modal */
.lab-3d-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: rgba(7, 10, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  flex-direction: column;
}

.lab-3d-modal.active {
  display: flex !important;
}

.lab-3d-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.85);
  z-index: 10;
  gap: 0.75rem;
}

.lab-3d-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.lab-3d-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-3d-author {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.lab-3d-stage-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, #172033 0%, #090d16 100%);
}

#threeLabCanvasContainer {
  width: 100%;
  height: 100%;
  display: block;
}

#threeLabCanvasContainer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

.lab-3d-loading-screen {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 20;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lab-3d-loading-screen.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lab-3d-hint-pill {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 15;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .lab-3d-hint-pill {
    font-size: 0.65rem;
    padding: 0.35rem 0.7rem;
    bottom: 16px;
    width: max-content;
    max-width: 90vw;
  }
  .lab-3d-topbar {
    padding: 0.55rem 0.75rem;
  }
}

.lab-3d-presets-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lab-preset-pill {
  padding: 0.26rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 600;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #94a3b8;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.lab-preset-pill:hover,
.lab-preset-pill.active {
  background: rgba(0, 242, 254, 0.2);
  border-color: var(--accent-cyan);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

@media (max-width: 1024px) {
  .lab-3d-presets-nav {
    display: none;
  }
}

/* ==========================================================================
   PROJECT SEGREGATION & PROTOTYPE NOTICE STYLES
   ========================================================================== */

/* Category Context Notice Banner on /work/ */
.category-context-notice {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.35rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.context-notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.context-notice-inner i {
  font-size: 1.25rem;
  color: var(--accent-primary);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.context-notice-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.context-notice-text strong {
  color: var(--text-primary);
  font-weight: 600;
  display: inline-block;
  margin-right: 0.35rem;
}

html[data-theme="dark"] .category-context-notice {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-left: 4px solid var(--accent-cyan);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .context-notice-inner i {
  color: var(--accent-cyan);
}

html[data-theme="dark"] .context-notice-text {
  color: #cbd5e1;
}

html[data-theme="dark"] .context-notice-text strong {
  color: #f8fafc;
}

/* Badge Strip on Project Cards */
.project-card-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge-project-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.badge-project-type.prototype {
  background: rgba(147, 51, 234, 0.1);
  border: 1px solid rgba(147, 51, 234, 0.25);
  color: #7e22ce;
}

.badge-project-type.client {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #047857;
}

.badge-project-type.personal {
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
  color: #0284c7;
}

.badge-project-type.academic {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #b45309;
}

html[data-theme="dark"] .badge-project-type.prototype {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

html[data-theme="dark"] .badge-project-type.client {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

html[data-theme="dark"] .badge-project-type.personal {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

html[data-theme="dark"] .badge-project-type.academic {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.badge-project-category {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-primary);
  background: var(--accent-primary-subtle);
  border: 1px solid rgba(37, 99, 235, 0.22);
  padding: 0.16rem 0.52rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  transition: all var(--transition-fast);
}

html[data-theme="dark"] .badge-project-category {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
}

/* Prototype Disclaimer Banner on Project Detail */
.prototype-case-study-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.05), rgba(2, 132, 199, 0.04));
  border: 1px solid rgba(147, 51, 234, 0.2);
  border-left: 4px solid #7e22ce;
  border-radius: var(--radius-md);
  margin-top: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.prototype-notice-icon {
  font-size: 1.35rem;
  color: #7e22ce;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.prototype-notice-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.prototype-notice-tag {
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b21a8;
}

.prototype-notice-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.prototype-notice-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

html[data-theme="dark"] .prototype-case-study-notice {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(56, 189, 248, 0.08));
  border-color: rgba(168, 85, 247, 0.35);
  border-left-color: #a855f7;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .prototype-notice-icon {
  color: #c084fc;
}

html[data-theme="dark"] .prototype-notice-tag {
  color: #c084fc;
}

html[data-theme="dark"] .prototype-notice-text {
  color: #cbd5e1;
}

html[data-theme="dark"] .prototype-notice-text strong {
  color: #f8fafc;
}

/* ==========================================================================
   CASE STUDY CTA CARD (EXPERIENCE THE LIVE PROTOTYPE / DEMO)
   ========================================================================== */
.case-study-cta-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.case-study-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-cyan));
}

.case-study-cta-card .cta-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.case-study-cta-card .cta-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.65;
}

.case-study-cta-card .cta-card-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

html[data-theme="dark"] .case-study-cta-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .case-study-cta-card .cta-card-title {
  color: #f8fafc;
}

html[data-theme="dark"] .case-study-cta-card .cta-card-desc {
  color: #94a3b8;
}

/* Signature Feature Card in Case Study */
.signature-feature-card {
  padding: 1.25rem 1.4rem;
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--radius-md);
}

html[data-theme="dark"] .signature-feature-card {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.28);
}

/* Design Identity Card in Case Study */
.design-identity-card {
  padding: 1.15rem 1.35rem;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

/* Clean features list */
.clean-features-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.clean-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.clean-features-list li i {
  color: var(--accent-emerald);
  margin-top: 0.2rem;
  flex-shrink: 0;
}