/* ==========================================================================
   mneuronico.com — Homepage stylesheet
   Vanilla CSS, no framework. Section-by-section, mobile-first.
   ========================================================================== */

:root {
  --bg-deep: #05060f;
  --bg-mid:  #0c0a1f;
  --bg-soft: #16142b;
  --ink:     #f5f6fb;
  --ink-dim: rgba(245, 246, 251, 0.72);
  --ink-mut: rgba(245, 246, 251, 0.45);
  --accent:  #ffd166;
  --accent-2:#22d3ee;
  --line:    rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 18px 40px -20px rgba(0,0,0,.7);
  --max-w: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --t-fast: 180ms cubic-bezier(.4,.0,.2,1);
  --t-mid:  340ms cubic-bezier(.4,.0,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ----- Cosmic background -----                                            */
/* Tuned to match the hero's cyan/teal palette so the hero image can fade   */
/* down into this layer without creating a visible horizon line.            */
.bg-grad {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1300px 760px at 14% 6%, rgba(34, 211, 238, .14), transparent 60%),
    radial-gradient(1100px 720px at 88% 14%, rgba(99, 102, 241, .14), transparent 62%),
    radial-gradient(900px 700px at 70% 60%, rgba(28, 241, 232, .08), transparent 70%),
    radial-gradient(700px 520px at 18% 82%, rgba(167, 139, 250, .07), transparent 72%),
    linear-gradient(180deg,
      #060814 0%,
      #0a1228 22%,
      #0c1326 50%,
      #08101e 80%,
      var(--bg-deep) 100%);
}
#bg-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ----- Header ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.05rem var(--gutter) 0.85rem;
  background: linear-gradient(180deg, rgba(5,6,15,.86), rgba(5,6,15,.56));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand img {
  width: clamp(230px, 23vw, 340px);
  height: auto;
  filter: drop-shadow(0 0 12px rgba(34,211,238,.2));
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 2.5vw, 3rem);
  font-size: 1rem;
}
.site-nav a {
  color: rgba(245, 246, 251, .86);
  transition: color var(--t-fast);
}
.site-nav a:hover { color: var(--ink); }
.site-nav .nav-cta {
  color: var(--ink);
  border: 1px solid var(--accent-2);
  padding: 0.58rem 1.35rem;
  border-radius: 8px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.site-nav .nav-cta:hover { border-color: var(--accent-2); background: rgba(34,211,238,.08); }
.nav-dropdown {
  position: relative;
}
/* Invisible bridge below the trigger so hover doesn't break when the     */
/* cursor crosses the small gap between the trigger and the menu.         */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 14px;
  pointer-events: auto;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.55rem;
  background: rgba(10, 12, 22, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-menu::before {
  /* invisible bridge between trigger and menu so hover doesn't break */
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
  border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: rgba(34, 211, 238, .08);
  color: var(--ink);
  outline: none;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 0.36rem 0.55rem;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font: 600 0.78rem/1 var(--font-display);
  letter-spacing: 0.08em;
  transition: border-color var(--t-fast);
}
.lang-toggle:hover { border-color: var(--accent-2); }
.lang-toggle .lang-opt {
  color: rgba(245,246,251,.55);
  transition: color var(--t-fast);
}
.lang-toggle .lang-opt.active { color: var(--ink); }
.lang-toggle .lang-sep {
  color: rgba(245,246,251,.35);
  margin: 0 0.18rem;
}
.lang-toggle:hover .lang-opt:not(.active) { color: rgba(245,246,251,.78); }
.menu-trigger {
  display: none;
  width: 44px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}
.menu-trigger span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px rgba(255,255,255,.18);
}
.menu-trigger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-trigger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-trigger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ----- Generic buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-primary { background: var(--accent); color: #1a1a2e; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost-light { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); padding: 0.6rem 1rem; border-radius: 999px; font-weight: 600; transition: border-color var(--t-fast); }
.btn-ghost-light:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================ */
/* HERO */
/* ============================================================ */
.hero {
  position: relative;
  /* No isolation — the body's bg-grad must show through the hero's faded   */
  /* bottom so the neural backdrop dissolves smoothly into the page.        */
  /* No 100svh minimum on desktop: the portrait column already governs     */
  /* the height, and forcing 100svh padded extra empty space below the     */
  /* content. Mobile re-applies 100svh in its own media query.             */
  padding: clamp(8rem, 11vw, 10rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(3,5,10,.28) 0%, rgba(3,5,10,.1) 42%, rgba(3,5,10,.54) 100%),
    url("/shared/hero/neural-hero-desktop.webp");
  background-size: cover;
  background-position: center;
  opacity: .72;
  transform: scale(1.04);
  animation: heroBackdropDrift 22s ease-in-out infinite alternate;
  /* Fade the neural image out toward the bottom so it dissolves into the   */
  /* body's bg-grad instead of ending in a hard horizon line.               */
  /* End the fade well before the section's bottom so the lower slice of    */
  /* the hero shows the same bg-grad as the page below it — the section     */
  /* boundary then merges seamlessly because both sides paint the same      */
  /* thing.                                                                  */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.32) 74%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.32) 74%, transparent 86%);
}
.hero::after {
  z-index: -1;
  /* Soft cyan kiss near the portrait. No bottom vignette: the bg-grad      */
  /* below the hero is already opaque and continuous, so painting any       */
  /* darkening here would create a visible step at the section boundary.    */
  background:
    radial-gradient(520px 360px at 76% 34%, rgba(20, 218, 218, .08), transparent 70%);
}
.hero-shell {
  width: min(1480px, 100%);
  min-height: min(740px, calc(100svh - 150px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Pin the copy column to the top of the grid row so the name/tagline     */
  /* sit just below the header instead of being centered with the portrait. */
  align-self: start;
  max-width: 670px;
}
.hero-wordmark {
  display: none;
  width: min(520px, 88vw);
  height: auto;
  margin: 0 0 clamp(1.3rem, 2vw, 1.9rem);
  filter: drop-shadow(0 0 30px rgba(16, 212, 212, .26));
}
.hero-kicker {
  display: none;
  margin: 0 0 .85rem;
  color: rgba(34, 211, 238, .9);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* The name is now a small kicker above the headline — what he does (the   */
/* rotating carousel) is the primary content, his name only identifies it. */
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.15vw, 1.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 .9rem;
  text-shadow: none;
}
.hero-tag {
  display: block;
  width: 100%;
  margin: 0;
  align-self: stretch;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* Hover feedback for the carousel link.                                    */
/* The slide colour is *not* hovered: the slides are constantly             */
/* transitioning (transform + opacity over 950 ms, plus a no-transition     */
/* "teleport" step) so a colour-on-hover rule was unreliable — sometimes    */
/* the slide stayed coloured after the cursor left, sometimes it never      */
/* changed. The rule + diamond underneath the carousel are static, so       */
/* they're a clean, reliable place to put the hover signal.                 */
.hero-tag:hover .hero-tag-rule::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34,211,238,.75) 28%,
    rgba(34,211,238,.95) 50%,
    rgba(34,211,238,.75) 72%,
    transparent 100%);
}
.hero-tag:hover .hero-tag-rule::after {
  box-shadow: 0 0 14px rgba(34,211,238,1),
              0 0 30px rgba(34,211,238,.55);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.18);
}
.hero-tag-rule::after {
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.hero-tag-rule::before {
  transition: background var(--t-fast);
}
.hero-tag-track {
  position: relative;
  width: 100%;
  /* The track sets the font-size, slides inherit it. min-height in `em`    */
  /* therefore tracks the actual line-height of wrapped text (3 lines at    */
  /* line-height 1.1 = ~3.3em, with slack to 3.5em).                        */
  font-size: clamp(1.7rem, 3.1vw, 2.7rem);
  min-height: 3.5em;
  overflow: hidden;
}
.hero-tag-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 950ms cubic-bezier(.45,0,.55,1),
              opacity 950ms cubic-bezier(.45,0,.55,1);
  will-change: transform, opacity;
}
.hero-tag-slide.is-active {
  transform: translateX(0);
  opacity: 1;
}
.hero-tag-slide.is-leaving {
  transform: translateX(-110%);
  opacity: 0;
}
.hero-tag-rule {
  width: min(100%, 580px);
  height: 14px;
  margin: 1.6rem 0 1.9rem;
  position: relative;
}
.hero-tag-rule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34,211,238,.55) 28%,
    rgba(34,211,238,.78) 50%,
    rgba(34,211,238,.55) 72%,
    transparent 100%);
}
.hero-tag-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(34,211,238,.85),
              0 0 22px rgba(34,211,238,.4);
}
.hero-loc {
  display: none;
  color: var(--ink-mut);
  font-size: 0.85rem;
  margin: 0 0 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}
.hero .btn {
  min-width: 250px;
  min-height: 68px;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.06rem;
}
.hero .btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero .btn-primary {
  color: #021113;
  background: linear-gradient(135deg, #11d5d5, #0abfc2);
  box-shadow: 0 22px 54px -28px rgba(17,213,213,.9);
}
.hero .btn-ghost {
  border-color: rgba(17,213,213,.82);
  background: rgba(2,8,12,.5);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(17,213,213,.16);
}
.hero .btn-ghost:hover {
  border-color: var(--accent-2);
  color: var(--ink);
  background: rgba(17,213,213,.08);
}
.hero-ask-preview {
  width: min(100%, 610px);
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.65rem;
  padding: 1rem 1rem 1rem 1.45rem;
  color: rgba(245, 246, 251, .72);
  background: rgba(3, 8, 13, .52);
  border: 1px solid rgba(141, 169, 185, .36);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 60px -42px rgba(34,211,238,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.hero-ask-preview:hover,
.hero-ask-preview:focus-within {
  color: var(--ink);
  border-color: rgba(34, 211, 238, .5);
  transform: translateY(-1px);
}
.hero-ask-input {
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1.08rem/1.2 var(--font-body);
}
.hero-ask-input::placeholder {
  color: rgba(245, 246, 251, .52);
}
.hero-ask-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--accent-2);
  flex: 0 0 auto;
}
.hero-ask-icon svg,
.hero-ask-send svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-ask-rule {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,.18);
  flex: 0 0 auto;
}
.hero-ask-send {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 15px;
  color: #021113;
  background: var(--accent-2);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 28px rgba(34,211,238,.38);
  flex: 0 0 auto;
  cursor: pointer;
}
.hero-ask-send .send-up { display: none; }
.hero-ask-note {
  order: 8;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 1.1rem 0 0 1rem;
  color: rgba(245,246,251,.54);
  font-size: .92rem;
}
.hero-ask-note span:first-child {
  color: var(--accent-2);
  font-size: 1.18rem;
  text-shadow: 0 0 12px rgba(34,211,238,.7);
}
.hero-portrait-panel {
  /* Ambient glow vars driven by the lightweight neural canvas. */
  --glow-x: 62%;
  --glow-y: 38%;
  --l1-i: .85;
  --l1-c: 29, 245, 235;
  position: relative;
  min-height: clamp(560px, 56vw, 790px);
  display: grid;
  place-items: center;
  align-self: end;
}
/* Soft ambient bounce that bleeds slightly outside the silhouette — a    */
/* big, low-opacity wash that picks up the lead light's color.             */
.hero-portrait-panel::before {
  content: "";
  position: absolute;
  inset: -2% -10% -6% -10%;
  z-index: -2;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y),
      rgba(var(--l1-c), calc(.18 * var(--l1-i))) 0%,
      rgba(var(--l1-c), calc(.06 * var(--l1-i))) 18%,
      rgba(5, 13, 18, 0) 50%);
  filter: blur(46px);
  opacity: .55;
  transform: translate3d(calc((var(--glow-x) - 50%) * .12), calc((var(--glow-y) - 50%) * .12), 0);
  transition: background-position 120ms linear;
}
.hero-portrait-panel::after {
  content: none;
}
#hero-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
}
.hero-backlight {
  display: none;
}
.hero-portrait {
  position: relative;
  z-index: 2;
  width: min(120%, 750px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center bottom;
  /* Drop-shadows fake a wraparound glow just outside the silhouette,       */
  /* tinted by the lead light. The displacement follows --glow-x/y so the   */
  /* shadow appears to come from the opposite side of the lead light.       */
  filter:
    drop-shadow(0 34px 42px rgba(0,0,0,.62))
    drop-shadow(
      calc((var(--glow-x) - 50%) * -.10)
      calc((var(--glow-y) - 50%) * -.10)
      22px
      rgba(var(--l1-c), calc(.55 * var(--l1-i))));
  -webkit-mask-image: linear-gradient(180deg, #000 0 82%, rgba(0,0,0,.8) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0 82%, rgba(0,0,0,.8) 90%, transparent 100%);
}
.hero-portrait-panel picture {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  width: 100%;
}
.hero-portrait-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  width: 100%;
}
.hero-portrait-fallback {
  grid-area: 1 / 1;
}
.hero-bridge-card {
  position: absolute;
  right: clamp(.6rem, 3vw, 2.2rem);
  bottom: clamp(6.6rem, 11vw, 8.5rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 252px;
  padding: .78rem 1rem;
  color: rgba(245,246,251,.9);
  font-size: .88rem;
  line-height: 1.45;
  background: rgba(24, 27, 34, .74);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.hero-bridge-card:hover,
.hero-bridge-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, .55);
  background: rgba(24, 27, 34, .85);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(34,211,238,.18), 0 0 28px rgba(34,211,238,.18);
  outline: none;
}
.hero-bridge-card:hover .bridge-icon,
.hero-bridge-card:focus-visible .bridge-icon {
  filter: drop-shadow(0 0 6px rgba(34,211,238,.7));
}
.bridge-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-2);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.bridge-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bridge-rule {
  width: 2px;
  height: 36px;
  background: #ef233c;
  box-shadow: 0 0 12px rgba(239,35,60,.42);
  flex: 0 0 auto;
}
@keyframes heroBackdropDrift {
  0% { transform: scale(1.04) translate3d(-1.2%, -.7%, 0); }
  100% { transform: scale(1.09) translate3d(1.4%, .8%, 0); }
}
@keyframes heroAskPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,211,238,.42), 0 0 18px rgba(34,211,238,.85); }
  100% { box-shadow: 0 0 0 13px rgba(34,211,238,0), 0 0 18px rgba(34,211,238,.85); }
}
@media (max-width: 900px) {
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 58px;
    justify-content: flex-end;
    padding-block: .6rem;
    background: linear-gradient(180deg, rgba(5,6,15,.9), rgba(5,6,15,.48));
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .site-header .brand {
    display: none;
  }
  .site-header .site-nav {
    position: fixed;
    top: 58px;
    left: var(--gutter);
    right: var(--gutter);
    display: grid;
    gap: .35rem;
    padding: .85rem;
    background: rgba(6, 9, 18, .96);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
  }
  body.menu-open .site-header .site-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-header .site-nav a,
  .site-header .site-nav .nav-dropdown-trigger {
    display: block;
    padding: .72rem .8rem;
    border-radius: 10px;
  }
  .site-nav .nav-cta {
    text-align: center;
    margin-top: .25rem;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    min-width: 0;
    margin: .15rem 0 .35rem;
    box-shadow: none;
    background: rgba(255,255,255,.035);
  }
  .nav-dropdown::after,
  .nav-dropdown-menu::before {
    content: none;
  }
  .menu-trigger {
    display: block;
    position: relative;
    z-index: 2;
  }
  .hero {
    min-height: 100svh;
    padding-top: clamp(3.95rem, 9vw, 5rem);
    padding-bottom: 1.2rem;
  }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(3,5,10,.2) 0%, rgba(3,5,10,.04) 48%, rgba(3,5,10,.18) 90%, transparent 100%),
      url("/shared/hero/neural-hero-mobile.webp");
    background-position: center top;
    /* Mobile fade matches desktop: end the neural image well before the     */
    /* section bottom so both sides of the hero/spotlight boundary paint     */
    /* the same bg-grad and the seam disappears.                             */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.32) 78%, transparent 90%);
            mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.32) 78%, transparent 90%);
  }
  .hero-shell {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  .hero-copy {
    display: contents;
  }
  .hero-wordmark {
    display: block;
    order: 1;
    width: min(86vw, 390px);
    margin: 0 auto .25rem;
  }
  .hero-kicker {
    display: none;
  }
  .hero-portrait-panel {
    order: 2;
    width: min(100%, 390px);
    min-height: clamp(250px, 62vw, 335px);
    margin: -0.55rem auto -0.85rem;
    transform: none;
  }
  .hero-portrait {
    width: min(88vw, 350px);
  }
  #hero-network-canvas {
    transform: none;
  }
  .hero-name {
    order: 3;
    width: 100%;
    text-align: center;
    /* Mobile keeps the same kicker style as desktop, just centered. */
    font-size: clamp(.78rem, 3.2vw, 1rem);
    margin-bottom: .55rem;
  }
  .hero-tag {
    order: 4;
    width: 100%;
    text-align: center;
  }
  .hero-tag-track {
    /* Mobile carousel headline — readable at small widths but still the    */
    /* dominant text on the page.                                           */
    font-size: clamp(1.35rem, 5.6vw, 2rem);
    max-width: 23rem;
    margin-inline: auto;
    min-height: 3.5em;
  }
  .hero-tag-rule {
    width: 140px;
    margin: 1rem auto 1.05rem;
  }
  .hero-loc {
    order: 5;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }
  .hero-cta {
    order: 6;
    width: 100%;
    justify-content: center;
    gap: .85rem;
  }
  .hero .btn {
    min-width: min(100%, 168px);
    min-height: 54px;
    flex: 1 1 150px;
    max-width: 190px;
    padding-inline: .9rem;
    font-size: 1.02rem;
  }
  .hero-ask-preview {
    order: 7;
    width: min(100%, 350px);
    margin-inline: auto;
    min-height: 68px;
    margin-top: .8rem;
    padding: .72rem .72rem .72rem 1rem;
    border-radius: 16px;
    font-size: .98rem;
  }
  .hero-ask-icon {
    width: 30px;
    height: 30px;
  }
  .hero-ask-rule {
    height: 34px;
  }
  .hero-ask-send {
    width: 44px;
    height: 44px;
    padding: 12px;
  }
  .hero-ask-send .send-plane { display: none; }
  .hero-ask-send .send-up { display: block; }
  .hero-ask-note {
    justify-content: center;
    margin: .95rem 0 0;
    font-size: .82rem;
  }
  .hero-bridge-card {
    display: none;
  }
}

/* ============================================================ */
/* AI ASK PANEL */
/* ============================================================ */
.ask {
  padding: 0 var(--gutter) clamp(2.5rem, 7vw, 4rem);
}
.ask-card {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(22, 20, 43, 0.85) 0%, rgba(12, 10, 31, 0.85) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2rem);
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ask-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 180deg, var(--accent), var(--accent-2), #a78bfa, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
  animation: rotateGlow 16s linear infinite;
}
@keyframes rotateGlow { to { transform: rotate(360deg); } }
.ask-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-2);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.ask-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(34, 211, 238, .8);
  animation: askPulse 1.6s ease-out infinite;
}
@keyframes askPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.7); }
  70%  { box-shadow: 0 0 0 12px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.ask-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0.6rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.ask-card > p {
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin: 0 0 1.2rem;
}
.ask-card a { color: var(--accent); border-bottom: 1px dashed rgba(255,209,102,.4); }
.ask-card a:hover { border-bottom-color: var(--accent); }

.ask-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ask-form:focus-within {
  border-color: var(--accent);
  background: rgba(255,209,102,.04);
}
.ask-form input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
  padding: 0.6rem 0;
}
.ask-form input::placeholder { color: var(--ink-mut); }
.ask-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1a2e;
  border: 0;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.ask-send:hover { transform: scale(1.05); }
.ask-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.chip {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font: 500 0.78rem/1 var(--font-body);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.chip:hover { border-color: var(--accent-2); color: var(--ink); background: rgba(34,211,238,.06); }

.ask-thread {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.8rem;
  font-size: 0.95rem;
}
.ask-thread:empty { display: none; }
.ask-msg {
  border-radius: 14px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  white-space: pre-wrap;
}
.ask-msg.user {
  background: rgba(255,209,102,.06);
  border-color: rgba(255,209,102,.2);
}
.ask-msg.bot {
  background: rgba(34,211,238,.04);
  border-color: rgba(34,211,238,.18);
}
.ask-msg.bot .ask-typing {
  display: inline-flex;
  gap: 4px;
}
.ask-msg.bot .ask-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  animation: typingBlink 1.2s infinite ease-in-out;
}
.ask-msg.bot .ask-typing span:nth-child(2) { animation-delay: .15s; }
.ask-msg.bot .ask-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBlink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(.8rem, 3vw, 2rem);
  background: rgba(2, 4, 10, .76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
body.chat-open {
  overflow: hidden;
  /* JS adds top: -scrollY so the visual viewport stays pinned — required on
     iOS Safari, where overflow:hidden alone lets position:fixed overlays
     drift off-screen after the page has been scrolled. */
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
body.chat-open .chat-overlay {
  opacity: 1;
  pointer-events: auto;
}
.chat-panel {
  width: min(760px, 100%);
  /* Use dvh (dynamic viewport) so the panel shrinks when the Android Chrome
     soft keyboard pushes the layout viewport up. With svh the panel stayed at
     full page height even with the keyboard shown, which clipped it. */
  height: min(720px, calc(100dvh - 2rem));
  max-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 15, 28, .96), rgba(5, 8, 16, .98));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 34px 90px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(34,211,238,.1);
}
.chat-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.chat-kicker {
  margin: 0 0 .2rem;
  color: var(--accent-2);
  font: 700 .72rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.chat-head h2 {
  margin: 0;
  font: 700 clamp(1.15rem, 4vw, 1.45rem)/1.1 var(--font-display);
}
.chat-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.chat-close svg,
.chat-send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-thread {
  min-height: 0;
  margin: 0;
  padding: 1.1rem;
  overflow-y: auto;
  align-content: start;
}
.chat-form {
  display: flex;
  gap: .7rem;
  padding: .9rem;
  border-top: 1px solid var(--line);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  outline: 0;
  padding: .9rem 1rem;
  font: 500 1rem/1.2 var(--font-body);
}
.chat-form input:focus {
  border-color: rgba(34,211,238,.6);
}
.chat-send {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #031216;
  background: var(--accent-2);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .chat-overlay {
    padding: .55rem;
    align-items: end;
  }
  .chat-panel {
    height: calc(100dvh - 1.1rem);
    max-height: calc(100dvh - 1.1rem);
    border-radius: 16px;
  }
  .chat-head {
    padding: .95rem 1rem;
  }
  .chat-thread {
    padding: .85rem;
  }
  .chat-form {
    padding: .75rem;
  }
}

/* ============================================================ */
/* SECTION SCAFFOLD */
/* ============================================================ */
.section, .spotlight {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3rem) var(--gutter);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: 700;
  margin: 0 0 0.4rem;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.section-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  align-self: center;
}
.section-lead {
  color: var(--ink-dim);
  max-width: 720px;
  font-size: 1.02rem;
  margin: 0 0 1.5rem;
}

/* ============================================================ */
/* SPOTLIGHT — BOOK */
/* ============================================================ */
.spotlight.book {
  border-bottom: 1px solid var(--line);
  margin-top: 0;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.spotlight-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ef476f;
  border: 1px solid #ef476f;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.spotlight-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
.spotlight-cover-frame {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.8), 0 0 0 1px var(--line-strong);
  transition: transform var(--t-mid);
}
.spotlight-cover:hover .spotlight-cover-frame { transform: translateY(-4px) rotate(-1deg); }
.spotlight-cover-frame img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.4rem;
  letter-spacing: -0.015em;
}
.spotlight-title em { font-style: italic; color: var(--accent); }
.spotlight-pub {
  font-size: 0.9rem;
  color: var(--ink-mut);
  margin: 0 0 1.1rem;
  letter-spacing: 0.04em;
}
.spotlight-desc {
  color: var(--ink-dim);
  font-size: 1.02rem;
  margin: 0 0 1.5rem;
  max-width: 50ch;
}
@media (max-width: 760px) {
  .spotlight-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .spotlight-desc { margin-left: auto; margin-right: auto; }
}

/* Blog spotlight — cover on the right, square frame */
.spotlight.blog-spotlight {
  border-bottom: 1px solid var(--line);
  margin-top: 0;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.spotlight-grid--blog { grid-template-columns: 1fr minmax(200px, 300px); }
.spotlight-eyebrow--blog { color: #38bdf8; border-color: #38bdf8; }
.spotlight-cover-frame--blog { aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .spotlight-grid--blog { grid-template-columns: 1fr; }
  .spotlight-cover--blog { order: -1; max-width: 280px; }
}

/* ============================================================ */
/* RESEARCH (image-led) */
/* ============================================================ */
.papers-heading {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 1rem;
}
.papers-grid {
  margin-bottom: 2rem;
}
/* Logo-style figure variant — used by the concept-probe card so the        */
/* square logo sits on a muted backdrop. No coloured halo and no             */
/* drop-shadow, so the logo doesn't look blown out and there's nothing       */
/* getting clipped at the figure edges.                                      */
.research-card-figure--logo {
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.18)),
    #0e0d20;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.research-card-figure--logo img {
  width: auto;
  height: 56%;
  max-width: 50%;
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
}
.research-card:hover .research-card-figure--logo img {
  transform: scale(1.04);
}

.research-grid {
  display: grid;
  /* Both grids (Selected papers / Research projects) use the same explicit  */
  /* 2-column layout so cards are exactly the same size in both blocks.      */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
@media (max-width: 720px) {
  .research-grid { grid-template-columns: 1fr; }
}
.research-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast);
  position: relative;
  text-decoration: none;
}
.research-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.research-card-figure {
  margin: 0;
  position: relative;
  background: #000;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.research-card-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 200ms;
  filter: saturate(1.05);
}
.research-card:hover .research-card-figure img { transform: scale(1.04); }
.research-card-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  color: var(--ink-dim);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 1.4rem 1rem 0.7rem;
}
.research-card-body {
  padding: 1.4rem 1.5rem 1.5rem;
  border-left: 3px solid var(--accent);
}
.research-card-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.research-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.research-card p { color: var(--ink-dim); font-size: 0.95rem; margin: 0 0 1rem; }
.research-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.research-card-tags span {
  font-size: 0.72rem;
  color: var(--ink-mut);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* ============================================================ */
/* AWARDS (continuous marquee — never stops) */
/* ============================================================ */
.awards-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Soft fade at both ends so cards dissolve in/out of the gutters */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  padding: 0.5rem 0;
}
.awards-marquee-track {
  display: flex;
  /* Card spacing is built into each card via margin-right so the loop      */
  /* repeats seamlessly (using `gap` here introduces a half-gap jump on     */
  /* the loop boundary).                                                    */
  width: max-content;
  animation: awardsScroll 28s linear infinite;
}
@keyframes awardsScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.award-card {
  flex: 0 0 320px;
  width: 320px;
  margin-right: 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.award-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.award-card-art {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(0,0,0,.35));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.award-card-art img {
  width: min(74%, 220px);
  max-height: 68%;
  object-fit: contain;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.72);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.award-card-art--icon { aspect-ratio: 16 / 10; }
.award-card-mega {
  width: 60%;
  max-width: 140px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--accent);
  opacity: 0.92;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 40%, transparent));
}
.award-card-mega svg { width: 100%; height: 100%; }
.award-card-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 14, 22, .6);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line-strong));
  color: var(--accent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.award-card-badge svg { width: 60%; height: 60%; }
.award-card-body {
  padding: 1.1rem 1.2rem 1.3rem;
  border-top: 3px solid var(--accent);
  flex: 1;
}
.award-card-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.award-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 0.25rem;
}
.award-card-org {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mut);
  margin: 0 0 0.6rem;
}
.award-card-body > p:last-child { font-size: 0.88rem; color: var(--ink-dim); margin: 0; }
.award-card em { color: var(--ink); font-style: italic; }

@media (max-width: 760px) {
  .award-card { flex-basis: 280px; width: 280px; }
  .awards-marquee-track { animation-duration: 22s; }
}
@media (prefers-reduced-motion: reduce) {
  .awards-marquee-track { animation: none; }
}

/* ============================================================ */
/* WORK / CASES + BRANDS MARQUEE */
/* ============================================================ */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.case {
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
}
.case:hover { transform: translateY(-4px); border-color: var(--accent); }

.case-art {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent) 0%, rgba(0,0,0,.4) 80%),
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    #0e0d20;
  position: relative;
  display: grid;
  place-items: center;
}
.case-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.case:hover .case-art img { transform: scale(1.05); }
.case-art--logo {
  /* For when we only have a logo, not a real photo. The gradient backdrop carries the visual weight. */
}
.case-art--logo img {
  width: auto;
  height: auto;
  max-width: 65%;
  max-height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.case-art--spotifai img {
  width: 60%;
  height: auto;
  max-width: 13rem;
  max-height: none;
}
.case-art::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}

.case-body { padding: 1.4rem 1.4rem 1.5rem; }
.case-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.case h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 0.55rem; letter-spacing: -0.01em; color: var(--ink); }
.case p { color: var(--ink-dim); font-size: 0.93rem; margin: 0; }

.brands {
  margin-top: 0;
}
.brands-label {
  text-align: center;
  color: var(--ink-mut);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}
.brands-track-wrap {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands-track {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  animation: brandsScroll 60s linear infinite;
  width: max-content;
}
.brands-track img {
  /* Doubled from 36px so logos are clearly readable in the standalone band. */
  height: 72px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(.5);
  transition: opacity var(--t-fast), filter var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.brands-track img.brand-logo-on-light {
  height: 62px;
  max-width: 190px;
  object-fit: contain;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  opacity: 1;
  filter: none;
}
/* No animation pause on hover — the marquee should keep moving even when    */
/* the cursor is over a logo.                                                */
.brands-track img:hover { opacity: 1; filter: none; }
.brands-track img.brand-logo-on-light:hover {
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.32);
}
@keyframes brandsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================ */
/* OSS (hero card + side card) */
/* ============================================================ */
.oss-feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.2rem;
}
@media (max-width: 860px) {
  .oss-feature { grid-template-columns: 1fr; }
}
.oss-hero-card {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 1.6rem;
  align-items: start;
  background: linear-gradient(140deg, rgba(100,255,218,.06) 0%, rgba(255,255,255,.025) 50%, rgba(255,255,255,.01) 100%);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.7rem;
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast);
  position: relative;
  overflow: hidden;
}
.oss-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 55%);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity var(--t-mid);
}
.oss-hero-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.oss-hero-card:hover::after { opacity: 0.18; }
.oss-hero-mark {
  width: 100%;
  aspect-ratio: 1;
  max-width: 180px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.oss-hero-mark img { width: 65%; height: 65%; object-fit: contain; }
.oss-hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.oss-hero-card h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.oss-hero-card p {
  color: var(--ink-dim);
  font-size: 0.96rem;
  margin: 0 0 1rem;
  max-width: 56ch;
}
.oss-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.oss-hero-tags span {
  font-size: 0.72rem;
  color: var(--ink-mut);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.oss-hero-cta {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform var(--t-fast);
}
.oss-hero-card:hover .oss-hero-cta { transform: translateX(3px); }

.oss-side-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem;
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.oss-side-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.oss-side-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.oss-side-mark img { width: 70%; height: 70%; object-fit: contain; }
.oss-side-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.oss-side-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.oss-side-card p {
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin: 0;
}
@media (max-width: 540px) {
  .oss-hero-card {
    grid-template-columns: 1fr;
    padding: 1.3rem 1.3rem;
  }
  .oss-hero-mark { max-width: 110px; }
}

/* Helper for SVG-based case-art (for life/health dashboards etc.) */
.case-art-svg {
  width: 65%;
  max-width: 220px;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
.case-art--logo .tile-svg {
  width: 88%;
  max-width: 380px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.oss-card {
  display: block;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  transition: transform var(--t-fast), border-color var(--t-fast);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.oss-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.oss-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--accent), transparent 65%);
  opacity: 0;
  transition: opacity var(--t-mid);
  pointer-events: none;
}
.oss-card:hover::after { opacity: 0.05; }
.oss-card-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  overflow: hidden;
}
.oss-card-mark img { width: 70%; height: 70%; object-fit: contain; display: block; }
.oss-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.oss-card p { color: var(--ink-dim); font-size: 0.92rem; margin: 0; }

/* ============================================================ */
/* SCICOMM (image-led horizontal layout) */
/* ============================================================ */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.sc-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  transition: transform var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
  align-items: center;
}
.sc-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.sc-card-art {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), rgba(0,0,0,.3));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sc-card-art img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }
.sc-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.sc-card-body p { color: var(--ink-dim); font-size: 0.92rem; margin: 0; }
@media (max-width: 460px) {
  .sc-card { grid-template-columns: 80px 1fr; gap: 0.8rem; padding: 0.9rem; }
  .sc-card-art { width: 80px; height: 80px; }
}

/* ============================================================ */
/* SELECTED WORK image strip */
/* ============================================================ */
.selected-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: #0e0d20;
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.tile:hover { transform: translateY(-3px); border-color: var(--tile-accent, var(--accent)); }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 200ms;
  filter: brightness(0.9);
}
.tile:hover img { transform: scale(1.06); filter: brightness(1); }
.tile-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.9rem 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  color: var(--ink);
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.tile-meta strong { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.tile-meta span { color: var(--ink-dim); font-size: 0.78rem; }
.tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tile-accent, var(--accent));
  z-index: 1;
}
.tile-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tile-svg svg { width: 100%; height: 100%; display: block; }

/* ============================================================ */
/* LIVE AI PRODUCTS — apps grid */
/* ============================================================ */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}
.app-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast);
  position: relative;
  overflow: hidden;
}
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.app-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.app-card-art {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(0,0,0,.25));
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.app-card-art svg { width: 100%; height: 100%; display: block; }
.app-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.app-card-body p { color: var(--ink-dim); font-size: 0.88rem; margin: 0 0 0.7rem; }
.app-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.app-card-tags span {
  font-size: 0.68rem;
  color: var(--ink-mut);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

/* ============================================================ */
/* ALL PROJECTS WALL */
/* ============================================================ */
.proj-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: 0 0 8px var(--c, var(--accent));
}
.pill:hover {
  border-color: var(--c, var(--accent));
  color: var(--ink);
  background: color-mix(in srgb, var(--c, var(--accent)) 8%, transparent);
  transform: translateY(-1px);
}

/* ============================================================ */
/* TEACHING (continuous marquee — image-led cards) */
/* ============================================================ */
.teach-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  padding: 0.5rem 0;
}
.teach-marquee-track {
  display: flex;
  width: max-content;
  animation: teachScroll 24s linear infinite;
}
@keyframes teachScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.teach-card {
  flex: 0 0 280px;
  width: 280px;
  margin-right: 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.teach-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.teach-card-art {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(0,0,0,.35));
  border-bottom: 1px solid var(--line);
  color: var(--accent);
}
.teach-card-art img {
  width: min(76%, 190px);
  max-height: 64%;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--accent) 40%, transparent));
}
.teach-card-art img.teach-card-logo-on-light {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.72);
}
.teach-card-art svg {
  width: 56%;
  max-width: 130px;
  height: auto;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 40%, transparent));
}
.teach-card-body {
  padding: 1rem 1.2rem 1.2rem;
  border-top: 3px solid var(--accent);
  flex: 1;
}
.teach-card-period {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.teach-card h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
  line-height: 1.25;
  color: var(--ink);
}
.teach-card p {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin: 0;
}
@media (max-width: 760px) {
  .teach-card { flex-basis: 240px; width: 240px; }
  .teach-marquee-track { animation-duration: 18s; }
}
@media (prefers-reduced-motion: reduce) {
  .teach-marquee-track { animation: none; }
}

/* ============================================================ */
/* FOOTER */
/* ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem var(--gutter) 2rem;
  margin-top: 3rem;
  background: rgba(0,0,0,.25);
}
.foot-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
.foot-logo { width: 48px; height: 48px; object-fit: contain; opacity: 0.9; }
.foot-tag { color: var(--ink-mut); font-size: 0.82rem; margin: 0.4rem 0 0; letter-spacing: 0.06em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.9rem 1.3rem; justify-content: center; }
.foot-links a { color: var(--ink-dim); font-size: 0.9rem; transition: color var(--t-fast); }
.foot-links a:hover { color: var(--accent); }
.foot-cta { text-align: right; }
.foot-fineprint {
  text-align: center;
  margin: 1.8rem 0 0;
  color: var(--ink-mut);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
@media (max-width: 740px) {
  .foot-grid { grid-template-columns: 1fr; text-align: center; }
  .foot-cta { text-align: center; }
}

/* ============================================================ */
/* Reveal-on-scroll */
/* ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .brands-track { animation: none; }
}