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

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@supports not (color: color-mix(in srgb, black, white)) {
  header.app-header,
  .toggle-group,
  .hero-availability,
  .hero-portrait,
  .terminal-card,
  .orchestration-strip,
  .proof-strip,
  .proof-item,
  .github-activity,
  .github-card,
  .project-carousel,
  .project-preview,
  .project-static-card,
  .carousel-proof,
  .archive-row,
  .btn-secondary,
  .btn-primary,
  .btn-link,
  .eco-wfp,
  .eco-stage,
  .eco-hud,
  .eco-stats-badge,
  #eco-back-btn,
  .sub-node,
  .wf-item,
  .workflow-proof,
  .workflow-steps span,
  .workflow-cases article {
    background: rgba(18, 18, 21, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
  }

  :root[data-theme="light"] header.app-header,
  :root[data-theme="light"] .toggle-group,
  :root[data-theme="light"] .hero-availability,
  :root[data-theme="light"] .hero-portrait,
  :root[data-theme="light"] .terminal-card,
  :root[data-theme="light"] .orchestration-strip,
  :root[data-theme="light"] .proof-strip,
  :root[data-theme="light"] .proof-item,
  :root[data-theme="light"] .github-activity,
  :root[data-theme="light"] .github-card,
  :root[data-theme="light"] .project-carousel,
  :root[data-theme="light"] .project-preview,
  :root[data-theme="light"] .project-static-card,
  :root[data-theme="light"] .carousel-proof,
  :root[data-theme="light"] .archive-row,
  :root[data-theme="light"] .btn-secondary,
  :root[data-theme="light"] .btn-primary,
  :root[data-theme="light"] .btn-link,
  :root[data-theme="light"] .eco-wfp,
  :root[data-theme="light"] .eco-stage,
  :root[data-theme="light"] .eco-hud,
  :root[data-theme="light"] .eco-stats-badge,
  :root[data-theme="light"] #eco-back-btn,
  :root[data-theme="light"] .sub-node,
  :root[data-theme="light"] .wf-item,
  :root[data-theme="light"] .workflow-proof,
  :root[data-theme="light"] .workflow-steps span,
  :root[data-theme="light"] .workflow-cases article {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(24, 24, 27, 0.14);
  }

  .ai-ops-hero::before {
    background:
      linear-gradient(90deg, rgba(9, 9, 11, 0.92) 0%, transparent 44%, rgba(9, 9, 11, 0.88) 100%),
      radial-gradient(circle at 64% 44%, rgba(16, 185, 129, 0.09), transparent 30%),
      radial-gradient(circle at 74% 22%, rgba(59, 130, 246, 0.08), transparent 26%);
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .github-card:hover,
  .project-static-card:hover,
  .carousel-proof:hover,
  .archive-row:hover {
    border-color: rgba(255, 255, 255, 0.24);
  }

  :root[data-theme="light"] .btn-primary:hover,
  :root[data-theme="light"] .btn-secondary:hover,
  :root[data-theme="light"] .github-card:hover,
  :root[data-theme="light"] .project-static-card:hover,
  :root[data-theme="light"] .carousel-proof:hover,
  :root[data-theme="light"] .archive-row:hover {
    border-color: rgba(24, 24, 27, 0.22);
  }

  :focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.62);
    outline-offset: 2px;
  }
}

html, body {
  transition: background-color var(--transition-normal), color var(--transition-normal);}

@media (prefers-reduced-motion: reduce) {
  html, body {
    transition: none;
  }
}

.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.mobile-nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text-primary);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

header.app-header.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

header.app-header.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
  opacity: 0;
}

header.app-header.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 760px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }

  .header-container {
    flex-wrap: nowrap;
  }

  /* !important here: style.css has long-standing duplicate rules for
     nav.nav-menu/.header-socials/.nav-cta elsewhere in the file (with equal
     or higher selector specificity) that otherwise silently win over a
     plain responsive override, regardless of source order. */
  .nav-cta,
  .header-socials {
    display: none !important;
  }

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

  header.app-header.mobile-nav-open .nav-menu {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    padding: 12px 20px 20px;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    gap: 6px;
    z-index: 99;
  }

  header.app-header.mobile-nav-open .nav-tab {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
  }
}

/* Real DOM buttons projected over the 3D hero's orbiting nodes, so each one
   is keyboard-focusable and clickable without raycasting into WebGL. */
.hero-node-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ai-ops-hero.no-canvas .hero-node-layer {
  display: none;
}

.hero-node-btn {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-green) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  opacity: 0;
  transition: opacity var(--transition-normal), transform var(--transition-fast), border-color var(--transition-fast);
}

.hero-node-btn.is-visible {
  opacity: 1;
}

.hero-node-btn:hover,
.hero-node-btn:focus-visible {
  border-color: var(--accent-green);
  transform: translate(-50%, -50%) scale(1.25);
  outline: none;
}

.hero-node-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 168px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 40%, var(--border));
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  font-family: var(--font-display);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  pointer-events: none;
}

.hero-node-btn:hover .hero-node-tooltip,
.hero-node-btn:focus-visible .hero-node-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.hero-node-tooltip strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-green-text);
  margin-bottom: 2px;
}

.hero-node-tooltip span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .hero-node-layer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-signal-ring { animation: none; }
}

.terminal-line {
  white-space: pre-line;}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .proof-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
  }

  .proof-strip::-webkit-scrollbar {
    display: none;
  }

  .proof-strip .proof-item,
  .proof-strip > p {
    flex: 0 0 auto;
    width: 74vw;
    max-width: 260px;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--bg-card) 60%, transparent);
  }

  .proof-strip .proof-item:first-child {
    border-left: 1px solid var(--border);
    padding-left: 16px;
  }
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.06);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

@media (min-width: 860px) {
  .featured-project-grid .project-preview {
    flex-basis: min(38vw, 340px);
  }
}

/* Flashed briefly when a hero node's click-to-scroll lands on this card. */
.project-preview.is-highlighted {
  animation: projectHighlightPulse 1.6s var(--ease);
}

@keyframes projectHighlightPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 55%, transparent); }
  30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-green) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 0%, transparent); }
}

/* !important throughout: style.css has a duplicate unconditional
   .archive-row rule later in the file with the desktop grid-template-*,
   which otherwise wins back over this responsive override regardless of
   source order. */
@media (max-width: 640px) {
  .archive-row {
    grid-template-columns: 44px 1fr !important;
    grid-template-areas:
      "num thumb"
      "main main"
      "tags tags"
      "open open" !important;
    row-gap: 10px;
    column-gap: 12px;
    padding: 16px 4px;
  }

  .archive-number {
    grid-area: num;
    align-self: start;
  }

  .archive-thumb {
    grid-area: thumb;
    width: 100% !important;
  }

  .archive-main {
    grid-area: main;
  }

  .archive-tags {
    grid-area: tags;
  }

  .archive-open {
    grid-area: open;
    justify-self: start !important;
  }
}

@media (max-width: 900px) {
  .project-video-frame {
    width: min(880px, 92vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-launcher {
    animation: none;
  }
}

/* On mobile the hero/archive content is left-aligned, so the fixed launcher
   sitting bottom-left collides with the CTA row and archive rows. Move it
   to the opposite corner and shrink it a touch. !important because
   style.css has a duplicate unconditional .console-launcher rule later in
   the file that would otherwise win back the desktop position. */
@media (max-width: 640px) {
  .console-launcher {
    left: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    height: 40px !important;
    padding: 0 14px 0 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certifications-list {
    scroll-behavior: auto;
  }
}

.footer-blame {
  position: relative;
  cursor: help;
  width: fit-content;
}

.footer-blame::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  pointer-events: none;
}

.footer-blame:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ═══════════════════ SIDE QUESTS: CINEMATIC OPEN ═══════════════════
   Curtains part on open, a spotlight blooms on the poster, film grain +
   vignette stay on for the whole session, and poster changes get a quick
   light-leak sweep — the "cinema lounge" the section already leans into,
   pushed further into an actual opening-night moment. */

.sq-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 54%;
  z-index: 60;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      #260909 0px, #3c1212 16px, #1a0606 32px, #341010 48px
    );
  box-shadow: 0 0 90px 30px rgba(0, 0, 0, 0.65) inset;
}

.sq-curtain-left {
  left: 0;
  border-right: 2px solid rgba(0, 0, 0, 0.5);
}

.sq-curtain-right {
  right: 0;
  border-left: 2px solid rgba(0, 0, 0, 0.5);
}

.side-quests-reveal.is-visible .sq-curtain-left {
  animation: sqCurtainLeft 1s var(--ease) 250ms both;
}

.side-quests-reveal.is-visible .sq-curtain-right {
  animation: sqCurtainRight 1s var(--ease) 250ms both;
}

@keyframes sqCurtainLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-105%); }
}

@keyframes sqCurtainRight {
  0% { transform: translateX(0%); }
  100% { transform: translateX(105%); }
}

.sq-spotlight {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(255, 238, 204, 0.38) 0%, rgba(255, 200, 140, 0.14) 24%, transparent 48%);
  opacity: 0;
}

.side-quests-reveal.is-visible .sq-spotlight {
  animation: sqSpotlightBloom 1.4s var(--ease) 550ms both;
}

@keyframes sqSpotlightBloom {
  0% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0.45; transform: scale(1); }
}

.sq-vignette {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 36%, rgba(0, 0, 0, 0.58) 100%);
}

.sq-grain {
  position: absolute;
  inset: 0;
  z-index: 46;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* The animation only runs while the panel is actually open (and visible) —
   it used to run unconditionally, which meant this mix-blend-mode layer
   kept compositing every 0.5s on every page of the site even with Side
   Quests closed, which is what was causing the site-wide lag. */
.side-quests-reveal.is-visible .sq-grain {
  animation: sqGrainShift 0.5s steps(4) infinite;
}

@keyframes sqGrainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

.sq-leak {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  border-radius: 16px;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 196, 120, 0.85) 45%, rgba(255, 120, 60, 0.55) 52%, transparent 72%);
  mix-blend-mode: screen;
}

.sq-leak.is-active {
  animation: sqLeakSweep 550ms ease-out;
}

@keyframes sqLeakSweep {
  0% { opacity: 0; transform: translateX(-60%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

/* .side-quests-reveal, its ::before, and .sq-glow all carry pre-existing
   "always on" animations (sq-warm-breathe, sq-dust, sq-glow-pulse) that
   keep running site-wide even while this panel is hidden, since it's just
   opacity/visibility toggled, not display:none. !important + :not() here
   rather than editing those (duplicated elsewhere in this file) rules
   directly, so this is guaranteed to win regardless of file order. */
.side-quests-reveal:not(.is-visible),
.side-quests-reveal:not(.is-visible)::before,
.side-quests-reveal:not(.is-visible) .sq-glow {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sq-curtain-left,
  .sq-curtain-right,
  .sq-spotlight {
    animation: none !important;
  }
  .sq-curtain-left { transform: translateX(-105%); }
  .sq-curtain-right { transform: translateX(105%); }
  .sq-spotlight { opacity: 0.35; }
  .side-quests-reveal.is-visible .sq-grain { animation: none !important; }
  .sq-leak { display: none; }
}
@media (max-width:900px){.sq-crew-cards{grid-template-columns:1fr}.sq-layout{grid-template-columns:1fr;gap:28px}.sq-poster-side{justify-content:center}.sq-info{display:flex;flex-direction:column;align-items:center}.sq-tagrow,.sq-actions{justify-content:center}}

@media (prefers-reduced-motion: reduce){
  .side-quests-reveal{animation:none}
  .side-quests-reveal::before{animation:none}
  .sq-glow{animation:none}
  .sq-review{transition:none;opacity:1;transform:none}
  .sq-poster-main{transition:none}
  .sq-crew-line .dot{animation:none}
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #09090b;             /* Vercel Zinc-950 */
  --bg-card: #121215;        /* Zinc-900 */
  --bg-hover: #18181b;       /* Zinc-800 */
  --text-primary: #ededed;
  --text-secondary: #a1a1aa;
  --text-muted: #8e8e99;   /* AA: #71717a was 4.12:1 on the dark bg */
  --border: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(255, 255, 255, 0.2);
  --glass: rgba(18, 18, 21, 0.85);
  --header-bg: rgba(9, 9, 11, 0.82);
  --hero-glow: rgba(59, 130, 246, 0.05);
  --viewport-bg: radial-gradient(circle at 50% 42%, #11111a 0%, #09090f 42%, #050508 100%);
  --viewport-shadow: inset 0 0 44px rgba(0,0,0,0.74), 0 24px 80px rgba(0,0,0,0.35);
  --surface-solid: rgba(14, 14, 18, 0.9);
  --workflow-bg: rgba(255,255,255,0.02);
  --workflow-hover: rgba(255,255,255,0.06);
  --stage-bg: rgba(9, 9, 11, 0.94);
  --shadow-strong: rgba(3, 26, 20, 0.55);
  --button-primary-bg: #ededed;
  --button-primary-text: #09090b;
  
  /* Accent Colors */
  --accent-blue: #3b82f6;
  --accent-purple: #a855f7;
  --accent-green: #10b981;
  --accent-green-text: #10b981;   /* same green: passes AA on the dark bg */
  --accent-blue-text: #3b82f6;    /* 5.41:1 on the dark bg */
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  
  /* Fonts */
  --font-display: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  
  /* Transitions */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-normal: 0.4s var(--ease);
  --transition-slow: 0.8s var(--ease);
}

:root[data-theme="light"] {
  --bg: #fbf8f1;
  --bg-card: #ffffff;
  --bg-hover: #eeeeea;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --border: rgba(24, 24, 27, 0.11);
  --border-focus: rgba(24, 24, 27, 0.24);
  --glass: rgba(255, 255, 255, 0.82);
  --header-bg: rgba(247, 247, 244, 0.82);
  --hero-glow: rgba(37, 99, 235, 0.1);
  --viewport-bg: radial-gradient(circle at 50% 40%, #ffffff 0%, #f3f4f0 48%, #e8e9e3 100%);
  --viewport-shadow: inset 0 0 34px rgba(24,24,27,0.08), 0 20px 70px rgba(24,24,27,0.12);
  --surface-solid: rgba(255, 255, 255, 0.92);
  --workflow-bg: rgba(24,24,27,0.035);
  --workflow-hover: rgba(24,24,27,0.075);
  --stage-bg: rgba(255, 255, 255, 0.94);
  --shadow-strong: rgba(6, 61, 46, 0.16);
  --button-primary-bg: #18181b;
  --button-primary-text: #ffffff;
  --accent-green-text: #047857;   /* 5.17:1 on the cream bg */
  --accent-blue-text: #2563eb;    /* 4.87:1 on the cream bg (#3b82f6 was 3.47:1) */
}

@supports not (color: color-mix(in srgb, black, white)) {
  header.app-header,
  .toggle-group,
  .hero-availability,
  .hero-portrait,
  .terminal-card,
  .orchestration-strip,
  .proof-strip,
  .proof-item,
  .github-activity,
  .github-card,
  .project-carousel,
  .project-preview,
  .project-static-card,
  .carousel-proof,
  .archive-row,
  .btn-secondary,
  .btn-primary,
  .btn-link,
  .eco-wfp,
  .eco-stage,
  .eco-hud,
  .eco-stats-badge,
  #eco-back-btn,
  .sub-node,
  .wf-item,
  .workflow-proof,
  .workflow-steps span,
  .workflow-cases article {
    background: rgba(18, 18, 21, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
  }

  :root[data-theme="light"] header.app-header,
  :root[data-theme="light"] .toggle-group,
  :root[data-theme="light"] .hero-availability,
  :root[data-theme="light"] .hero-portrait,
  :root[data-theme="light"] .terminal-card,
  :root[data-theme="light"] .orchestration-strip,
  :root[data-theme="light"] .proof-strip,
  :root[data-theme="light"] .proof-item,
  :root[data-theme="light"] .github-activity,
  :root[data-theme="light"] .github-card,
  :root[data-theme="light"] .project-carousel,
  :root[data-theme="light"] .project-preview,
  :root[data-theme="light"] .project-static-card,
  :root[data-theme="light"] .carousel-proof,
  :root[data-theme="light"] .archive-row,
  :root[data-theme="light"] .btn-secondary,
  :root[data-theme="light"] .btn-primary,
  :root[data-theme="light"] .btn-link,
  :root[data-theme="light"] .eco-wfp,
  :root[data-theme="light"] .eco-stage,
  :root[data-theme="light"] .eco-hud,
  :root[data-theme="light"] .eco-stats-badge,
  :root[data-theme="light"] #eco-back-btn,
  :root[data-theme="light"] .sub-node,
  :root[data-theme="light"] .wf-item,
  :root[data-theme="light"] .workflow-proof,
  :root[data-theme="light"] .workflow-steps span,
  :root[data-theme="light"] .workflow-cases article {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(24, 24, 27, 0.14);
  }

  .ai-ops-hero::before {
    background:
      linear-gradient(90deg, rgba(9, 9, 11, 0.92) 0%, transparent 44%, rgba(9, 9, 11, 0.88) 100%),
      radial-gradient(circle at 64% 44%, rgba(16, 185, 129, 0.09), transparent 30%),
      radial-gradient(circle at 74% 22%, rgba(59, 130, 246, 0.08), transparent 26%);
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .github-card:hover,
  .project-static-card:hover,
  .carousel-proof:hover,
  .archive-row:hover {
    border-color: rgba(255, 255, 255, 0.24);
  }

  :root[data-theme="light"] .btn-primary:hover,
  :root[data-theme="light"] .btn-secondary:hover,
  :root[data-theme="light"] .github-card:hover,
  :root[data-theme="light"] .project-static-card:hover,
  :root[data-theme="light"] .carousel-proof:hover,
  :root[data-theme="light"] .archive-row:hover {
    border-color: rgba(24, 24, 27, 0.22);
  }

  :focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.62);
    outline-offset: 2px;
  }
}

html {
  /* The header is a sticky ~76px pill; without this, jumping to an anchor or
     calling scrollIntoView() tucks the target's top edge under it. */
  scroll-padding-top: 96px;
}

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: clip;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Layout container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── HEADER ── */
header.app-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition-fast);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 10px var(--accent-blue);
  animation: breathe 3s infinite ease-in-out;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.logo-tag {
  font-size: 10px;
  background: color-mix(in srgb, var(--bg-card) 76%, transparent);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: -0.01em;
}

.nav-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.nav-tab.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-group {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
}

.toggle-btn,
.icon-toggle {
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-btn {
  min-width: 34px;
  height: 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}

.toggle-btn.active {
  background: var(--text-primary);
  color: var(--bg);
}

.icon-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
}

.icon-toggle:hover,
.toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.theme-icon {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.theme-sun {
  border: 2px solid currentColor;
  box-shadow: 0 0 0 4px transparent;
}

.theme-moon {
  background: currentColor;
  box-shadow: inset -5px 0 0 var(--bg-card);
}

:root[data-theme="dark"] .theme-sun,
:root[data-theme="light"] .theme-moon {
  opacity: 0;
  transform: scale(0.6) rotate(-20deg);
}

.github-snake {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.github-snake img {
  max-width: 100%;
  height: auto;
}

.sq-snake-light {
  display: none;
}

:root[data-theme="light"] .sq-snake-dark {
  display: none;
}

:root[data-theme="light"] .sq-snake-light {
  display: block;
}

.social-link {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-link:hover {
  color: var(--text-primary);
}

/* ── VIEW SECTIONS (TABS) ── */
.view-section {
  display: none;
  animation: fadeIn var(--transition-normal);
}

.view-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero command center */
.hero {
  padding: 78px 0 56px;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  display: grid;
  align-content: center;
}

.hero-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 400px;
  background: radial-gradient(ellipse at center, var(--hero-glow) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.ai-ops-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, transparent 44%, color-mix(in srgb, var(--bg) 88%, transparent) 100%),
    radial-gradient(circle at 64% 44%, rgba(16, 185, 129, 0.09), transparent 30%),
    radial-gradient(circle at 74% 22%, rgba(59, 130, 246, 0.08), transparent 26%);
  pointer-events: none;
  z-index: 0;
}

.ai-ops-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.98;
}

.ai-ops-fallback {
  position: absolute;
  right: clamp(18px, 7vw, 120px);
  top: 20%;
  width: min(420px, 42vw);
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  z-index: 1;
  pointer-events: none;
}

.ai-ops-fallback span {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.ai-ops-hero.no-canvas .ai-ops-canvas {
  display: none;
}

.ai-ops-hero.no-canvas .ai-ops-fallback {
  display: grid;
}

.hero-tagline {
  font-size: 13px;
  color: var(--accent-blue-text);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-display);
  margin-bottom: 8px;
}

.hero-availability {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 18px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 34%, var(--border));
  border-radius: 999px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-green) 10%, transparent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.hero-grid,
.hero-command-center {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.72fr);
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 600;
  line-height: 0.9;
  color: var(--text-primary);
  letter-spacing: -0.05em;
  max-width: 760px;
  margin: 0 0 22px;
  text-wrap: balance;
}

.hero-kicker {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 780px;
  margin: 0 0 18px;
  text-wrap: balance;
}

.hero-description {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 0 34px;
  font-weight: 400;
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-command,
.hero-dock {
  display: grid;
  gap: 14px;
}

.hero-dock {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
}

.hero-cv-actions {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.hero-cv-secondary {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.hero-cv-secondary:hover,
.hero-cv-secondary:focus-visible {
  color: var(--accent-green-text);
  outline: none;
}

.hero-portrait {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 74%, transparent);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--shadow-strong) 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-portrait img {
  width: 58px;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(0.96) contrast(1.04);
}

.hero-signal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent-green) 32%, var(--bg-card)), var(--bg-card) 72%);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--shadow-strong) 70%, transparent);
}

.hero-signal-glyph {
  position: relative;
  z-index: 1;
  font-family: var(--font-display), monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-green-text);
}

.hero-signal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: heroSignalPulse 2.6s ease-out infinite;
}

@keyframes heroSignalPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 45%, transparent); }
  70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-signal-ring { animation: none; }
}

.terminal-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 78%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)),
    radial-gradient(circle at 18% 0%, rgba(16, 185, 129, 0.16), transparent 32%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow-strong) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.profile-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-green-text);
  margin-bottom: 18px;
}

.hero-command > .profile-status {
  margin-bottom: 0;
  padding: 0;
}

.terminal-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--border);
  padding: 11px 14px;
}

.terminal-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.terminal-topbar span:nth-child(1) { background: #ef4444; }
.terminal-topbar span:nth-child(2) { background: #f59e0b; }
.terminal-topbar span:nth-child(3) { background: #22c55e; }

.terminal-topbar strong {
  margin-left: 8px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.terminal-output {
  min-height: 210px;
  max-height: 230px;
  overflow: hidden;
  padding: 18px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.65;
}

.terminal-line {
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.terminal-line-input {
  color: var(--text-primary);
}

.terminal-line-accent {
  color: var(--accent-green-text);
}

.terminal-line-error {
  color: var(--accent-red);
}

.terminal-form {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.terminal-form span {
  color: var(--accent-green-text);
}

.terminal-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}

.terminal-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 18px;
}

.terminal-commands button {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.terminal-commands button:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
  transform: translateY(-1px);
}

.profile-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
}

.orchestration-strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(32px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bg-card) 68%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero-marquee {
  position: relative;
  z-index: 2;
  margin-top: clamp(24px, 4vw, 48px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
}

.hero-marquee-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  animation: heroMarqueeScroll 28s linear infinite;
}

.hero-marquee:hover .hero-marquee-track {
  animation-play-state: paused;
}

.hero-marquee-track span {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 28%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-green) 22%, var(--bg-card)), color-mix(in srgb, var(--accent-blue) 16%, var(--bg-card)));
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-marquee-track span::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}

@keyframes heroMarqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}

.proof-strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, 0.45fr);
  gap: 28px;
  align-items: start;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.proof-item {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  padding-left: 16px;
  background: none;
}

.proof-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.proof-item span {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

.proof-item strong {
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.proof-strip > p {
  align-self: center;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.45;
  font-style: italic;
  padding: 4px 10px;
  max-width: 18ch;
}

@media (max-width: 640px) {
  .proof-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
  }

  .proof-strip::-webkit-scrollbar {
    display: none;
  }

  .proof-strip .proof-item,
  .proof-strip > p {
    flex: 0 0 auto;
    width: 74vw;
    max-width: 260px;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--bg-card) 60%, transparent);
  }

  .proof-strip .proof-item:first-child {
    border-left: 1px solid var(--border);
    padding-left: 16px;
  }
}

.orchestration-chain {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.orchestration-chain::-webkit-scrollbar {
  display: none;
}

.orchestration-chain span {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 58%, transparent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.orchestration-chain span:not(:last-child)::after {
  content: '';
  width: 18px;
  height: 1px;
  margin-left: 8px;
  background: linear-gradient(90deg, var(--accent-green), transparent);
}

.orchestration-strip p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.profile-line {
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.profile-line span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}

.profile-line strong {
  font-size: 14px;
  color: var(--text-primary);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.profile-links a,
.section-link,
.btn-link {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.profile-links a:hover,
.section-link:hover,
.btn-link:hover {
  color: var(--text-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid var(--button-primary-bg);
}

.btn-primary:hover {
  background: #e4e4e7;
  border-color: #e4e4e7;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.08);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-link {
  padding-inline: 4px;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-muted);
  transform: translateY(-2px);
}

/* GitHub activity */
.github-activity {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  border-radius: 0;
  padding: 24px 0 0;
  margin-bottom: 80px;
  box-shadow: none;
}

.github-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--accent-blue-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.github-profile-link:hover,
.github-profile-link:focus-visible {
  color: var(--accent-green-text);
  text-decoration: underline;
}

.github-calendar-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  padding: clamp(16px, 2.4vw, 24px);
  position: relative;
}

.github-calendar-status,
.github-calendar-fallback {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.github-calendar-status {
  display: none;
}

.github-calendar-fallback {
  max-width: 54ch;
}

.github-calendar-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scrollbar-color: var(--text-muted) transparent;
  scrollbar-width: thin;
}

.github-scroll-hint {
  display: none;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.github-calendar-scroll:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

.github-calendar {
  --github-cell-size: 11px;
  --github-cell-gap: 3px;
  --github-weekday-column: 32px;
  min-width: 720px;
  padding: 4px 2px 2px;
}

.github-calendar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.github-calendar-summary strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.github-calendar-years {
  display: flex;
  gap: 8px;
  align-items: center;
}

.github-year-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  cursor: default;
  user-select: none;
}

.github-year-btn.active {
  background: var(--accent-blue);
  color: #ffffff;
}

.github-calendar-months {
  display: grid;
  gap: var(--github-cell-gap);
  min-height: 18px;
  margin-bottom: 6px;
  margin-left: var(--github-weekday-column);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
}

.github-calendar-grid-wrap {
  display: grid;
  grid-template-columns: var(--github-weekday-column) max-content;
  gap: 4px;
}

.github-calendar-weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--github-cell-size));
  gap: var(--github-cell-gap);
  color: var(--text-muted);
  font-size: 9px;
  line-height: var(--github-cell-size);
  text-align: left;
}

.github-calendar-weeks {
  display: grid;
  gap: var(--github-cell-gap);
}

.github-calendar-week {
  display: grid;
  grid-template-rows: repeat(7, var(--github-cell-size));
  gap: var(--github-cell-gap);
}

.github-contribution-cell,
.github-legend-scale i {
  width: var(--github-cell-size);
  height: var(--github-cell-size);
  border-radius: 2px;
}

.github-contribution-cell {
  display: block;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.github-contribution-cell:hover {
  transform: scale(1.25);
  filter: brightness(1.2);
  z-index: 2;
  position: relative;
}

.github-contribution-cell:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

.github-contribution-cell.level-0,
.github-legend-scale .level-0 { background: #161b22; }
.github-contribution-cell.level-1,
.github-legend-scale .level-1 { background: #0e4429; }
.github-contribution-cell.level-2,
.github-legend-scale .level-2 { background: #006d32; }
.github-contribution-cell.level-3,
.github-legend-scale .level-3 { background: #26a641; }
.github-contribution-cell.level-4,
.github-legend-scale .level-4 { background: #39d353; }

.github-calendar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 6px;
}

.github-learn-link {
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.github-learn-link:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

.github-calendar-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}

.github-legend-scale {
  display: inline-flex;
  gap: 3px;
}

.github-legend-scale i {
  display: block;
}

:root[data-theme="light"] .github-calendar-panel {
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}

:root[data-theme="light"] .github-contribution-cell.level-0,
:root[data-theme="light"] .github-legend-scale .level-0 { background: #ebedf0; }
:root[data-theme="light"] .github-contribution-cell.level-1,
:root[data-theme="light"] .github-legend-scale .level-1 { background: #9be9a8; }
:root[data-theme="light"] .github-contribution-cell.level-2,
:root[data-theme="light"] .github-legend-scale .level-2 { background: #40c463; }
:root[data-theme="light"] .github-contribution-cell.level-3,
:root[data-theme="light"] .github-legend-scale .level-3 { background: #30a14e; }
:root[data-theme="light"] .github-contribution-cell.level-4,
:root[data-theme="light"] .github-legend-scale .level-4 { background: #216e39; }

.github-activity-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.github-activity .eyebrow {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.github-activity h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
  max-width: 360px;
  margin-bottom: 14px;
}

.github-activity p:not(.eyebrow) {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}

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

.github-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  overflow: visible;
  padding: 20px 0 0;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.project-carousel-section {
  position: relative;
  z-index: 3;
  margin-top: 18px;
  margin-bottom: 72px;
}

.project-carousel {
  --slide-width: min(820px, 78vw);
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: 16px;
  outline: none;
}

.project-carousel:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 38%, transparent);
}

.project-carousel-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  height: 100%;
  transition: transform 0.72s var(--ease);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 var(--slide-width);
  min-height: 450px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.72fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 88%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)),
    radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.1), transparent 28%);
  opacity: 0.46;
  transform: scale(0.94);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.5s var(--ease);
}

.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  border-color: color-mix(in srgb, var(--accent-green) 36%, var(--border));
}

.carousel-media {
  position: relative;
  min-height: 450px;
  background: #050507;
  overflow: hidden;
}

.carousel-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: saturate(0.9) brightness(0.72) contrast(1.08);
}

.carousel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 52%, rgba(0,0,0,0.58) 100%);
  pointer-events: none;
}

.media-fallback-jobbot {
  height: 100%;
  min-height: 450px;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 32px;
  background:
    repeating-linear-gradient(0deg, rgba(16,185,129,0.08) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 50% 45%, rgba(16,185,129,0.18), transparent 35%),
    #050507;
  color: var(--text-primary);
  font-family: var(--font-display);
  text-align: center;
}

.media-fallback-jobbot strong {
  font-size: clamp(32px, 7vw, 72px);
  line-height: 0.92;
  letter-spacing: 0;
}

.media-fallback-jobbot span {
  color: var(--accent-green-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.carousel-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(24px, 4vw, 42px);
}

.carousel-kicker {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.carousel-meta h3 {
  margin: 10px 0 14px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 0.98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.carousel-meta p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.62;
}

.carousel-value {
  border-left: 2px solid var(--accent-green);
  padding-left: 14px;
}

.carousel-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.carousel-stack span {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-hover) 64%, transparent);
  font-size: 11px;
  font-weight: 700;
}

.carousel-proof {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  transition: all var(--transition-fast);
}

.carousel-proof:hover,
.carousel-proof:focus-visible {
  border-color: var(--accent-green-text);
  color: var(--accent-green-text);
  outline: none;
}

button.carousel-proof {
  background: none;
  cursor: pointer;
}

.github-card-wide {
  grid-row: span 2;
}

.github-card:hover,
.github-card:focus-visible {
  opacity: 0.78;
  outline: none;
}

.github-card-label {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.github-card strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1;
}

.github-card small {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

/* Project launch deck */
.project-carousel {
  min-height: 0;
  border-radius: 0;
  overflow: visible;
}

.featured-project-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 20px;
  margin: -4px -4px 0;
  scroll-padding-left: 4px;
}

.featured-project-grid .project-preview {
  flex: 0 0 min(78vw, 320px);
  scroll-snap-align: start;
}

@media (min-width: 860px) {
  .featured-project-grid .project-preview {
    flex-basis: min(38vw, 340px);
  }
}

.featured-project-grid .project-preview {
  grid-template-columns: 1fr;
  min-height: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
}

.featured-project-grid .project-preview-media {
  display: block;
  min-height: 138px;
  height: 138px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 0;
  background: #050508;
  overflow: hidden;
}

.featured-project-grid .project-media-img {
  object-fit: cover;
  object-position: top center;
  background: #050508;
  filter: saturate(1.06) contrast(1.06) brightness(1.04);
}

.featured-project-grid .project-preview[data-project-id="agents-system"] .project-media-img,
.featured-project-grid .project-preview[data-project-id="pisculichi"] .project-media-img {
  object-position: center;
}

.featured-project-grid .project-preview[data-project-id="motor-estadistico"] .project-media-img {
  object-position: top center;
  filter: saturate(1.08) contrast(1.04) brightness(1.12);
}

.featured-project-grid .project-preview[data-project-id="pisculichi"] .project-preview-media {
  display: block;
}

.featured-project-grid .project-preview[data-project-id="pisculichi"] .project-media-img {
  object-fit: contain;
  object-position: center;
  padding: 8px;
}

.featured-project-grid .project-preview-copy {
  justify-content: flex-start;
  padding: 16px;
}

.featured-project-grid .project-preview h3 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.featured-project-grid .project-preview p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
}

.featured-project-grid .project-proof-points dd {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-proof-points {
  display: grid;
  gap: 8px;
  margin: 4px 0 6px;
}

.project-proof-points div {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.project-proof-points dt {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.project-proof-points dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.project-static-fallback {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.project-static-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.project-static-card:hover,
.project-static-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent-green) 36%, var(--border));
  outline: none;
}

.project-static-kicker {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.project-static-card strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1;
}

.project-static-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.project-static-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.project-static-tags span {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-hover) 64%, transparent);
  font-size: 11px;
  font-weight: 700;
}

.project-static-link {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

.project-deck-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.24fr) minmax(0, 1fr);
  gap: 18px;
  position: relative;
  align-items: start;
}

.project-deck-shell::before {
  content: '';
  position: absolute;
  inset: -28px -16px;
  background:
    radial-gradient(circle at 76% 10%, rgba(16,185,129,0.12), transparent 26%),
    radial-gradient(circle at 18% 80%, rgba(59,130,246,0.08), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 96px);
  pointer-events: none;
  opacity: 0.72;
}

.project-deck-rail {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 20px;
  position: sticky;
  top: 20px;
}

.project-rail-item {
  min-height: 58px;
  display: grid;
  grid-template-columns: 44px 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--border) 88%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 72%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  color: var(--text-secondary);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.project-rail-thumb {
  width: 44px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 68%, var(--bg-card));
  display: grid;
  place-items: stretch;
}

.project-rail-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.project-rail-item > span:last-child {
  min-width: 0;
}

.project-rail-item:hover,
.project-rail-item:focus-visible,
.project-rail-item.active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent-green) 52%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, transparent), color-mix(in srgb, var(--bg) 80%, transparent));
  box-shadow: 0 18px 38px rgba(0,0,0,0.18), 0 0 0 1px color-mix(in srgb, var(--accent-green) 18%, transparent);
  transform: translateX(4px);
  outline: none;
}

.project-rail-item.previewed {
  border-color: color-mix(in srgb, var(--accent-blue) 34%, var(--border));
  box-shadow: 0 16px 34px rgba(0,0,0,0.16), 0 0 0 1px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.project-rail-index {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-green-text);
}

.project-rail-item strong,
.project-rail-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-rail-item strong {
  font-family: var(--font-display);
  font-size: 13px;
}

.project-rail-item small {
  font-size: 11px;
  color: var(--text-muted);
}

.project-deck-viewport {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: block;
}

.project-preview {
  display: grid;
  grid-template-columns: minmax(240px, 1.05fr) minmax(0, 0.78fr);
  gap: 16px;
  align-items: stretch;
}

.project-preview-media {
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: #050508;
}

.project-preview-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.project-preview-kicker {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.project-preview h3 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 0.98;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.project-preview p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  max-width: 50ch;
}

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

.project-preview-tags span {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text-muted);
  font-size: 11px;
}

.project-preview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.project-viewport-stage {
  position: relative;
  min-height: 0;
  perspective: 1200px;
}

.project-mission {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.56fr);
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px) rotateY(-4deg) scale(0.985);
  transition: opacity 0.42s var(--ease), transform 0.56s var(--ease);
}

.project-mission.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) rotateY(0) scale(1);
}

.mission-visual {
  position: relative;
  min-height: 500px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 38%),
    #050508;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 20%, var(--border));
  border-radius: 4px 0 0 4px;
  overflow: hidden;
  box-shadow: 0 28px 90px color-mix(in srgb, var(--shadow-strong) 58%, transparent);
  clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
}

.mission-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: saturate(0.98) contrast(1.04) brightness(1);
  transform: scale(1.01);
}

.project-media-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.mission-visual::before,
.mission-visual::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.mission-visual::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 22%, transparent 76%, rgba(0,0,0,0.34)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
  opacity: 0.12;
}

.mission-visual::after {
  inset: 18px;
  border: 1px solid rgba(255,255,255,0.08);
}

.mission-visual.media-fallback,
.project-preview-media.media-fallback,
.archive-thumb.media-fallback {
  background:
    radial-gradient(circle at 16% 20%, rgba(16,185,129,0.18), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(59,130,246,0.14), transparent 30%),
    linear-gradient(180deg, #06070b, #090b11 74%, #050508);
}

.project-media-fallback {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 18px;
  color: var(--text-primary);
  background:
    linear-gradient(180deg, transparent 0%, rgba(5,5,8,0.08) 34%, rgba(5,5,8,0.84) 100%);
}

.project-media-fallback-kicker {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.project-media-fallback strong {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.project-media-fallback span:last-child {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.mission-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
  box-shadow: 0 0 24px var(--accent-green);
  animation: scanDeck 4.4s linear infinite;
}

.mission-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 3.6vw, 42px);
  border: 1px solid var(--border);
  border-left: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 78%, transparent), color-mix(in srgb, var(--bg) 92%, transparent)),
    radial-gradient(circle at 0 20%, rgba(16,185,129,0.12), transparent 34%);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
}

.mission-status {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.mission-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.7vw, 52px);
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.mission-copy p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.mission-problem {
  color: var(--text-primary) !important;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.35 !important;
}

.mission-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mission-evidence-grid div {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
}

.mission-evidence-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mission-evidence-grid strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.mission-value {
  padding-left: 14px;
  border-left: 2px solid var(--accent-green);
  margin-top: 2px;
}

.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.carousel-proof.subtle {
  color: var(--text-secondary);
}

.project-archive {
  display: grid;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-green) 8%, transparent), transparent 26%),
    color-mix(in srgb, var(--bg-card) 18%, transparent);
}

.archive-row {
  min-height: 104px;
  display: grid;
  grid-template-columns: 54px 150px minmax(0, 1fr) minmax(190px, 0.34fr) 110px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px 12px 0;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.archive-row-featured {
  min-height: 132px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-green) 10%, transparent), transparent 38%),
    color-mix(in srgb, var(--bg-elevated) 32%, transparent);
}

.archive-row-secondary {
  opacity: 0.88;
}

.archive-row:hover,
.archive-row:focus-visible {
  background: color-mix(in srgb, var(--bg-card) 52%, transparent);
  transform: translateX(6px);
  outline: none;
}

.archive-number {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-green-text);
  padding-left: 4px;
}

/* Project Media Container & Interactive Video Hover */
.project-media-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #050508;
  border-radius: 8px;
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-media-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.project-media-container video.project-media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  background: #050508;
  transition: opacity 0.32s ease;
  z-index: 1;
}

.project-media-container.is-playing img {
  opacity: 0;
}

.project-media-container.is-playing video.project-media-video {
  opacity: 1;
}

.project-media-container:hover,
.project-media-container:focus-visible {
  outline-color: var(--accent-green-text);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-green) 35%, transparent);
}

.project-video-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(10, 10, 16, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e6edf3;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}

.project-media-container.is-playing .project-video-badge {
  background: var(--accent-green);
  border-color: var(--accent-green-text);
  color: #050508;
}

.archive-thumb {
  position: relative;
  width: 150px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: grid;
  place-items: stretch;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.archive-thumb.is-playing {
  transform: scale(1.05);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--accent-green) 30%, transparent);
  z-index: 5;
}

.archive-thumb .project-video-badge {
  bottom: 4px;
  right: 4px;
  padding: 2px 5px;
  font-size: 8px;
}

.archive-thumb img,
.archive-thumb .project-media-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

.archive-thumb img {
  object-fit: cover;
  object-position: top center;
  filter: saturate(1.12) contrast(1.08) brightness(1.08);
}

.archive-thumb .project-media-fallback {
  padding: 10px;
}

.archive-meta {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-main strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1;
  color: var(--text-primary);
}

.archive-main small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary));
  font-size: 13px;
  line-height: 1.5;
}

.archive-problem {
  display: block;
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.archive-tags em {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  color: color-mix(in srgb, var(--text-primary) 68%, var(--text-muted));
  font-size: 11px;
  font-style: normal;
}

.archive-open {
  justify-self: end;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
}

/* Hover-triggered video reveal for projects with a demo clip */
.project-video-reveal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(12, 12, 16, 0.92) 0%, rgba(4, 4, 6, 0.96) 70%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.project-video-reveal.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Only the click-triggered (pinned) reveal needs to catch clicks - the hover
   preview must stay pointer-events:none or it steals mouseleave from the row. */
.project-video-reveal.is-pinned {
  pointer-events: auto;
}

.project-video-frame {
  position: relative;
  width: min(880px, 78vw);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  background: #050508;
  transform: scale(0.92) translateY(14px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-video-reveal.is-visible .project-video-frame {
  transform: scale(1) translateY(0);
}

.project-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* S1 CLS reserve (PVP-2): paint the reserved 16/9 box even before the
     poster or first frame arrives, so slow loops cause zero layout shift. */
  background: #050508;
}

.project-video-reveal-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(4, 4, 6, 0.66);
  color: #f5f5f5;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.project-video-reveal-close:hover,
.project-video-reveal-close:focus-visible {
  background: rgba(4, 4, 6, 0.88);
  transform: scale(1.06);
  outline: none;
}

.project-video-reveal.is-pinned .project-video-reveal-close {
  display: grid;
}

.project-video-reveal { align-content: center; gap: 14px; }

.project-video-credit {
  margin: 0;
  min-height: 1.4em;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(245, 245, 245, 0.55);
  visibility: hidden;
}

.project-video-reveal.is-pinned .project-video-credit { visibility: visible; }

.project-video-credit a { color: rgba(245, 245, 245, 0.8); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .project-video-frame {
    width: min(880px, 92vw);
  }
}

@keyframes scanDeck {
  from { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { transform: translateY(440px); opacity: 0; }
}

@keyframes panelRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-carousel-section,
.github-activity,
.stack-section,
.grid-2col {
  animation: panelRise 0.75s var(--ease) both;
}

.github-activity {
  animation-delay: 70ms;
}

.stack-section {
  animation-delay: 110ms;
}

.grid-2col {
  animation-delay: 150ms;
}

/* Floating console */
.console-launcher {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 240;
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 44%, var(--border));
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(16,185,129,0.32), transparent 36%),
    color-mix(in srgb, var(--bg-card) 88%, transparent);
  color: var(--accent-green-text);
  cursor: pointer;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow-strong) 62%, transparent), 0 0 0 8px rgba(16,185,129,0.05);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  animation: consoleLauncherPulse 1.8s ease-out 1.2s 3;
}

.console-launcher-icon {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.console-launcher-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.console-launcher:hover,
.console-launcher:focus-visible,
.console-launcher.active {
  transform: translateY(-3px) scale(1.03);
  outline: none;
  border-color: var(--accent-green-text);
}

@media (prefers-reduced-motion: reduce) {
  .console-launcher {
    animation: none;
  }
}

@keyframes consoleLauncherPulse {
  0%, 100% { box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow-strong) 62%, transparent), 0 0 0 8px rgba(16,185,129,0.05); }
  50% { box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow-strong) 62%, transparent), 0 0 0 14px rgba(16,185,129,0.14); }
}

.console-chat {
  position: fixed;
  left: 22px;
  bottom: 92px;
  z-index: 239;
  width: min(430px, calc(100vw - 44px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

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

.console-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.console-close:hover,
.console-close:focus-visible {
  color: var(--text-primary);
  border-color: var(--border-focus);
  outline: none;
}

/* ── SECTIONS (BIO & WORK) ── */
.section-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-wrap: balance;
}

.section-title::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: var(--border);
}

.grid-2col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}

.about-section {
  grid-template-columns: 1fr;
  gap: 0;
}

.about-section .bio-text {
  display: block;
  max-width: 66ch;
}

.bio-text p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 16px;
  line-height: 1.7;
}

.about-section .bio-text p {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ── CERTIFICATIONS ── */
.certifications-block {
  max-width: 66ch;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.certifications-heading {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* Horizontal drag carousel: mouse drag (cursor grab/grabbing), touch swipe and
   scroll-snap all move the same scrollLeft, so keyboard/scrollbar users get
   the identical behaviour for free. */
.certifications-list {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 4px 4px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.certifications-list::-webkit-scrollbar {
  display: none;
}

.certifications-list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.certification-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 220px;
  scroll-snap-align: start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
}

.certification-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-green) 10%, transparent);
  color: var(--text-secondary);
}

.certification-logo svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.certification-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.certification-info strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.certification-info span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.certification-link {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.certification-link--static {
  opacity: 0.55;
  cursor: default;
}

.certification-link:hover,
.certification-link:focus-visible {
  color: var(--accent-green-text);
  border-color: currentColor;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .certifications-list {
    scroll-behavior: auto;
  }
}

/* ── STACK SHOWCASE ── */
.stack-section {
  margin-bottom: 80px;
}

.stack-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stack-category {
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  border-radius: 0;
  padding: 20px 0 0;
}

.stack-category h3 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.category-icon.adopt { background: var(--accent-green); }
.category-icon.trial { background: var(--accent-blue); }
.category-icon.assess { background: var(--accent-purple); }

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: all var(--transition-fast);
}

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

/* ── PROJECTS TAB ── */
.projects-container {
  padding: 48px 0;
}

.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  margin-bottom: 24px;
}

.section-heading-row .section-title {
  margin-bottom: 0;
}

.section-deck {
  grid-column: 1;
  max-width: 620px;
  margin: -10px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.section-heading-row .section-link {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 22px 22px 16px;
}

.project-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.project-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
}

.status-active {
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.status-complete {
  background: rgba(16, 185, 129, 0.08);
  color: var(--accent-green-text);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.project-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 22px 24px;
  flex-grow: 1;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 22px 20px;
}

.project-tag {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 16px 22px 22px;
}

.project-media {
  height: 190px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.08));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.project-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 0.7s var(--ease);
}

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

.project-media-symbol {
  display: grid;
  place-items: center;
}

.project-media-symbol span {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
}

.project-link-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-card:hover .project-link-label {
  color: var(--text-primary);
}

.project-link-label svg {
  transition: transform var(--transition-fast);
}

.project-card:hover .project-link-label svg {
  transform: translateX(3px);
}

/* ── OBSIDIAN VAULT TAB ── */
.vault-container {
  padding: 48px 0;
}

.vault-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}

.vault-intro h3 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.vault-intro p {
  color: var(--text-secondary);
  font-size: 15px;
}

.vault-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: start;
}

.vault-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vault-feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.vault-feature-card h4 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.vault-feature-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vault-preview-header {
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vault-preview-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

.vault-preview-content {
  padding: 28px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #929299;
  line-height: 1.6;
  max-height: 480px;
  overflow-y: auto;
}

.md-frontmatter {
  color: var(--accent-purple);
  margin-bottom: 20px;
}

.md-header {
  color: var(--text-primary);
  font-weight: 700;
  margin: 16px 0 8px;
}

.md-link {
  color: var(--accent-blue);
  text-decoration: underline;
}

/* ── AGENT ECOSYSTEM TAB ── */
#eco-viewport {
  position: relative;
  width: 100%;
  height: 760px;
  border: 1px solid var(--border);
  background: var(--viewport-bg);
  border-radius: 16px;
  margin: 28px 0 40px;
  overflow: hidden;
  box-shadow: var(--viewport-shadow);
}

.agents-intro {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  padding-top: 48px;
  margin-bottom: 20px;
}

.agents-intro .eyebrow {
  color: var(--accent-blue);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.agents-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -1.6px;
}

.agents-intro p:not(.eyebrow) {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
  max-width: 640px;
}

.workflow-proof {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin: 0 0 22px;
}

.workflow-proof-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.workflow-proof .eyebrow {
  margin: 0;
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.workflow-proof h3 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.workflow-proof-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.workflow-steps {
  grid-column: 2;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
}

.workflow-steps span {
  height: 36px;
  min-height: 36px;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.workflow-cases {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.workflow-cases article {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 10px 0 0;
}

.workflow-cases article span {
  color: var(--accent-green-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
}

.workflow-cases article strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
}

.workflow-proof .eco-wfp {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}

.workflow-proof .wf-list {
  flex-wrap: wrap;
  overflow: visible;
}

#eco-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 68% 60% at 50% 44%, rgba(59, 130, 246, 0.022) 0%, transparent 72%),
    radial-gradient(ellipse 50% 40% at 78% 80%, rgba(16, 185, 129, 0.014) 0%, transparent 64%);
  pointer-events: none;
  z-index: 1;
}

/* Canvas overlay */
.eco-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#eco-canvas-under { z-index: 2; }
#eco-canvas-over { z-index: 5; }

#eco-viewport.no-canvas .eco-canvas {
  display: none;
}

#eco-viewport.no-canvas .eco-grid-bg {
  opacity: 0.45;
}

/* Grid Background */
.eco-grid-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 54px 54px;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}

/* Transform scale wrapper for zoom */
#eco-graph-wrapper {
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}

/* ── AGENT NODES (V7 Refined) ── */
.eco-node {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  opacity: 0;
  z-index: 10;
  transition: opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 1s var(--ease);
}

.eco-node.visible {
  opacity: 1;
}

.eco-node .node-bubble {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
  transition: all 0.45s var(--ease);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-node.core {
  opacity: 1;
}

.eco-node.execution {
  opacity: 0.9;
}

.eco-node.specialist {
  opacity: 0.8;
}

.eco-node.core .node-bubble {
  box-shadow: 0 10px 30px rgba(0,0,0,0.36);
}

.eco-node.execution .node-bubble {
  width: 54px;
  height: 54px;
}

.eco-node.specialist .node-bubble {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

/* Director visual dominance */
.eco-node[data-id="principal"] .node-bubble {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  border-color: rgba(59, 130, 246, 0.4);
  animation: pulse-ring 4s infinite var(--ease);
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.15), 0 4px 20px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0), 0 4px 20px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 0 0 0px rgba(59, 130, 246, 0), 0 4px 20px rgba(0,0,0,0.4); }
}

.eco-node .node-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.92) contrast(1.05);
  transition: transform 0.5s var(--ease);
}

.eco-node .node-bubble svg {
  width: 48px;
  height: 48px;
  transition: transform 0.5s var(--ease);
}

/* Soft border reflection */
.eco-node .node-bubble::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 55%);
  pointer-events: none;
}

/* System Nodes (smaller, icon-based) */
.eco-node.system-node .node-bubble {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--surface-solid);
  border-color: var(--border);
}

.eco-node.system-node .node-bubble svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  fill: none;
}

.eco-node .node-info {
  margin-top: 5px;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}

.eco-node .node-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  transition: color var(--transition-fast);
  max-width: 150px;
  overflow-wrap: anywhere;
}

.eco-node[data-id="principal"] .node-name {
  font-size: 13px;
}

.eco-node.execution .node-name {
  font-size: 11.5px;
}

.eco-node.specialist .node-name {
  font-size: 11px;
}

.eco-node .node-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 1px;
  max-width: 132px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.eco-node.specialist .node-role {
  display: none;
}

.eco-node.specialist .node-name {
  opacity: 0.72;
}

.eco-node.specialist:hover .node-role,
.eco-node.specialist.selected .node-role {
  display: block;
  font-size: 9px;
  letter-spacing: 0.3px;
}

.eco-node .node-detail {
  display: none;
}

/* Hover Node States */
.eco-node:hover {
  z-index: 15;
}

.eco-node:hover .node-bubble {
  border-color: var(--active-color);
  box-shadow: 0 0 28px var(--shadow-color), 0 8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px) scale(1.05);
}

.eco-node:focus-visible {
  outline: none;
}

.eco-node:focus-visible .node-bubble {
  border-color: var(--active-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--active-color) 32%, transparent), 0 0 28px var(--shadow-color);
}

.eco-node:hover .node-bubble img {
  transform: scale(1.08);
}

.eco-node:hover .node-name {
  color: var(--active-color);
}

/* Selected Node State (V7 Zoom Expand) */
.eco-node.selected {
  z-index: 35;
  opacity: 1;
}

.eco-node.selected .node-info {
  margin-top: 14px;
}

.eco-node.selected .node-name {
  font-size: 15px;
  color: var(--active-color);
}

.eco-node.selected .node-role {
  font-size: 10px;
  color: var(--text-primary);
}

.eco-node.selected .node-bubble {
  width: 98px;
  height: 98px;
  border-radius: 26px;
  border-color: var(--active-color);
  box-shadow: 0 0 60px var(--shadow-color), 0 12px 48px rgba(0, 0, 0, 0.6);
}

.eco-node.system-node.selected .node-bubble {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

/* Faded Nodes during selective focus */
.eco-node.faded {
  opacity: 0.055;
  filter: blur(3px);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.65);
}

/* ── SUB-UNIVERSE NODES (V7 dynamic explore) ── */
#eco-sub-universe {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

#eco-sub-universe.active {
  opacity: 1;
}

.sub-node {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.28);
  transition: all 0.4s var(--ease);
  text-align: center;
  white-space: nowrap;
}

.sub-node.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sub-node:hover {
  border-color: var(--sub-color);
  box-shadow: 0 0 14px var(--sub-shadow);
  transform: translate(-50%, -50%) scale(1.08);
}

.sub-node .sub-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  padding-left: 8px;
}

.sub-node .sub-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sub-color);
  margin-top: 1px;
}

.sub-node .sub-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sub-color);
  position: absolute;
  top: 11px;
  left: 10px;
  transform: none;
  box-shadow: 0 0 6px var(--sub-color);
}

/* Sub-node types colors */
.sub-node.type-workflow { border-color: rgba(59, 130, 246, 0.2); }
.sub-node.type-memory { border-color: rgba(168, 85, 247, 0.2); }
.sub-node.type-tool { border-color: rgba(34, 197, 94, 0.2); }
.sub-node.type-rules { border-color: rgba(245, 158, 11, 0.2); }

/* ── HUD PANEL (Bottom-Left) ── */
.eco-hud {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 320px;
  z-index: 40;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.5s var(--ease);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  pointer-events: none;
}

.eco-hud.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hud-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.hud-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.hud-role {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-left: auto;
}

.hud-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.hud-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Workflows rail */
.eco-wfp {
  position: relative;
  width: 100%;
  z-index: 1;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  opacity: 1;
  transform: none;
  transition: all 0.6s var(--ease);
  box-shadow: 0 10px 38px color-mix(in srgb, var(--shadow-strong) 46%, transparent);
  display: grid;
  grid-template-columns: minmax(170px, 0.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.eco-wfp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(16,185,129,0.08), transparent 32%, rgba(59,130,246,0.04));
  pointer-events: none;
  opacity: 0.35;
}

.eco-wfp.faded {
  opacity: 0.38;
  transform: none;
  pointer-events: none;
}

.eco-wfp h3 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.eco-wfp p {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.35;
}

.wf-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
  padding-bottom: 0;
}

.wf-list::-webkit-scrollbar {
  display: none;
}

.wf-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: none;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--workflow-bg);
  border: 1px solid var(--border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.wf-item:hover,
.wf-item:focus-visible {
  background: var(--workflow-hover);
  border-color: var(--border-focus);
  transform: translateY(-2px);
  outline: none;
}

.wf-item.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
}

.wf-item.active.loop {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.25);
}

.wf-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.wf-desc {
  display: none;
}

.wf-play-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.wf-item:hover .wf-play-btn {
  background: var(--accent-blue);
}

.wf-item.loop:hover .wf-play-btn {
  background: var(--accent-purple);
}

.wf-play-btn svg {
  width: 8px;
  height: 8px;
  fill: var(--text-primary);
}

/* ── STAGE/CONTROL BAR (Top-Center) ── */
.eco-stage {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 50;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(680px, calc(100% - 40px));
  max-width: 680px;
  background: var(--stage-bg);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 100px;
  padding: 6px 18px 6px 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.1), 0 10px 40px rgba(0,0,0,0.6);
  transition: all 0.45s var(--ease);
  pointer-events: none;
}

.eco-stage.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.stage-badge {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.stage-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-step {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ── TOP BACK BUTTON & HINT ── */
#eco-back-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

#eco-back-btn.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#eco-back-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-focus);
}

.eco-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.eco-hint.faded {
  opacity: 0;
}

/* Stats Badge (V7 Premium feature) */
.eco-stats-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 40;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 6px;
}

.eco-stats-badge.faded {
  opacity: 0;
  pointer-events: none;
}

.eco-stats-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
}

/* ── FOOTER ── */
footer.app-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  margin-top: 80px;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-text {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.footer-socials a {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-socials a:hover {
  color: var(--text-primary);
}

.side-quests-toggle {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.side-quests-toggle:hover,
.side-quests-toggle[aria-expanded="true"] {
  color: var(--text-primary);
}

/* ── Side Quests: full-screen 3D carousel reveal ── */
.side-quests-reveal {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: radial-gradient(circle at 50% 30%, rgba(16, 20, 30, 0.97) 0%, rgba(3, 3, 5, 0.99) 72%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.side-quests-reveal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sq-flash {
  position: absolute;
  inset: 0;
  background: var(--accent-green);
  opacity: 0;
  pointer-events: none;
}

.side-quests-reveal.is-visible .sq-flash {
  animation: sqFlash 0.6s ease-out;
}

@keyframes sqFlash {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  100% { opacity: 0; }
}

.side-quests-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.side-quests-close:hover,
.side-quests-close:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent-green-text);
  outline: none;
}

.sq-head {
  text-align: center;
}

.sq-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-green-text);
  margin-bottom: 6px;
}

.sq-head h3 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* --- Side Quests: sala cálida (cozy v4) --- */
.side-quests-reveal{
  background:
    radial-gradient(55% 45% at 18% 12%, rgba(232,168,76,.16), transparent 70%),
    radial-gradient(50% 55% at 82% 78%, rgba(212,121,91,.12), transparent 70%),
    radial-gradient(70% 60% at 50% 110%, rgba(120,86,50,.18), transparent 75%),
    linear-gradient(180deg, #1a1109 0%, #140d07 55%, #0b0705 100%);
  animation: sq-warm-breathe 14s ease-in-out infinite alternate;
}
@keyframes sq-warm-breathe{
  0%{background-position:0% 0%, 100% 100%, 50% 100%, 0 0}
  100%{background-position:8% 4%, 92% 92%, 45% 100%, 0 0}
}
.side-quests-reveal::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, rgba(232,168,76,.5), transparent),
  radial-gradient(1px 1px at 70% 20%, rgba(243,234,217,.4), transparent),
  radial-gradient(1.2px 1.2px at 45% 70%, rgba(212,121,91,.45), transparent),
  radial-gradient(1px 1px at 85% 55%, rgba(232,168,76,.35), transparent),
  radial-gradient(1.4px 1.4px at 12% 80%, rgba(243,234,217,.3), transparent);
  background-size:900px 900px;animation:sq-dust 26s linear infinite}
@keyframes sq-dust{0%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}100%{background-position:-120px -340px, 90px -280px, -60px 300px, 140px -120px, -100px 220px}}

.sq-layout{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;max-width:980px;margin:0 auto;padding:0 28px}
.sq-poster-side{display:flex;align-items:center;gap:12px;justify-content:center}
.sq-poster-wrap{position:relative;width:min(320px,62vw)}
.sq-glow{position:absolute;inset:6% -14% -8% -14%;border-radius:28px;filter:blur(52px);opacity:.55;transition:background .6s;z-index:0;animation:sq-glow-pulse 6s ease-in-out infinite alternate}
@keyframes sq-glow-pulse{0%{opacity:.42}100%{opacity:.62}}
.sq-poster-main{position:relative;z-index:1;display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:16px;
  box-shadow:0 34px 80px rgba(0,0,0,.7),0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,220,.15);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;transform-origin:50% 100%}
.sq-poster-wrap:hover .sq-poster-main{transform:translateY(-7px) rotate(-.7deg) scale(1.02)}
.sq-cat{position:absolute;z-index:2;top:14px;left:14px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.22em;
  padding:6px 11px;border-radius:999px;background:rgba(20,12,6,.75);color:#f3ead9;text-transform:uppercase;backdrop-filter:blur(5px)}
.sq-nav{position:relative;z-index:2;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,234,217,.22);
  background:rgba(243,234,217,.06);color:#f3ead9;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.sq-nav:hover{background:rgba(243,234,217,.14);border-color:rgba(243,234,217,.5)}
.sq-info{min-width:0}
.sq-cat-chip{display:inline-block;font:700 11px/1 'IBM Plex Mono',monospace;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sq-accent,#e8a84c);margin-bottom:13px}
.sq-info h4{font:600 clamp(30px,4vw,44px)/1.1 'Fraunces',Georgia,serif;letter-spacing:-.01em;margin:0 0 8px;color:#f7efe0}
.sq-meta{font:500 14px/1 'IBM Plex Sans',sans-serif;color:rgba(243,234,217,.55);margin:0 0 20px}
.sq-why{position:relative;margin:0 0 20px;padding:18px 22px;border-radius:16px;background:rgba(243,234,217,.06);
  border:1px solid rgba(232,200,160,.14);font:500 17px/1.6 'Fraunces',Georgia,serif;font-style:italic;color:rgba(247,239,224,.92)}
.sq-why::before{content:'\201C';position:absolute;top:-4px;left:12px;font:700 54px/1 'Fraunces',Georgia,serif;color:var(--sq-accent,#e8a84c);opacity:.9}
.sq-why::after{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:99px;background:var(--sq-accent,#e8a84c)}
.sq-tagrow{display:flex;flex-wrap:wrap;gap:8px}
.sq-tagrow span{font:600 11.5px/1 'IBM Plex Mono',monospace;color:rgba(243,234,217,.7);border:1px solid rgba(232,200,160,.22);
  border-radius:999px;padding:6px 13px}
.sq-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.sq-act{background:rgba(243,234,217,.05);border:1px solid rgba(232,200,160,.22);color:rgba(243,234,217,.85);
  border-radius:999px;padding:10px 17px;font:600 12.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;transition:all .2s}
.sq-act:hover{border-color:rgba(232,168,76,.55);color:#fff;background:rgba(232,168,76,.1)}
.sq-act.on{background:rgba(232,168,76,.15);border-color:rgba(232,168,76,.6);color:#f7e2b8}
.sq-snd-btn{min-width:40px;text-align:center}
.sq-snd-btn.playing{background:rgba(232,168,76,.28);animation:sq-orb 1.4s ease-in-out infinite}

.sq-col-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:30px auto 0;max-width:960px;padding:0 28px}
.sq-col-chip{background:rgba(243,234,217,.04);border:1px solid rgba(232,200,160,.2);color:rgba(243,234,217,.62);border-radius:999px;
  padding:7px 15px;font:600 12px/1 'IBM Plex Sans',sans-serif;cursor:pointer;transition:all .2s}
.sq-col-chip:hover{color:#f7efe0;border-color:rgba(232,200,160,.45)}
.sq-col-chip.active{background:rgba(232,168,76,.14);border-color:rgba(232,168,76,.6);color:#f7e2b8}

.sq-strip{display:flex;gap:10px;justify-content:center;margin:22px auto 0;max-width:1020px;padding:6px 28px 10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(232,168,76,.4) transparent}
.sq-thumb{position:relative;flex:none;width:58px;aspect-ratio:2/3;border-radius:9px;overflow:hidden;cursor:pointer;opacity:.4;
  outline:2px solid transparent;outline-offset:2px;transition:all .25s;padding:0;border:none;background:#1a120a}
.sq-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sq-thumb:hover{opacity:.85;transform:translateY(-3px)}
.sq-thumb.active{opacity:1;outline-color:rgba(232,168,76,.75);transform:translateY(-4px) scale(1.05);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.sq-thumb.seen::after{content:'';position:absolute;inset:0;background:rgba(232,168,76,.18)}
.sq-thumb.seen::before{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#f7e2b8;font-size:20px;z-index:2;font-weight:700}
.sq-thumb.foryou::after{content:'♥';position:absolute;top:5px;right:6px;color:#e8a84c;font-size:11px}

/* --- crew: el club recomienda --- */
.sq-crew{max-width:1000px;margin:36px auto 0;padding:0 28px}
.sq-crew-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sq-crew-line{font:600 13px/1.6 'IBM Plex Mono',monospace;color:rgba(243,234,217,.62);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sq-crew-line .dot{width:7px;height:7px;border-radius:50%;background:#e8a84c;box-shadow:0 0 10px rgba(232,168,76,.85);animation:sq-orb 1.8s ease-in-out infinite}
.sq-crew-line b{color:#f7e2b8}
.sq-crew-modes{display:flex;gap:6px}
.sq-mode{background:rgba(243,234,217,.05);border:1px solid rgba(232,200,160,.22);color:rgba(243,234,217,.65);border-radius:999px;
  padding:6px 14px;font:600 12px/1 'IBM Plex Sans',sans-serif;cursor:pointer;transition:all .2s}
.sq-mode:hover{color:#f7efe0;border-color:rgba(232,200,160,.45)}
.sq-mode.active{background:rgba(232,168,76,.15);border-color:rgba(232,168,76,.6);color:#f7e2b8}
.sq-crew-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
@media (max-width:900px){.sq-crew-cards{grid-template-columns:1fr}.sq-layout{grid-template-columns:1fr;gap:28px}.sq-poster-side{justify-content:center}.sq-info{display:flex;flex-direction:column;align-items:center}.sq-tagrow,.sq-actions{justify-content:center}}
.sq-review{position:relative;border:1px solid rgba(232,200,160,.16);border-radius:16px;padding:17px 19px;background:rgba(243,234,217,.05);
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s}
.sq-review.in{opacity:1;transform:none}
.sq-review:hover{border-color:rgba(232,200,160,.35);background:rgba(243,234,217,.07)}
.sq-review .rq-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sq-review .rq-top img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(232,168,76,.4)}
.sq-review .rq-name{font:700 13.5px/1.2 'IBM Plex Sans',sans-serif;color:#f7efe0}
.sq-review .rq-role{font:500 10.5px/1.3 'IBM Plex Mono',monospace;color:rgba(243,234,217,.45)}
.sq-review .rq-quote{font:500 14px/1.6 'IBM Plex Sans',sans-serif;color:rgba(243,234,217,.85);margin:0}
.sq-review .rq-quote b{color:#f7e2b8}
.sq-review .rq-score{position:absolute;top:15px;right:17px;font:800 13.5px/1 'IBM Plex Mono',monospace;color:#e8a84c}
.sq-review.loading .rq-quote{color:transparent}
.sq-review.loading .rq-quote::after{content:'';display:inline-block;width:72%;height:10px;border-radius:6px;
  background:linear-gradient(90deg,rgba(243,234,217,.06),rgba(243,234,217,.16),rgba(243,234,217,.06));background-size:200% 100%;animation:sq-shimmer 1.1s linear infinite}
@keyframes sq-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.sq-ask-row{display:flex;gap:9px;margin:18px 0 16px}
.sq-ask-row input{flex:1;background:rgba(243,234,217,.05);border:1.5px solid rgba(232,200,160,.25);border-radius:999px;color:#f3ead9;
  font:500 13.5px/1 'IBM Plex Sans',sans-serif;padding:12px 19px;outline:none;transition:border-color .2s}
.sq-ask-row input:focus{border-color:rgba(232,168,76,.6)}
.sq-ask-row input::placeholder{color:rgba(243,234,217,.32)}
.sq-ask-row button{background:rgba(232,168,76,.15);border:1px solid rgba(232,168,76,.5);color:#f7e2b8;border-radius:999px;
  padding:0 22px;font:700 12.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;transition:all .2s}
.sq-ask-row button:hover{background:rgba(232,168,76,.28)}
.sq-act#sq-ask-go{margin:4px 14px 8px}

#sq-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);z-index:9999;background:#1c130a;
  border:1px solid rgba(232,168,76,.55);color:#f7e2b8;border-radius:14px;padding:14px 24px;font:600 13.5px/1.4 'IBM Plex Sans',sans-serif;
  opacity:0;transition:all .35s cubic-bezier(.2,.8,.2,1);pointer-events:none;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#sq-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  .side-quests-reveal{animation:none}
  .side-quests-reveal::before{animation:none}
  .sq-glow{animation:none}
  .sq-review{transition:none;opacity:1;transform:none}
  .sq-poster-main{transition:none}
  .sq-crew-line .dot{animation:none}
}

.side-quests-reveal .sq-head h3{color:#f7efe0}
.side-quests-reveal .sq-head{position:relative;z-index:2}

/* ═══════════════════ SCROLL STORYTELLING (heyato-inspired) ═══════════════════ */

[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}

[data-reveal="up"] { transform: translateY(28px); }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"] { transform: scale(0.92); }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero role rotator */
.hero-role-rotator {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.hero-role-word {
  color: var(--accent-green-text);
  font-weight: 800;
  display: inline-block;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.hero-role-word.is-swapping {
  opacity: 0;
  transform: translateY(4px);
}

/* Floating pill navbar. The base reset uses `overflow-x: clip` (not `hidden`)
   on html/body on purpose: `hidden` makes body a scroll container that never
   receives the scroll offset, which silently kills every `position: sticky`
   descendant — the header here and the roadmap pin below. `clip` clips the
   same overflow without creating that scroll container. */
header.app-header {
  top: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 12px;
  transition: padding-top 0.35s var(--ease);
}

.header-container {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0 20px;
  height: 64px;
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}

header.app-header.is-scrolled {
  padding-top: 10px;
}

header.app-header.is-scrolled .header-container {
  box-shadow: 0 16px 44px color-mix(in srgb, var(--shadow-strong) 60%, transparent);
  background: color-mix(in srgb, var(--header-bg) 94%, var(--bg-card));
}

.nav-cta {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(6px);
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  white-space: nowrap;
  transition: max-width 0.4s var(--ease), opacity 0.3s var(--ease), filter 0.3s var(--ease), padding 0.4s var(--ease), border-width 0.3s var(--ease);
}

header.app-header.is-scrolled .nav-cta {
  max-width: 220px;
  opacity: 1;
  filter: blur(0);
  padding-left: 16px;
  padding-right: 16px;
  border-width: 1px;
}

/* Counters row */
.counters-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(20px, 4vw, 40px);
}

.counter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 60%, transparent);
}

.counter-item strong {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.counter-item span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

@media (max-width: 640px) {
  .counters-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Reverse-direction marquee (variety) */
.hero-marquee--reverse .hero-marquee-track {
  animation-direction: reverse;
  animation-duration: 34s;
}

.hero-marquee--reverse .hero-marquee-track span {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-amber) 20%, var(--bg-card)), color-mix(in srgb, var(--accent-green) 14%, var(--bg-card)));
  border-color: color-mix(in srgb, var(--accent-amber) 24%, var(--border));
}

/* FAQ section (deliberately warm, cream surface — heyato's "FAQ crema") */
.faq-section {
  margin: clamp(48px, 8vw, 96px) auto;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.faq-section .section-title {
  color: var(--text-primary);
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 0 18px;
}

.faq-trigger {
  width: 100%;
  cursor: pointer;
  padding: 14px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text-muted);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease);
}

.faq-icon::before {
  width: 14px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 14px;
}

.faq-trigger[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Animating to auto height without JS measurement: the panel is a 1-row grid
   that tweens between 0fr and 1fr, and its child clips at that computed
   height. Reduced motion below just removes the transition. */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq-item:has(.faq-trigger[aria-expanded="true"]) .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}

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

/* ═══════════════════ PROJECT ROADMAP (pinned horizontal scrub) ═══════════════ */

.roadmap-section {
  position: relative;
  margin: clamp(40px, 7vw, 88px) 0;
}

.roadmap-sticky {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roadmap-section.is-pinned .roadmap-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 100px;
  padding-bottom: 26px;
}

.roadmap-head {
  flex: 0 0 auto;
}

.roadmap-progress {
  position: relative;
  height: 3px;
  margin-top: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.roadmap-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
}

.roadmap-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.roadmap-viewport::-webkit-scrollbar {
  display: none;
}

.roadmap-section.is-pinned .roadmap-viewport {
  overflow: clip;
}

.roadmap-rail {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 clamp(20px, 6vw, 110px);
  box-sizing: border-box;
}

.roadmap-section.is-pinned .roadmap-rail {
  will-change: transform;
}

.roadmap-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.roadmap-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.roadmap-line-bg {
  stroke: color-mix(in srgb, var(--text-muted) 40%, transparent);
  stroke-dasharray: 5 9;
}

.roadmap-line-fg {
  stroke: var(--accent-green);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-green) 45%, transparent));
}

/* Cards become milestones: evenly spaced, alternating above/below the line.
   Offsets use margin (not transform) so they never collide with the reveal
   system's transforms. */
.roadmap-section.is-pinned .featured-project-grid {
  display: flex;
  overflow: visible;
  scroll-snap-type: none;
  align-items: center;
  gap: clamp(30px, 4.5vw, 64px);
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.roadmap-section.is-pinned .featured-project-grid .project-preview {
  flex: 0 0 clamp(280px, 29vw, 380px);
  scroll-snap-align: none;
  /* The milestone dot lives outside the card box; the base card clips it. */
  overflow: visible;
  opacity: 0.42;
  transform: scale(0.94);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.roadmap-section.is-pinned .featured-project-grid .project-preview:nth-child(odd) {
  margin-bottom: 86px;
}

.roadmap-section.is-pinned .featured-project-grid .project-preview:nth-child(even) {
  margin-top: 86px;
}

.roadmap-section.is-pinned .featured-project-grid .project-preview.is-roadmap-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 26px 70px color-mix(in srgb, var(--shadow-strong) 72%, transparent);
}

/* Milestone dot. Its centre sits 26px above the card's top edge, which is the
   MARKER_OFFSET the path builder in app.js threads the line through. */
.roadmap-section.is-pinned .featured-project-grid .project-preview::before {
  content: '';
  position: absolute;
  top: -26px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid color-mix(in srgb, var(--text-muted) 55%, transparent);
  z-index: 3;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}

.roadmap-section.is-pinned .featured-project-grid .project-preview.is-roadmap-active::before {
  background: var(--accent-green);
  border-color: var(--accent-green-text);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-green) 16%, transparent);
}

.roadmap-hint {
  flex: 0 0 auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.roadmap-section.is-pinned .roadmap-hint {
  opacity: 1;
}

.roadmap-section.is-pinned.is-roadmap-complete .roadmap-hint {
  opacity: 0;
}

/* Not pinned (mobile, reduced motion, no JS): the same cards read as a plain
   horizontal snap carousel. */
.roadmap-section:not(.is-pinned) .roadmap-svg {
  display: none;
}

.roadmap-section:not(.is-pinned) .roadmap-rail {
  display: block;
  padding: 4px 0 20px;
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-section.is-pinned .featured-project-grid .project-preview {
    transition: none;
  }
}

/* ═══════════════════ FLOW SECTION (pinned step reveal + counters) ═══════════ */

.flow-section {
  position: relative;
  margin: clamp(40px, 7vw, 88px) 0;
}

.flow-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flow-section.is-pinned .flow-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding: 90px 0;
}

.flow-head {
  max-width: 640px;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(32px, 5vw, 56px) 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
}

.flow-section.is-pinned .flow-step {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.flow-section.is-pinned .flow-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flow-step-index {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--accent-green-text);
}

.flow-step strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.flow-step span:last-child {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.flow-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
}

.flow-metric strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.flow-metric span {
  display: block;
  margin-top: 6px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Not pinned (mobile, reduced motion): a normal static block, everything
   visible, no sticky, no per-step transition. */
.flow-section:not(.is-pinned) .flow-step {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-section.is-pinned .flow-step {
    transition: none;
  }
}

/* ═══════════════════ CONTACT, OPS & A11Y ═══════════════════ */

.hero-contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
}

.hero-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.hero-contact-link:hover,
.hero-contact-link:focus-visible {
  color: var(--accent-green-text);
}

.hero-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  font-size: 10px;
  font-weight: 800;
}

.footer-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 5vw, 48px) 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.footer-contact-copy h2 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.18;
  margin: 6px 0 10px;
  color: var(--text-primary);
}

.footer-contact-copy p:last-child {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 48ch;
}

.footer-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.footer-contact-direct {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  width: 100%;
  margin-top: 4px;
}

.footer-contact-direct a {
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.footer-contact-direct a:hover,
.footer-contact-direct a:focus-visible {
  color: var(--accent-green-text);
}

.ops-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(48px, 8vw, 88px) auto;
}

.ops-copy .section-deck {
  max-width: 44ch;
}

.ops-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ops-item {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 60%, transparent);
}

.ops-item strong {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.ops-item span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.agents-guide {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  max-width: 68ch;
}

.agents-guide-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.agents-guide-hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-green) 9%, transparent);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.agents-guide-cursor {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: agentsGuidePulse 1.9s ease-out infinite;
}

@keyframes agentsGuidePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-green) 0%, transparent); }
}

/* Keyboard focus: one visible ring everywhere, never removed without a
   replacement. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .agents-guide-cursor { animation: none; }
}

@media (max-width: 860px) {
  .footer-contact,
  .ops-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The hero grid reserves a 360px-min second column for the canvas visual.
   Below ~900px that minimum eats the whole viewport and collapses the copy
   column to 0, wrapping the headline one word per line. One column instead. */
@media (max-width: 900px) {
  .hero-command-center {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* With one column the decorative canvas would sit on top of the copy. */
  .ai-ops-canvas,
  .hero-glow {
    display: none;
  }
}

/* ═══════════════════ HERO WORD ENTRANCE ═══════════════════ */
/* Each word keeps its inline-block box from the first paint, so only opacity
   and transform animate and the headline never reflows. */
.hero h1 .hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

.hero h1.is-entered .hero-word {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--word-index, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero-word,
  .hero h1.is-entered .hero-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Deeper blur on the floating nav pill, per the reference's glass treatment.
   The tint stays theme-driven: a flat white 30% would wash out in dark mode. */
.header-container {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

/* ═══════════════════ SIDE QUESTS: fit + scroll on short viewports ═══════════
   The panel is a full-viewport flex column. Once the crew cards load its
   content is taller than most laptop screens, and with no scrolling every
   child shrank to fit: the poster strip (a scroll container, so its minimum
   height is 0) got crushed from 103px to 43px, squashing the thumbnails, and
   the crew cards were clipped with no way to reach them.
   Now nothing shrinks, the panel scrolls, and the decorative/fixed layers
   (curtains, grain, vignette, spotlight, flash, close button, dust) are
   viewport-fixed so they stay put while the content scrolls underneath. */
.side-quests-reveal {
  justify-content: center;
  justify-content: safe center; /* never push the top out of reach */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 28px;
}

.side-quests-reveal > * {
  flex-shrink: 0;
}

.side-quests-reveal .sq-curtain,
.side-quests-reveal .sq-spotlight,
.side-quests-reveal .sq-vignette,
.side-quests-reveal .sq-grain,
.side-quests-reveal .sq-flash,
.side-quests-reveal .side-quests-close,
.side-quests-reveal::before {
  position: fixed;
}

/* The strip is wider than its box, and `center` on an overflowing flex row
   pushes the first posters off the left edge where they can't be scrolled
   to. `safe center` centers only while everything fits. */
.sq-strip {
  justify-content: center;
  justify-content: safe center;
  align-items: flex-start;
  flex-shrink: 0;
}

/* The JobBot card links to its full case study: make that link read as the
   primary next step rather than one more pill. */
.carousel-proof.case-study-link {
  border-color: color-mix(in srgb, var(--accent-green) 55%, var(--border));
  color: var(--accent-green-text);
  font-weight: 700;
}

/* Shared links (/p/<id>) land on the project's archive row and flash it. */
.archive-row.is-highlighted {
  animation: projectHighlightPulse 1.2s var(--ease) 2;
  background: color-mix(in srgb, var(--accent-green) 8%, transparent);
}

.carousel-proof.share-trigger.is-done {
  color: var(--accent-green-text);
  border-color: color-mix(in srgb, var(--accent-green) 50%, var(--border));
}

/* ═══════════════════ RECRUITER 30-SECOND SUMMARY ═══════════════════ */
.recruiter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-green) 55%, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px var(--font-display);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.recruiter-trigger:hover,
.recruiter-trigger:focus-visible {
  background: color-mix(in srgb, var(--accent-green) 10%, transparent);
  border-style: solid;
  outline: none;
  transform: translateY(-1px);
}
.recruiter-trigger-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-green) 22%, transparent);
}

.recruiter-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
  overflow: auto;
  overscroll-behavior: contain;
}
.recruiter-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 55%, rgba(0, 0, 0, 0.55));
  backdrop-filter: blur(3px);
}
.recruiter-dialog[open] { animation: rsIn 0.28s var(--ease); }
@keyframes rsIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .recruiter-dialog[open] { animation: none; } }

.rs { padding: 26px 28px 24px; }
.rs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rs-eyebrow { margin: 0 0 4px; color: var(--accent-green-text); font: 700 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.rs h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; }
.rs-close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; }
.rs-close:hover, .rs-close:focus-visible { color: var(--text-primary); border-color: var(--border-focus); outline: none; }
.rs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin: 20px 0 6px; }
.rs-grid dt { font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.rs-grid dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.rs-sub { margin: 18px 0 8px; font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.rs-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-projects li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.rs-projects strong { display: block; font-size: 15px; }
.rs-projects span { display: block; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.rs-links { display: flex; gap: 6px; flex: none; }
.rs-links a { font: 700 12px var(--font-display); color: var(--accent-green-text); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.rs-links a:hover { border-color: var(--accent-green); }
.rs-meta { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 0 22px; }
.rs-meta p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chips span { padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-primary); }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.rs-social { font: 700 13px var(--font-display); color: var(--text-secondary); text-decoration: none; }
.rs-social:hover { color: var(--text-primary); }
.rs-full { margin-left: auto; border: 0; background: none; color: var(--text-secondary); font: 600 13px var(--font-display); cursor: pointer; }
.rs-full:hover { color: var(--text-primary); }

@media (max-width: 640px) {
  .rs { padding: 20px 18px; }
  .rs-grid, .rs-meta { grid-template-columns: 1fr; }
  .rs-projects li { flex-direction: column; align-items: flex-start; }
  .rs-full { margin-left: 0; }
}

/* Latest public commits under the contribution calendar */
.github-recent { margin-top: 18px; }
.github-recent-title { margin: 0 0 10px; font: 700 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.github-recent-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.github-recent-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 14px; }
.github-recent-list li:first-child { border-top: 0; }
.github-recent-repo { font: 700 12px var(--font-display); color: var(--accent-green-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.github-recent-list a { color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.github-recent-list a:hover { text-decoration: underline; }
.github-recent-list time { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) {
  .github-recent-list li { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .github-recent-list a { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}

/* ═══════════════════ CINEMATIC HERO ═══════════════════ */
/* Always dark (it's a "screening room"), whatever the site theme. The header
   pill floats over it, so the hero slides up under the sticky header. */
.cine-hero {
  --mx: 0;
  --my: 0;
  --out: 0;
  --cine-ink: #f6f3ec;
  --cine-dim: rgba(246, 243, 236, 0.72);
  --cine-accent: #34d399;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -76px;
  padding: 140px 0 clamp(56px, 9vh, 104px);
  overflow: hidden;
  background: #0a0a0c;
  color: var(--cine-ink);
}

.cine-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  perspective: 1400px;
  overflow: hidden;
}

.cine-wall {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vw;
  height: 190vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  transform:
    translate(-38%, -50%)
    rotateX(calc(34deg + var(--my) * -6deg))
    rotateZ(calc(-18deg + var(--mx) * 4deg))
    scale(calc(1.05 + var(--out) * 0.35));
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
  animation: cine-wall-in 1.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes cine-wall-in {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}

.cine-col {
  overflow: visible;
}

.cine-col-track {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 26px);
  animation: cine-drift 46s linear infinite;
  animation-direction: normal;
}

.cine-col:nth-child(even) .cine-col-track {
  animation-direction: reverse;
  animation-duration: 58s;
}

.cine-col:nth-child(3) .cine-col-track { animation-duration: 64s; }

/* The track holds its tiles twice; moving it by half its height loops
   seamlessly. */
@keyframes cine-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.cine-hero.is-paused .cine-col-track,
.cine-hero.is-paused .cine-live-dot,
.cine-hero.is-paused .cine-scroll-cue i {
  animation-play-state: paused;
}

.cine-tile {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  filter: saturate(0.55) brightness(0.52);
  transition: filter 0.9s ease, box-shadow 0.9s ease, border-color 0.9s ease;
}

.cine-tile.is-lit {
  filter: saturate(1.05) brightness(0.98);
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 30px 90px rgba(16, 185, 129, 0.28);
}

.cine-tile-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  background: #1d1d22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cine-tile-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.cine-tile-bar b {
  margin-left: 8px;
  font: 600 10px/1 'IBM Plex Sans', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cine-tile img,
.cine-tile video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  background: #111;
}

/* Colour grade: a heavy left/bottom falloff keeps the headline legible over
   any screen, plus a vignette so the wall reads as depth, not wallpaper. */
.cine-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.78) 34%, rgba(10, 10, 12, 0.2) 70%, rgba(10, 10, 12, 0.45) 100%),
    linear-gradient(0deg, rgba(10, 10, 12, 0.96) 0%, rgba(10, 10, 12, 0.35) 38%, rgba(10, 10, 12, 0) 60%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.7) 0%, rgba(10, 10, 12, 0) 22%),
    radial-gradient(ellipse at 70% 40%, rgba(16, 185, 129, 0.12), transparent 55%);
}

.cine-grain {
  position: absolute;
  inset: -50%;
  opacity: 0.09;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.cine-copy {
  position: relative;
  width: 100%;
  transform: translateY(calc(var(--out) * -60px));
  opacity: calc(1 - var(--out) * 1.4);
}

.cine-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 600 13px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--cine-ink);
}

.cine-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cine-accent);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: cine-pulse 2.2s ease-out infinite;
}

@keyframes cine-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  80%, 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
}

.cine-hero .cine-title {
  font-family: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  font-variation-settings: 'wdth' 78, 'opsz' 96;
  font-stretch: 78%;
  font-weight: 800;
  font-size: clamp(56px, 10.5vw, 156px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  max-width: 11.5em;
  margin: 0 0 18px;
  color: var(--cine-ink);
  text-wrap: balance;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.45);
}

/* "Construyo ___": the rotating word takes the serif-italic accent. */
.cine-hero .cine-role {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.28em;
  margin: 0 0 22px;
  font-family: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  font-variation-settings: 'wdth' 78, 'opsz' 96;
  font-stretch: 78%;
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--cine-ink);
}

.cine-hero .cine-role .hero-role-word {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: normal;
  color: var(--cine-accent);
}

.cine-kicker {
  max-width: 680px;
  margin: 0 0 14px;
  font: 500 clamp(19px, 1.9vw, 25px)/1.35 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--cine-ink);
}

.cine-sub {
  max-width: 600px;
  margin: 0 0 32px;
  font: 400 clamp(17px, 1.5vw, 20px)/1.55 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--cine-dim);
}

.cine-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-bottom: 28px;
}

.cine-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--cine-accent);
  color: #04130d;
  font: 700 17px/1 'IBM Plex Sans', system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(16, 185, 129, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.cine-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(16, 185, 129, 0.45);
}

.cine-cta:focus-visible,
.cine-ghost:focus-visible,
.story-film:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
}

.cine-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(4, 19, 13, 0.12);
}

.cine-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cine-ink);
  font: 600 15px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cine-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.36);
}

.cine-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  font: 500 15px/1.3 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--cine-dim);
}

.cine-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cine-trust svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--cine-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cine-now {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 6vh, 64px);
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  opacity: calc(1 - var(--out) * 2);
}

.cine-now-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cine-accent);
}

.cine-now-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

.cine-now strong {
  font-size: 19px;
  color: var(--cine-ink);
}

.cine-now-desc {
  font-size: 13px;
  color: var(--cine-dim);
}

.cine-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  font: 600 11px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.5);
  text-decoration: none;
  opacity: calc(1 - var(--out) * 3);
}

.cine-scroll-cue i {
  width: 1px;
  height: 34px;
  background: linear-gradient(rgba(246, 243, 236, 0.6), transparent);
  transform-origin: top;
  animation: cine-cue 2s ease-in-out infinite;
}

@keyframes cine-cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ═══════════════════ ACTS (story + exploded) ═══════════════════ */
.act-kicker {
  margin: 0 0 14px;
  font: 700 13px/1 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green-text);
}

.act-title {
  font-family: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  font-variation-settings: 'wdth' 78, 'opsz' 96;
  font-stretch: 78%;
  font-weight: 800;
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
  margin: 0;
}

.story-act {
  position: relative;
  padding: clamp(96px, 14vh, 160px) 0 clamp(72px, 10vh, 120px);
  scroll-margin-top: 40px;
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* The tilted "sticker" — a label slapped onto the headline. */
.story-sticker {
  display: inline-block;
  margin: 16px 0 30px 0.4em;
  padding: 8px 26px 12px;
  transform: rotate(-3deg);
  background: #0ea5e9;
  color: #fff;
  border: 3px solid #0b0b0d;
  box-shadow: 7px 7px 0 #0b0b0d, 0 24px 40px rgba(14, 165, 233, 0.28);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

:root[data-theme="dark"] .story-sticker {
  border-color: #f6f3ec;
  box-shadow: 7px 7px 0 #f6f3ec, 0 24px 40px rgba(14, 165, 233, 0.22);
}

.story-body {
  max-width: 540px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
}

.story-film {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid var(--text-primary);
  border-radius: 26px;
  overflow: hidden;
  background: #0b0b0d;
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  transform: rotate(1.4deg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.story-film:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

.story-film img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  filter: brightness(0.62);
  transition: filter 0.4s var(--ease);
}

.story-film:hover img { filter: brightness(0.8); }

.story-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  transform: translate(-50%, -62%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease);
}

.story-film:hover .story-film-play { transform: translate(-50%, -62%) scale(1.08); }

.story-film-play svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
  fill: #0b0b0d;
}

.story-film-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: grid;
  gap: 4px;
  justify-items: center;
  color: #fff;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.story-film-text strong { font-size: 20px; }
.story-film-text small { font-size: 13px; opacity: 0.8; }

/* Exploded stack: a tall section with a sticky stage; --explode (0→1) comes
   from scroll position and drives the gap between the plates. */
.exploded-act {
  --explode: 0;
  position: relative;
  height: 280vh;
}

.exploded-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 96px 0 36px;
  overflow: hidden;
}

.exploded-head {
  text-align: center;
}

.exploded-head .act-title { margin-bottom: 12px; font-size: clamp(38px, 5.2vw, 76px); }

.exploded-body {
  max-width: 560px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.exploded-scene {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1600px;
  min-height: 0;
}

.exploded-scene {
  --w: 320px;
  /* Gap between plates: 6px collapsed (one device), 52px exploded. */
  --g: calc(6px + var(--explode) * 46px);
}

.exploded-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  aspect-ratio: 16 / 10;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  /* Screen-space shift first (keeps the stack centred as it grows), then the
     isometric tilt. */
  transform:
    translate(calc(-50% + var(--shift-x, -90px)), calc(-50% + var(--g) * 2.12))
    rotateX(58deg) rotateZ(-38deg);
}

.plate {
  position: absolute;
  inset: 0;
  transform: translateZ(calc((5 - var(--i)) * var(--g)));
}

.plate-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 18px 40px rgba(0, 0, 0, 0.16);
}

.plate-face svg {
  width: 30%;
  height: 30%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotateZ(38deg);
}

.plate--screen .plate-face { background: #0b0b0d; border: 3px solid #0b0b0d; }
.plate--screen .plate-face img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.plate--lock .plate-face { background: linear-gradient(135deg, #f59e0b, #d97706); }
.plate--brain .plate-face { background: linear-gradient(135deg, #10b981, #047857); }
.plate--memory .plate-face { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.plate--messenger .plate-face { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.plate--cloud .plate-face { background: linear-gradient(135deg, #52525b, #18181b); }

/* Labels live in flat 2D (text inside a 3D stack z-fights with the plates)
   and ride the same --g, so each one tracks its plate's height on screen. */
.exploded-labels {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--shift-x, -90px) + var(--w) * 0.6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.plate-label {
  --c: #0b0b0d;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 10px auto;
  column-gap: 10px;
  align-items: center;
  width: max-content;
  max-width: 300px;
  padding: 6px 14px 6px 12px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  transform: translate(calc((1 - var(--explode)) * -24px), calc(-50% + (var(--i) - 2.5) * var(--g) * 0.85));
  opacity: clamp(0, calc((var(--explode) - 0.25 - var(--i) * 0.06) * 4), 1);
}

.plate-label::before {
  content: '';
  grid-row: span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

.plate-label:nth-child(2) { --c: #f59e0b; }
.plate-label:nth-child(3) { --c: #10b981; }
.plate-label:nth-child(4) { --c: #3b82f6; }
.plate-label:nth-child(5) { --c: #a855f7; }
.plate-label:nth-child(6) { --c: #52525b; }
:root[data-theme="dark"] .plate-label:nth-child(1) { --c: #f6f3ec; }

.plate-label strong {
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--text-primary);
}

.plate-label small {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--accent-green-text);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.exploded-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  opacity: clamp(0, calc((var(--explode) - 0.6) * 3), 1);
}

.exploded-made {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--text-secondary);
}

.flag-ar {
  width: 36px;
  height: 24px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, #f6b40e 0 3.5px, transparent 4px),
    linear-gradient(#74acdf 0 33.3%, #fff 33.3% 66.6%, #74acdf 66.6%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.exploded-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cine-cta--dark {
  min-height: 50px;
  padding: 0 24px;
  background: var(--text-primary);
  color: var(--bg);
  box-shadow: none;
}

.cine-cta--dark:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); }

.exploded-demo {
  font-weight: 600;
  color: var(--text-primary);
  text-underline-offset: 4px;
}

.exploded-act.is-static { height: auto; }
.exploded-act.is-static .exploded-sticky { position: relative; height: auto; min-height: 100svh; }
.exploded-act.is-static .exploded-scene { min-height: 520px; }

.signals-act {
  padding: 24px 0 40px;
}

@media (max-width: 900px) {
  .cine-hero {
    padding-top: 120px;
  }

  .cine-wall {
    width: 260vw;
    grid-template-columns: repeat(5, 1fr);
    transform: translate(-40%, -54%) rotateX(30deg) rotateZ(-16deg) scale(calc(1 + var(--out) * 0.3));
  }

  .cine-grade {
    background:
      linear-gradient(0deg, rgba(10, 10, 12, 0.97) 0%, rgba(10, 10, 12, 0.86) 48%, rgba(10, 10, 12, 0.35) 78%, rgba(10, 10, 12, 0.55) 100%);
  }

  .cine-now {
    top: 96px;
    bottom: auto;
    right: 16px;
    min-width: 0;
    padding: 10px 14px;
  }

  .cine-now strong { font-size: 15px; }
  .cine-now-desc { display: none; }
  .cine-scroll-cue { display: none; }

  .cine-actions { flex-direction: column; align-items: stretch; }
  .cine-cta, .cine-ghost { justify-content: center; }

  .story-grid { grid-template-columns: 1fr; }
  .story-sticker { margin-left: 0.2em; }

  .exploded-act { height: 240vh; }
  .exploded-sticky { padding-top: 84px; }
  .exploded-scene { --w: min(190px, 48vw); --shift-x: -29vw; --g: calc(5px + var(--explode) * 41px); }
  .exploded-labels { left: calc(50% + var(--shift-x) + var(--w) * 0.5); }
  .plate-label { max-width: none; padding: 3px 9px 3px 7px; column-gap: 6px; grid-template-columns: 7px auto; border-radius: 9px; }
  .plate-label::before { width: 7px; height: 7px; }
  .plate-label strong { font-size: 12px; white-space: nowrap; }
  .plate-label small { font-size: 9.5px; white-space: nowrap; letter-spacing: -0.02em; }
  .exploded-foot { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-wall { animation: none; opacity: 1; transition: none; }
  .cine-col-track,
  .cine-live-dot,
  .cine-scroll-cue i { animation: none; }
  .cine-copy { transform: none; opacity: 1; }
}

@media (max-height: 860px) {
  .cine-scroll-cue { display: none; }
}

@media (max-width: 600px) {
  .cine-now { display: none; }
}

/* ═══════════════════ SIDE QUESTS: films vs books ═══════════════════ */
.sq-kind-switch {
  display: inline-flex;
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(243, 234, 217, 0.06);
  border: 1px solid rgba(232, 200, 160, 0.18);
}

.sq-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(243, 234, 217, 0.72);
  font: 600 14px/1 'IBM Plex Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.sq-kind b {
  font: 700 11px/1 'IBM Plex Mono', monospace;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(243, 234, 217, 0.1);
}

.sq-kind:hover { color: #fff; }
.sq-kind.active { background: rgba(232, 168, 76, 0.2); color: #f7e2b8; box-shadow: inset 0 0 0 1px rgba(232, 168, 76, 0.5); }
.sq-kind:focus-visible { outline: 2px solid #f5c04e; outline-offset: 2px; }

.sq-book-extra { margin: 0 0 10px; }
.sq-book-extra[hidden] { display: none; }

.sq-book-label {
  margin: 0 0 6px;
  font: 700 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sq-accent, #e8a84c);
}

.sq-book-premise {
  margin: 0 0 16px;
  max-width: 560px;
  font: 400 15.5px/1.6 'IBM Plex Sans', sans-serif;
  color: rgba(247, 239, 224, 0.86);
}

.sq-book-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 18px;
  max-width: 560px;
}

.sq-book-facts .wide { grid-column: 1 / -1; }
.sq-book-facts dt { font: 600 11px/1.2 'IBM Plex Sans', sans-serif; color: rgba(243, 234, 217, 0.5); margin-bottom: 3px; }
.sq-book-facts dd { margin: 0; font: 500 14px/1.4 'IBM Plex Sans', sans-serif; color: rgba(247, 239, 224, 0.92); }

/* Books sit on a shelf: bigger covers, a wooden ledge underneath. */
.sq-strip.is-shelf {
  justify-content: center;
  gap: 18px;
  padding-bottom: 18px;
  background: linear-gradient(transparent calc(100% - 14px), rgba(120, 78, 40, 0.55) calc(100% - 14px), rgba(70, 44, 22, 0.8) calc(100% - 4px), transparent calc(100% - 4px));
}

.sq-strip.is-shelf .sq-thumb {
  width: 92px;
  height: 138px;
  transform-origin: bottom center;
  box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.5);
}

.sq-strip.is-shelf .sq-thumb:hover { transform: translateY(-6px) rotate(-2deg); }
.sq-strip.is-shelf .sq-thumb.active { transform: translateY(-10px); }

@media (max-width: 700px) {
  .sq-kind { padding: 8px 12px; font-size: 13px; }
  .sq-book-facts { grid-template-columns: 1fr; }
  .sq-strip.is-shelf .sq-thumb { width: 64px; height: 96px; }
}

.rq-glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(232, 168, 76, 0.14);
  border: 1px solid rgba(232, 168, 76, 0.35);
  color: #f5c04e;
  font: 700 15px/1 'IBM Plex Sans', sans-serif;
  flex: none;
}