/* ══════════════════════════════════════════════════════════════════════════════
   PORTFOLIO UNIVERSAL TYPOGRAPHY SYSTEM — typography.css
   Muhammad Roman | AI Systems Architect & Mobile App Developer
   
   SINGLE typeface, TOTAL CONSISTENCY (owner decision):
   'DM Sans' everywhere — display, headings, body, UI, badges, kbd.
   All --font-* tokens resolve to the same stack; names are kept so
   display/body roles stay readable.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL ROOT DESIGN TOKENS ── */
:root {
  /* Single typeface (owner decision): identical to style.css :root.
     All six tokens resolve to one DM Sans stack — one voice everywhere. */
  --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-sans:      'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:      'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid luxury type scales */
  --text-hero-name: clamp(3.2rem, 2.4rem + 5vw, 6.4rem);
  --text-hero-sub:  clamp(1.1rem, 0.95rem + 0.8vw, 1.65rem);
  --text-section:   clamp(2.3rem, 1.8rem + 2.2vw, 3.8rem);
  --text-card-h:    clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem);
  --text-body:      clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);

  /* Meta tier — the 12px legibility floor lives here and nowhere else.
     px-based on purpose: the root font-size is fluid (14.8px→16.32px), so a
     rem floor would be defeated by root drift. These two are the only
     px-based type tokens in the system, by design. */
  --text-micro: clamp(12.48px, 12.16px + 0.0889vw, 13.44px);
  --text-label: clamp(13.12px, 12.48px + 0.1778vw, 15.04px);

  /* Refined letter spacing */
  --track-display:   0.025em;
  --track-heading:   0.02em;
  --track-body:      -0.005em;
  --track-wide:      0.16em;
  --track-widest:    0.24em;

  /* Luxury subtle borders & specular sheen */
  --border-editorial:     rgba(255, 255, 255, 0.08);
  --border-editorial-mid: rgba(255, 255, 255, 0.14);
  --border-editorial-glow:rgba(255, 255, 255, 0.25);
  --shadow-editorial:     0 20px 50px rgba(0, 0, 0, 0.55);
}

/* ── 2. UNIVERSAL INHERITANCE & BASE RESET ── */
*, *::before, *::after {
  font-family: inherit;
}

html, body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-body);
  line-height: 1.78;
  letter-spacing: var(--track-body);
  color: var(--text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

p, span, div, a, button, input, select, textarea, label, li, ul, ol, td, th {
  font-family: var(--font-sans);
}

p {
  line-height: 1.8;
  color: var(--text-secondary);
  font-weight: 400;
}

strong, b {
  color: var(--text-pure);
  font-weight: 600;
}

/* ── 3. TIER 1: ALL DISPLAY & HEADINGS (DM SANS, SINGLE TYPEFACE) ── */
h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-name-display,
.section-title,
.bento-heading,
.spc-title,
.stl-role,
.cv-card-title,
.sqc-header h3,
.brand-name,
.loader-name,
.footer-brand-title,
.modal-title,
.ai-avatar-name,
.sm-v,
.tc-metric,
.mm-val {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: var(--track-display) !important;
  color: var(--text-pure);
  margin-top: 0;
}

h1 {
  font-size: var(--text-hero-name);
  line-height: 1.06;
}

h2 {
  font-size: var(--text-section);
  line-height: 1.16;
}

h3 {
  font-size: var(--text-card-h);
  line-height: 1.25;
}

/* Specific section title styling with pure white text and italic gradient */
.section-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  display: inline-block;
}

.section-title .gradient-text,
.hero-line-gradient {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  background: var(--grad-superhuman) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline !important;
}

/* ── 4. TIER 2: ALL UI ELEMENTS, BADGES, PILLS, FORMS (DM SANS) ── */
/* Ensure 100% consistency across every badge, pill, label, and card element */
.section-tag-capsule,
.sp-pill,
.tech-tag,
.bento-category-badge,
.bento-stat-chip,
.spc-badge-pill,
.spc-cat,
.spc-year,
.spc-stack span,
.spc-stack li,
.stl-company,
.stl-date,
.stl-tags span,
.stl-val,
.cv-pill-tag,
.cv-status-ping,
.cv-card-meta,
.super-badge-text,
.super-badge-tag,
.hero-super-badge,
.hero-eyebrow,
.hero-tagline-display,
.hero-subtitle,
.section-subtitle,
.spc-desc,
.bento-desc,
.stl-summary,
.footer-brand-desc,
.footer-nav-title,
.footer-nav a,
.form-group label,
.input-wrapper input,
.input-wrapper textarea,
.uc-lbl,
.uc-val,
.uc-copy-badge,
.tc-label,
.sm-k,
.ft-tag,
.ft-status,
.loader-role,
.loader-text,
.loader-status,
.ai-avatar-status,
.ai-voice-toggle,
.persona-waveform-status,
.msg-time,
.ai-chat-bubble,
.ai-quick-prompts button,
.palette-group-title,
.palette-item-title,
.palette-item-sub,
.palette-input,
.scroll-txt,
.acb-label,
.acb-response,
.fra-badge,
.btn-superhuman-primary,
.btn-superhuman-glass,
.btn-superhuman-subtle,
.btn-luxury-cta,
.btn-luxury-secondary,
.btn-luxury-tertiary,
.btn-luxury-ghost,
.theme-pill-btn,
.nav-links a,
.brand-role {
  font-family: var(--font-sans) !important;
}

/* ── 5. TIER 3: KBD BADGES (DM SANS, SINGLE TYPEFACE) ── */
code, pre, kbd,
.btn-kbd-badge,
.btn-kbd-badge kbd,
.palette-shortcut,
.palette-shortcut kbd,
.palette-esc-badge kbd {
  font-family: var(--font-mono) !important;
}

/* ── 6. NAVBAR & BRAND IDENTITY ── */
.nav-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-name {
  font-size: 1.35rem !important;
  letter-spacing: 0.04em !important;
  color: var(--text-pure) !important;
}

.brand-role {
  font-size: var(--text-label) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

.nav-links a {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-pure) !important;
}

/* ── 7. HERO SECTION REFINEMENTS ── */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.hero-super-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-editorial-mid);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 1.85rem;
  width: fit-content;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-super-badge:hover {
  border-color: var(--border-editorial-glow);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.08);
}

.super-badge-text {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

.super-badge-tag {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
}

.hero-title {
  margin-bottom: 1.35rem;
}

.hero-eyebrow {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--accent-primary-l);
  margin-bottom: 0.75rem;
}

.hero-name-display {
  display: block;
  font-size: var(--text-hero-name) !important;
  line-height: 1.04 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  text-shadow: 0 4px 35px rgba(255, 255, 255, 0.14);
  margin-bottom: 0.65rem;
}

.hero-tagline-display {
  display: block;
  font-size: var(--text-hero-sub) !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.38 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.85rem;
  max-width: 680px;
}

.hero-subtitle {
  font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.12rem);
  line-height: 1.82;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 2.25rem;
}

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

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

.btn-superhuman-primary,
.btn-luxury-cta {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 0.9rem 1.95rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(139, 92, 246, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-superhuman-primary:hover,
.btn-luxury-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.btn-superhuman-glass,
.btn-luxury-secondary {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  padding: 0.9rem 1.75rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-editorial-mid) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: var(--text-pure) !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-superhuman-glass:hover,
.btn-luxury-secondary:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--border-editorial-glow) !important;
  transform: translateY(-2px) !important;
}

.btn-superhuman-subtle,
.btn-luxury-tertiary,
.btn-luxury-ghost {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 0.8rem 1.45rem !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--border-editorial) !important;
  color: var(--text-secondary) !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease !important;
}

.btn-superhuman-subtle:hover,
.btn-luxury-tertiary:hover,
.btn-luxury-ghost:hover {
  color: var(--text-pure) !important;
  border-color: var(--border-editorial-mid) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.hero-telemetry-strip {
  gap: 1.25rem;
}

.telemetry-card {
  position: relative !important;
  background: rgba(10, 16, 32, 0.65) !important;
  border: 1px solid var(--border-editorial) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 18px !important;
  padding: 1.2rem 1.35rem !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.telemetry-card:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 45px -8px rgba(0, 0, 0, 0.75), 0 0 25px -5px var(--glow-primary) !important;
}

.tc-metric {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
  line-height: 1 !important;
}

.tc-plus {
  font-family: var(--font-sans) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: var(--accent-primary-l) !important;
}

.tc-label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-top: 0.35rem !important;
}

/* ── 8. SECTION HEADERS & EDITORIAL CAPSULES ── */
.section-header {
  margin-bottom: 3.5rem;
}

.section-tag-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--track-wide) !important;
  text-transform: uppercase !important;
  color: var(--accent-primary-l) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-editorial-mid) !important;
  padding: 0.35rem 1.05rem !important;
  border-radius: 999px !important;
  margin-bottom: 1rem !important;
}
/* ═════════════════════════════════════════════════════════════════
   UNIVERSAL CARD ARCHITECTURE & COMPONENT SYSTEM
   Strict Layout Mathematics, Flex Baselines, Specular Sheen & Luxury UX
   ═════════════════════════════════════════════════════════════════ */

/* ── 9. FEATURED PRODUCTION PROJECTS (2x2 BALANCED MATRIX) ── */
.projects-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.super-project-card{
  position: relative !important;
  background: rgba(10, 16, 32, 0.68) !important;
  border: 1px solid var(--border-editorial) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  grid-column: span 1 !important;
  padding: 0 !important;
  box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.super-project-card.large {
  grid-column: span 1 !important;
}

.super-project-card:hover{
  border-color: rgba(99, 102, 241, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-7px) scale(1.008) !important;
  box-shadow: 0 28px 70px -10px rgba(0, 0, 0, 0.85), 0 0 40px -5px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
}

.spc-image-banner {
  position: relative !important;
  height: 215px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.spc-body {
  padding: 2.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 1.15rem !important;
}

.spc-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.spc-cat {
  font-family: var(--font-sans) !important;
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent-primary-l) !important;
}

.spc-year {
  font-family: var(--font-sans) !important;
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

.spc-title {
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.spc-desc {
  font-size: 0.94rem !important;
  line-height: 1.74 !important;
  color: var(--text-secondary) !important;
}

.spc-metrics-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem !important;
  padding: 0.95rem 1rem !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border-editorial) !important;
  border-radius: 16px !important;
  margin-top: 0.35rem !important;
  text-align: center !important;
}

.sm-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.sm-v {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
}

.sm-k {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.spc-stack {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-top: auto !important;
  padding-top: 0.85rem !important;
}

.spc-stack span,
.spc-stack li {
  font-family: var(--font-sans) !important;
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  padding: 0.32rem 0.85rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-editorial) !important;
  border-radius: 999px !important;
  color: var(--text-secondary) !important;
  transition: all 0.25s ease !important;
}

.spc-stack span:hover,
.spc-stack li:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: var(--text-pure) !important;
}

/* ── 10. BENTO SERVICES & SPECIALIZED ARCHITECTURAL PILLARS ── */
.bento-services-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.75rem !important;
  align-items: stretch !important;
}

.bento-hero-span {
  grid-column: span 6 !important;
}

.bento-medium-span {
  grid-column: span 3 !important;
}

.bento-compact-span {
  grid-column: span 2 !important;
}

.bento-card {
  position: relative !important;
  background: rgba(10, 16, 32, 0.68) !important;
  border: 1px solid var(--border-editorial) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 22px !important;
  padding: 2.2rem !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.bento-card:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-6px) scale(1.008) !important;
  box-shadow: 0 26px 65px -10px rgba(0, 0, 0, 0.85), 0 0 35px -5px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
}

.bento-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  gap: 1.25rem !important;
}

.bento-hero-span .bento-inner {
  gap: 1.45rem !important;
}

.bento-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bento-category-badge {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  padding: 0.28rem 0.75rem !important;
  border-radius: 999px !important;
}

.bento-stat-chip {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-editorial) !important;
  padding: 0.22rem 0.7rem !important;
  border-radius: 999px !important;
}

.bento-title-group {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.15rem !important;
}

.bento-icon-box {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.bento-heading {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.bento-subheading {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin-top: 0.25rem !important;
}

.bento-description {
  font-size: 0.95rem !important;
  line-height: 1.72 !important;
  color: var(--text-secondary) !important;
}

.bento-mini-metrics {
  display: flex !important;
  gap: 1.75rem !important;
  margin-top: auto !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--border-editorial) !important;
}

.mini-metric {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.mm-val {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
}

.mm-lbl {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  color: var(--text-muted) !important;
}

.bento-tags-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.48rem !important;
  margin-top: auto !important;
  padding-top: 0.85rem !important;
}

.tech-tag {
  font-family: var(--font-sans) !important;
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  padding: 0.3rem 0.8rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-editorial) !important;
  border-radius: 999px !important;
  color: var(--text-secondary) !important;
  transition: all 0.25s ease !important;
}

.tech-tag:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: var(--text-pure) !important;
}

/* ── 11. TIMELINE & OFFICIAL CREDENTIALS ── */
.stl-card {
  position: relative !important;
  background: rgba(10, 16, 32, 0.68) !important;
  border: 1px solid var(--border-editorial) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 22px !important;
  padding: 2rem 2.2rem !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.stl-card:hover {
  transform: translateX(8px) translateY(-3px) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 22px 55px -10px rgba(0, 0, 0, 0.8), 0 0 30px -5px var(--glow-primary) !important;
}

.stl-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.stl-company {
  font-family: var(--font-sans) !important;
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent-secondary-l) !important;
}

.stl-role {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
  letter-spacing: -0.01em !important;
  margin: 0.35rem 0 0.5rem 0 !important;
}

.stl-date {
  font-family: var(--font-sans) !important;
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 0.32rem 0.85rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-editorial) !important;
  border-radius: 999px !important;
  color: var(--accent-primary-l) !important;
  white-space: nowrap !important;
}

.stl-summary {
  font-size: 0.94rem !important;
  line-height: 1.78 !important;
  color: var(--text-secondary) !important;
}

.stl-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.48rem !important;
  margin-top: auto !important;
}

.stl-tags span {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.28rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-editorial) !important;
  border-radius: 999px !important;
  color: var(--text-secondary) !important;
}

/* Official CV Access Card */
.cv-access-card{
  position: relative !important;
  background: rgba(10, 16, 32, 0.72) !important;
  border: 1px solid var(--border-editorial-mid) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 24px !important;
  padding: 2.4rem 2.6rem !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px var(--glow-primary) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 2.75rem !important;
}

.cv-access-card:hover{
  border-color: var(--accent-primary-l) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.8), 0 0 45px var(--accent-primary) !important;
}

.cv-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
  letter-spacing: -0.01em !important;
}

.cv-pill-tag {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* ── 12. SKILLS ARSENAL (2x2 BALANCED MATRIX) ── */
.skills-matrix-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

.skill-quad-card {
  position: relative !important;
  background: rgba(10, 16, 32, 0.68) !important;
  border: 1px solid var(--border-editorial) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 24px !important;
  padding: 2.2rem !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  gap: 1.5rem !important;
  box-shadow: 0 16px 45px -10px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.skill-quad-card:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-6px) scale(1.008) !important;
  box-shadow: 0 28px 70px -10px rgba(0, 0, 0, 0.85), 0 0 35px -5px var(--glow-primary), inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
}

.sqc-header {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.sqc-header h3 {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--text-pure) !important;
  margin: 0 !important;
}

.sqc-sub {
  font-size: 0.84rem !important;
  color: var(--text-secondary) !important;
}

.skill-pill-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
}

.sp-pill {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-editorial) !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease !important;
}

.sp-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: var(--text-pure) !important;
  transform: translateY(-2px) !important;
}

/* ── 13. DIRECT CONTACT UPLINK CARDS ── */
.uplink-card{
  position: relative !important;
  background: rgba(10, 16, 32, 0.68) !important;
  border: 1px solid var(--border-editorial) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 20px !important;
  padding: 1.35rem 1.6rem !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
  box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.uplink-card:hover{
  border-color: rgba(99, 102, 241, 0.5) !important;
  border-top-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 45px -8px rgba(0, 0, 0, 0.75), 0 0 25px -5px var(--glow-primary) !important;
}

.uc-lbl {
  font-family: var(--font-sans) !important;
  font-size: var(--text-micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.uc-val {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.96rem !important;
  color: var(--text-pure) !important;
}
.form-group label {
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
}

.input-wrapper {
  background: rgba(4, 7, 18, 0.6) !important;
  border: 1px solid var(--border-editorial) !important;
  border-radius: 12px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.input-wrapper:focus-within {
  border-color: var(--accent-primary-l) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
}

/* ── 14. FOOTER LUXURY FINISH ── */
.footer {
  border-top: 1px solid var(--border-editorial);
  padding: 4.5rem 0 3rem 0;
}

.footer-brand-title {
  font-size: 1.65rem !important;
  color: var(--text-pure) !important;
  margin-bottom: 0.5rem;
}

.footer-brand-desc {
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  color: var(--text-secondary) !important;
}

.footer-nav-title {
  font-size: var(--text-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 0.75rem !important;
}

.footer-nav a {
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  transition: all 0.25s ease !important;
}

.footer-nav a:hover {
  color: var(--text-pure) !important;
  transform: translateX(3px) !important;
}

/* ── 15. SYSTEM LOADER & AI DRAWER ── */
.loader-name {
  font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
  letter-spacing: 0.06em !important;
  color: var(--text-pure) !important;
}

.loader-role {
  font-size: 0.76rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent-primary-l) !important;
}

.ai-avatar-name {
  font-size: 1.15rem !important;
  letter-spacing: 0.05em !important;
  color: var(--text-pure) !important;
}

.ai-avatar-status {
  font-size: var(--text-micro) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
/* ── 16. THEME-SPECIFIC EDITORIAL ACCENTS ── */
[data-theme="gold"] .hero-name-display {
  color: #fffdf5 !important;
  -webkit-text-fill-color: #fffdf5 !important;
  text-shadow: 0 4px 35px rgba(245, 158, 11, 0.25) !important;
}

[data-theme="gold"] .section-title .gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="gold"] .btn-superhuman-primary,
[data-theme="gold"] .btn-luxury-cta {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

[data-theme="violet"] .section-title .gradient-text {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="matrix"] .section-title .gradient-text {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═════════════════════════════════════════════════════════════════
   17. GLOBAL MOBILE DEVICE RESPONSIVENESS SYSTEM (UI/UX PRO MAX)
   320px (Compact) -> 375px/390px (Standard) -> 430px/480px (Plus/Max) -> 768px (Tablet) -> 1024px
   100% Zero-Overflow Guarantee, Symmetrical Card Patterns, Pixel-Perfect Touch Ergonomics
   ═════════════════════════════════════════════════════════════════ */

/* ── GLOBAL VIEWPORT & OVERFLOW-PROOF GUARD ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Ensure no container or section exceeds viewport */
.container,
.section,
.hero,
#home,
#services,
#projects,
#skills,
#experience,
#contact,
#ai-console,
.footer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── TABLET & FOLDABLE LANDSCAPE (1024px and down) ── */
@media (max-width: 1024px) {
  .container {
    padding: 0 1.75rem !important;
  }
  .hero {
    padding: 6.5rem 1.75rem 3.5rem !important;
    gap: 3rem !important;
  }
  .hero-actions {
    gap: 0.85rem !important;
  }
  .bento-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  .bento-hero-span { grid-column: span 2 !important; }
  .bento-medium-span { grid-column: span 1 !important; }
  .bento-compact-span { grid-column: span 1 !important; }
  .bento-compact-span:last-child { grid-column: span 2 !important; }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.75rem !important;
  }
  .skills-matrix-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.75rem !important;
  }
}

/* ── TABLET PORTRAIT & LARGE PHONES (900px and down) ── */
@media (max-width: 900px) {
  .hero {
    flex-direction: column !important;
    text-align: center !important;
    padding-top: 6rem !important;
    gap: 2.5rem !important;
  }
  .hero-content {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .hero-subtitle {
    max-width: 540px !important;
    margin: 0 auto !important;
  }
  .hero-actions {
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .hero-telemetry-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 520px !important;
    margin: 1.5rem auto 0 !important;
  }
  .hero-visual {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .skills-matrix-grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
}

/* ── STANDARD MOBILE DEVICES (768px and down - iPhone 12/13/14/15/16, Galaxies, Pixels) ── */
@media (max-width: 768px) {
  .section {
    padding: 3.75rem 0 !important;
  }
  .container {
    padding: 0 1.25rem !important;
  }

  /* Typography Scales */
  .hero-name-display {
    font-size: clamp(2.35rem, 8.5vw, 3.4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.015em !important;
    word-break: break-word !important;
  }
  .hero-tagline-display {
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
  }
  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.68 !important;
  }
  .section-title {
    font-size: clamp(1.85rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }
  .section-desc {
    font-size: 0.92rem !important;
    line-height: 1.68 !important;
  }
  .section-header {
    margin-bottom: 2.25rem !important;
  }

  /* Hero Actions */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 360px !important;
    gap: 0.75rem !important;
  }
  .hero-actions > * {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Hero Hologram Stage */
  .super-hologram-stage {
    width: min(290px, 86vw) !important;
    height: 370px !important;
    max-width: 100% !important;
  }
  .hologram-frame {
    width: min(260px, 78vw) !important;
    height: 335px !important;
    max-width: 100% !important;
  }
  .hologram-ambient-light {
    width: min(270px, 80vw) !important;
    height: 345px !important;
  }

  /* Telemetry Cards */
  .hero-telemetry-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.25rem !important;
  }
  .telemetry-card {
    padding: 0.95rem 0.9rem !important;
    border-radius: 16px !important;
  }
  .tc-metric {
    font-size: 1.7rem !important;
  }
  .tc-label {
    font-size: var(--text-micro) !important;
  }

  /* Bento Services Cards */
  .bento-services-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }
  .bento-hero-span,
  .bento-medium-span,
  .bento-compact-span {
    grid-column: span 1 !important;
    width: 100% !important;
  }
  .bento-card {
    padding: 1.45rem 1.25rem !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  .bento-heading {
    font-size: 1.4rem !important;
  }
  .bento-mini-metrics {
    gap: 1.25rem !important;
    padding-top: 1rem !important;
  }
  .mm-val {
    font-size: 1.2rem !important;
  }

  /* Production Projects Cards */
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }
  .super-project-card{
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .spc-image-banner {
    height: 180px !important;
  }
  .spc-body {
    padding: 1.45rem 1.25rem !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
  }
  .spc-title {
    font-size: 1.45rem !important;
  }
  .spc-desc {
    font-size: 0.9rem !important;
    line-height: 1.68 !important;
  }
  .spc-metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    padding: 0.8rem 0.65rem !important;
    border-radius: 14px !important;
  }
  .sm-v {
    font-size: 1.1rem !important;
  }
  .sm-k {
    font-size: var(--text-micro) !important;
  }
  .spc-quick-action {
    opacity: 1 !important;
    transform: translateY(0) !important;
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.38rem 0.8rem !important;
    font-size: 0.82rem !important;
  }

  /* Skills Arsenal Cards */
  .skills-matrix-grid {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
    width: 100% !important;
  }
  .skill-quad-card {
    padding: 1.45rem 1.25rem !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  .sqc-header h3 {
    font-size: 1.35rem !important;
  }

  /* Official CV Access Card */
  .cv-access-card{
    padding: 1.5rem 1.25rem !important;
    border-radius: 20px !important;
    margin-bottom: 2rem !important;
    box-sizing: border-box !important;
  }
  .cv-card-title {
    font-size: 1.4rem !important;
  }
  .cv-card-desc {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
  }
  .cv-card-meta {
    gap: 0.6rem !important;
    font-size: 0.82rem !important;
  }
  .cv-card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.65rem !important;
  }
  .cv-card-actions > * {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Timeline Cards */
  .timeline-beam {
    left: 12px !important;
  }
  .stl-anchor {
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
  }
  .stl-node {
    padding-left: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .stl-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }
  .stl-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }
  .stl-role {
    font-size: 1.35rem !important;
  }

  /* Contact Cards */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
  }
  .contact-direct-cards {
    width: 100% !important;
    gap: 0.75rem !important;
  }
  .uplink-card{
    padding: 1rem 1.15rem !important;
    border-radius: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact-form-wrap {
    padding: 1.35rem 1.15rem !important;
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* AI Terminal / Console on Mobile */
  .ai-console-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }
  .ai-console-terminal,
  .ai-console-panel {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── SMALL PHONES & NARROW SCREENS (480px and down - iPhone SE, small Androids) ── */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem !important;
  }
  .hero {
    padding-top: 6rem !important;
    gap: 2rem !important;
  }
  .hero-name-display {
    font-size: clamp(2.15rem, 9.5vw, 2.85rem) !important;
    letter-spacing: 0.01em !important;
  }
  .hero-tagline-display {
    font-size: 1.05rem !important;
  }
  .section-title {
    font-size: 1.7rem !important;
  }

  /* Hologram */
  .super-hologram-stage {
    width: min(250px, 82vw) !important;
    height: 320px !important;
  }
  .hologram-frame {
    width: min(220px, 74vw) !important;
    height: 285px !important;
  }

  /* Cards Padding Reduction */
  .bento-card {
    padding: 1.25rem 1rem !important;
  }
  .spc-body {
    padding: 1.25rem 1rem !important;
  }
  .spc-image-banner {
    height: 155px !important;
  }
  .spc-title {
    font-size: 1.35rem !important;
  }
  .bento-heading {
    font-size: 1.3rem !important;
  }
  .skill-quad-card {
    padding: 1.25rem 1rem !important;
  }
  .sqc-header h3 {
    font-size: 1.25rem !important;
  }
  .cv-access-card{
    padding: 1.3rem 1.05rem !important;
  }
  .cv-card-title {
    font-size: 1.3rem !important;
  }
  .stl-card {
    padding: 1.2rem 1rem !important;
  }
  .stl-role {
    font-size: 1.25rem !important;
  }
  .uplink-card{
    padding: 0.9rem 1rem !important;
  }

  /* Metrics in Project Cards */
  .spc-metrics-row {
    padding: 0.65rem 0.5rem !important;
    gap: 0.35rem !important;
  }
  .sm-v {
    font-size: 1.02rem !important;
  }
  .sm-k {
    font-size: var(--text-micro) !important;
    letter-spacing: 0.02em !important;
  }

  /* Navbar */
  #navbar {
    width: calc(100% - 1.25rem) !important;
    padding: 0.35rem 0.75rem !important;
  }
  .brand-name {
    font-size: 0.88rem !important;
  }
}

/* ── ULTRA-COMPACT PHONES & FOLDABLES (360px and down - Galaxy Fold outer, iPhone SE 1st gen) ── */
/* Ultra-narrow 360px sub-step removed in step 4; the 480px step covers this range. */

/* ═══ RESPONSIVE ARCHITECTURE: grid floor ═══
   Defect 1. Two independent causes, both required:
   (a) typography.css:1270 `.bento-compact-span:last-child {grid-column:span 2!important}`
       at (0,2,0) survived past the (0,1,0) mobile reset at typography.css:1416,
       because specificity outranks source order. The orphan `span 2` forces an
       implicit 2nd column, so `grid-template-columns:1fr` yields TWO tracks.
   (b) `1fr` = `minmax(auto,1fr)`; the track's auto minimum is the item's
       min-content, so an unshrinkable sibling starves the other track to 30px.
   Fixes: list `:last-child` at >= (0,2,0) so the orphan is always reachable,
   and set `min-width:0` on every child to void the automatic minimum. */

.bento-services-grid > * { min-width: 0; }

@media (min-width: 1280px) {
  .bento-services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .bento-services-grid > .bento-hero-span    { grid-column: span 6 !important; }
  .bento-services-grid > .bento-medium-span  { grid-column: span 3 !important; }
  .bento-services-grid > .bento-compact-span { grid-column: span 2 !important; }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .bento-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bento-services-grid > .bento-hero-span    { grid-column: span 2 !important; }
  .bento-services-grid > .bento-medium-span  { grid-column: span 1 !important; }
  .bento-services-grid > .bento-compact-span { grid-column: span 1 !important; }
  .bento-services-grid > .bento-compact-span:last-child { grid-column: span 2 !important; }
}

@media (max-width: 768px) {
  .bento-services-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; width: 100% !important; }
  /* `:last-child` is listed ON PURPOSE: this selector resolves to (0,3,0) and
     must beat typography.css:1270's (0,2,0). Dropping it reintroduces the bug. */
  .bento-services-grid > .bento-hero-span,
  .bento-services-grid > .bento-medium-span,
  .bento-services-grid > .bento-compact-span,
  .bento-services-grid > .bento-compact-span:last-child {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Companion floor for the remaining bare-`1fr` grids ──
   These share cause (b) above: `1fr` resolves to `minmax(auto,1fr)` and the auto
   minimum is each item's min-content, so one unshrinkable child collapses a
   sibling track. Track COUNTS are deliberately left untouched — changing them
   is a design change, not a defect fix. */
.hero-telemetry-strip > *,
.projects-grid > *,
.skills-matrix-grid > *,
.contact-grid > *,
.footer-top > *,
.ai-console-grid > * { min-width: 0; }

/* ── Legibility floor: terminal prompt line ──
   style.css's `@media (max-width: 480px) .term-input-row input,
   .term-input-row .term-prompt` sets BOTH the text field and the prompt label to
   0.78rem. The label needs the 12px floor; the input already has its own sizing
   and must not be resized. So the label is re-pinned here on its own selector
   rather than editing the shared rule. */
.term-input-row .term-prompt { font-size: var(--text-label) !important; }