/* ═══════════════════════════════════════════════════════
   ARKADEB MONDAL — ADM-OS PORTFOLIO SYSTEM
   Theme: Graphite (#0C0D10) · Dither field · Periwinkle (#8C99D1), from the LinkedIn dither banner
   Typography: Geist Mono
   Aesthetic: Technical Cyberpunk / Tactical Console / Batman
   Matches: https://github.com/adm04/adm04
   ═══════════════════════════════════════════════════════ */

/* ── 1. RESET & ROOT DESIGN TOKENS ───────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font: 'Geist Mono', 'Courier New', monospace;
  --font-body: 'Geist Mono', monospace;
  
  /* OLED Tactical Palette */
  --bg: #0C0D10;
  --bg-subtle: #131418;
  --surface: #101115;
  --surface-card: #14151A;
  --surface-hover: #181A1F;
  
  /* Technical Wireframe Borders */
  --border: #23262E;
  --border-subtle: #1B1D23;
  --border-strong: #343846;
  --border-accent: #8C99D1;
  
  /* Text Contrast Hierarchy */
  --text-primary: #EDEDF2;
  --text-secondary: #A3A7B7;
  --text-tertiary: #6E7385;
  --text-dim: #474B59;
  
  /* Signature Periwinkle Accent & LED Glow */
  --accent: #8C99D1;
  --accent-hover: #A5B0E0;
  --accent-glow: rgba(140, 153, 209, 0.45);
  --accent-subtle: rgba(140, 153, 209, 0.12);
  
  /* Layout Spacing */
  --max-w: 1240px;
  --px: clamp(20px, 5vw, 80px);
  --radius-card: 14px;
  --radius-thumb: 12px;
  --radius-btn: 6px;
  --radius-nav: 100px;
  
  /* Tactical Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.7);
  --shadow-card-hover: 0 0 24px rgba(140, 153, 209, 0.22), 0 8px 32px rgba(0, 0, 0, 0.9);
  --shadow-red-glow: 0 0 16px rgba(140, 153, 209, 0.45);
  
  --transition: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* height of the fixed header pills */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  /* Dot matrix grid, visible wherever the dither field is not drawn (e.g. no WebGL2) */
  background-image: radial-gradient(circle, #23262E 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── 2. PAGE LOADER (thinking orb) ───────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background-color: var(--bg);
  transition: opacity 500ms ease, visibility 500ms ease;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

.page-loader-orb {
  width: 96px;
  height: 96px;
}

.page-loader-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

code {
  font-family: var(--font);
  font-size: 0.9em;
  color: var(--accent);
}

/* ── 3. LAYOUT UTILITIES ─────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* Card Reveal & Bi-directional Fade In / Fade Out */
.reveal-up {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(4px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform, filter;
}

.reveal-up.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── 4. HEADER & TACTICAL SYSTEM CONSOLE ─────────────── */
/* Transparent bar: the Pill Nav floats over the page */
.site-header {
  position: fixed; /* floats over the hero so its animation runs to the top edge */
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  padding-block: 16px;
  background: transparent;
  pointer-events: none; /* only the pills catch clicks; the gap between them stays click-through */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Pill Nav (React Bits PillNav, assets/js/pill-nav.js): the snippet's dark theme, md size, glass
   surface, pill items, fill hover and dot indicator. Component CSS below is verbatim minus the
   joined layout and glide indicator, which this nav does not use. */
.site-header .pill-nav {
  pointer-events: auto;
  --pn-surface: rgba(38, 35, 46, 0.66);
  --pn-solid: #26232e;
  --pn-edge: rgba(255, 255, 255, 0.08);
  --pn-rim: rgba(255, 255, 255, 0.07);
  --pn-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --pn-text: rgba(244, 244, 245, 0.64);
  --pn-strong: #f4f4f5;
  --pn-pill: linear-gradient(180deg, #ffffff 0%, #ebebf0 100%);
  --pn-pill-ink: #121016;
  --pn-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --pn-dot: #f4f4f5;
  --pn-ring: rgba(244, 244, 245, 0.55);
  --pn-row-hover: rgba(255, 255, 255, 0.06);
  --pn-tile: linear-gradient(180deg, #3a3644 0%, #27242f 100%);
  --pn-tile-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.7);
  --pn-blur: blur(20px) saturate(1.6);
  --pn-h: 44px;
  --pn-pad: 4px;
  --pn-inner: 36px;
  --pn-x: 16px;
  --pn-font: 14px;
  --pn-gap: 8px;
  --pn-mark: 22px;
}

/* The logo is the avatar photo, so it fills the circle */
.pill-nav__logo .pill-nav__mark {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.pill-nav__logo .pill-nav__mark img {
  object-fit: cover;
}

/* Hovering or keyboard-focusing the photo crossfades it into the ADM logo */
.pill-nav__logo .pill-nav__mark img {
  grid-area: 1 / 1;
}

.pill-nav__logo .pill-nav__mark .pill-nav__mark-logo {
  background: #0a0a0a;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pill-nav__logo-link:focus-visible .pill-nav__mark-logo {
  opacity: 1;
}

@media (hover: hover) {
  .pill-nav__logo-link:hover .pill-nav__mark-logo {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill-nav__logo .pill-nav__mark .pill-nav__mark-logo {
    transition: none;
  }
}

/* Collapsed shows the burger instead of the bar; the panel only while open or closing */
.pill-nav[data-collapsed] .pill-nav__bar,
.pill-nav:not([data-collapsed]) .pill-nav__toggle,
.pill-nav:not([data-panel]) .pill-nav__panel {
  display: none;
}

.pill-nav {
  --pn-roll: calc(var(--pn-inner) / 2 + 0.7em);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pn-gap);
  max-width: 100%;
  font-size: var(--pn-font);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.pill-nav[data-collapsed] {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.pill-nav__surface {
  background: var(--pn-surface);
  box-shadow: var(--pn-shadow);
  -webkit-backdrop-filter: var(--pn-blur);
  backdrop-filter: var(--pn-blur);
}

.pill-nav[data-panel] .pill-nav__rim--root {
  opacity: 0;
}

.pill-nav__rim {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--pn-edge),
    inset 0 1px 0 var(--pn-rim);
  pointer-events: none;
}

.pill-nav__logo {
  position: relative;
  z-index: 2;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--pn-h);
  height: var(--pn-h);
  border-radius: 999px;
}

.pill-nav__logo-link {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: var(--pn-strong);
  text-decoration: none;
  outline: none;
}

.pill-nav__logo-link:focus-visible,
.pill-nav__toggle:focus-visible {
  outline: 2px solid var(--pn-ring);
  outline-offset: 2px;
}

.pill-nav__mark {
  display: grid;
  place-items: center;
  width: var(--pn-mark);
  height: var(--pn-mark);
}

.pill-nav__mark img,
.pill-nav__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pill-nav__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--pn-h);
  padding: var(--pn-pad);
  border-radius: 999px;
  box-sizing: border-box;
}

.pill-nav__track {
  position: relative;
  height: 100%;
}

.pill-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--pn-item-gap, 2px);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-nav__slot {
  display: flex;
}

.pill-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--pn-x);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pn-text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s ease;
}

.pill-nav__slot[data-lit] .pill-nav__item,
.pill-nav__item[aria-current] {
  color: var(--pn-strong);
}

.pill-nav[data-items='pill'] {
  --pn-item-gap: 3px;
}

.pill-nav[data-items='pill'] .pill-nav__item {
  background: var(--pn-tile);
  box-shadow: var(--pn-tile-rim);
  color: var(--pn-strong);
}

.pill-nav__item:focus-visible,
.pill-nav__row:focus-visible {
  outline: 2px solid var(--pn-ring);
  outline-offset: -2px;
}

.pill-nav__face {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__face svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__face-alt {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  color: var(--pn-pill-ink);
  transform: translateY(var(--pn-roll));
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__face-alt svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__slot[data-on] .pill-nav__face,
.pill-nav__slot[data-hover] .pill-nav__face {
  transform: translateY(calc(var(--pn-roll) * -1));
  transition-duration: 0.5s;
}

.pill-nav__slot[data-on] .pill-nav__face-alt,
.pill-nav__slot[data-hover] .pill-nav__face-alt {
  transform: translateY(0);
  transition-duration: 0.5s;
}

.pill-nav__fill {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: -1;
  width: var(--pn-fill, 200%);
  height: var(--pn-fill, 200%);
  margin: calc(var(--pn-fill, 200%) / -2) 0 0 calc(var(--pn-fill, 200%) / -2);
  border-radius: 50%;
  background: var(--pn-pill);
  transform: scale(0);
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pill-nav__slot[data-on] .pill-nav__fill,
.pill-nav__slot[data-hover] .pill-nav__fill {
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__ink-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  height: 100%;
  padding: 0 var(--pn-x);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.pill-nav__ink-item svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__dot {
  position: absolute;
  bottom: calc((var(--pn-inner) - var(--pn-font)) / 4 - 2px);
  left: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 999px;
  background: var(--pn-dot);
  opacity: 0;
  pointer-events: none;
  transition: background-color 0.3s ease;
  will-change: transform, opacity;
}

.pill-nav[data-dot-lit] .pill-nav__dot {
  background: var(--pn-pill-ink);
}

.pill-nav__toggle {
  position: relative;
  z-index: 3;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--pn-h);
  height: var(--pn-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--pn-strong);
  cursor: pointer;
  outline: none;
}

.pill-nav__burger {
  position: relative;
  width: 16px;
  height: 10px;
}

.pill-nav__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pill-nav__line--top {
  top: 1.5px;
}

.pill-nav__line--bottom {
  top: 7px;
}

.pill-nav[data-open] .pill-nav__line--top {
  top: 4.25px;
  transform: rotate(45deg);
}

.pill-nav[data-open] .pill-nav__line--bottom {
  top: 4.25px;
  transform: rotate(-45deg);
}

.pill-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  padding: calc(var(--pn-h) + 10px) 6px 6px;
  border-radius: 24px;
  box-sizing: border-box;
}

.pill-nav__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-nav__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: calc(var(--pn-h) + 2px);
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  box-sizing: border-box;
  background: none;
  color: var(--pn-strong);
  font-family: inherit;
  font-size: calc(var(--pn-font) + 1px);
  line-height: 1;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
}

.pill-nav__row svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pill-nav__row:hover {
  background: var(--pn-row-hover);
}

.pill-nav__row[aria-current] {
  background: var(--pn-pill);
  box-shadow: var(--pn-pill-shadow);
  color: var(--pn-pill-ink);
}

.pill-nav__measure {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pill-nav__face,
  .pill-nav__face-alt,
  .pill-nav__fill,
  .pill-nav__line,
  .pill-nav__item,
  .pill-nav__row {
    transition: none;
  }
}

.led-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulseLed 2s infinite ease-in-out;
}

@keyframes pulseLed {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}
/* Standardized Icon Size Token (16x16) across Footer and Content */
.icon-std {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── 5. HERO SECTION ─────────────────────────────────── */
/* Full-bleed, centred hero over a borderless ASCII gradient */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(82vh, 760px);
  padding-block: clamp(150px, 14vw, 190px) clamp(72px, 10vw, 120px); /* top clears the fixed header */
  text-align: center;
}

.gradient-ascii {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Fade the bottom edge into the page so the glow has no visible boundary */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.gradient-ascii canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Footer band: the hero's ASCII field again, in flow instead of a backdrop */
.footer-ascii.gradient-ascii {
  position: relative;
  inset: auto;
  height: clamp(260px, 26vw, 340px);
  margin-top: clamp(-150px, -12vw, -110px); /* slide up behind the credit line so there is no gap */
  /* fade in from the footer above only; the bottom edge is the page edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}

/* Dark pool behind the copy keeps text readable over bright glyph patches */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 42% at 50% 50%, rgba(12, 13, 16, 0.82) 0%, rgba(12, 13, 16, 0.45) 55%, transparent 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid rgba(140, 153, 209, 0.3);
  border-radius: var(--radius-nav);
  background: rgba(12, 13, 16, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero-title {
  max-width: 22ch; /* two lines on desktop: matches the <br> in the markup */
  font-size: clamp(34px, 6.4vw, 76px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}

.hero-tagline {
  margin-top: 20px;
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-prompt-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(140, 153, 209, 0.08);
  border: 1px solid rgba(140, 153, 209, 0.25);
  border-radius: 4px;
}

.prompt-symbol {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
}

.prompt-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #E2E8F0;
  text-transform: uppercase;
}

/* Buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* Specular button (React Bits SpecularButton, assets/js/specular-button.js);
   variables carry the snippet's props: radius 18, tint #fff at 4%, text #f5f5f5 */
.specular-button {
  --sb-radius: 18px;
  --sb-tint: #ffffff;
  --sb-tint-opacity: 0.04;
  --sb-blur: 0px;
  --sb-text-color: #f5f5f5;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 0;
  border: 0;
  border-radius: var(--sb-radius);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--sb-text-color);
  background: color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(var(--sb-blur));
  backdrop-filter: blur(var(--sb-blur));
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.specular-button:active {
  transform: scale(0.97);
}

.specular-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sb-text-color) 55%, transparent);
  outline-offset: 3px;
}

.specular-button--lg {
  padding: 18px 38px;
  font-size: 1.125rem;
}

/* Primary: solid periwinkle with dark ink; secondary keeps the snippet's clear glass */
.specular-button--primary {
  --sb-tint: var(--accent);
  --sb-tint-opacity: 1;
  --sb-text-color: #0C0D10;
  font-weight: 600;
  box-shadow: 0 0 24px -6px var(--accent-glow), 0 10px 24px -14px rgba(0, 0, 0, 0.45);
}

.specular-button--primary:focus-visible {
  outline-color: var(--accent);
}

.specular-button__light {
  position: absolute;
  inset: -24px;
  z-index: 1;
  display: block;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}

.specular-button__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}

/* BlurText (assets/js/blur-text.js): each word blurs in from 50px above, React Bits' blur effect
   keyframes (10px -> 5px/0.5/+5px -> sharp) over 0.7s, staggered by --blur-step */
.blur-word {
  display: inline-block;
}

.blur-text .blur-word {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-50px);
}

.blur-text.blur-block {
  opacity: 0;
  filter: blur(10px);
}

.blur-text.blur-block.is-blur-in {
  animation: blur-text-in 0.7s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.blur-text.is-blur-in .blur-word {
  animation: blur-text-in 0.7s cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: calc(var(--i) * var(--blur-step, 200ms));
}

@keyframes blur-text-in {
  0% { opacity: 0; filter: blur(10px); transform: translateY(-50px); }
  50% { opacity: 0.5; filter: blur(5px); transform: translateY(5px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Crosshair over the hero (React Bits Crosshair, assets/js/crosshair.js) */
.crosshair {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

/* ── 6. PROJECTS SECTION ─────────────────────────────── */
.projects-section {
  padding-block: clamp(24px, 4vw, 50px) clamp(48px, 6vw, 76px);
}

.category-header {
  margin-bottom: clamp(18px, 2.5vw, 24px);
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}

.category-eyebrow {
  display: block;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.category-title {
  font-family: var(--font);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #EDEDF2;
  text-transform: uppercase;
}

/* Projects carousel (React Bits CircularCarousel, assets/js/circular-carousel.js): the cylinder
   with captions; component CSS below is verbatim minus the presets this site does not use. */
.project-carousel .circular-carousel {
  /* Cards about a quarter of the screen width (240-380px): the ring is scaled to fit this height */
  height: clamp(408px, calc(33.8vw + 96px), 590px);
  color: var(--text-primary);
}

/* The front project's link, kept in sync by the script */
.project-carousel__cta {
  display: flex;
  width: fit-content;
  margin: 4px auto 0;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.project-carousel__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

.project-carousel__cta[aria-disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.project-carousel__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* No-JS fallback: the project list */
.project-carousel__list:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  font-size: 16px;
}

.project-carousel__list a {
  color: var(--text-primary);
}

.circular-carousel {
  --cc-fade: #000000;
  --cc-radius: 12px;
  --cc-inner: 0.4;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.circular-carousel[data-draggable] {
  cursor: grab;
}

.circular-carousel[data-dragging] {
  cursor: grabbing;
}

.circular-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(128, 128, 140, 0.55);
}

.circular-carousel__view {
  position: absolute;
  inset: 0;
}

.circular-carousel__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.circular-carousel[data-ready] .circular-carousel__stage {
  opacity: 1;
}

.circular-carousel__camera,
.circular-carousel__ring,
.circular-carousel__card {
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.circular-carousel__camera {
  position: relative;
}

.circular-carousel__ring,
.circular-carousel__card {
  position: absolute;
  left: 0;
  top: 0;
}

.circular-carousel__tile {
  position: absolute;
  outline: 1px solid transparent;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.circular-carousel__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}

.circular-carousel__photo {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.circular-carousel__photo--leaving {
  animation: circular-carousel-leave 700ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

.circular-carousel__shade,
.circular-carousel__inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.circular-carousel__shade {
  background: var(--cc-fade);
  opacity: var(--cc-depth, 0);
}

.circular-carousel__inner {
  background: #000000;
  opacity: var(--cc-inner);
}

.circular-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  color: inherit;
  text-align: center;
  pointer-events: none;
  animation: circular-carousel-reveal 900ms ease both;
}

.circular-carousel__title {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  animation: circular-carousel-title 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.circular-carousel__subtitle {
  font-weight: 400;
  opacity: 0.6;
}

.circular-carousel__count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 0.5;
}

.circular-carousel__slash {
  opacity: 0.6;
}

.circular-carousel__digits {
  display: inline-flex;
}

.circular-carousel__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.circular-carousel__reel {
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.circular-carousel__reel > span {
  height: 1em;
}

.circular-carousel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes circular-carousel-title {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes circular-carousel-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes circular-carousel-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circular-carousel__stage,
  .circular-carousel__reel {
    transition: none;
  }

  .circular-carousel__caption,
  .circular-carousel__title {
    animation: none;
  }
}

/* ── 7. VIBE CODED SECTION ───────────────────────────── */
.vibecoded-section,
.about-section {
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--border);
}

/* About bento (React Bits MagicBento, assets/js/magic-bento.js): dark theme values, radius 20,
   spotlight 300 (border glow 225), gap 12 as in the snippet. Demo-visual styles not included. */
.magic-bento {
  --mb-surface: linear-gradient(180deg, #1a1820 0%, #121116 100%);
  --mb-edge: rgba(255, 255, 255, 0.07);
  --mb-highlight: rgba(255, 255, 255, 0.06);
  --mb-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.85), 0 8px 18px -12px rgba(0, 0, 0, 0.6);
  --mb-ink: #f4f4f5;
  --mb-muted: rgba(244, 244, 245, 0.6);
  --mb-focus: rgba(244, 244, 245, 0.5);
  --mb-glow-alpha: 0.85;
  --mb-spot-alpha: 0.07;
  --mb-tile: linear-gradient(180deg, #3a3644 0%, #27242f 100%);
  --mb-tile-edge: rgba(255, 255, 255, 0.07);
  --mb-tile-highlight: rgba(255, 255, 255, 0.12);
  --mb-tile-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.7);
  --mb-well: rgba(255, 255, 255, 0.03);
  --mb-well-edge: rgba(255, 255, 255, 0.06);
  --mb-faint: rgba(244, 244, 245, 0.3);
  --mb-line: rgba(244, 244, 245, 0.1);
  --mb-secondary: #a1a1aa;
  --mb-secondary-ink: #121016;
  --mb-cursor-stroke: rgba(18, 16, 22, 0.9);
  --mb-ring: rgba(18, 16, 22, 0.85);
  --mb-glow-rgb: 244, 244, 245;
  --mb-accent-rgb: 244, 244, 245;
  --mb-accent-ink: #121016;
  --mb-radius: 20px;
  --mb-inner-radius: 10px;
  --mb-pad: 17px;
  --mb-spot-size: 300px;
  --mb-border-size: 225px;
  gap: 12px;
  margin-top: 8px;
}

.magic-bento {
  --mb-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: row dense;
  width: 100%;
  color: var(--mb-ink);
  font-feature-settings: 'tnum' 0;
  -webkit-tap-highlight-color: transparent;
}

@supports (transition-timing-function: linear(0, 1)) {
  .magic-bento {
    --mb-spring: linear(
      0,
      0.0603,
      0.2033,
      0.3821,
      0.5633,
      0.7258,
      0.8584,
      0.9574,
      1.0242,
      1.0634,
      1.0809,
      1.0828,
      1.0747,
      1.0613,
      1.046,
      1.0313,
      1.0186,
      1.0085,
      1.0012,
      0.9965,
      0.994,
      0.9931,
      0.9933,
      0.9941,
      0.9953,
      0.9966,
      0.9978,
      0.9988,
      1
    );
  }
}

.magic-bento__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  --mb-delay: 0ms;
}

.magic-bento[data-intro] .magic-bento__cell {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.97);
}

.magic-bento[data-intro] .magic-bento__cell[data-state='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--mb-delay),
    transform 760ms var(--mb-spring) var(--mb-delay);
}

.magic-bento__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--mb-radius);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow);
  color: var(--mb-ink);
  text-decoration: none;
  isolation: isolate;
  outline: none;
  transform: perspective(900px) translate3d(var(--mb-tx, 0px), var(--mb-ty, 0px), 0) rotateX(var(--mb-rx, 0deg))
    rotateY(var(--mb-ry, 0deg)) scale(var(--mb-press, 1));
  user-select: none;
  -webkit-user-select: none;
}

.magic-bento__card[data-clickable] {
  cursor: pointer;
}

.magic-bento__card:focus-visible {
  box-shadow:
    var(--mb-shadow),
    0 0 0 2px var(--mb-focus);
}

.magic-bento__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    var(--mb-spot-size) circle at var(--mb-x, -999px) var(--mb-y, -999px),
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 1)) 0%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.973)) 15%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.837)) 30%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.593)) 45%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.317)) 60%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.104)) 75%,
    rgba(var(--mb-glow-rgb), calc(var(--mb-spot-alpha) * var(--mb-hot, 0) * 0.009)) 90%,
    rgba(var(--mb-glow-rgb), 0) 100%
  );
  pointer-events: none;
}
.magic-bento__rim {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--mb-edge),
    inset 0 1px 0 var(--mb-highlight);
  pointer-events: none;
}

.magic-bento__border {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(
      var(--mb-border-size) circle at var(--mb-x, -999px) var(--mb-y, -999px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 1)) 0%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.973)) 15%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.837)) 30%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.593)) 45%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.317)) 60%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.104)) 75%,
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-near, 0) * 0.009)) 90%,
      rgba(var(--mb-glow-rgb), 0) 100%
    ),
    radial-gradient(
      circle at var(--mb-wx, -999px) var(--mb-wy, -999px),
      rgba(var(--mb-glow-rgb), 0) calc(var(--mb-wr, 0px) - 110px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.1)) calc(var(--mb-wr, 0px) - 80px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.32)) calc(var(--mb-wr, 0px) - 52px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.68)) calc(var(--mb-wr, 0px) - 28px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0) * 0.94)) calc(var(--mb-wr, 0px) - 10px),
      rgba(var(--mb-glow-rgb), calc(var(--mb-glow-alpha) * var(--mb-wa, 0))) calc(var(--mb-wr, 0px) - 3px),
      rgba(var(--mb-glow-rgb), 0) var(--mb-wr, 0px)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

.magic-bento__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: var(--mb-pad);
}

.magic-bento__header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--mb-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.magic-bento__icon {
  display: grid;
  width: 16px;
  height: 16px;
  flex: none;
  place-items: center;
  color: var(--mb-ink);
}

.magic-bento__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-bento__visual {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  container-type: size;
}

.magic-bento__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.magic-bento__title {
  margin: 0;
  color: var(--mb-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 20px;
}

.magic-bento__description {
  margin: 0;
  color: var(--mb-muted);
  font-size: 13px;
  line-height: 1.45;
}

.magic-bento[data-autohide] .magic-bento__title,
.magic-bento[data-autohide] .magic-bento__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.magic-bento[data-autohide] .magic-bento__title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.magic-bento[data-autohide] .magic-bento__description {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}



/* Image cards and the bento visuals (verbatim from React Bits; texts and data set in index.html) */
.magic-bento__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.magic-bento__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    rgba(10, 9, 13, 0.82) 0%,
    rgba(10, 9, 13, 0.7) 14%,
    rgba(10, 9, 13, 0.46) 30%,
    rgba(10, 9, 13, 0.2) 46%,
    rgba(10, 9, 13, 0.05) 60%,
    rgba(10, 9, 13, 0) 72%
  );
  pointer-events: none;
}

.magic-bento__card[data-image] .magic-bento__header,
.magic-bento__card[data-image] .magic-bento__description {
  color: rgba(244, 244, 245, 0.72);
}

.magic-bento__card[data-image] .magic-bento__title,
.magic-bento__card[data-image] .magic-bento__icon {
  color: #f4f4f5;
}

.magic-bento__well {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--mb-inner-radius);
  background: var(--mb-well);
  box-shadow: inset 0 0 0 1px var(--mb-well-edge);
}

.magic-bento__tile {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--mb-inner-radius);
  background: var(--mb-tile);
  box-shadow: var(--mb-tile-shadow);
}

.magic-bento__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--mb-tile-edge),
    inset 0 1px 0 var(--mb-tile-highlight);
  pointer-events: none;
}

.magic-bento__chart {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  touch-action: pan-y;
}

.magic-bento__figure {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.magic-bento__figure-value {
  color: var(--mb-ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 18px;
}

.magic-bento__figure-note {
  min-width: 0;
  overflow: hidden;
  color: var(--mb-muted);
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 14px;
}

.magic-bento__plot {
  position: relative;
  min-height: 0;
  flex: 1;
  margin-top: 6px;
}

.magic-bento__plot svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.magic-bento__chart-area {
  fill: rgba(var(--mb-accent-rgb), 0.14);
}

.magic-bento__chart-line {
  fill: none;
  stroke: rgb(var(--mb-accent-rgb));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.magic-bento__scrub {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--mb-accent-rgb), 0), rgba(var(--mb-accent-rgb), 0.35));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.magic-bento__scrub-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3px;
  border-radius: 50%;
  background: rgb(var(--mb-accent-rgb));
  box-shadow: 0 0 0 3px var(--mb-ring);
}

.magic-bento__chart[data-scrub] .magic-bento__scrub {
  opacity: 1;
}

.magic-bento__bars {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.magic-bento__bars-plot {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: flex-end;
  gap: 5px;
  margin-top: 8px;
}

.magic-bento__bar {
  position: relative;
  height: calc(var(--h) * 100%);
  min-height: 3px;
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  background: rgba(var(--mb-accent-rgb), 0.18);
  transform-origin: 50% 100%;
  transition:
    background-color 200ms ease,
    filter 200ms ease;
}

.magic-bento__bar[data-peak] {
  background: rgb(var(--mb-accent-rgb));
}

@media (hover: hover) {
  .magic-bento__bar:hover {
    background: rgba(var(--mb-accent-rgb), 0.42);
  }

  .magic-bento__bar[data-peak]:hover {
    background: rgb(var(--mb-accent-rgb));
    filter: brightness(1.1);
  }
}

.magic-bento__collab {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 16px 22px;
}

.magic-bento__doc-title {
  color: var(--mb-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.magic-bento__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.magic-bento__line {
  position: relative;
  width: var(--w);
  height: 6px;
  border-radius: 3px;
  background: var(--mb-line);
}

.magic-bento__line--gap {
  margin-top: 8px;
}

.magic-bento__selection {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--from);
  width: var(--span);
  border-radius: 3px;
  background: rgba(var(--mb-accent-rgb), 0.16);
}

.magic-bento__caret {
  position: absolute;
  top: -5px;
  right: -1px;
  bottom: -5px;
  width: 1.5px;
  border-radius: 1px;
  background: rgb(var(--mb-accent-rgb));
}

.magic-bento__cursor {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

.magic-bento__cursor svg {
  display: block;
  flex: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

.magic-bento__cursor-name {
  margin: 13px 0 0 -2px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}

.magic-bento__cursor--primary svg path {
  fill: rgb(var(--mb-accent-rgb));
  stroke: var(--mb-cursor-stroke);
}

.magic-bento__cursor--primary .magic-bento__cursor-name {
  background: rgb(var(--mb-accent-rgb));
  color: var(--mb-accent-ink);
}

.magic-bento__cursor--secondary svg path {
  fill: var(--mb-secondary);
  stroke: var(--mb-cursor-stroke);
}

.magic-bento__cursor--secondary .magic-bento__cursor-name {
  background: var(--mb-secondary);
  color: var(--mb-secondary-ink);
}

.magic-bento__flow {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
}

.magic-bento__flow-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
}

.magic-bento__flow-glyph {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: calc(var(--mb-inner-radius) - 2px);
  background: var(--mb-well);
  color: var(--mb-ink);
}

.magic-bento__flow-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.magic-bento__flow-name {
  overflow: hidden;
  color: var(--mb-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-bento__flow-meta {
  overflow: hidden;
  color: var(--mb-muted);
  font-size: 11.5px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-bento__flow-hash {
  font-family: var(--font);
  font-size: 11px;
}

.magic-bento__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
}

.magic-bento__rail {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 21px;
  width: 1px;
  background: var(--mb-line);
}

.magic-bento__rail-fill {
  position: absolute;
  inset: 0;
  background: rgba(var(--mb-accent-rgb), 0.55);
  transform-origin: 50% 0;
}

.magic-bento__step {
  position: relative;
  display: flex;
  height: 33px;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  color: var(--mb-ink);
  font-size: 13px;
  line-height: 16px;
}

.magic-bento__status {
  position: relative;
  display: grid;
  width: 16px;
  height: 16px;
  flex: none;
  place-items: center;
}

.magic-bento__status > * {
  grid-area: 1 / 1;
}

.magic-bento__pending {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px dashed var(--mb-faint);
  border-radius: 50%;
  opacity: 0;
}

.magic-bento__spinner {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid rgba(var(--mb-accent-rgb), 0.22);
  border-top-color: rgb(var(--mb-accent-rgb));
  border-radius: 50%;
  opacity: 0;
}

.magic-bento__done {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: rgb(var(--mb-accent-rgb));
  color: var(--mb-accent-ink);
}

.magic-bento__step-time {
  margin-left: auto;
  color: var(--mb-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.magic-bento__hub {
  position: relative;
  width: 100%;
  max-width: 240px;
  min-height: 0;
  flex: 1;
  margin: 0 auto;
}

.magic-bento__hub-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.magic-bento__hub-links line {
  stroke: var(--mb-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.magic-bento__hub-node {
  --size: min(var(--s), 30cqh);
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: var(--size);
  height: var(--size);
  place-items: center;
  margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
  color: var(--mb-ink);
}

.magic-bento__hub-node.magic-bento__tile {
  border-radius: calc(var(--size) * 0.3);
}

.magic-bento__packet {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgb(var(--mb-accent-rgb));
  opacity: 0;
}

.magic-bento__shield {
  display: flex;
  width: 100%;
  max-width: 320px;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.magic-bento__setting {
  display: flex;
  height: 32px;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 10px;
  color: var(--mb-ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 16px;
}

.magic-bento__setting-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container (max-height: 78px) {
  .magic-bento__setting ~ .magic-bento__setting {
    display: none;
  }
}

@container (max-height: 60px) {
  .magic-bento__hub {
    display: none;
  }
}

@container (max-height: 38px) {
  .magic-bento__shield,
  .magic-bento__chart,
  .magic-bento__bars {
    visibility: hidden;
  }
}

.magic-bento__switch {
  position: relative;
  width: 26px;
  height: 16px;
  flex: none;
  margin-left: auto;
  border-radius: 8px;
  background: rgb(var(--mb-accent-rgb));
  transition: background-color 220ms ease;
}

.magic-bento__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mb-accent-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transform: translateX(10px);
  transition: transform 320ms var(--mb-spring);
}

.magic-bento__switch[data-off] {
  background: var(--mb-line);
}

.magic-bento__switch[data-off]::after {
  background: var(--mb-ink);
  transform: none;
}

.magic-bento[data-motion] .magic-bento__chart-line {
  stroke-dasharray: 1;
  animation: magic-bento-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mb-delay) + 220ms) both paused;
}

.magic-bento[data-motion] .magic-bento__chart-area {
  animation: magic-bento-fade 700ms ease calc(var(--mb-delay) + 700ms) both paused;
}

.magic-bento[data-motion] .magic-bento__bar {
  animation: magic-bento-grow 760ms var(--mb-spring) calc(var(--mb-delay) + 200ms + var(--i) * 55ms) both paused;
}

.magic-bento[data-motion] .magic-bento__cursor {
  animation:
    magic-bento-pop 420ms var(--mb-spring) calc(var(--mb-delay) + 600ms + var(--i) * 160ms) both paused,
    var(--path) 9s ease-in-out calc(var(--i) * -3s) infinite paused;
}

.magic-bento[data-motion] .magic-bento__selection {
  animation: magic-bento-select 900ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mb-delay) + 760ms) both paused;
}

.magic-bento[data-motion] .magic-bento__caret {
  animation: magic-bento-blink 1.1s steps(1) infinite paused;
}

.magic-bento[data-motion] .magic-bento__pending {
  animation: magic-bento-wait 1ms linear calc(var(--mb-delay) + 360ms + var(--i) * 520ms) both paused;
}

.magic-bento[data-motion] .magic-bento__spinner {
  animation:
    magic-bento-run 520ms linear calc(var(--mb-delay) + 360ms + var(--i) * 520ms) both paused,
    magic-bento-spin 700ms linear infinite paused;
}

.magic-bento[data-motion] .magic-bento__done {
  animation: magic-bento-check 420ms var(--mb-spring) calc(var(--mb-delay) + 880ms + var(--i) * 520ms) both paused;
}

.magic-bento[data-motion] .magic-bento__step-time {
  animation: magic-bento-fade 300ms ease calc(var(--mb-delay) + 880ms + var(--i) * 520ms) both paused;
}

.magic-bento[data-motion] .magic-bento__rail-fill {
  animation: magic-bento-rail calc(var(--n) * 520ms) linear calc(var(--mb-delay) + 360ms) both paused;
}

.magic-bento[data-motion] .magic-bento__hub-node {
  animation: magic-bento-pop 520ms var(--mb-spring) calc(var(--mb-delay) + 200ms + var(--i) * 70ms) both paused;
}

.magic-bento[data-motion] .magic-bento__hub-links line {
  stroke-dasharray: 1;
  animation: magic-bento-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mb-delay) + 360ms) both paused;
}

.magic-bento[data-motion] .magic-bento__card[data-active] .magic-bento__packet {
  animation: magic-bento-packet 1.8s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i) * 0.45s) infinite;
}

.magic-bento[data-motion] .magic-bento__switch {
  animation: magic-bento-switch-track 420ms ease calc(var(--mb-delay) + 520ms + var(--i) * 200ms) both paused;
}

.magic-bento[data-motion] .magic-bento__switch::after {
  animation: magic-bento-switch-knob 520ms var(--mb-spring) calc(var(--mb-delay) + 520ms + var(--i) * 200ms) both paused;
}

.magic-bento[data-motion] .magic-bento__switch[data-off],
.magic-bento[data-motion] .magic-bento__switch[data-off]::after {
  animation: none;
}

.magic-bento[data-motion]
  .magic-bento__cell[data-state='in']
  :is(
    .magic-bento__chart-line,
    .magic-bento__chart-area,
    .magic-bento__bar,
    .magic-bento__selection,
    .magic-bento__pending,
    .magic-bento__spinner,
    .magic-bento__done,
    .magic-bento__step-time,
    .magic-bento__rail-fill,
    .magic-bento__hub-node,
    .magic-bento__hub-links line,
    .magic-bento__switch
  ) {
  animation-play-state: running;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__switch::after {
  animation-play-state: running;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__cursor {
  animation-play-state: running, paused;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__card[data-active] .magic-bento__cursor {
  animation-play-state: running, running;
}

.magic-bento[data-motion] .magic-bento__card[data-active] .magic-bento__caret {
  animation-play-state: running;
}

.magic-bento[data-motion] .magic-bento__cell[data-state='in'] .magic-bento__spinner {
  animation-play-state: running, running;
}

@keyframes magic-bento-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes magic-bento-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes magic-bento-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes magic-bento-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes magic-bento-select {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes magic-bento-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes magic-bento-wait {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes magic-bento-run {
  0% {
    opacity: 0;
  }
  1%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes magic-bento-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes magic-bento-check {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes magic-bento-rail {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes magic-bento-packet {
  0% {
    top: var(--y);
    left: var(--x);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
}

@keyframes magic-bento-switch-track {
  from {
    background-color: var(--mb-line);
  }
  to {
    background-color: rgb(var(--mb-accent-rgb));
  }
}

@keyframes magic-bento-switch-knob {
  from {
    background: var(--mb-ink);
    transform: none;
  }
  to {
    background: var(--mb-accent-ink);
    transform: translateX(10px);
  }
}

@keyframes magic-bento-path-a {
  0%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: 46px -18px;
  }
  62% {
    translate: 12px 26px;
  }
}

@keyframes magic-bento-path-b {
  0%,
  100% {
    translate: 0 0;
  }
  35% {
    translate: -40px 14px;
  }
  70% {
    translate: -8px -22px;
  }
}

/* Portfolio additions: big intro card text, live status dot, tool-stack card layout */
.magic-bento[data-autohide] .about-bento__intro .magic-bento__title {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.magic-bento[data-autohide] .about-bento__intro .magic-bento__description {
  font-size: 15px;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.about-bento__status .magic-bento__icon {
  color: #4ADE80;
}

.about-bento__tools .magic-bento__content {
  flex-direction: column-reverse;
  justify-content: space-between;
}

.about-bento__tools .magic-bento__header {
  order: 1;
}

/* Tool stack marquee (React Bits LogoLoop, assets/js/logo-loop.js) */
.logoloop {
  --logoloop-gap: 32px;
  --logoloop-logoHeight: 28px;
  --logoloop-pad: 0px;
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-top: var(--logoloop-pad);
  padding-bottom: var(--logoloop-pad);
  -webkit-tap-highlight-color: transparent;
}

.logoloop--vertical {
  display: inline-block;
  height: 100%;
  padding: 0 var(--logoloop-pad);
}

.logoloop[data-draggable] {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}

.logoloop--vertical[data-draggable] {
  touch-action: pan-x pinch-zoom;
}

.logoloop[data-dragging],
.logoloop[data-dragging] * {
  cursor: grabbing;
}

.logoloop__track {
  position: relative;
  z-index: 0;
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.logoloop--vertical .logoloop__track {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.logoloop__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logoloop--vertical .logoloop__list {
  flex-direction: column;
}

.logoloop__item {
  position: relative;
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  font-size: var(--logoloop-logoHeight);
  line-height: 1;
}

.logoloop--vertical .logoloop__item {
  margin-right: 0;
  margin-bottom: var(--logoloop-gap);
}

.logoloop[data-intro] .logoloop__item {
  opacity: 0;
}

.logoloop__content {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logoloop-logoHeight) * 0.3);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  transition:
    opacity 0.35s ease,
    filter 0.35s ease,
    color 0.35s ease;
}

.logoloop[data-labels='below'] .logoloop__content {
  flex-direction: column;
  gap: calc(var(--logoloop-logoHeight) * 0.22);
}

.logoloop__content:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.logoloop__node {
  display: inline-flex;
  align-items: center;
}

.logoloop__item img {
  display: block;
  width: auto;
  height: var(--logoloop-logoHeight);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logoloop__node,
.logoloop__item img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
  transform: scale(1.2);
}

.logoloop__label {
  font-size: max(12px, calc(var(--logoloop-logoHeight) * 0.5));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logoloop[data-labels='below'] .logoloop__label {
  font-size: max(11px, calc(var(--logoloop-logoHeight) * 0.26));
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.72;
}

.logoloop__tip {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: calc(var(--logoloop-logoHeight) * 0.2);
  font-size: max(11px, calc(var(--logoloop-logoHeight) * 0.26));
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    translate 0.25s ease;
}

.logoloop--vertical .logoloop__tip {
  top: 50%;
  left: 100%;
  margin-top: 0;
  margin-left: calc(var(--logoloop-logoHeight) * 0.25);
  translate: 4px -50%;
}

.logoloop__item:hover .logoloop__tip,
.logoloop__item:focus-within .logoloop__tip,
.logoloop__item[data-active] .logoloop__tip {
  opacity: 0.8;
  translate: -50% 0;
}

.logoloop--vertical .logoloop__item:hover .logoloop__tip,
.logoloop--vertical .logoloop__item:focus-within .logoloop__tip,
.logoloop--vertical .logoloop__item[data-active] .logoloop__tip {
  translate: 0 -50%;
}

.logoloop[data-muted] .logoloop__content {
  filter: grayscale(var(--logoloop-gray, 1));
  opacity: var(--logoloop-dim, 0.5);
}

.logoloop[data-muted] .logoloop__item:hover .logoloop__content,
.logoloop[data-muted] .logoloop__item:focus-within .logoloop__content,
.logoloop[data-muted] .logoloop__item[data-active] .logoloop__content {
  filter: none;
  opacity: 1;
}

.logoloop__item[data-color]:hover .logoloop__content,
.logoloop__item[data-color]:focus-within .logoloop__content,
.logoloop__item[data-color][data-active] .logoloop__content {
  color: var(--logoloop-item-color);
}

.logoloop:not([data-muted]) .logoloop__item:not([data-color]) a.logoloop__content:hover {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .logoloop__content,
  .logoloop__node,
  .logoloop__item img,
  .logoloop__tip {
    transition: none;
  }
}

/* Text tiles for tools Simple Icons does not carry (Adobe apps, ChatGPT, Midjourney, Spline) */
.logoloop__mark {
  display: inline-flex;
  align-items: center;
  height: 1em;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logoloop__mark--app {
  justify-content: center;
  width: 2em;
  height: 2em;
  border: 2px solid currentColor;
  border-radius: 0.45em;
  font-size: 0.5em;
}


.vibecoded-header{
  margin-bottom: clamp(24px, 3.5vw, 36px);
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}

.section-heading {
  font-family: var(--font);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.section-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.6;
}

/* ── 9. ABOUT & CAPABILITIES MATRIX ─────────────────── */
.about-section {
  border-bottom: 1px solid var(--border);
}

/* ── 10. TACTICAL FOOTER ─────────────────────────────── */
.site-footer {
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: 0; /* the ASCII band runs to the page bottom */
  background: #08090B;
  border-top: 1px solid var(--border);
}

.footer-terminal-banner {
  margin-bottom: 36px;
  text-align: center;
}

.terminal-line {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.footer-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.footer-name {
  font-size: 15px;
  font-weight: 700;
  color: #EDEDF2;
  text-transform: uppercase;
}

.footer-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 360px;
}

.footer-avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--transition);
}

.footer-avail:hover {
  color: #EDEDF2;
}

.icon-arrow {
  transition: transform var(--transition);
}

.footer-avail:hover .icon-arrow {
  transform: translate(2px, -2px);
}

.footer-col-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--transition);
}

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

/* Monochromatic Social Badges matching adm04 shields */
.social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.social-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  background: #131418;
  border: 1px solid var(--border);
  color: #DADCE4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.social-badge-link:hover {
  border-color: var(--accent);
  color: #EDEDF2;
  box-shadow: 0 0 10px rgba(140, 153, 209, 0.3);
}

.footer-bottom {
  padding-top: 24px;
  text-align: center;
  position: relative;
  z-index: 1; /* above the ASCII band tucked underneath */
}

.footer-credit {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* ── 11. HERO INSTRUMENT BADGES ──────────────────────── */
.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

.badge-link {
  display: inline-flex;
  transition: transform var(--transition);
}

.badge-link:hover {
  transform: translateY(-2px);
}

.badge-link img {
  height: 28px;
  width: auto;
}

/* ═══════════════════════════════════════════════════════
   13. COMPREHENSIVE RESPONSIVE DESIGN (MOBILE & TABLET)
   ═══════════════════════════════════════════════════════ */

/* ── Large Tablets & Laptops (max-width: 992px) ──────── */
@media (max-width: 992px) {
  :root {
    --px: clamp(20px, 4vw, 40px);
  }
}

/* ── Standard Tablets & Small Screens (max-width: 768px) ── */
@media (max-width: 768px) {
  :root {
    --px: 20px;
  }

  .site-header {
    padding-block: 12px;
  }

  .hero {
    min-height: auto;
    padding-block: 128px 56px; /* clears the fixed header */
  }

  .hero-eyebrow {
    font-size: 10.5px;
    margin-bottom: 18px;
  }

  .hero-tagline {
    letter-spacing: 0.1em;
  }

  .category-title {
    font-size: 22px;
  }

  .section-heading {
    font-size: 24px;
  }

  

  

  
}

/* ── Mobile Devices (max-width: 640px) ───────────────── */
@media (max-width: 640px) {
  /* Header & Navigation */
  .site-header {
    padding-block: 10px;
  }

  .header-inner {
    gap: 10px;
  }

  .icon-std {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  /* Hero Section */
  .hero-badges-row {
    gap: 6px;
    margin-top: 28px;
  }

  .badge-link img {
    height: 24px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .hero-actions .specular-button {
    width: 100%;
  }

  /* The snippet's lg size is too large on phones: use the component's md size */
  .specular-button--lg {
    padding: 14px 28px;
    font-size: 1rem;
  }

  /* Vibe Coded Header */
  .vibecoded-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* About Section */
  

  

  

  

  

  

  

  

  

  

  /* Footer */
  .terminal-line {
    font-size: 10px;
    letter-spacing: 0.08em;
    word-break: break-word;
  }

  .footer-inner {
    gap: 28px;
    padding-bottom: 28px;
  }

  .social-icons {
    flex-wrap: wrap;
    gap: 8px;
  }

  .social-badge-link {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ── Small Mobile Screens (max-width: 440px) ─────────── */
@media (max-width: 440px) {
  :root {
    --px: 14px;
  }

  .hero-prompt-row {
    padding: 3px 8px;
  }

  .prompt-text {
    font-size: 10px;
  }

  .category-eyebrow {
    font-size: 10.5px;
  }

  .category-title {
    font-size: 20px;
  }

  .section-sub {
    font-size: 13px;
  }

  .footer-col-heading {
    font-size: 12px;
  }

  .footer-link {
    font-size: 12px;
  }
}


/* ── Global header & footer on every page (assets/js/site-chrome.js) ── */
site-header,
site-footer {
  display: contents;
}

/* Inner pages have no hero under the nav, so it sits in its own frosted band and stays put */
.site-header--inner {
  position: sticky;
  z-index: 1100; /* above each page's sticky sub-bar, so the mobile menu panel drops over it */
  background: rgba(8, 9, 11, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

/* Each case study keeps its own section bar, docked under the global nav */
body .luma-topnav,
body .cs-topnav,
body .aanvi-topnav,
body .elaara-topnav,
body .z18-topnav {
  top: var(--site-nav-h, 76px);
}

/* Inner page body text settings (fonts, centring, size) never leak into the shared chrome */
.site-header,
.site-footer {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: left;
}
/* career-restart.html: case-study.css's .cs-body paragraph rule also caps <body class="cs-body"> at
   820px, so the shared chrome breaks back out to the full viewport there */
body.cs-body .site-header,
body.cs-body .site-footer {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}