/* ══════════════════════════════════════════════════════════════════
   REVOLUTIONARY QUANTUM DESIGN SYSTEM — STYLE.CSS
   Muhammad Roman | AI Systems & Mobile App Architect
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. DYNAMIC QUANTUM THEME TOKENS ──────────────────────────── */
:root {
  --cursor-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%23050814'%20stroke%3D'%233b82f6'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%233b82f6'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, pointer;
  /* Default: Obsidian Neon (Liquid Glass) */
  --bg-deep:         #02040a;
  --bg-base:         #050814;
  --bg-surface:      rgba(8, 14, 34, 0.52);
  --bg-surface-elev: rgba(14, 22, 54, 0.68);
  --bg-glass:        rgba(8, 14, 34, 0.45);
  --bg-glass-heavy:  rgba(5, 10, 26, 0.68);

  --accent-primary:  #3b82f6;
  --accent-primary-l:#60a5fa;
  --accent-secondary:#8b5cf6;
  --accent-secondary-l:#a78bfa;
  --accent-tertiary: #06b6d4;
  --accent-tertiary-l:#22d3ee;
  --accent-emerald:  #10b981;
  --accent-amber:    #f59e0b;
  --accent-rose:     #f43f5e;

  --text-pure:       #ffffff;
  --text-primary:    #f1f5f9;
  --text-secondary:  #94a3b8;
  --text-muted:      #7c8aa0;   /* was #64748b -- 4.3:1 on --bg-deep, failed WCAG AA at 12px */

  --border-subtle:   rgba(255, 255, 255, 0.12);
  --border-medium:   rgba(139, 92, 246, 0.3);
  --border-glow:     rgba(59, 130, 246, 0.5);
  --glow-primary:    rgba(59, 130, 246, 0.35);

  --grad-superhuman: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 45%, #06b6d4 100%);
  --grad-aurora:     radial-gradient(circle, rgba(139,92,246,0.2) 0%, rgba(59,130,246,0.14) 40%, transparent 70%);

  /* ── Liquid Glass UI Core Tokens ── */
  --glass-blur:        blur(28px) saturate(210%);
  --glass-blur-heavy:  blur(36px) saturate(230%);
  --glass-specular:    inset 0 1px 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 24px 0 rgba(255, 255, 255, 0.02);
  --glass-shadow:      0 25px 65px rgba(0, 0, 0, 0.6), 0 0 35px var(--glow-primary);
  --glass-shadow-hover:0 35px 85px rgba(0, 0, 0, 0.78), 0 0 50px var(--accent-primary-l);

  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full:9999px;

  /* Interactive-target floors (WCAG 2.2 AA 2.5.8). */
  --target-min:     24px;   /* WCAG 2.2 AA 2.5.8 — hard floor */
  --target-comfort: 45px;   /* comfortable touch — coarse-pointer devices.
                               45 rather than 44 for the same subpixel reason
                               as the 25px floor: 44px computes to 43.x and
                               misses the target. Exceeding a minimum is
                               always compliant. */
  --target-effective: max(24px, 25px);  /* see the interaction layer below */

  /* Notch / safe-area insets. 0px fallback = plain rectangles on browsers
     without env() support. Applied only to fixed chrome (navbar, drawer,
     dock, toasts, floating buttons) so in-flow layout never shifts. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Stacking scale. Global overlays previously used arbitrary values in the
     9990-10005 range with no relationship to each other, which is how a
     dialog ends up behind a toast. The order below is IDENTICAL to the old
     one; only the notation changed. */
  --z-dock:    30;   /* was 9990  floating icon dock */
  --z-theme:   40;   /* was 9997  theme spectrum toggle */
  --z-toast:   50;   /* was 9999  toasts, loader */
  --z-nav:     60;   /* was 10000 navbar, floating Roman AI button */
  --z-marker:  70;   /* was 10001 */
  --z-progress:80;   /* was 10002 scroll progress bar */
  --z-drawer:  90;   /* was 10003 AI chat drawer */
  --z-panel:  100;   /* was 10004 */
  --z-overlay:110;   /* was 10005 command palette */

  /* ═══ RESPONSIVE BREAKPOINT LADDER ═══
     Six steps: 480 / 768 / 900 / 1024 / 1280 / 1440.
     Documented as :root variables for discoverability, but CSS custom
     properties CANNOT be read inside an @media condition — that is a language
     limitation, not an authoring mistake. The queries therefore use literals.
     Do NOT attempt to write var(--bp-tablet) in a media feature. */
  --bp-phone:  480px;
  --bp-tablet: 768px;
  --bp-laptop: 900px;
  --bp-desktop:1024px;
  --bp-wide:  1280px;
  --bp-ultra:  1440px;

  /* Single typeface (owner decision): every --font-* token resolves to the
     same DM Sans stack, so the whole site speaks one voice. Token names are
     kept so display/body roles stay readable and a future split is a
     one-line change, not a 100-site edit. */
  --font-sans:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-quick:  0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Quantum Gold (Liquid Amber Glass) ── */
[data-theme="gold"] {
  --cursor-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%230d0a04'%20stroke%3D'%23f59e0b'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%23f59e0b'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, pointer;
  --bg-deep:         #060502;
  --bg-base:         #0d0a04;
  --bg-surface:      rgba(26, 20, 8, 0.52);
  --bg-surface-elev: rgba(38, 28, 12, 0.68);
  --bg-glass:        rgba(26, 20, 8, 0.45);
  --bg-glass-heavy:  rgba(18, 13, 5, 0.68);

  --accent-primary:  #f59e0b;
  --accent-primary-l:#fbbf24;
  --accent-secondary:#d97706;
  --accent-secondary-l:#fde68a;
  --accent-tertiary: #b45309;
  --accent-tertiary-l:#fef3c7;

  --border-subtle:   rgba(245, 158, 11, 0.16);
  --border-medium:   rgba(245, 158, 11, 0.35);
  --border-glow:     rgba(251, 191, 36, 0.55);
  --glow-primary:    rgba(245, 158, 11, 0.35);

  --grad-superhuman: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%);
  --grad-aurora:     radial-gradient(circle, rgba(245,158,11,0.22) 0%, rgba(217,119,6,0.14) 40%, transparent 70%);
}

/* ── Cyberpunk Matrix (Liquid Emerald Glass) ── */
[data-theme="matrix"] {
  --cursor-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%23041007'%20stroke%3D'%2310b981'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%2310b981'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, pointer;
  --bg-deep:         #020804;
  --bg-base:         #041007;
  --bg-surface:      rgba(6, 24, 12, 0.52);
  --bg-surface-elev: rgba(10, 36, 18, 0.68);
  --bg-glass:        rgba(6, 24, 12, 0.45);
  --bg-glass-heavy:  rgba(4, 16, 8, 0.68);

  --accent-primary:  #10b981;
  --accent-primary-l:#34d399;
  --accent-secondary:#059669;
  --accent-secondary-l:#6ee7b7;
  --accent-tertiary: #047857;
  --accent-tertiary-l:#a7f3d0;

  --border-subtle:   rgba(16, 185, 129, 0.16);
  --border-medium:   rgba(16, 185, 129, 0.35);
  --border-glow:     rgba(52, 211, 153, 0.55);
  --glow-primary:    rgba(16, 185, 129, 0.35);

  --grad-superhuman: linear-gradient(135deg, #10b981 0%, #34d399 50%, #059669 100%);
  --grad-aurora:     radial-gradient(circle, rgba(16,185,129,0.22) 0%, rgba(5,150,105,0.14) 40%, transparent 70%);
}

/* ── Hyper Violet (Liquid Nebula Glass) ── */
[data-theme="violet"] {
  --cursor-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%23090414'%20stroke%3D'%238b5cf6'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'22'%20viewBox%3D'0%200%2022%2022'%3E%3Cpath%20d%3D'M2%202l6%2017%203-6.5%206.5-3z'%20fill%3D'%238b5cf6'%20stroke%3D'%23ffffff'%20stroke-width%3D'1.5'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 2 2, pointer;
  --bg-deep:         #050209;
  --bg-base:         #0a0414;
  --bg-surface:      rgba(22, 10, 38, 0.52);
  --bg-surface-elev: rgba(32, 14, 56, 0.68);
  --bg-glass:        rgba(22, 10, 38, 0.45);
  --bg-glass-heavy:  rgba(14, 6, 26, 0.68);

  --accent-primary:  #8b5cf6;
  --accent-primary-l:#a78bfa;
  --accent-secondary:#ec4899;
  --accent-secondary-l:#f472b6;
  --accent-tertiary: #c084fc;
  --accent-tertiary-l:#fbcfe8;

  --border-subtle:   rgba(139, 92, 246, 0.16);
  --border-medium:   rgba(236, 72, 153, 0.35);
  --border-glow:     rgba(168, 85, 247, 0.55);
  --glow-primary:    rgba(139, 92, 246, 0.35);

  --grad-superhuman: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #c084fc 100%);
  --grad-aurora:     radial-gradient(circle, rgba(139,92,246,0.22) 0%, rgba(236,72,153,0.14) 40%, transparent 70%);
}


/* ─── 2. RESET & GLOBAL DEFAULTS ───────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-deep);
  transition: background-color 0.4s ease;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
  cursor: var(--cursor-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Scroll progress neon indicator */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-superhuman);
  z-index: var(--z-progress);
  box-shadow: 0 0 14px var(--accent-primary), 0 0 24px var(--accent-secondary);
  transition: width 0.05s linear;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; border: none; background: none; cursor: var(--cursor-pointer); }
input, select, textarea {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}
kbd { font-family: var(--font-mono);
  font-size: var(--text-micro);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  color: var(--text-secondary);
}

/* ─── 3. SIMPLE THEMED PRECISION CURSOR ───────────────────────────── */
#cursor-dot,
#cursor-ring {
  display: none !important;
}

/* Global cursor & interactive pointer styles */
html, body {
  cursor: var(--cursor-default);
}

a, button, [role="button"], select,
.nav-link, .nav-cmd-trigger, .theme-pill-btn, .prompt-chip,
.selector-card, .bento-card, .super-project-card, .uplink-card,
.spc-quick-action, .bp-node, .swarm-node-item, .dock-item,
.modal-close, .ai-drawer-close, .ai-voice-toggle, .btn-persona-mic,
.btn-persona-stop, .btn-send-query, .console-tab, .bp-nav-btn {
  cursor: var(--cursor-pointer) !important;
}

input, textarea {
  cursor: text !important;
  caret-color: var(--accent-primary);
}

/* ─── 4. CINEMATIC WORKSTATION BACKDROP & THREE.JS CANVAS ─────────── */
.portfolio-backdrop-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh; /* fallback: browsers without dynamic viewport units */
  height: 100dvh; /* mobile browser chrome (URL bar) no longer crops it */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.backdrop-img {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  /* JPEG first: it is the universal fallback background. Browsers that support
     image-set() with type() then load the AVIF (or WebP) instead -- 3.3x/2x
     smaller for the same heavily-filtered visual. No layout or animation
     change; this is a byte-count change only. */
  background: url('images/background.jpeg') no-repeat center center;
  background-size: cover;
  background-image: image-set(
    url('images/background.avif') type('image/avif') 1x,
    url('images/background.webp') type('image/webp') 1x
  );
  filter: brightness(0.82) saturate(115%) contrast(105%);
  animation: backdrop-subtle-drift 40s ease-in-out infinite alternate;
  will-change: transform;
  opacity: 0.92;
}

@keyframes backdrop-subtle-drift {
  0% { transform: scale(1.0) translate(0, 0); }
  50% { transform: scale(1.03) translate(-0.5%, -0.3%); }
  100% { transform: scale(1.01) translate(0.4%, 0.5%); }
}

.backdrop-aurora {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 15%, rgba(99, 102, 241, 0.2) 0%, transparent 45%),
              radial-gradient(circle at 10% 75%, rgba(217, 70, 239, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 50% 30%, rgba(6, 182, 212, 0.1) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.backdrop-overlay-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 65% 25%, rgba(3, 7, 20, 0.15) 0%, rgba(3, 6, 18, 0.45) 55%, rgba(2, 4, 12, 0.75) 100%),
    linear-gradient(180deg, rgba(2, 5, 16, 0.3) 0%, rgba(2, 5, 16, 0.5) 45%, rgba(2, 5, 16, 0.75) 100%);
  pointer-events: none;
}

.backdrop-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 50%, transparent 90%);
  opacity: 0.35;
  pointer-events: none;
}






/* ─── 5. TOAST NOTIFICATIONS ───────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.4rem;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px var(--glow-primary);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-pure);
  pointer-events: auto;
  animation: toast-in 0.35s var(--ease-bounce) forwards;
}

.toast.toast-exit {
  animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-15px) scale(0.95); }
}

/* ─── 6. SYSTEM LOADER ─────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s var(--ease-smooth), visibility 0.5s var(--ease-smooth);
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* ── Loader Avatar ── */
.loader-avatar-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.loader-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent-primary) 0%,
    var(--accent-secondary) 45%,
    var(--accent-tertiary) 80%,
    var(--accent-primary) 100%
  );
  animation: ring-spin 2s linear infinite;
  mask: radial-gradient(transparent 42px, black 44px);
  -webkit-mask: radial-gradient(transparent 42px, black 44px);
}

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

.loader-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 3px solid var(--bg-deep);
  position: relative;
  z-index: 1;
  animation: avatar-appear 0.6s var(--ease-bounce) both;
}

@keyframes avatar-appear {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Loader Identity Text ── */
.loader-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.loader-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.loader-role {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--accent-primary-l);
  letter-spacing: 0.06em;
}

/* ── Loader Progress Bar ── */
.loader-bar {
  width: 220px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 0.25rem;
}

#loader-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-superhuman);
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px var(--accent-primary);
  transition: width 0.15s ease;
}

/* ── Loader Status Text ── */
.loader-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background: var(--accent-primary-l);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-primary);
  animation: pulse-ring 1.4s ease infinite;
  flex-shrink: 0;
}

.pulse-dot.green {
  background: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.4; }
}

/* ─── 7. QUANTUM SPECTRUM THEME SWITCHER ───────────────────────── */
.theme-spectrum-toggle {
  position: fixed;
  top: 5.5rem;
  right: 2rem;
  z-index: var(--z-theme);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.theme-pill-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  /* Legibility floor: 0.75rem resolves below 12px wherever the fluid root
     dips (11.9px at 900px), which fails P2. --text-micro is px-clamped to
     never drop below 12.48px, by design the only safe meta size. */
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.theme-pill-btn:hover {
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.08);
}

.theme-pill-btn.active {
  background: var(--grad-superhuman);
  color: white;
  box-shadow: 0 2px 10px var(--glow-primary);
}

.tp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tp-dot.neon { background: #06b6d4; box-shadow: 0 0 6px #06b6d4; }
.tp-dot.gold { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.tp-dot.matrix { background: #10b981; box-shadow: 0 0 6px #10b981; }
.tp-dot.violet { background: #ec4899; box-shadow: 0 0 6px #ec4899; }

/* ─── 8. "ASK ROMAN AI" VOICE/CHAT HOLOGRAPHIC DRAWER ─────────── */
.ai-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border-left: 1px solid var(--border-glow);
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.8), 0 0 40px var(--glow-primary);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-bounce);
}

.ai-chat-drawer.open {
  transform: translateX(0);
}

.ai-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}

.ai-avatar-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-avatar-dot {
  width: 10px;
  height: 10px;
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-primary);
  animation: pulse-ring 1.5s infinite;
}

.ai-avatar-info {
  display: flex;
  flex-direction: column;
}

.ai-avatar-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-pure);
}

.ai-avatar-status {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--accent-primary-l);
}

.ai-drawer-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ai-voice-toggle {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.ai-voice-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-pure);
}

.ai-voice-toggle.voice-active {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
}

.ai-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.ai-drawer-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-pure);
}

/* Persona Voice Waveform */
.ai-drawer-waveform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}
.ai-drawer-waveform.listening {
  background: rgba(239, 68, 68, 0.12);
  border-bottom-color: rgba(239, 68, 68, 0.35);
}
.ai-drawer-waveform.speaking {
  background: rgba(16, 185, 129, 0.12);
  border-bottom-color: rgba(16, 185, 129, 0.35);
}
.persona-waveform-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
}
.persona-waveform-bars span {
  width: 2.5px;
  height: 4px;
  background: var(--accent-primary);
  border-radius: 99px;
  transition: height 0.1s ease;
  opacity: 0.35;
}
.ai-drawer-waveform.listening .persona-waveform-bars span {
  opacity: 1;
  background: #ef4444;
  animation: persona-waveform-dance 0.5s ease-in-out infinite alternate;
}
.ai-drawer-waveform.listening .persona-waveform-bars span:nth-child(odd) { animation-delay: 0.1s; }
.ai-drawer-waveform.listening .persona-waveform-bars span:nth-child(3n) { animation-delay: 0.2s; }
.ai-drawer-waveform.speaking .persona-waveform-bars span {
  opacity: 1;
  background: var(--accent-emerald);
  animation: persona-waveform-dance 0.4s ease-in-out infinite alternate;
}
.ai-drawer-waveform.speaking .persona-waveform-bars span:nth-child(even) { animation-delay: 0.15s; }
@keyframes persona-waveform-dance {
  from { height: 3px; }
  to { height: 18px; }
}
.persona-waveform-status {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-drawer-waveform.listening .persona-waveform-status {
  color: #f87171;
  font-weight: 600;
}
.ai-drawer-waveform.speaking .persona-waveform-status {
  color: var(--accent-emerald);
  font-weight: 600;
}

/* Persona Voice Controls */
.btn-persona-mic {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary-l);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.btn-persona-mic:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--accent-primary);
  transform: scale(1.06);
  color: white;
}
.btn-persona-mic.listening {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #ef4444;
  color: white;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
.btn-persona-stop {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f87171;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.btn-persona-stop:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.08);
}

.ai-drawer-chat {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ai-msg {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 85%;
}

.ai-msg.bot { align-self: flex-start; }
.ai-msg.user { align-self: flex-end; }

.msg-bubble {
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ai-msg.bot .msg-bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.ai-msg.user .msg-bubble {
  background: var(--grad-superhuman);
  color: white;
  font-weight: 500;
}

.msg-time {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-muted);
  padding: 0 0.4rem;
}

/* Failed answer state.
   The old build hid every API failure behind canned persona text, so a dead
   upstream looked like a working chat. An honest error is the whole point of
   this state, so it is styled to read clearly rather than quietly. */
.msg-error {
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
  background: color-mix(in srgb, #ef4444 10%, var(--bg-elevated, transparent));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.msg-error strong {
  color: #fca5a5;
  font-weight: 600;
}
.msg-error-detail {
  font-size: var(--text-micro);
  color: var(--text-muted);
  line-height: 1.45;
}
.msg-retry {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--accent-primary-l);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.msg-retry:hover {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  border-color: var(--accent-primary);
}
.msg-retry:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
/* Tap-to-listen: same pill language as retry. Sits under the bubble,
 * outside .msg-bubble so text scraping and TTS text stay clean. */
.msg-listen {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--accent-primary-l);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-top: 0.4rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.msg-listen:hover {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  border-color: var(--accent-primary);
}
.msg-listen:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Typing indicator dots (Speech-to-Speech thinking state) */
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  margin: 0 2px;
  animation: typingBounce 1.2s ease-in-out infinite;
  opacity: 0.7;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-6px); opacity: 1; }
}

/* Voice input indicator on user bubble */
.ai-msg.user .msg-time {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ai-quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
}

.ai-quick-prompts button {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.ai-quick-prompts button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-primary);
  color: var(--text-pure);
}

.ai-drawer-input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.4);
}

#ai-user-query {
  flex: 1;
  font-size: 1rem; /* iOS focus-zoom guard: never below 16px on a text field */
  color: var(--text-pure);
}

.btn-ai-send {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--grad-superhuman);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.2s ease;
}

.btn-ai-send:hover {
  transform: scale(1.08);
}

/* ─── 10. COMMAND PALETTE (CMD+K / CTRL+K) ─────────────────────── */
.palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.palette-overlay.active {
  opacity: 1;
  visibility: visible;
}

.palette-modal {
  width: 90%;
  max-width: 620px;
  background: var(--bg-surface-elev);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px var(--glow-primary);
  overflow: hidden;
  transform: translateY(-20px) scale(0.96);
  transition: transform 0.25s var(--ease-bounce);
}

.palette-overlay.active .palette-modal {
  transform: translateY(0) scale(1);
}

.palette-search-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}

.palette-search-box svg {
  color: var(--accent-primary);
  flex-shrink: 0;
}

#palette-input {
  flex: 1;
  font-size: 1.05rem;
  color: var(--text-pure);
}

#palette-input::placeholder {
  color: var(--text-muted);
}

.palette-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 0.6rem;
}

.palette-group-title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  padding: 0.6rem 0.85rem 0.3rem;
}

.palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  cursor: var(--cursor-pointer);
  transition: background 0.15s ease, transform 0.15s ease;
}

.palette-item:hover, .palette-item.selected, .palette-item:focus {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  transform: translateX(3px);
}

.palette-item-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.palette-icon {
  font-size: 1.2rem;
}

.palette-item-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-pure);
}

.palette-item-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.palette-shortcut kbd {
  background: rgba(255, 255, 255, 0.08);
}

.palette-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.4rem;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── 12. FLOATING GLASS ISLAND NAVBAR ────────────────────────── */
#navbar {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 1360px;
  z-index: 1000;
  padding: 0.45rem 1.25rem;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all 0.35s var(--ease-smooth);
}

#navbar.scrolled {
  top: 0.6rem;
  background: rgba(5, 8, 20, 0.94);
  border-color: var(--border-glow);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px var(--glow-primary);
  padding: 0.4rem 1.25rem;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  flex-wrap: nowrap;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-mark-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--grad-superhuman) border-box;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.45), 0 4px 16px var(--glow-primary);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.3s ease;
  padding: 0;
}

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

.nav-brand:hover .brand-mark {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--accent-primary-l), 0 6px 25px var(--glow-primary);
}

.brand-online-ping {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  background: var(--accent-emerald);
  border: 2px solid #060919;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-emerald);
}

.brand-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  white-space: nowrap;
}

.brand-name {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text-pure);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-role {
  font-size: var(--text-label);
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}


.role-highlight {
  color: var(--accent-primary-l);
  font-weight: 600;
}/* Navigation Links Container with Sliding Active Capsule */
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.22rem 0.3rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-sliding-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: var(--grad-superhuman);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 14px var(--glow-primary);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 0;
}

.nav-link {
  position: relative;
  z-index: 1;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: color 0.25s ease;
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-pure);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* "Ask Roman AI" Button with Breathing Border */
.nav-ai-pill-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary-l);
  box-shadow: 0 0 16px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: all 0.25s var(--ease-bounce);
  white-space: nowrap;
}

.nav-ai-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 25px var(--accent-primary-l);
  color: var(--text-pure);
}

.nap-dot {
  width: 7px;
  height: 7px;
  background: var(--accent-primary-l);
  border-radius: 50%;
  animation: pulse-ring 1.4s infinite;
}

/* Command Palette Search Trigger */
.nav-cmd-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  color: var(--text-secondary);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.nav-cmd-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-pure);
  border-color: var(--accent-primary-l);
  transform: translateY(-2px);
}

.nav-cta .btn-hire {
  padding: 0.48rem 1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}.nav-analyze-cv-btn svg { flex-shrink: 0; opacity: 0.85; }@media (max-width: 768px) {
  .nav-analyze-cv-btn span { display: none; }}

/* ─── 13. REVOLUTIONARY LUXURY BUTTON SYSTEM ──────────────────── */
/* Primary Shimmer Button */
.btn-superhuman-shimmer {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.45rem;
  border-radius: var(--radius-full);
  background: var(--grad-superhuman);
  color: white;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 6px 24px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease;
}

.btn-superhuman-shimmer:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 32px var(--glow-primary), 0 0 20px var(--accent-primary-l);
}

.btn-superhuman-shimmer:active {
  transform: translateY(0) scale(0.97);
}

.btn-shimmer-beam {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: shimmer-sweep 2.8s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0% { left: -100%; }
  40%, 100% { left: 160%; }
}

.btn-inner-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  z-index: 1;
}

/* Hero Primary Radiant Button with Rotating Conic Light Beam */
.btn-superhuman-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.9rem;
  background: var(--grad-superhuman);
  border-radius: var(--radius-full);
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 35px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.45);
  overflow: hidden;
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s ease;
}

.btn-superhuman-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 45px var(--glow-primary), 0 0 30px var(--accent-primary-l);
}

.btn-superhuman-primary:active {
  transform: translateY(-1px) scale(0.97);
}

.btn-beam {
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 0deg at 50% 50%, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary), var(--accent-primary));
  border-radius: var(--radius-full);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: spin-beam 3s linear infinite;
}

.btn-superhuman-primary:hover .btn-beam {
  opacity: 1;
}

@keyframes spin-beam {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.btn-kbd-badge {
  position: relative;
  z-index: 1;
}

/* Frosted Glass Luxury Button */
.btn-superhuman-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.8rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  color: var(--text-pure);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.3s var(--ease-bounce), background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease;
}

.btn-superhuman-glass:hover {
  transform: translateY(-4px) scale(1.04);
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-primary-l);
  box-shadow: 0 12px 35px var(--glow-primary);
}

.btn-superhuman-glass:active {
  transform: translateY(-1px) scale(0.97);
}

/* Subtle Link Button */
.btn-superhuman-subtle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-superhuman-subtle:hover {
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.btn-superhuman-subtle:hover {
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.06);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
}

/* ─── 14. HERO SECTION ─────────────────────────────────────────── */
  .hero {
  position: relative;
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* full visible height even with mobile URL bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7.5rem 2rem 4rem;
  max-width: 1280px;
  margin: 0 auto;
  gap: 3.5rem;
  overflow: hidden;
}

.hero-aurora-glow {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: var(--grad-aurora);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: aurora-shift 12s ease-in-out infinite alternate;
}

@keyframes aurora-shift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.15); }
  100% { transform: translate(-40px, 60px) scale(0.95); }
}

.hero-content {
  flex: 1.15;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-super-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  width: fit-content;
}

.super-badge-orb {
  width: 7px;
  height: 7px;
  background: var(--accent-primary-l);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-primary);
  animation: pulse-ring 1.8s infinite;
}

.super-badge-tag {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.68rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-pure);
}

.hero-title span {
  display: block;
}
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 620px;
}

.hero-subtitle strong {
  color: var(--text-pure);
}

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

.hero-telemetry-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.telemetry-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tc-top {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}

.tc-metric {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-pure);
  line-height: 1;
}

.tc-plus {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-primary-l);
}

.tc-label {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.tc-indicator {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.35rem;
}

.mini-bar-fill {
  display: block;
  height: 100%;
  background: var(--grad-superhuman);
  border-radius: 99px;
}

/* ─── 15. LUXURY PROFILE FRAME & ANALOG CLOCK WATCH ───────────── */
.hero-visual {
  flex: 0.95;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: 0.85rem;
}

/* The live clock moved out of the hero and into the contact stack, right after
   the Location card it complements ("Peshawar, KP, Pakistan" +
   "LOCAL TIME / Available Peshawar, PK"). It must therefore take the same
   full-width measure as the .uplink-card rows beside it -- the narrow hero
   max-widths that used to clamp it are gone. */
.contact-clock-badge {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px var(--glow-primary);
  border: 1px solid var(--border-medium);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  animation: hero-fade-up 0.9s var(--ease-smooth) 0.25s both;
}

.super-hologram-stage {
  position: relative;
  width: 380px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hologram-ambient-light {
  position: absolute;
  width: 360px;
  height: 420px;
  background: radial-gradient(ellipse at center, var(--glow-primary) 0%, rgba(99, 102, 241, 0.18) 50%, transparent 75%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

.hologram-frame {
  position: relative;
  width: 330px;
  height: 430px;
  border-radius: var(--radius-xl);
  padding: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, var(--border-glow) 50%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 50px var(--glow-primary);
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s ease;
  z-index: 2;
}

.hologram-frame:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 35px 85px rgba(0, 0, 0, 0.85), 0 0 60px var(--accent-primary-l);
}

.hologram-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-xl) - 6px);
  overflow: hidden;
  background: #050814;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}

.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.05) saturate(1.1);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.hologram-frame:hover .profile-photo {
  transform: scale(1.05);
}@keyframes scroll-slide {
  0% { top: -10px; opacity: 0; }
  40% { opacity: 1; }
  100% { top: 35px; opacity: 0; }
}

/* ─── 16. CONTINUOUS TECH MARQUEE ──────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   PREMIUM TECH MARQUEE
   ───────────────────────────────────────────────────────────────────
   SEAMLESS LOOP. The content is two IDENTICAL `.marquee-set` blocks, the
   container gap is 0, and each set carries `padding-right` equal to its own
   internal gap. Each set is therefore exactly one pill-row + one gap wider,
   so `translateX(-50%)` moves precisely one set and the second set lands
   exactly where the first was. The old layout put the gap on the container,
   which made -50% land half a gap short (12px at 1.5rem) — so the rail visibly
   jumped once every cycle. */
.tech-marquee-wrapper {
  position: relative;
  overflow: hidden;
  padding: 1.85rem 0;
  background:
    radial-gradient(120% 190% at 50% 0%, rgba(59, 130, 246, 0.07), transparent 62%),
    rgba(0, 0, 0, 0.32);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1;
}

/* Edge fades scale with the viewport instead of a fixed 120px, so the rail
   dissolves cleanly on a 320px phone and on a wide desktop alike. */
.marquee-fader {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 9vw, 180px);
  z-index: 2;
  pointer-events: none;
}
.marquee-fader.left  { left: 0;  background: linear-gradient(90deg,  var(--bg-deep), transparent); }
.marquee-fader.right { right: 0; background: linear-gradient(-90deg, var(--bg-deep), transparent); }

.marquee-track { display: flex; overflow: hidden; user-select: none; -webkit-user-select: none; }

.marquee-content {
  display: flex;
  gap: 0;                       /* the gap lives inside each set — see note above */
  width: max-content;
  animation: scroll-marquee 38s linear infinite;
  will-change: transform;
}
.marquee-content:hover { animation-play-state: paused; }

.marquee-set {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;          /* makes both sets identical in width */
}

@keyframes scroll-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Pill: liquid-glass with a specular top edge and a hover sheen ── */
.marquee-pill {
  /* Per-pill accent, carried over from the original coloured dots so the rail
     keeps its six-colour rhythm without the generic dots. */
  --mp-accent: var(--accent-primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;             /* clips the sheen to the pill */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.07);
  transition:
    color 0.28s var(--ease-smooth),
    border-color 0.28s var(--ease-smooth),
    transform 0.28s var(--ease-bounce),
    box-shadow 0.28s var(--ease-smooth);
}

.marquee-pill.t-violet { --mp-accent: var(--accent-secondary); }
.marquee-pill.t-cyan   { --mp-accent: var(--accent-tertiary); }
.marquee-pill.t-green  { --mp-accent: var(--accent-emerald); }
.marquee-pill.t-amber  { --mp-accent: var(--accent-amber); }
.marquee-pill.t-rose   { --mp-accent: var(--accent-rose); }

/* Sheen sweep on hover — parked off-pill until the pointer arrives. */
.marquee-pill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.6s var(--ease-smooth);
}
.marquee-pill:hover::after { left: 118%; }

.marquee-pill:hover {
  color: var(--text-pure);
  border-color: var(--mp-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 20px var(--glow-primary);
}

/* ── Real brand logo, in the pill's accent so it stays theme-coherent ── */
.mp-brand {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--mp-accent);
  transition: transform 0.3s var(--ease-bounce), color 0.28s var(--ease-smooth), filter 0.28s var(--ease-smooth);
}
.marquee-pill:hover .mp-brand {
  transform: scale(1.16);
  color: var(--accent-primary-l);
  filter: drop-shadow(0 0 7px currentColor);
}

/* ── Reduced motion: stop the crawl, let the rail be panned by hand ──
   The rail stays fully readable and reachable — the animation is the only
   thing that goes, never the content. */
@media (prefers-reduced-motion: reduce) {
  .marquee-content { animation: none; }
  .marquee-pill::after { display: none; }
  .marquee-track { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ─── 21. BENTO SERVICES & PROJECTS ────────────────────────────── */
.section { padding: 6.5rem 0; position: relative; z-index: 1; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.section-tag-capsule { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.85rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-medium); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-label); color: var(--accent-primary-l); letter-spacing: 0.08em; }
.tag-live-dot { width: 6px; height: 6px; background: var(--accent-primary); border-radius: 50%; box-shadow: 0 0 8px var(--accent-primary); animation: pulse-ring 1.5s infinite; }
.section-title { font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-pure); line-height: 1.15; }
.gradient-text { background: var(--grad-superhuman); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-desc { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; }

.bento-services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.75rem; align-items: stretch; }
.bento-hero-span { grid-column: span 6; }
.bento-medium-span { grid-column: span 3; }
.bento-compact-span { grid-column: span 2; }

.bento-card {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
  transform: translateY(-7px) scale(1.01);
  border-color: var(--border-glow);
  border-top-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.75), 0 0 35px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.bento-spotlight-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--glow-primary), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.bento-card:hover .bento-spotlight-glow { opacity: 1; }

.bento-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.2rem; height: 100%; }
.bento-meta-row { display: flex; align-items: center; justify-content: space-between; }
.bento-category-badge { font-family: var(--font-sans); font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.08em; padding: 0.25rem 0.65rem; border-radius: var(--radius-xs); }
.bento-category-badge.blue { background: rgba(59, 130, 246, 0.15); color: var(--accent-primary-l); border: 1px solid var(--border-glow); }
.bento-category-badge.violet { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary-l); border: 1px solid rgba(139, 92, 246, 0.3); }
.bento-category-badge.cyan { background: rgba(6, 182, 212, 0.15); color: var(--accent-tertiary-l); border: 1px solid rgba(6, 182, 212, 0.3); }
.bento-stat-chip { font-family: var(--font-sans); font-size: var(--text-micro); color: var(--text-muted); background: rgba(255, 255, 255, 0.05); padding: 0.2rem 0.6rem; border-radius: var(--radius-full); }

.bento-title-group { display: flex; align-items: flex-start; gap: 1.1rem; }
.bento-icon-box { width: 54px; height: 54px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blue-box { background: rgba(59, 130, 246, 0.15); color: var(--accent-primary-l); border: 1px solid var(--border-glow); box-shadow: 0 0 20px var(--glow-primary); }
.violet-box { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary-l); border: 1px solid rgba(139, 92, 246, 0.3); }
.cyan-box { background: rgba(6, 182, 212, 0.15); color: var(--accent-tertiary-l); border: 1px solid rgba(6, 182, 212, 0.3); }
.green-box { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); border: 1px solid rgba(16, 185, 129, 0.3); }
.amber-box { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); border: 1px solid rgba(245, 158, 11, 0.3); }
.rose-box { background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); border: 1px solid rgba(244, 63, 94, 0.3); }

.bento-heading { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--text-pure); line-height: 1.25; }
.bento-subheading { font-size: 0.88rem; color: var(--text-secondary); margin-top: 0.25rem; }
.bento-description { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
.bento-mini-metrics { display: flex; gap: 1.5rem; margin-top: auto; padding: 1rem 0; border-top: 1px solid var(--border-subtle); }
.mini-metric { display: flex; flex-direction: column; }
.mm-val { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--text-pure); }
.mm-lbl { font-size: var(--text-micro); color: var(--text-muted); }
.bento-tags-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; }
.tech-tag { font-family: var(--font-sans); font-size: var(--text-label); padding: 0.25rem 0.65rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); color: var(--text-secondary); }

/* Selected Projects */
.super-project-filters { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; flex-wrap: wrap; }
.filter-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.2rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-full); font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); transition: all 0.2s ease; }
.filter-pill:hover { background: rgba(255, 255, 255, 0.09); color: var(--text-pure); }
.filter-pill.active { background: var(--grad-superhuman); border-color: transparent; color: white; box-shadow: 0 4px 20px var(--glow-primary); }
.fp-count { font-family: var(--font-sans); font-size: var(--text-micro); background: rgba(0, 0, 0, 0.25); padding: 0.1rem 0.4rem; border-radius: var(--radius-full); }

.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.super-project-card {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--ease-bounce), border-color 0.3s ease, box-shadow 0.3s ease;
}
.super-project-card:hover {
  transform: translateY(-10px) scale(1.01);
  border-color: var(--border-glow);
  border-top-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 40px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.spc-image-banner { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ai-banner { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%); }
.mobile-banner { background: linear-gradient(135deg, #312e81 0%, #6366f1 50%, #8b5cf6 100%); }
.purple-banner { background: linear-gradient(135deg, #581c87 0%, #8b5cf6 50%, #ec4899 100%); }
.cyan-banner { background: linear-gradient(135deg, #134e4a 0%, #0d9488 50%, #06b6d4 100%); }.spc-badge-pill { position: absolute; top: 1rem; left: 1rem; font-family: var(--font-sans); font-size: var(--text-micro); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); }
.spc-banner-center-icon { color: rgba(255, 255, 255, 0.8); transition: transform 0.4s var(--ease-bounce); }
/* An inline SVG sits on the text baseline, leaving ~4px of descender gap that
   reads as "slightly high" far more once the glyph is a solid brand logo than
   it did with a 1.5px stroke. `display: block` removes that inline space so the
   icon centres exactly like its `.bento-icon-box` and `.sqc-icon` siblings. */
.spc-banner-center-icon svg { display: block; }
.super-project-card:hover .spc-banner-center-icon { transform: scale(1.15) rotate(5deg); }

.spc-quick-action { position: absolute; bottom: 1rem; right: 1rem; display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; color: white; cursor: var(--cursor-pointer); opacity: 0; transform: translateY(10px); transition: all 0.25s ease; }
.super-project-card:hover .spc-quick-action { opacity: 1; transform: translateY(0); }
.spc-quick-action:hover { background: var(--grad-superhuman); border-color: transparent; }

.spc-body { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.spc-meta { display: flex; justify-content: space-between; align-items: center; }
.spc-cat { font-family: var(--font-sans); font-size: var(--text-label); color: var(--accent-primary-l); }
.spc-year { font-family: var(--font-sans); font-size: var(--text-label); color: var(--text-muted); }
.spc-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--text-pure); }
.spc-desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; }
.spc-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding: 0.85rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); text-align: center; }
.sm-item { display: flex; flex-direction: column; }
.sm-v { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text-pure); }
.sm-k { font-size: var(--text-micro); color: var(--text-muted); }
.spc-stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.spc-stack span { font-family: var(--font-sans); font-size: var(--text-label); padding: 0.2rem 0.6rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); color: var(--text-secondary); }

/* ─── 22. SKILLS ARSENAL & TIMELINE ────────────────────────────── */
.skills-matrix-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.skill-quad-card {
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--ease-bounce), border-color 0.3s ease, box-shadow 0.3s ease;
}
.skill-quad-card:hover {
  transform: translateY(-7px) scale(1.01);
  border-color: var(--border-glow);
  border-top-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.sqc-header { display: flex; align-items: center; gap: 1rem; }
.sqc-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.blue-glow { background: rgba(59, 130, 246, 0.15); color: var(--accent-primary-l); border: 1px solid var(--border-glow); }
.cyan-glow { background: rgba(6, 182, 212, 0.15); color: var(--accent-tertiary-l); border: 1px solid rgba(6, 182, 212, 0.3); }
.violet-glow { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary-l); border: 1px solid rgba(139, 92, 246, 0.3); }
.amber-glow { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); border: 1px solid rgba(245, 158, 11, 0.3); }

.sqc-header h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-pure); }
.sqc-sub { font-size: 0.8rem; color: var(--text-secondary); }

.skill-telemetry-list { display: flex; flex-direction: column; gap: 1.1rem; }
.stl-item { display: flex; flex-direction: column; gap: 0.4rem; }
.stl-meta { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); }
.stl-val { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-pure); }
.stl-bar { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; }
.stl-fill { height: 100%; width: 0%; border-radius: 99px; transition: width 1.2s var(--ease-smooth); }
.stl-fill.blue { background: var(--grad-superhuman); }
.stl-fill.cyan { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
.stl-fill.violet { background: linear-gradient(90deg, #8b5cf6, #ec4899); }

.skill-pill-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sp-pill { padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-secondary); transition: all 0.2s ease; }
.sp-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--accent-primary-l); color: var(--text-pure); transform: translateY(-2px); }

/* Timeline */
.super-timeline { position: relative; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
.timeline-beam { position: absolute; top: 0; bottom: 0; left: 28px; width: 2px; background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary), transparent); }
.stl-node { position: relative; display: flex; gap: 2rem; }
.stl-anchor { position: relative; z-index: 2; display: flex; align-items: flex-start; padding-top: 1.5rem; }
.stl-dot-outer { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-deep); border: 2px solid var(--accent-primary-l); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px var(--glow-primary); }
.stl-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary-l); }

.stl-card {
  flex: 1;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.3s var(--ease-bounce), border-color 0.3s ease, box-shadow 0.3s ease;
}
.stl-card:hover {
  transform: translateX(8px);
  border-color: var(--border-glow);
  border-top-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 25px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.stl-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; }
.stl-company { font-family: var(--font-sans); font-size: var(--text-label); color: var(--accent-secondary-l); letter-spacing: 0.06em; }
.stl-role { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-pure); }
.stl-date { font-family: var(--font-sans); font-size: var(--text-label); color: var(--accent-primary-l); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-subtle); padding: 0.25rem 0.65rem; border-radius: var(--radius-full); }
.stl-summary { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
.stl-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.stl-tags span { font-family: var(--font-sans); font-size: 0.72rem; padding: 0.2rem 0.6rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-full); color: var(--text-secondary); }

/* ─── 23. CONTACT UPLINK & FOOTER ─────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: flex-start; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-lead { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.75; }
.contact-direct-cards { display: flex; flex-direction: column; gap: 1rem; }

.uplink-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.4rem;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.06);
  transition: all 0.3s var(--ease-bounce);
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.uplink-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-primary-l);
  border-top-color: rgba(255, 255, 255, 0.28);
  transform: translateX(7px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px var(--glow-primary);
}
.uc-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--accent-primary-l); flex-shrink: 0; }
.uc-details { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.uc-lbl { font-family: var(--font-sans); font-size: var(--text-micro); color: var(--text-muted); }
.uc-val { font-weight: 600; font-size: 0.95rem; color: var(--text-pure); word-break: break-all; overflow-wrap: anywhere; }
.uc-copy-badge { font-family: var(--font-sans); font-size: var(--text-micro); padding: 0.25rem 0.6rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-xs); color: var(--text-secondary); flex-shrink: 0; }
.uc-arrow { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; }

/* ── Analog Clock Badge ── */
.analog-clock-badge {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-medium);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.analog-clock-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, var(--glow-primary) 0%, transparent 65%);
  opacity: 0.18;
  pointer-events: none;
}

/* ── Dark Luxe SVG clock ───────────────────────────────────────────
   Replaces the old <canvas> clock. Every colour is a custom property derived
   from the active theme tokens, so the dial re-themes with the site. */
.luxe-clock {
  --luxe-face-1:   #1b2029;
  --luxe-face-2:   #232a36;
  --luxe-face-3:   #171b23;
  --luxe-bezel-a:  #e9dfc6;
  --luxe-bezel-b:  #6d6552;
  --luxe-bezel-c:  #2b2a27;
  --luxe-metal-a:  #f6eed8;
  --luxe-metal-b:  #b7a77d;
  --luxe-lume-a:   #d8ffe6;
  --luxe-lume-b:   #7fe0a8;
  --luxe-tick:     #8d836b;
  --luxe-hairline: #e9dfc6;
  --luxe-numeral:  #efe5c9;
  --luxe-dim:      #6d6552;
  --luxe-hand:     #d9783a;
  --luxe-ring:     #b7a77d;

  position: relative;
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}

.analog-clock-badge:hover .luxe-clock {
  transform: scale(1.04);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px var(--glow-primary));
}

/* repeating-conic-gradient tick track, inset so it reads under the bezel */
.luxe-dial {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%),
    repeating-conic-gradient(from 0deg,
      var(--luxe-face-1) 0deg,
      var(--luxe-face-2) 3deg,
      var(--luxe-face-3) 6deg);
}

.luxe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.luxe-bezel-a { stop-color: var(--luxe-bezel-a); }
.luxe-bezel-b { stop-color: var(--luxe-bezel-b); }
.luxe-bezel-c { stop-color: var(--luxe-bezel-c); }
.luxe-metal-a { stop-color: var(--luxe-metal-a); }
.luxe-metal-b { stop-color: var(--luxe-metal-b); }
.luxe-glass-a { stop-color: #fff; stop-opacity: 0.16; }
.luxe-glass-b { stop-color: #fff; stop-opacity: 0; }
.luxe-lume-a  { stop-color: var(--luxe-lume-a); }
.luxe-lume-b  { stop-color: var(--luxe-lume-b); }

.luxe-hairline { stroke: var(--luxe-hairline); }
.luxe-date-ring { stroke: var(--luxe-ring); }
.luxe-numeral {
  fill: var(--luxe-numeral);
  font-family: Georgia, 'Times New Roman', serif;
}
.luxe-dim-text { font-family: Georgia, 'Times New Roman', serif; }

/* Per-theme tinting — the bezel, hands and lume pick up each theme's accent
   while the dark luxury body stays constant. */
[data-theme="neon"] .luxe-clock {
  --luxe-tick: color-mix(in srgb, var(--accent-primary) 55%, #8d836b);
  --luxe-hairline: color-mix(in srgb, var(--accent-primary) 30%, #e9dfc6);
  --luxe-hand: var(--accent-primary);
  --luxe-lume-b: color-mix(in srgb, var(--accent-primary) 45%, #7fe0a8);
  --luxe-ring: color-mix(in srgb, var(--accent-primary) 40%, #b7a77d);
}

[data-theme="gold"] .luxe-clock {
  --luxe-hand: var(--accent-primary);
  --luxe-lume-b: color-mix(in srgb, var(--accent-amber) 45%, #7fe0a8);
  --luxe-tick: color-mix(in srgb, var(--accent-amber) 50%, #8d836b);
  --luxe-hairline: color-mix(in srgb, var(--accent-amber) 30%, #e9dfc6);
  --luxe-ring: color-mix(in srgb, var(--accent-amber) 45%, #b7a77d);
}

[data-theme="matrix"] .luxe-clock {
  --luxe-hand: var(--accent-primary);
  --luxe-lume-a: var(--accent-primary);
  --luxe-lume-b: color-mix(in srgb, var(--accent-primary) 60%, #7fe0a8);
  --luxe-tick: color-mix(in srgb, var(--accent-primary) 50%, #8d836b);
  --luxe-hairline: color-mix(in srgb, var(--accent-primary) 30%, #e9dfc6);
  --luxe-ring: color-mix(in srgb, var(--accent-primary) 40%, #b7a77d);
}

[data-theme="violet"] .luxe-clock {
  --luxe-hand: var(--accent-primary);
  --luxe-lume-b: color-mix(in srgb, var(--accent-secondary) 45%, #7fe0a8);
  --luxe-tick: color-mix(in srgb, var(--accent-primary) 55%, #8d836b);
  --luxe-hairline: color-mix(in srgb, var(--accent-secondary) 30%, #e9dfc6);
  --luxe-ring: color-mix(in srgb, var(--accent-primary) 40%, #b7a77d);
}

@media (prefers-reduced-motion: reduce) {
  .luxe-clock,
  .analog-clock-badge:hover .luxe-clock { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .luxe-second { transition: none; }
}

.acb-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  position: relative;
  z-index: 1;
}

.acb-label {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.acb-time {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--grad-superhuman);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px var(--glow-primary));
}

.acb-response {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--accent-emerald);
  font-weight: 600;
}

.analog-clock-badge .pulse-dot {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
}


.contact-form-wrap {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--border-medium);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.35s ease;
}
.contact-form-wrap:hover {
  box-shadow: var(--glass-shadow-hover);
}
.superhuman-contact-form { display: flex; flex-direction: column; gap: 1.4rem; }
.form-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.ft-tag { font-family: var(--font-sans); font-size: var(--text-micro); color: var(--accent-primary-l); letter-spacing: 0.08em; }
.ft-status { font-family: var(--font-sans); font-size: var(--text-micro); background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); padding: 0.15rem 0.5rem; border-radius: var(--radius-xs); }

.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label { font-family: var(--font-sans); font-size: var(--text-label); color: var(--text-secondary); letter-spacing: 0.05em; }
.input-wrapper { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--bg-deep); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.input-wrapper svg { color: var(--text-muted); flex-shrink: 0; }
.input-wrapper:focus-within { border-color: var(--accent-primary-l); box-shadow: 0 0 15px var(--glow-primary); }
.input-wrapper input, .input-wrapper select { flex: 1; font-size: 1rem; color: var(--text-pure); }
.input-wrapper select option { background: var(--bg-surface-elev); color: var(--text-pure); }

.form-group textarea { padding: 0.85rem 1rem; background: var(--bg-deep); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); font-size: 1rem; color: var(--text-pure); resize: vertical; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-group textarea:focus { border-color: var(--accent-primary-l); box-shadow: 0 0 15px var(--glow-primary); }

.btn-superhuman-submit { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem 2rem; background: var(--grad-superhuman); border-radius: var(--radius-md); color: white; font-weight: 700; font-size: 0.95rem; box-shadow: 0 8px 30px var(--glow-primary); overflow: hidden; transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease; margin-top: 0.5rem; }
.btn-superhuman-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 40px var(--glow-primary); }
.submit-btn-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.6rem; }

/* Footer */
.footer { background: var(--bg-deep); border-top: 1px solid var(--border-subtle); padding: 4.5rem 0 3rem; position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--border-subtle); }
.footer-brand { display: flex; flex-direction: column; gap: 1.1rem; }
.footer-brand-desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.7; max-width: 360px; }


.footer-nav { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav-title { font-family: var(--font-sans); font-size: var(--text-label); color: var(--text-muted); letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.footer-nav a { font-size: 0.88rem; color: var(--text-secondary); transition: all 0.2s ease; width: fit-content; }
.footer-nav a:hover { color: var(--text-pure); transform: translateX(3px); }

.footer-social { display: flex; flex-direction: column; gap: 1rem; }
.social-icons { display: flex; gap: 0.75rem; }
.social-icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s ease; }
.social-icon:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent-primary); color: var(--text-pure); transform: translateY(-3px); }


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

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(2, 4, 10, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: var(--z-panel); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 660px;
  background: var(--bg-glass-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--border-glow);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9), 0 0 60px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transform: scale(0.92);
  transition: transform 0.3s var(--ease-bounce);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all 0.2s ease; }
.modal-close:hover { background: rgba(255, 255, 255, 0.18); color: var(--text-pure); transform: rotate(90deg); }

/* ─── 23. CINEMATIC SECTION REVEALS & BUTTON SHOCKWAVES ──────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(8px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Directional reveal variants */
[data-reveal="left"] {
  transform: translateX(-40px) scale(0.98);
}
[data-reveal="left"].revealed {
  transform: translateX(0) scale(1);
}

[data-reveal="right"] {
  transform: translateX(40px) scale(0.98);
}
[data-reveal="right"].revealed {
  transform: translateX(0) scale(1);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}
[data-reveal="scale"].revealed {
  transform: scale(1);
}

/* Staggered Children Animations */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.34s; }
.reveal-stagger.revealed > *:nth-child(7) { transition-delay: 0.40s; }
.reveal-stagger.revealed > *:nth-child(8) { transition-delay: 0.46s; }

/* Section Header Aura & Gradient Sweeps */
.section-header {
  position: relative;
  margin-bottom: 3.5rem;
}

.section-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 120px;
  background: radial-gradient(ellipse at center, var(--glow-primary) 0%, transparent 70%);
  opacity: 0.5;
  filter: blur(50px);
  pointer-events: none;
  z-index: -1;
}

.section-title {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 45%, var(--accent-primary-l) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  letter-spacing: -0.02em;
}/* Button Interactive Shockwave Ripple */
.btn-ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, var(--accent-primary-l) 45%, transparent 70%);
  transform: scale(0);
  pointer-events: none;
  animation: btn-ripple-shockwave 0.65s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
  z-index: 20;
}

@keyframes btn-ripple-shockwave {
  0% {
    transform: scale(0);
    opacity: 0.9;
  }
  100% {
    transform: scale(4.5);
    opacity: 0;
  }
}
/* ─── 24. RESPONSIVE MEDIA QUERIES — GLOBAL MOBILE ─────────────── */

/* ── Touch & Pointer Coarse: Restore Default Cursor & Hide Cyber Dots ── */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  #cursor-dot,
  #cursor-ring {
    display: none !important;
  }
  *,
  body,
  button,
  a,
  input,
  select,
  textarea,
  [tabindex],
  .palette-item,
  .bento-card,
  .super-project-card,
  .selector-card,
  .uplink-card,
  .prompt-chip,
  .swarm-node-item,
  .bp-node {
    cursor: auto !important;
  }
}

/* ── 1300px: Hide heavy nav extras ── */
/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP PC RESPONSIVE — Full HD (1280px+) and Wide-screen (1440px+)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ≥ 1440px: Ultra-wide / 2K monitor ──────────────────────────────────── */
@media (min-width: 1440px) {
  .container { max-width: 1400px; padding: 0 3.5rem; }
  .hero { max-width: 1400px; padding: 8rem 3.5rem 5rem; gap: 5rem; }
  .hero-title { font-size: 5.2rem; letter-spacing: -0.03em; }
  .hero-subtitle { font-size: 1.2rem; max-width: 580px; }

  .super-hologram-stage { width: 500px; height: 640px; }
  .hologram-frame { width: 440px; height: 560px; }
  .hologram-ambient-light { width: 460px; height: 580px; }
  .hero-telemetry-strip { grid-template-columns: repeat(4, 1fr); max-width: 680px; }

  /* Bento - 6-col balanced wide */
  .bento-services-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    align-items: stretch;
  }
  .bento-hero-span { grid-column: span 6; }
  .bento-medium-span { grid-column: span 3; }
  .bento-compact-span { grid-column: span 2; }
  /* Projects - 2-col balanced matrix */
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; align-items: stretch; }
  .super-project-card { grid-column: span 1 !important; }
  .super-project-card.large { grid-column: span 1 !important; }
  /* Skills - 2-col balanced matrix */
  .skills-matrix-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; align-items: stretch; }

  /* Contact */
  .contact-grid { gap: 5rem; }

  /* AI drawer — wider on big screens */
  .ai-chat-drawer { width: 500px; }

  /* Footer — 4-col */
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; }
}

/* ─── 1280px – 1439px: Full HD desktop ───────────────────────────────────── */
@media (min-width: 1280px) and (max-width: 1439px) {
  .container { max-width: 1240px; padding: 0 2.5rem; }
  .hero { max-width: 1240px; padding: 7.5rem 2.5rem 4.5rem; gap: 4rem; }
  .hero-title { font-size: 4.5rem; }

  .super-hologram-stage { width: 450px; height: 575px; }
  .hologram-frame { width: 390px; height: 500px; }
  .hologram-ambient-light { width: 415px; height: 535px; }
  .hero-telemetry-strip { grid-template-columns: repeat(4, 1fr); max-width: 600px; }

  .bento-services-grid { grid-template-columns: repeat(6, 1fr); gap: 1.8rem; align-items: stretch; }
  .bento-hero-span { grid-column: span 6; }
  .bento-medium-span { grid-column: span 3; }
  .bento-compact-span { grid-column: span 2; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: stretch; }
  .super-project-card { grid-column: span 1 !important; }
  .super-project-card.large { grid-column: span 1 !important; }
  .skills-matrix-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: stretch; }

  .ai-chat-drawer { width: 460px; }
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
}

@media (max-width: 1280px) {  .hero-title { font-size: 3.5rem; }
}

/* ── 1150px: Tablet large ── */
@media (max-width: 1280px) {
  .nav-link { padding: 0.35rem 0.55rem; font-size: 0.8rem; }
  /* Content parity: the identity line stays visible and compacts instead of
     vanishing. It keeps its own box but can no longer push the bar wider. */
  .nav-brand .brand-role { font-size: var(--text-micro); max-width: 100%; }
  .brand-info { min-width: 0; }
  .hero-title { font-size: 3.2rem; }
  .bento-services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: stretch; }
  .bento-hero-span { grid-column: span 2; }
  .bento-medium-span { grid-column: span 1; } .bento-compact-span { grid-column: span 1; } .bento-compact-span:last-child { grid-column: span 2; }
  
  
  .footer-top { grid-template-columns: 1fr 1fr; }
  
  
}

/* ── 1280px: hamburger nav ────────────────────────────────────────────────
   Measured: the full control set (brand + 5 links + 4 actions) needs ~1345px
   of viewport to fit on one line. Collapsing only below 1024px therefore left
   1025-1280px showing a row that overflowed the bar by up to 222px (1100px was
   worst) -- and `overflow: clip` hid that by cutting the controls off. The nav
   now collapses across the whole band that cannot hold it. The page-level rules
   that used to share this block stay at 1024px, below. */
@media (max-width: 1280px) {
  #navbar {
    width: calc(100% - 1.5rem);
    top: 0.75rem;
    padding: 0.45rem 0.85rem;
  }
  .nav-links {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0; right: 0;
    background: var(--bg-glass-heavy);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 60px rgba(0,0,0,0.9), 0 0 35px var(--glow-primary);
    flex-direction: column;
    padding: 1.2rem;
    gap: 0.4rem;
    transform: translateY(-15px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease-bounce);
  }
  .nav-links.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .nav-sliding-pill { display: none; }
  .nav-link { width: 100%; text-align: center; padding: 0.6rem 1rem; font-size: 0.88rem; }
  .nav-link.active { background: var(--grad-superhuman); color: white; border-radius: var(--radius-md); }
  .hamburger { display: flex; }
  
  .nav-cmd-trigger span, .nav-cmd-trigger kbd { display: none; }
  .nav-cmd-trigger { padding: 0.45rem 0.6rem; }
}

/* ── 1024px: page-level layout (independent of the nav breakpoint) ── */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  
  
}

/* ── 900px: Mobile landscape / small tablet ── */
@media (max-width: 900px) {
  /* Section global */
  .section { padding: 4.5rem 0; }
  .container { padding: 0 1.25rem; }

  /* Hero */
  .hero {
    flex-direction: column;
    text-align: center;
    padding-top: 6.5rem;
    gap: 2.5rem;
    min-height: auto;
    padding-bottom: 3.5rem;
  }
  .hero-content { align-items: center; width: 100%; }
  /* Profile image first. On a phone the hero becomes one column, so the
     portrait otherwise lands BELOW the badge, the headline, the tagline, the
     subtitle, four full-width stacked buttons and the 4-card telemetry strip
     -- measured at y=1277px on a 375x800 screen, i.e. 477px of scrolling
     before the photo is even on screen. `order` lifts the existing
     .hero-visual block ahead of the text: no markup change, no content change,
     and the desktop two-column layout is untouched. */
  .hero-visual { order: -1; }
  .hero-subtitle { max-width: 100%; font-size: 1.05rem; }
  .hero-actions { justify-content: center; flex-wrap: wrap; gap: 0.85rem; width: 100%; }
  .hero-telemetry-strip { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; width: 100%; }
  .hero-visual { width: 100%; max-width: 380px; margin: 0 auto; display: flex; justify-content: center; }
  .super-hologram-stage { width: 320px; height: 410px; max-width: 100%; }
  .hologram-frame { width: 280px; height: 365px; max-width: 100%; }
  .hologram-ambient-light { width: 300px; height: 390px; }
  .hero-super-badge { margin: 0 auto; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .super-project-card.large { grid-column: span 1; }

  /* Skills */
  .skills-matrix-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  

  


  /* Misc */
  .theme-spectrum-toggle {
    top: auto;
    bottom: 1.25rem;
    left: 1rem;
    right: auto;
    z-index: var(--z-toast);
    padding: 0.25rem 0.35rem;
    gap: 0.3rem;
  }
  /* Content parity: the theme NAMES stay readable through tablet widths. Only
     below 768px do the pills compact to dots (see the 768 block), where each
     button's aria-label keeps the full name reachable. */
  .ai-chat-drawer { width: 100%; max-width: 100%; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.6rem; text-align: center; }


}

/* ── 901px and up: keep the portrait inside the first screen ─────────────
   The hero text column is taller than a typical laptop viewport (measured
   1108px against a 900px screen), and `.hero` centres its two columns, so the
   763px portrait column was pushed 172px down that overhang. Measured before
   the fix: the photo began at y=474px, so its bottom 118px fell below the fold.
   Top-aligning only the visual column keeps the headline and CTAs exactly
   where they were while lifting the photo to the top of the hero — the photo
   now starts around y=165px and is fully visible down to a ~760px viewport. */
@media (min-width: 901px) {
  .hero-visual { align-self: flex-start; }
}

/* Short laptop screens (720-820px tall). The hero's top padding must clear the
   FIXED navbar, whose measured bottom edge is 72-80px across the whole device
   matrix. 4.5rem (73px) was under that and made the badge, the text column and
   the portrait all overlap the bar by 4-5px on 1366x768 and 1280x720.
   6.75rem keeps the trim while guaranteeing a 22-30px gap, and the portrait
   still fits: it lands at y=156 with a 484px height inside a 720px screen. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding-top: 6.75rem; }
}

/* ── 768px: Mobile portrait ── */
@media (max-width: 768px) {
  /* Fonts & Global Container Guard */
  .hero-title { font-size: clamp(2.1rem, 8vw, 2.7rem); line-height: 1.15; word-break: break-word; }
  .section-title { font-size: 1.95rem; }
  .hero-subtitle { font-size: 0.95rem; line-height: 1.6; }

  /* Nav */
  .nav-ai-pill-btn span:not(.nap-dot) { display: none; }
  .nav-ai-pill-btn { padding: 0.5rem; }
  .btn-hire .btn-inner-content span { display: none; }
  .btn-hire { padding: 0.55rem 0.85rem; }

  /* Hero Super Badge */
  .hero-super-badge {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
    padding: 0.35rem 0.75rem;
    gap: 0.4rem;
    white-space: normal;
    line-height: 1.4;
    word-break: break-word;
  }
  .super-badge-text {
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }

  /* Hero Actions */
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }
  .hero-actions .btn-superhuman-primary,
  .hero-actions .btn-superhuman-shimmer,
  .hero-actions .btn-superhuman-glass,
  .hero-actions .btn-superhuman-subtle {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  /* Bento grid */
  .bento-services-grid { grid-template-columns: 1fr !important; gap: 1.1rem; width: 100%; }
  .bento-hero-span, .bento-medium-span, .bento-compact-span { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100%; box-sizing: border-box; }
  .bento-card { padding: 1.35rem 1.15rem; width: 100%; box-sizing: border-box; overflow: hidden; }
  

  /* Hero visual / telemetry */
  .hero-telemetry-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    width: 100%;
    box-sizing: border-box;
  }
  .telemetry-card {
    min-width: 0;
    padding: 0.75rem 0.6rem;
    overflow: hidden;
    box-sizing: border-box;
  }
  .tc-metric { font-size: 1.5rem; }
  .tc-label { font-size: var(--text-micro); }
  .super-hologram-stage { width: 260px; height: 330px; max-width: 100%; }
  .hologram-frame { width: 230px; height: 295px; max-width: 100%; }
  .hologram-ambient-light { width: 240px; height: 310px; }


  /* Swarm visualizer */
  
  
  
  

  /* Console */
  
  
  
  
  

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; gap: 1.5rem; width: 100%; }
  .super-project-card { width: 100%; box-sizing: border-box; overflow: hidden; }
  .super-project-card.large { grid-column: span 1; }
  .super-project-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    padding: 0.35rem 0.2rem 0.75rem;
    gap: 0.5rem;
    scrollbar-width: none;
  }
  .super-project-filters::-webkit-scrollbar { display: none; }
  .filter-pill { white-space: nowrap; flex-shrink: 0; }
  .spc-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
  }
  .sm-item { min-width: 0; padding: 0.45rem 0.4rem; overflow: hidden; box-sizing: border-box; }
  
  .sm-v { font-size: 1.05rem; }
  .spc-stack { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; }
  .spc-stack span { font-size: var(--text-label); padding: 0.2rem 0.55rem; white-space: normal; word-break: break-word; }
  
  .spc-actions .btn-shimmer-subtle,
  .spc-actions .btn-view-arch { flex: 1 1 calc(50% - 0.5rem); min-width: 125px; justify-content: center; text-align: center; box-sizing: border-box; }

  /* Skills */
  .skills-matrix-grid { grid-template-columns: 1fr !important; width: 100%; gap: 1.25rem; }
  .skill-quad-card { width: 100%; box-sizing: border-box; overflow: hidden; padding: 1.35rem 1.15rem; }
  .sqc-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .skill-pill-cloud { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; }
  .sp-pill { max-width: 100%; font-size: 0.72rem; padding: 0.3rem 0.65rem; white-space: normal; word-break: break-word; }
  .skill-telemetry-list { gap: 0.6rem; width: 100%; }

  /* Timeline */
  
  .timeline-beam { left: 14px; }
  .stl-anchor { left: 5px; width: 18px; height: 18px; }
  .stl-node { padding-left: 2.25rem; width: 100%; box-sizing: border-box; }
  .stl-card { width: 100%; box-sizing: border-box; padding: 1.25rem 1rem; overflow: hidden; }
  .stl-header { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  /* Content parity fix: the longest institution name ("City University of
     Science and Information Technology (University)") and the nowrap date
     badge ("CLASS OF 2026  PESHAWAR") measured wider than the card's content
     box, and `overflow: hidden` on the card clipped ~19px of them. The flex
     children are clamped to the box and the badge is allowed to wrap, so no
     text is cut off. Detected by audit rule P11. */
  .stl-header > * { min-width: 0; max-width: 100%; }
  .stl-company, .stl-role, .stl-date { max-width: 100%; overflow-wrap: anywhere; }
  .stl-date { white-space: normal; }
  .stl-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; width: 100%; gap: 1.75rem; }
  .contact-direct-cards { width: 100%; gap: 0.75rem; }
  .uplink-card { width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .contact-form-wrap { width: 100%; box-sizing: border-box; padding: 1.35rem 1.15rem; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }

  /* Modal */
  .modal-box {
  width: calc(100vw - 1.5rem);
  margin: 0.75rem;
  max-height: calc(100vh - 1.5rem); /* fallback */
  max-height: calc(100dvh - 1.5rem); /* dialog never hides behind mobile chrome */
  overflow-y: auto;
    padding: 1.25rem;
    box-sizing: border-box;
  }

  /* AI Drawer */
  .ai-chat-drawer { width: 100%; right: 0; left: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 85vh; }

  /* Floating Theme Spectrum Pill */
  .theme-spectrum-toggle {
    position: fixed;
    top: auto;
    bottom: 1.2rem;
    left: 1rem;
    right: auto;
    z-index: var(--z-toast);
    padding: 0.25rem 0.35rem;
    gap: 0.3rem;
  }
  /* Phone-only compaction: four labelled pills plus the Roman AI launcher do
     not fit side by side below 768px, so the pills become dots. Each button
     carries an aria-label with the full theme name, so the meaning stays
     reachable (tooltip + assistive tech) even though the text is not painted. */
  .theme-spectrum-toggle .theme-pill-btn span:not(.tp-dot) { display: none; }
  .theme-spectrum-toggle .theme-pill-btn {
    padding: 0.45rem 0.5rem;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Floating Roman AI Button */
  .floating-roman-ai-btn {
    position: fixed;
    bottom: 1.2rem;
    right: 1rem;
    left: auto;
    z-index: var(--z-nav);
    padding: 0.5rem 0.85rem 0.5rem 0.6rem;
    gap: 0.5rem;
  }
  .fra-icon-ring { width: 34px; height: 34px; font-size: 1.1rem; }
  .fra-badge { font-size: var(--text-micro); }
  .fra-name { font-size: 0.82rem; }

  /* Command palette */
  .palette-modal {
    width: calc(100vw - 1.5rem);
    max-height: 80vh;
  }
}

/* ── 600px: Small mobile ── */
@media (max-width: 480px) {
  /* Global spacing */
  .section { padding: 3.25rem 0; }
  .container { padding: 0 0.85rem; }

  /* Hero */
  .hero { padding-top: 6rem; gap: 1.75rem; }
  .hero-title { font-size: 2.15rem; letter-spacing: -0.02em; }
  .hero-subtitle { font-size: 0.92rem; line-height: 1.6; }

  .hero-telemetry-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100%;
  }
  .telemetry-card { padding: 0.65rem 0.5rem; }
  .tc-metric { font-size: 1.35rem; }
  .tc-label { font-size: var(--text-micro); }

  .super-hologram-stage { width: 230px; height: 300px; }
  .hologram-frame { width: 200px; height: 265px; }
  .hologram-ambient-light { width: 210px; height: 275px; }
  .contact-clock-badge { padding: 0.6rem 0.85rem; }

  /* Section headers */
  .section-title { font-size: 1.75rem; }
  .section-desc { font-size: 0.86rem; }
  .section-tag-capsule { font-size: var(--text-label); padding: 0.25rem 0.7rem; }

  /* Bento */
  .bento-heading { font-size: 1.05rem; }
  .bento-description { font-size: 0.82rem; }

  /* Projects */
  .spc-title { font-size: 1.15rem; }
  .spc-desc { font-size: 0.82rem; }
  .spc-image-banner { height: 120px; }
  .spc-metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .sm-item { padding: 0.4rem 0.3rem; }
  .sm-v { font-size: 0.95rem; }
  
  
  .spc-actions .btn-shimmer-subtle,
  .spc-actions .btn-view-arch { width: 100%; }

  /* Skills */
  .sqc-header h3 { font-size: 1.05rem; }
  .sp-pill { font-size: 0.7rem; padding: 0.28rem 0.6rem; }

  /* Timeline */
  .stl-company { font-size: 1rem; }
  .stl-role { font-size: 0.88rem; }

  /* Contact */
  .contact-direct-cards { gap: 0.7rem; }
  .uc-lbl { font-size: var(--text-micro); }
  .uc-val { font-size: 0.82rem; }
  .contact-form-wrap { padding: 1.15rem 0.9rem; }
  .uplink-card { padding: 0.8rem 0.85rem; gap: 0.75rem; }


  /* Console */
  
  
  #cli-user-input { width: 100%; }
  
  .prompt-chip { flex: 1 1 100%; }

  /* Floating Controls */
  .floating-roman-ai-btn {
    bottom: 1rem;
    right: 0.85rem;
    padding: 0.45rem 0.7rem 0.45rem 0.5rem;
    gap: 0.45rem;
  }
  /* Content parity: the LIVE VOICE badge stays. It stacks above the name in
     .fra-text-content, so it costs vertical space, not horizontal -- the phone
     bar keeps its width. */
  .fra-badge { font-size: var(--text-micro); letter-spacing: 0.06em; }
  .fra-name { font-size: 0.78rem; }
  .fra-icon-ring { width: 30px; height: 30px; font-size: 1rem; }

  .theme-spectrum-toggle {
    bottom: 1rem;
    left: 0.85rem;
    padding: 0.2rem 0.3rem;
    gap: 0.25rem;
  }
  .theme-spectrum-toggle .theme-pill-btn {
    min-width: 28px;
    height: 28px;
    padding: 0;
  }
  .tp-dot { width: 7px; height: 7px; }

  /* Floating dock */
  

  /* Navbar */
  #navbar { padding: 0.4rem 0.75rem; }
}

/* ── 420px and below: theme rail goes vertical ──
   Measured: at 375px the 202px-wide toggle (four 45px targets) and the 156px
   Roman AI launcher overlap by ~11px; at 360px by ~32px. Shrinking targets
   would trade a real overlap bug for undersized touch controls, so the rail
   rotates to a vertical stack on the left edge instead. All four themes stay
   at full 44px+ targets, and the bottom-right is left clear for the launcher.
   The `body:has(.pm-dock.show)` lift in premium.css still applies, because it
   only sets `bottom`. */
@media (max-width: 420px) {
  .theme-spectrum-toggle {
    flex-direction: column;
    top: auto;
    bottom: 1rem;
    left: 0.85rem;
    right: auto;
    padding: 0.3rem 0.25rem;
    gap: 0.25rem;
  }
  .theme-spectrum-toggle .theme-pill-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }
}

/* ── 480px: Very small mobile ── */
@media (max-width: 480px) {
  .hero-title { font-size: 1.85rem; }
  .hero { padding-top: 6rem; }
  .section-title { font-size: 1.55rem; }

  /* Nav brand */
  .brand-name { font-size: 0.92rem; }
  .brand-mark { width: 30px; height: 30px; min-width: 30px; min-height: 30px; font-size: 0.72rem; }

  /* Super hologram */
  .super-hologram-stage { width: 210px; height: 270px; }
  .hologram-frame { width: 185px; height: 245px; }
  .hologram-ambient-light { width: 190px; height: 255px; }
  .contact-clock-badge { padding: 0.55rem 0.75rem; gap: 0.65rem; }
  .luxe-clock { width: 64px; height: 64px; }
  .acb-label { font-size: var(--text-micro); }
  .acb-time { font-size: 0.95rem; }
  .acb-response { font-size: var(--text-micro); }

  /* Blueprint */
  
  .bp-node { padding: 0.65rem 0.8rem; }
  
  
  


  /* Bento */
  .bento-icon-box { width: 38px; height: 38px; }
  .bento-icon-box svg { width: 18px; height: 18px; }

  /* Super project card */
  .spc-image-banner { height: 110px; }
  .spc-badge-pill { font-size: var(--text-micro); padding: 0.18rem 0.5rem; }

  /* Contact */
  .uplink-card { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
  .uc-copy-badge { margin-left: 0; align-self: flex-start; }

  /* AI Drawer */
  .ai-drawer-header { padding: 0.9rem 1rem 0.7rem; }
  .ai-drawer-chat { padding: 0.75rem; gap: 0.75rem; }
  .ai-drawer-input-row { padding: 0.65rem; }

  /* Toast */
  
}

/* ── 360px: Smallest common phones ── */
/* Ultra-narrow 360px sub-step removed in step 4; the 480px step covers this range. */

/* ─── 25. LIQUID GLASS GLOBAL POLISH ─────────────────────────── */

/* Ambient glass noise pseudo-overlay for depth & texture */
.bento-card::after, .super-project-card::after, .skill-quad-card::after, .stl-card::after, .contact-form-wrap::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* Ensure content inside glass cards stays above noise overlay */
.bento-inner,
.spc-body,
.spc-image-banner,
.sqc-header,
.skill-telemetry-list,
.skill-pill-cloud,
.stl-header,
.stl-summary,
.stl-tags {
  position: relative;
  z-index: 1;
}

/* Passive glass glow on focus for contact form */
.contact-form-wrap:focus-within {
  box-shadow: var(--glass-shadow-hover);
  border-color: var(--border-glow);
  border-top-color: rgba(255, 255, 255, 0.35);
}

/* Glass scrollbar styling */
.ai-drawer-chat::-webkit-scrollbar, .palette-results::-webkit-scrollbar{
  width: 4px;
}
.ai-drawer-chat::-webkit-scrollbar-track, .palette-results::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, 0.03);
  border-radius: 99px;
}
.ai-drawer-chat::-webkit-scrollbar-thumb, .palette-results::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}
.ai-drawer-chat::-webkit-scrollbar-thumb:hover, .palette-results::-webkit-scrollbar-thumb:hover{
  background: var(--accent-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ROMAN AI FLOATING LAUNCHER & WHATSAPP STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Floating Roman AI Widget Button */
.floating-roman-ai-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem 0.65rem 0.75rem;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-full);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), 0 0 25px var(--glow-primary);
  cursor: var(--cursor-pointer) !important;
  transition: all 0.3s var(--ease-bounce);
  animation: fraFloat 4s ease-in-out infinite alternate;
}

.floating-roman-ai-btn:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: var(--accent-primary-l);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 35px var(--accent-primary);
}

.fra-icon-ring {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-superhuman);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 0 14px var(--accent-primary);
}

.fra-pulse-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-tertiary-l);
  animation: fraPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fraPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.22); opacity: 0; }
}

@keyframes fraFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.fra-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.fra-badge {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--accent-emerald);
  letter-spacing: 0.08em;
}

.fra-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: 0.02em;
}

/* AI Avatar Icon in Drawer Header */
.ai-avatar-icon-ring {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-superhuman);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-glow);
  box-shadow: 0 0 16px var(--glow-primary);
}

.ai-avatar-robot-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.ai-avatar-icon-ring .ai-avatar-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--bg-deep);
}

/* Navbar AI Button Robot Icon */
.nav-ai-robot {
  font-size: 1rem;
  margin-right: 0.15rem;
}
.uplink-card-whatsapp:hover {
  border-color: #25D366 !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.25) !important;
}

.uplink-card-whatsapp:hover .uc-whatsapp-icon {
  background: #25D366 !important;
  color: #ffffff !important;
}

/* ── Social icons: hover FILLS the button with the brand colour ───────────
   Each social button reads in its own brand on hover — the fill goes to the
   brand colour and the glyph flips to whatever contrasts with it, which is
   how a social button is meant to read.
   GitHub's brand mark is near-black (#181717) and its logo colour on a dark
   surface is #f0f6fc; using that as a light fill with a #0d1117 glyph is
   GitHub's own light-mode button, not a substitute hue.
   The mail button has no brand, so it fills with the active theme accent. */
.social-icon-wa:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(37, 211, 102, 0.6) !important;
}
.social-icon-gh:hover {
  background: #f0f6fc !important;
  border-color: #f0f6fc !important;
  color: #0d1117 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(240, 246, 252, 0.4) !important;
}
.social-icon-li:hover {
  background: #0A66C2 !important;
  border-color: #0A66C2 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(10, 102, 194, 0.6) !important;
}
/* X's brand mark is a monochrome black glyph, which disappears on this dark
   surface. X's own guidance for dark backgrounds is to invert to white, so the
   hover tile is white with the black glyph, preserving the logo's appearance. */
.social-icon-x:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 255, 255, 0.45) !important;
}
.social-icon-mail:hover {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 18px var(--glow-primary) !important;
}

/* The contact-section cards follow the same rule: brand-tinted fill, brand
   border, brand glow, and the icon square fills solid. The WhatsApp rule
   already existed but no element carried the class, so that card never turned
   green.
   `!important` is required, not stylistic: typography.css (loaded after this
   file) sets `.uplink-card { background: ... !important; border: ... !important }`,
   so a plain declaration here loses regardless of specificity. Within the
   important origin the higher-specificity `.uplink-card-whatsapp:hover` wins.
   `color-mix` is declared after a plain fallback so a browser without it keeps
   the neutral tint instead of dropping the declaration. */
.uplink-card-whatsapp:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background: color-mix(in srgb, #25D366 12%, transparent) !important;
  border-color: #25D366 !important;
  color: #25D366 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(37, 211, 102, 0.45) !important;
}
.uplink-card-whatsapp:hover .uc-whatsapp-icon,
.uplink-card-whatsapp:hover .uc-icon {
  background: #25D366 !important;
  color: #ffffff !important;
}
.uplink-card-linkedin:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background: color-mix(in srgb, #0A66C2 14%, transparent) !important;
  border-color: #0A66C2 !important;
  color: #6ba9e8 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(10, 102, 194, 0.5) !important;
}
.uplink-card-linkedin:hover .uc-icon {
  background: #0A66C2 !important;
  color: #ffffff !important;
}
/* Direct Email and Location had no brand, so they were the only two cards left
   on the neutral tint while WhatsApp and LinkedIn lit up. Email takes the
   active theme accent; Location takes the tertiary accent so all four rows read
   as a set. `!important` is required for the same reason as above. */
.uplink-card-email:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary-l) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 22px var(--glow-primary) !important;
}
.uplink-card-email:hover .uc-icon {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}
.uplink-card-location:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background: color-mix(in srgb, var(--accent-tertiary) 14%, transparent) !important;
  border-color: var(--accent-tertiary) !important;
  color: var(--accent-tertiary-l) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 22px color-mix(in srgb, var(--accent-tertiary) 45%, transparent) !important;
}
.uplink-card-location:hover .uc-icon {
  background: var(--accent-tertiary) !important;
  color: #ffffff !important;
}
/* The live clock gets the same acknowledgement on hover. No transform: it
   carries an `animation: hero-fade-up` with fill-mode both, so the animation's
   final keyframe would win over a hover transform anyway. */
.contact-clock-badge:hover {
  border-color: var(--accent-primary-l) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62), 0 0 24px var(--glow-primary) !important;
}

/* Hero Telemetry Strip: Responsive layout fix */
.hero-telemetry-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

@media (max-width: 1280px) {
  .hero-telemetry-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Mobile override handled cleanly in mobile media queries */

/* ═══════════════════════════════════════════════════════════════════
   OFFICIAL CV INTEGRATION STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* Navbar CV Button */
.nav-cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-primary-l);
  transition: all 0.25s var(--ease-bounce);
  text-decoration: none;
}
.nav-cv-btn:hover {
  background: var(--grad-superhuman);
  color: #fff;
  box-shadow: 0 4px 15px var(--glow-primary);
  transform: translateY(-2px);
  border-color: var(--accent-primary-l);
}

/* CV Access Card in Journey Section */
.cv-access-card {
  position: relative;
  margin-bottom: 2.75rem;
  padding: 2rem 2.25rem;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glow);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px var(--glow-primary);
  overflow: hidden;
  transition: all 0.35s ease;
}
.cv-access-card:hover {
  border-color: var(--accent-primary-l);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 45px var(--accent-primary);
}
.cv-access-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cv-badge-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cv-pill-tag {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--accent-primary-l);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-medium);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cv-status-ping {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--accent-emerald);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cv-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.01em;
}
.cv-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 820px;
}
.cv-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.cv-card-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cv-access-card {
    padding: 1.4rem 1.25rem;
    margin-bottom: 2rem;
  }
  .cv-card-title {
    font-size: 1.25rem;
  }
  .cv-card-desc {
    font-size: 0.85rem;
  }
  .cv-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cv-card-actions button,
  .cv-card-actions a {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE NAVBAR ARCHITECTURE (WEB & MOBILE)
   ═══════════════════════════════════════════════════════════════════ */

/* Base Desktop Navbar */
#navbar {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 1360px;
  z-index: var(--z-nav);
  padding: 0.45rem 1.25rem;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: all 0.3s var(--ease-smooth);
}

#navbar.scrolled {
  top: 0.6rem;
  background: rgba(5, 8, 20, 0.95);
  border-color: var(--border-glow);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px var(--glow-primary);
  padding: 0.4rem 1.25rem;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

.brand-mark-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--grad-superhuman) border-box;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45), 0 4px 16px var(--glow-primary);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-bounce);
}

.nav-brand:hover .brand-mark {
  transform: scale(1.08);
}

.brand-online-ping {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  background: var(--accent-emerald);
  border: 2px solid #060919;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-emerald);
}

.brand-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  min-width: 0;
}

.brand-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text-pure);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-role {
  font-size: var(--text-label);
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Nav Links Inline (Desktop) */
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.22rem 0.3rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link {
  position: relative;
  z-index: 1;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-pure);
}

/* The Contact nav-link duplicates the "Contact Me" CTA, so it stays out of
   the desktop bar and appears only inside the mobile drawer. The child
   combinator is load-bearing: a later `.nav-link { display: inline-flex }`
   at (0,1,0) would otherwise outrank this by source order and show the
   duplicate on desktop. */
.nav-links > .nav-link-contact {
  display: none; /* Only visible in mobile drawer */
}

.nav-mobile-actions {
  display: none; /* Only visible in mobile drawer */
}

/* Nav CTA Container */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Hamburger Button Base */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 8px 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-primary-l);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-pure);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  transform-origin: center;
}

/* Hamburger Open / Morph into X */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ───────────────────────────────────────────────────────────────────
   TABLET RESPONSIVE (1280px and below -- matches the nav-collapse band,
   because the full control row cannot fit on one line below ~1345px)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  #navbar {
    width: calc(100% - 1.5rem);
    top: 0.75rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-full);
  }

  

  .nav-brand .brand-info { min-width: 0; }

  .nav-ai-pill-btn {
    display: none !important; /* Managed by floating Roman AI button */
  }

  .hamburger {
    display: flex;
  }

  /* Dropdown Menu for Tablet & Mobile */
  .nav-links {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    background: var(--bg-glass-heavy);
    backdrop-filter: blur(36px) saturate(220%);
    -webkit-backdrop-filter: blur(36px) saturate(220%);
    border: 1px solid var(--border-glow);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 50px var(--glow-primary);
    flex-direction: column;
    padding: 1.25rem 1rem;
    gap: 0.35rem;
    transform: translateY(-15px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease-bounce), opacity 0.25s ease;
    z-index: var(--z-marker);
  }

  .nav-links.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-sliding-pill {
    display: none !important;
  }

  .nav-link {
    width: 100%;
    text-align: left;
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    box-sizing: border-box;
  }

  .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-pure);
  }

  .nav-link.active {
    background: var(--grad-superhuman);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 20px var(--glow-primary);
  }

  .nav-links > .nav-link-contact {
    display: block;
  }

  /* Mobile Drawer Actions */
  .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
    width: 100%;
    box-sizing: border-box;
  }

  .btn-mobile-nav-cta {
    width: 100%;
    padding: 0.8rem 1.2rem;
    justify-content: center;
    font-size: 0.92rem;
    box-sizing: border-box;
  }

  .nav-mobile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }

  .btn-mobile-nav-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .btn-mobile-nav-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-pure);
    border-color: var(--accent-primary-l);
  }
}


/* ───────────────────────────────────────────────────────────────────
   MOBILE PORTRAIT & SMALL SCREEN RESPONSIVE (768px and below)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #navbar {
    top: 0.65rem;
    width: calc(100% - 1.25rem);
    padding: 0.4rem 0.8rem;
  }

  .nav-container {
    gap: 0.5rem;
  }

  .nav-brand {
    gap: 0.55rem;
    max-width: calc(100% - 115px);
    overflow: hidden;
  }

  .brand-mark {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }

  .brand-name {
    font-size: 0.92rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Content parity: the identity line compacts instead of vanishing. On the
     narrow phone bar it becomes a one-line ellipsis; the span carries a title
     with the full text, and the hero directly below states the full role. */
  .brand-role {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: var(--text-micro);
  }

  /* In mobile navbar header: hide clutter, keep ONLY CV + Hamburger */
  .nav-cta {
    gap: 0.45rem;
  }

  .nav-cmd-trigger {
    display: none !important;
  }

  .nav-cta .btn-hire {
    display: none !important;
  }

  .nav-ai-pill-btn {
    display: none !important;
  }

  .nav-cv-btn {
    display: inline-flex !important;
    padding: 0.38rem 0.75rem;
    font-size: 0.74rem;
    gap: 0.3rem;
  }

  .hamburger {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}


/* ───────────────────────────────────────────────────────────────────
   VERY SMALL MOBILES (480px and below)
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #navbar {
    top: 0.5rem;
    width: calc(100% - 1rem);
    padding: 0.35rem 0.65rem;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .brand-name {
    font-size: 0.88rem;
  }

  .nav-cv-btn {
    padding: 0.32rem 0.65rem;
    font-size: 0.7rem;
  }

  .hamburger {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 6px;
  }

  .hamburger span {
    width: 18px;
  }
}

/* When mobile navigation drawer is open, ensure crisp contrast and hide floating buttons */
body.nav-open .floating-roman-ai-btn,
body.nav-open .theme-spectrum-toggle,
body:has(.nav-links.open) .floating-roman-ai-btn,
body:has(.nav-links.open) .theme-spectrum-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

@media (max-width: 1280px) {
  .nav-links {
    background: rgba(6, 9, 24, 0.97) !important;
    backdrop-filter: blur(40px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(220%) !important;
    border: 1px solid var(--border-glow) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.98), 0 0 50px var(--glow-primary) !important;
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SUPERHUMAN NAV v2 — BEST ICONS + RESPONSIVE POLISH + WATER GLOW
   ═══════════════════════════════════════════════════════════════════ */

/* ── Nav link: icon + label layout ─────────────────────────────── */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.nav-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.25s var(--ease-bounce), opacity 0.2s ease, filter 0.25s ease;
}

.nav-link:hover .nav-ico,
.nav-link.active .nav-ico {
  opacity: 1;
  transform: scale(1.14);
  filter: drop-shadow(0 0 6px var(--glow-primary));
}

/* AI pill robot icon */
.nav-ai-robot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.15rem;
}
.nav-ai-robot svg {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 0 5px var(--glow-primary));
}

/* ── Water glow: halo aura behind the glass capsule ────────────── */
#navbar::before {
  content: "";
  position: absolute;
  inset: -38px -48px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 55% at 50% 45%, var(--glow-primary), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
  animation: water-halo 5.5s ease-in-out infinite;
}

/* ── Water glow: specular sheen film gliding over the glass ────── */
.nav-water-sheen,
.nav-water-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.nav-water-sheen {
  background: repeating-linear-gradient(100deg,
    transparent 0px, transparent 96px,
    rgba(147,197,253,0.10) 96px, rgba(255,255,255,0.16) 124px,
    rgba(147,197,253,0.07) 150px, transparent 156px, transparent 300px);
  opacity: 0.9;
  animation: water-sheen-slide 8s linear infinite;
}

/* ── Water glow: breathing ripple + rising liquid wave ──────────── */
.nav-water-ripple {
  background: radial-gradient(70% 120% at 15% 115%, var(--glow-primary), transparent 60%);
  animation: water-ripple-breathe 5.5s ease-in-out infinite;
}
.nav-water-ripple::after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  top: 55%;
  height: 85%;
  background: radial-gradient(120% 100% at 50% 50%, rgba(125,211,252,0.15), transparent 60%);
  filter: blur(4px);
  animation: water-wave 7s ease-in-out infinite;
}

@keyframes water-halo {
  0%, 100% { opacity: 0.35; transform: scale(0.98); }
  50%      { opacity: 0.75; transform: scale(1.04); }
}
@keyframes water-sheen-slide {
  0%   { transform: translateX(-18%); }
  100% { transform: translateX(18%); }
}
@keyframes water-ripple-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.035); }
}
@keyframes water-wave {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.45; }
  50%      { transform: translateY(-6px) scaleX(1.07); opacity: 1; }
}

/* ── Responsive compaction so icon+label never overflows ───────── */
@media (max-width: 1280px) {
  .nav-link { padding: 0.32rem 0.5rem; font-size: 0.78rem; gap: 0.34rem; }
  .nav-ico { width: 13px; height: 13px; }
  .nav-ai-pill-btn > span:last-child { display: none; }
  .nav-ai-pill-btn { padding: 0.42rem 0.6rem; }
  .nav-cv-btn span { display: none; }
  .nav-cv-btn { padding: 0.4rem 0.55rem; }
}

@media (max-width: 1280px) {
  .nav-links.open .nav-link { justify-content: flex-start; }
  .nav-link { display: inline-flex; align-items: center; gap: 0.55rem; }
  .nav-ico { width: 16px; height: 16px; }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .nav-water-sheen,
  .nav-water-ripple,
  .nav-water-ripple::after,
  #navbar::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   CAPABILITIES BENTO CARDS — STANDARDIZED (v2)
   ═══════════════════════════════════════════════════════════════════ */

/* Badge colour variants for all six capability cards */
.bento-category-badge.green {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.bento-category-badge.amber {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.bento-category-badge.rose {
  background: rgba(244, 63, 94, 0.15);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Tags as semantic list: reset default ul/li styling so the flex row wins */
.bento-tags-row {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bento-tags-row .tech-tag {
  display: inline-flex;
  align-items: center;
}

/* Consistent card typography edge: zero stray heading margins */
.bento-heading { margin: 0; }
.bento-subheading { margin: 0.25rem 0 0; }
.bento-description { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   PROJECTS — STANDARDIZED CARDS (v2)
   ═══════════════════════════════════════════════════════════════════ */

/* Quick-action is now a real <button>: inherit button chrome reset */
.spc-quick-action {
  font-family: inherit;
  font-size: 0.78rem;
  line-height: normal;
  text-align: left;
}

/* Tech stack as semantic list: reset ul/li so the flex row wins */
.spc-stack {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spc-stack li {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  padding: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .spc-stack li {
    font-size: var(--text-label);
    padding: 0.2rem 0.55rem;
    white-space: normal;
    word-break: break-word;
  }
}

/* Consistent card type + layout margins */
.spc-meta { margin: 0; }
.spc-title { margin: 0; }
.spc-desc { margin: 0; }
.sm-v, .sm-k { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   AI COMMAND CENTER — UNIQUE TERMINAL SHOWCASE
   ═══════════════════════════════════════════════════════════════════ */

.ai-console-section {
  position: relative;
  overflow: visible;
}

.ai-console-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Terminal window ───────────────────────────────────────────── */
.ai-console-terminal {
  position: relative;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 45px var(--glow-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}

.ai-console-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(59, 130, 246, 0.22), transparent 55%),
    radial-gradient(70% 60% at 95% 100%, rgba(6, 182, 212, 0.16), transparent 55%);
  pointer-events: none;
  animation: water-ripple-breathe 6s ease-in-out infinite;
}

.term-topbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 1;
}

.term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.term-dot.red     { background: #ff5f57; }
.term-dot.amber   { background: #febc2e; }
.term-dot.emerald { background: #28c840; }

.term-title {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.term-body {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 1.15rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.9;
  min-height: 240px;
}

.term-line {
  margin: 0;
  color: var(--text-secondary);
  word-break: break-word;
}

.term-prompt {
  color: var(--accent-primary-l);
  font-weight: 700;
  margin-right: 0.6rem;
  user-select: none;
}

.term-text {
  color: var(--text-pure);
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
}

.term-line:nth-child(even) .term-text {
  color: var(--accent-emerald);
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.term-blink {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  background: var(--accent-primary-l);
  box-shadow: 0 0 12px var(--accent-primary-l);
  transform: translateY(0.18em);
  animation: term-blink 1s steps(2, start) infinite;
}

@keyframes term-blink { to { visibility: hidden; } }

.term-status-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  padding: 0.65rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-muted);
}

.tsb-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.tsb-ping {
  width: 7px;
  height: 7px;
  background: var(--accent-emerald);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-emerald);
  animation: pulse-ring 1.5s infinite;
}

/* ── Right info panel ──────────────────────────────────────────── */
.ai-console-panel {
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-medium);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.ai-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-online {
  color: var(--accent-emerald);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ai-panel-title { font-size: 1.45rem; }
.ai-panel-sub { line-height: 1.6; }

.ai-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  transition: border-color 0.25s ease, transform 0.25s var(--ease-bounce);
}

.ai-feature-item:hover {
  border-color: var(--border-glow);
  transform: translateX(4px);
}

.ai-feature-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-pure);
}

.ai-feature-item small {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── Liquid-glass gradient icons ───────────────────────────────── */
.ai-feature-ico {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s ease;
}
.ai-feature-ico:hover {
  transform: translateY(-2px) scale(1.06);
}
.ai-feature-ico svg {
  position: relative;
  z-index: 3;
  width: 20px;
  height: 20px;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* colour glow washes */
.ai-feature-ico.violet  { background: linear-gradient(150deg, rgba(139,92,246,.95), rgba(99,102,241,.75) 45%, rgba(168,85,247,.9)); box-shadow: 0 10px 24px rgba(139,92,246,.4), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.18); }
.ai-feature-ico.cyan    { background: linear-gradient(150deg, rgba(34,211,238,.95), rgba(6,182,212,.8) 45%, rgba(59,130,246,.9)); box-shadow: 0 10px 24px rgba(6,182,212,.4), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.18); }
.ai-feature-ico.emerald { background: linear-gradient(150deg, rgba(52,211,153,.95), rgba(16,185,129,.8) 45%, rgba(5,150,105,.9)); box-shadow: 0 10px 24px rgba(16,185,129,.4), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.18); }

/* glass gloss reflection */
.ai-feature-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 22% 10%, rgba(255,255,255,.55), transparent 45%),
    linear-gradient(160deg, rgba(255,255,255,.28), transparent 45%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* liquid sheen that glides across the glass */
.ai-feature-ico::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -70%;
  top: -40%;
  width: 70%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: liquid-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes liquid-sheen {
  0%   { left: -70%; opacity: 0; }
  35%  { opacity: .9; }
  100% { left: 130%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   AI CHATBOT — LIQUID-GLASS ICONS & ROBOT GLYPHS
   ═══════════════════════════════════════════════════════════════════ */

/* Avatar robot orb (drawer header) */
.ai-avatar-icon-ring {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(59,130,246,.9), rgba(139,92,246,.72) 45%, rgba(6,182,212,.88));
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 10px 26px rgba(59,130,246,.45), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(255,255,255,.2);
}
.ai-avatar-icon-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 25% 12%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(170deg, rgba(255,255,255,.25), transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.ai-avatar-robot-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ai-avatar-robot-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.ai-avatar-icon-ring .ai-avatar-dot { z-index: 3; }

/* Voice toggle indicator */
.ai-voice-toggle {
  display: inline-flex;
  align-items: center;
}
.voice-toggle-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 0.3rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

/* Floating launcher robot ring */
.fra-icon-ring {
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(59,130,246,.95), rgba(139,92,246,.78) 45%, rgba(6,182,212,.9));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 14px var(--accent-primary);
}
.fra-icon-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 25% 12%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(170deg, rgba(255,255,255,.25), transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.fra-robot-emoji {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fra-robot-emoji svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* Hero "Talk with Roman AI" CTA icon */
.ai-cta-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-right: 0.4rem;
  vertical-align: -2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

/* Command palette robot icon */
.palette-robot-ico {
  width: 18px;
  height: 18px;
  display: block;
  color: var(--accent-primary-l);
}

/* ── OpenCode runtime strip (Neural Command Center) ────────────── */
.ai-runtime-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 980px;
  margin: -2.6rem auto 1.75rem;
}
.ai-rt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-bounce);
}
.ai-rt-chip:hover {
  color: var(--text-pure);
  border-color: var(--border-glow);
  transform: translateY(-2px);
}
.ai-rt-link {
  color: var(--accent-primary-l);
  border-color: var(--border-glow);
  box-shadow: 0 0 14px var(--glow-primary);
}
.ai-rt-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
@media (max-width: 480px) {
  .ai-runtime-strip { gap: 0.45rem; margin-top: -2rem; }
  .ai-rt-chip { font-size: var(--text-micro); padding: 0.36rem 0.7rem; }
}

/* ── Live terminal input row ───────────────────────────────────── */
.term-input-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.28);
}
.term-input-row .term-prompt {
  animation: term-blink 1.2s steps(2, start) infinite;
}
.term-input-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-pure);
  font-family: var(--font-sans);
  font-size: 1rem; /* iOS Safari zooms on focus below 16px; the prompt glyph keeps its own size */
}
.term-input-row input::placeholder {
  color: var(--text-muted);
}
.term-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--grad-superhuman);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: var(--cursor-pointer) !important;
  transition: transform 0.2s var(--ease-bounce), box-shadow 0.2s ease;
}
.term-send-btn:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 0 16px var(--glow-primary);
}
.term-send-btn svg { width: 15px; height: 15px; }

/* Terminal user vs AI reply styling */
.term-line .term-user-text {
  color: #93c5fd;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.25);
}
.term-line .term-answer-text {
  color: var(--accent-emerald);
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
  white-space: pre-wrap;
}
.term-line .term-think-text {
  color: var(--text-muted);
}
.term-thinking .term-think-text {
  animation: term-blink 1s steps(2, start) infinite;
}
@media (max-width: 480px) {
  .term-input-row { padding: 0.7rem 1rem; }
  /* The input keeps 16px even here: dropping it would reintroduce the iOS
     focus-zoom on the very phones that need it most. Only the prompt glyph
     shrinks. */
  .term-input-row input { font-size: 1rem; }
  .term-input-row .term-prompt { font-size: 0.78rem; }
}

.ai-console-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ai-console-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 480px) {
  .term-status-bar { gap: 0.45rem 0.9rem; font-size: var(--text-micro); }
  .term-body { font-size: 0.78rem; padding: 1rem; }
  .ai-console-panel { padding: 1.4rem; }
  .term-title { font-size: var(--text-micro); }
}







/* ============================================================
   RESPONSIVE ARCHITECTURE: interaction & accessibility layer
   Appended last so it wins the cascade at equal specificity.
   ============================================================ */

/* --- Touch target floor -----------------------------------
   One variable, `--target-effective`, decides the floor. The coarse-pointer
   query below reassigns it, so the two tiers can never clobber each other.
   An earlier version set 25px in a later rule than the 44px tier, which
   silently overrode it -- the comfortable tier reported as untested.

   25px rather than 24px: the root font-size is fluid (12.49px at a 360px
   viewport), so padding and line-height are fractional and a control that
   should measure 24px computes to 23.6px, failing the AA floor by a
   fraction. 25px is the smallest integer that guarantees at least 24 CSS px
   after subpixel rounding, per WCAG 2.2 SC 2.5.8. */
/* `a` is handled by an attribute selector rather than a blanket `a`: a
   component link always carries a class, while prose links inside body
   copy do not, and forcing 45px block-size onto prose blows out the
   paragraph. `a[class]` therefore lifts navigation, social, filter and
   chip links without touching a single in-sentence link.
   `display: inline-flex` is set only where the element is still inline,
   because min-block-size has no effect on a non-replaced inline box. */
:where(button, [role="button"], input, select, textarea, summary,
       a[class], .footer-nav a, #nav-links a) {
  min-block-size:  var(--target-effective);
  min-inline-size: var(--target-effective);
}
:where(a[class]):not(:where(.nav-brand, .nav-link, .skip-to-content, .btn-mobile-nav-secondary, .ai-rt-chip)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Comfortable touch tier --------------------------------
   44px is a property of the input device, not of the element, so it is
   gated on input capability rather than applied with a class on every
   control. Verify it with `node tools/responsive-verify.mjs --touch`; a
   headless desktop Chrome reports `pointer: fine` and never enters here. */
@media (hover: none) and (pointer: coarse) {
  :root { --target-effective: var(--target-comfort); }
}


/* --- Visible focus ring ------------------------------------
   The project removed `outline: none` in three places and defined
   only one :focus-visible rule, so keyboard focus was effectively
   invisible. This restores a visible indicator for every focusable
   element, and satisfies the rule "never remove an outline without
   providing a visible replacement". */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-primary, #00e5ff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Tap delay ---------------------------------------------
   `touch-action: manipulation` removes the 300ms double-tap delay
   without disabling pinch-zoom, which `none` would. */
:where(button, a, [role="button"], input, select, textarea, label) {
  touch-action: manipulation;
}

/* ============================================================
   RESPONSIVE ARCHITECTURE: overflow containment
   ============================================================ */

/* The navbar is a fixed, glassmorphic bar with two decorative layers plus a
   `::before` glow that uses negative insets, so they paint outside the bar.
   `overflow: clip` was added to contain them -- and it silently broke two
   things that no other rule could see:

     1. The mobile dropdown is `position: absolute; top: calc(100% + 0.65rem)`,
        i.e. it starts BELOW the bar. `overflow: clip` cut it off entirely, so
        tapping the hamburger set `.open` (measured: class present, 382px tall)
        and painted nothing.
     2. The nav controls overflow the bar by 73-74px at 1280-1440px, so the
        right-hand control (the CV button) was cut off and unreachable.

   The glow is a `::before` pseudo-element, so it is invisible to
   `querySelectorAll('body *')` and cannot create a horizontal scrollbar from a
   `position: fixed` parent. Containing it is therefore not worth clipping real
   content for. The overflow is fixed at its source instead (see the 1281-1440px
   compaction below), so the bar needs no clipping at all. */
#navbar { overflow: visible; }

/* The hero aurora glow is a 600px blurred decoration that intentionally
   extends past the viewport. It is decorative, so contain it at the
   section rather than resizing the artwork. */
.hero { overflow: clip; }

/* The shimmer beam sweeps from left:-100% across a 60%-wide bar, so it
   necessarily extends outside its button. Clip it to the button. */
.btn-superhuman-shimmer { overflow: clip; }

/* Project filter pills form a single non-wrapping row that overflowed
   both viewport edges on narrow phones. Make it a horizontal scroll
   container with real inline padding so the first and last pill are
   not flush against the edge. */
.super-project-filters {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: 0.25rem;
  max-width: 100%;
}
.super-project-filters::-webkit-scrollbar { display: none; }

/* Long unbroken tokens (the CV email, long skill labels) were forcing
   their cards wider than the grid track. */
.bento-card, .stl-card { min-width: 0; }
.bento-card p, .spc-body, .stl-card p { overflow-wrap: anywhere; }

/* --- Navbar content width -----------------------------------
   Measured: at 1440px the navbar's own content needs 1577px inside a
   1317px content box, and .nav-container is flex-wrap: nowrap, so it
   overflows by ~260px. Two changes close that gap.

   1. The 1360px cap was tighter than the bar's own content. Raised to
      1600px so a wide desktop can hold the full control set.
   2. Between 1280px and 1600px the full control set still does not fit,
      so the "Analyze CV" button compacts to its icon (its span is hidden,
      the button stays). The icon carries the button's existing title, so
      the action is reachable at every width instead of vanishing here. */
#navbar { max-width: 1600px; }

/* ─── Navbar horizontal fit ───────────────────────────────────────────────
   Measured, not guessed: the nav container needs ~1346px of content. Its
   available width is `viewport - 2.5rem - padding`, which is 1186px at 1280px
   and 1272px at 1366px -- so the controls overflow the bar by 73-74px across
   the most common desktop widths. Previously `overflow: clip` hid that
   silently, which is why the right-hand CV control was cut off and the mobile
   dropdown was invisible. With the clipping removed, the overflow is fixed at
   its source here: the two lowest-priority LABELS compact to their icons. Each
   compacted control keeps an accessible name (title / aria-label), so the
   meaning stays recoverable. */
@media (min-width: 1281px) and (max-width: 1440px) {
  #navbar { padding: 0.45rem 0.9rem; }
  #navbar .nav-link { padding: 0.32rem 0.5rem; gap: 0.3rem; }
  #navbar .nav-cta { gap: 0.4rem; }
  #navbar .brand-role { font-size: var(--text-micro); }
  /* "Roman AI" label -> robot icon */
  #navbar .nav-ai-pill-btn > span:last-child { display: none; }
  #navbar .nav-ai-pill-btn { padding: 0.42rem 0.6rem; }
  /* the "⌘K" hint -> magnifier icon (the shortcut itself still works) */
  #navbar .nav-cmd-trigger kbd { display: none; }
  #navbar .nav-cmd-trigger { padding: 0.45rem 0.6rem; }
  /* "Analyze CV" -> document icon */
  #navbar .nav-cv-btn { display: inline-flex; padding: 0.4rem 0.55rem; }
  #navbar .nav-cv-btn span { display: none; }
}

@media (min-width: 1441px) and (max-width: 1600px) {
  #navbar .nav-link { padding: 0.4rem 0.6rem; gap: 0.4rem; }
  #navbar .nav-cta { gap: 0.5rem; }
  /* 3px of overflow at 1440px, gone by 1536px; only the CV label compacts. */
  #navbar .nav-cv-btn { display: inline-flex; padding: 0.4rem 0.55rem; }
  #navbar .nav-cv-btn span { display: none; }
}

/* The controls must never be squeezed below their own hit area. */
.nav-container > * { min-width: 0; }
.nav-cta { flex-shrink: 0; }

/* Terminal body lines inherited a sub-12px size from their parent. */
.term-prompt,
.term-text { font-size: var(--text-label); }

/* --- Skip link ----------------------------------------------------
   First focusable element on the page. Visually hidden until focused,
   then pinned to the top-left so a keyboard user can jump past the nav,
   the four header CTAs and the command palette trigger. */
.skip-to-content {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: var(--z-overlay);
  padding: 0.6rem 1rem;
  background: var(--bg-glass-heavy);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  color: var(--text-pure);
  font: 600 0.9rem var(--font-sans);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out, ease);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateY(0);
}
/* The hamburger is the primary mobile navigation control, so it is held to
   the comfortable tier even on a fine pointer -- a mouse user is not the
   reason to keep it small. Its 34x34 box came from `24px bar + 4px padding
   + 2px border` and the min-* floors above do not reach it. */
.hamburger {
  min-block-size:  var(--target-comfort);
  min-inline-size: var(--target-comfort);
  justify-content: center;
  align-items: center;
}

/* Theme pills sit in a 4-up row; at 360px four 45px targets plus gaps
   still fit inside the 336px content box, so give them real width. */
.theme-spectrum-toggle .theme-pill-btn {
  min-inline-size: var(--target-comfort);
}

/* --- Terminal formatted answer --------------------------------------
   renderTerminalMarkdown() emits only these tags. Sizes stay on the
   legibility floor (--text-label and up) and colours reuse the passing
   text tokens, so formatted answers cannot reintroduce P2/P7 failures. */
.term-text .term-p { display: block; }
.term-text strong { color: var(--text-pure); font-weight: 700; }
.term-text em { color: var(--text-pure); }
.term-text .term-code {
  font-size: var(--text-label);
  color: var(--accent-primary-l);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}
.term-text .term-pre {
  margin: 0.5rem 0;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.term-text .term-pre code {
  font-size: var(--text-label);
  color: var(--text-pure);
  white-space: pre;
}
.term-text .term-h { display: block; color: var(--text-pure); font-weight: 700; }
.term-text .term-h1 { font-size: 1.05rem; margin: 0.4rem 0 0.2rem; }
.term-text .term-h2 { font-size: 1rem; margin: 0.35rem 0 0.15rem; }
.term-text .term-h3 { font-size: 0.95rem; margin: 0.3rem 0 0.1rem; }
.term-text ul.term-list,
.term-text ol.term-list { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; }
.term-text .term-list li { margin: 0.15rem 0; color: var(--text-secondary); }
.term-text .term-list li::marker { color: var(--accent-primary-l); }

/* --- Safe-area (notched devices) --------------------------------------
   env() with a 0px fallback: no-ops on desktop, adds real padding inside
   the notch, home-indicator and Dynamic Island zones on iOS/Android.
   Only fixed chrome is touched; in-flow layout never shifts. */
#navbar {
  top: calc(1rem + var(--sat));
  left: calc(50% + (var(--sal) - var(--sar)) / 2);
}
.ai-chat-drawer {
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-right: var(--sar);
}
.pm-dock.show { transform: translate(-50%, 0); }
/* NOTE: .pm-dock base lives in premium.css (loaded later), so its own
   safe-area bottom/left/transform live there too — a copy here would lose
   the cascade. */
.theme-spectrum-toggle {
  top: calc(5.5rem + var(--sat));
  right: calc(2rem + var(--sar));
}
@media (max-width: 900px) {
  .theme-spectrum-toggle {
    top: auto;
    right: auto;
    bottom: calc(1.2rem + var(--sab));
    left: calc(1rem + var(--sal));
  }
}
#toast-container {
  bottom: calc(1rem + var(--sab));
  padding-left: var(--sal);
  padding-right: var(--sar);
}
.palette-modal {
  margin-bottom: var(--sab);
}
.ai-chat-drawer .ai-drawer-input-row,
.term-input-row {
  padding-bottom: calc(0.5rem + var(--sab));
}
.floating-roman-ai-btn {
  bottom: calc(1rem + var(--sab));
  right: calc(0.85rem + var(--sar));
}
/* Mobile drawer becomes a bottom sheet; keep it clear of the home bar. */
@media (max-width: 1024px) {
  .ai-chat-drawer {
    top: auto;
    bottom: 0;
    max-height: calc(85vh - var(--sab));
    padding-bottom: calc(0.75rem + var(--sab));
  }
}

/* ============================================================
   RESPONSIVE ARCHITECTURE: cross-device polish layer
   ============================================================ */

/* --- Rotation: short landscape viewports --------------------------
   A phone rotated to landscape is often only ~360-420px tall. A hero
   locked to 100dvh with vertically centred content then overflows its
   own section and the next section is unreachable without scrolling
   through clipped content. On short viewports the hero releases to its
   content height. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding-top: 5.5rem; padding-bottom: 2.5rem; }
  .hero-visual { transform: scale(0.85); transform-origin: center top; }
}

/* --- Sticky hover on touch devices -------------------------------
   `:hover` sticks after a tap on coarse pointers, so a card that lifts
   -4px and shifts a border colour stays visually "pressed" until the
   user taps something else. Layout-affecting hovers are therefore gated
   on a device that can actually hover. Colour-only hovers are left
   alone: they double as tap feedback and reset on the next tap. */
@media (hover: hover) and (pointer: fine) {
  [class*="card"]:hover { transform: translateY(-4px); }
  .hologram-frame:hover .profile-photo { transform: scale(1.05); }
}

/* --- Intrinsic media ratio ---------------------------------------
   .hologram-frame carries an explicit width and height so this
   declaration is inert today: aspect-ratio only applies when one axis
   is auto. It exists so a future width change cannot silently un-crop
   the portrait (842x1179 = 0.714). */
.hologram-frame { aspect-ratio: 440 / 560; }

/* --- Zoom 200% safety net ---------------------------------------
   At 200% browser zoom the effective CSS viewport halves (1440 -> 720).
   The stacking and touch layers below are deliberately expressed in
   relative units so nothing needs a zoom-specific query, but the
   container gutter is re-asserted here so type-first zoom never
   produces a scrollbar: */
.container { overflow-wrap: anywhere; }

/* The scoped copies above do not replace the global rules in premium.css,
   they coexist with them. On a coarse pointer the original still fired and
   the card stayed lifted after a tap. Neutralise the sticky state where the
   device cannot hover; equal specificity plus source order means this wins. */
@media (hover: none), (pointer: coarse) {
  [class*="card"]:hover { transform: none; }
  .hologram-frame:hover .profile-photo { transform: none; }
}

.social-icon-fb { color: #1877F2; }
.social-icon-fb:hover { color: #0b5ed7; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(24,119,242,0.25); }

/* --- FAQ — extractable Q&A for AI answer engines and human skimmers -----
   Each answer is a self-contained paragraph so an AI system can lift it
   cleanly (Perplexity/ChatGPT extract passages, not pages). */
.faq .section-subtitle {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0;
}
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}
.faq-item {
  padding: 1.45rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.faq-q {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-pure);
  margin: 0 0 0.55rem;
  line-height: 1.35;
}
.faq-a {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--text-secondary);
  margin: 0;
}
@media (hover: hover) {
  .faq-item:hover {
    border-color: var(--accent-primary-l);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--glow-primary);
  }
}
@media (max-width: 860px) {
  .faq-list { grid-template-columns: 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item { transition: none; }
  .faq-item:hover { transform: none; }
}