/* ============================================================
   Rwanda Build Program — premium motherboard experience
   ------------------------------------------------------------
   Palette
     substrate midnight blue : #0A1220 → #101B2E  (canvas draws this)
     platinum text/borders   : #C8D2DE / rgba(200,210,222,…)
     ambient energy          : cyan #5FB8C9, teal #3E8E8A
     INTERACTION color       : electric violet #8B5CF6
                               (reserved for chip hover/click + focus rings;
                                never used by the ambient animation)
   Glass panels
     background rgba(13,20,34,.62)  — raise toward .72 for denser text
     backdrop blur 12px             — "controlled blur"
     1px platinum border @ 18%      — fine metallic edge
     inset top highlight            — internal light catch
   ============================================================ */

:root {
  --ink: #EDF2F7;
  --ink-soft: #B7C3D2;
  --platinum: #C8D2DE;
  --cyan: #5FB8C9;
  --teal: #3E8E8A;
  --violet: #8B5CF6;               /* interaction color — exclusive */
  --bg: #0A1220;                   /* fallback page color behind canvas */
  --glass: rgba(13, 20, 34, 0.62); /* glass panel transparency */
  --glass-dense: rgba(13, 20, 34, 0.72);
  --glass-border: rgba(200, 210, 222, 0.18);
  --glass-highlight: rgba(255, 255, 255, 0.07);
  --radius: 18px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- fixed background canvas + vignette ---------- */

#board-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none; /* never blocks links, scrolling, or content */
}

.board-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(5, 9, 18, 0) 52%, rgba(3, 6, 12, 0.55) 100%);
}

/* ---------- links, buttons, focus ---------- */

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #8AD3E2; text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visually hidden but available to screen readers / SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--glass-dense);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--ink);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(160deg, #63BCCB, #3E8E8A);
  color: #06121C;
}
.btn-primary:hover { filter: brightness(1.1); color: #06121C; text-decoration: none; }
.btn-ghost {
  border-color: rgba(200, 210, 222, 0.4);
  color: var(--ink);
  background: rgba(13, 20, 34, 0.45);
}
.btn-ghost:hover { border-color: var(--platinum); color: #fff; text-decoration: none; }

/* ---------- top navigation ---------- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 44px);
  background: rgba(9, 15, 27, 0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200, 210, 222, 0.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; color: #fff; }
.brand-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-sub {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav ul {
  display: flex;
  list-style: none;
  gap: clamp(8px, 1.6vw, 22px);
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav ul a {
  color: var(--ink-soft);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 6px 2px;
}
.site-nav ul a:hover { color: #fff; text-decoration: none; }
.site-nav .nav-cta {
  color: var(--cyan);
  border: 1px solid rgba(95, 184, 201, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ---------- sections & panels ---------- */

main { position: relative; z-index: 2; }

.section {
  position: relative;
  padding: clamp(70px, 12vh, 130px) clamp(18px, 5vw, 72px);
  max-width: 1280px;
  margin: 0 auto;
}

.kicker {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--cyan);
  margin-bottom: 14px;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
h3 { font-size: 1.08rem; margin: 26px 0 8px; color: #DDE6EF; }

p + p { margin-top: 14px; }

/* Glass panel — the core surface. Translucent enough that chips and
   beams stay visible beneath; long-text areas add a .scrim instead of
   raising panel opacity. */
.panel {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),   /* internal top highlight */
    0 18px 50px rgba(3, 7, 14, 0.45);        /* subtle drop shadow */
  padding: clamp(26px, 4vw, 48px);
  color: var(--ink-soft);
}
.panel h2, .panel h3 { color: var(--ink); }

/* Editorial variation: panels differ in width and alignment */
.panel-wide   { max-width: 720px; }
.panel-mid    { max-width: 560px; }
.panel-left   { margin-right: auto; }
.panel-right  { margin-left: auto; }
.panel-center { margin-left: auto; margin-right: auto; }
.panel-full   { max-width: 1080px; }

/* Dark local scrim for text sitting directly on the board (open sections) */
.scrim {
  background: radial-gradient(130% 160% at 50% 50%, rgba(8, 14, 26, 0.72) 0%, rgba(8, 14, 26, 0.35) 62%, rgba(8, 14, 26, 0) 100%);
  border-radius: 14px;
  padding: 10px 18px;
}

/* ---------- hero ---------- */

.section-hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* start right below the background artwork's logo: the logo sits 72px
     down and is ~370 design-px tall at edge-to-edge width scale */
  padding-top: calc(84px + 19.3vw);
}
.hero-inner { max-width: 1180px; } /* room for title + badge side by side */


/* Keep the title and the key-figures row on single lines on desktop
   (they may wrap only on small screens where they physically must). */
@media (min-width: 700px) {
  .section-hero h1 { white-space: nowrap; }
  .section-hero .hero-stats { flex-wrap: nowrap; }
}
.hero-lede {
  margin-top: 22px;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: #C9D4E0;
  max-width: 560px;
}
.hero-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Title row: h1 on the left, official badge logo on the right */
.hero-head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  justify-content: flex-start; /* badge first, then title, left to right */
}
.hero-head h1 { flex: 0 1 auto; }
.hero-logo {
  width: clamp(120px, 14vw, 190px);
  border-radius: 16px;
  border: 1px solid rgba(200, 210, 222, 0.28);
  box-shadow: 0 16px 40px rgba(3, 7, 14, 0.55);
  display: block;
}
.hero-abbr {
  display: block;
  margin-top: 12px;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--cyan);
}

/* Hero numbers block — commercial proof points on the first screen */
.hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
  margin-top: 26px;
  width: fit-content;   /* the scrim box hugs the stats, not the header width */
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats .figure {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  background: linear-gradient(160deg, #E8EEF5, #9FB4C6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.hero-stats .figure-label {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.btn-text {
  color: var(--ink-soft);
  padding: 12px 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-text:hover { color: #fff; }

/* Partner strip — named institutional partners */
.section-partners { padding-top: 0; padding-bottom: 0; }
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  padding: 18px 22px;
  border-top: 1px solid rgba(200, 210, 222, 0.14);
  border-bottom: 1px solid rgba(200, 210, 222, 0.14);
  background: rgba(9, 15, 27, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.partner-strip span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.partner-strip span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: rgba(200, 210, 222, 0.4);
}

/* Product status tags — accurate deployment language at a glance */
.status-tag {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid;
}
.tag-deployed { color: var(--cyan); border-color: rgba(95, 184, 201, 0.5); }
.tag-pilot    { color: var(--platinum); border-color: rgba(200, 210, 222, 0.4); }

/* Founder publications + quote */
.pubs { margin: 18px 0 6px; }
.pubs summary {
  cursor: pointer;
  color: var(--cyan);
  font-size: 0.92rem;
  padding: 6px 0;
}
.pubs ul {
  margin: 10px 0 6px 18px;
  font-size: 0.88rem;
  display: grid;
  gap: 8px;
}
.founder-quote {
  margin-top: 24px;
  padding: 18px 22px;
  border-left: 2px solid var(--teal);
  background: rgba(10, 17, 30, 0.45);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #C9D4E0;
}
.founder-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.scroll-line {
  display: block;
  width: 1px;
  height: 34px;
  margin: 8px auto 0;
  background: linear-gradient(to bottom, var(--platinum), transparent);
}

/* ---------- timeline ---------- */

.timeline-title { margin-top: 34px; }
.timeline {
  list-style: none;
  margin-top: 12px;
  border-left: 1px solid rgba(200, 210, 222, 0.25);
  padding-left: 18px;
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -21.5px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(95, 184, 201, 0.6);
}
.timeline .year {
  color: var(--cyan);
  font-weight: 600;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- impact (open section) ---------- */

.section-impact { text-align: center; }
.impact-heading { display: inline-block; margin: 0 auto 34px; }
/* Centered variant of the standard .hero-stats metric component
   (same figures/labels everywhere — one look for numbers site-wide). */
.hero-stats-center {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: left;
}
.hero-stats .figure-label { max-width: 220px; }
.impact-note {
  max-width: 620px;
  margin: 36px auto 0;
  font-size: 0.95rem;
  color: #C9D4E0;
}

/* ---------- projects ---------- */

.section-heading { margin-bottom: 40px; display: inline-block; }

/* Compact project grid — the wider portfolio after the two featured cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 10px auto 0;
}
.project-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 34px rgba(3, 7, 14, 0.4);
  padding: 22px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.project-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 6px;
  border: 1px solid var(--glass-border);
  margin-bottom: 12px;
}
.project-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.project-card .project-tag { margin: 2px 0 10px; }

/* About page sub-hero (shorter than the home hero) */
.section-hero-sub { min-height: 62vh; }

/* Embedded Superhuman/Coda forms — visitors submit without leaving the site */
.form-embed-wrap { margin-top: 26px; }
.form-embed {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: #F6F8FA;
  display: block;
}
.form-fallback {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 10px;
  text-align: center;
}

/* Placeholder for the Coda forms (wired up later) */
.btn-soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* Embedded map on the Visit page */
.map-frame {
  width: 100%;
  height: 380px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  display: block;
  margin-top: 22px;
  background: rgba(10, 17, 30, 0.5);
}

/* Opportunity cards (Invest / Partner / Join pages) — reuse card look, no logo */
.project-card h3 a { color: var(--ink); }
.card-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }

.partner-strip-inline {
  margin-top: 34px;
  border-radius: 14px;
  border: 1px solid rgba(200, 210, 222, 0.14);
}

/* ---------- press ---------- */

.press-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 10px;
}
.press-card a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px;
  border: 1px solid rgba(200, 210, 222, 0.14);
  border-radius: 14px;
  background: rgba(10, 17, 30, 0.5);
  color: var(--ink-soft);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.press-card a:hover {
  text-decoration: none;
  border-color: rgba(95, 184, 201, 0.5);
  transform: translateY(-2px);
}
.press-source {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cyan);
}
.press-headline { color: var(--ink); font-weight: 600; line-height: 1.35; }
.press-note { font-size: 0.84rem; }

/* Split panel — STANDARD for sections with a lead image:
   300px .panel-media on the left, header + copy on the right.
   Stacks vertically on small screens. */
.panel-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: start;
  max-width: 920px;
}
.panel-split .panel-media { margin-bottom: 0; }
@media (max-width: 860px) {
  .panel-split { grid-template-columns: 1fr; }
  .panel-split .panel-media { margin-bottom: 6px; }
}

/* ---------- flip grid (rotating photo squares) ---------- */

.flip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* three rows of five squares */
  gap: 14px;
  padding: 4px clamp(18px, 5vw, 72px) 34px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .flip-grid { grid-template-columns: repeat(3, 1fr); } /* 5 rows of 3 on small screens */
}

/* Section media (event logo / section photo inside a panel).
   STANDARD: 300px wide, full image shown — never cropped or warped,
   resized only. Use .panel-media (+ .panel-media-photo for photos)
   on every section image added in the future. */
.panel-media {
  display: block;
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  padding: 14px;
  border: 1px solid var(--glass-border);
  margin-bottom: 22px;
}
.panel-media-photo {
  padding: 0;
  background: none;
  box-shadow: 0 14px 34px rgba(3, 7, 14, 0.5);
}

.flip-tile {
  aspect-ratio: 1;
  perspective: 900px;               /* depth for the 3D flip */
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.35, 0.1, 0.25, 1);
}
.flip-inner.is-flipped { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(200, 210, 222, 0.25);  /* platinum frame */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }

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

/* ---------- gallery (open section) ---------- */

.section-gallery { max-width: none; padding-left: 0; padding-right: 0; }
.section-gallery .section-heading { margin-left: clamp(18px, 5vw, 72px); }

/* ---------- contact ---------- */

.panel-contact { max-width: 760px; text-align: center; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 30px 0 8px;
}
.contact-grid h3 { margin-top: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--teal); }
address { font-style: normal; }
.panel-contact .hero-actions { justify-content: center; margin-top: 26px; }

.social-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
  font-size: 0.88rem;
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 44px 20px 120px; /* bottom space so MurugoBot doesn't cover text */
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: linear-gradient(to bottom, rgba(8, 14, 26, 0.2), rgba(6, 11, 20, 0.85));
}
.site-footer p + p { margin-top: 6px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 22px;
}
.footer-links a {
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-links a:hover { color: #fff; }

/* open (non-collapsed) publications list on the media page */
.pubs-list {
  margin: 16px 0 8px 18px;
  font-size: 0.9rem;
  display: grid;
  gap: 8px;
}
.site-footer .copyright { margin-top: 18px; opacity: 0.7; }

/* ---------- pause/play control ---------- */

.motion-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-dense);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.motion-toggle:hover { border-color: rgba(200, 210, 222, 0.45); }
.motion-toggle svg { fill: var(--ink); }
.motion-toggle .icon-play { display: none; }
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: inline; }

/* ---------- MurugoBot ---------- */

.murugobot-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.murugobot {
  position: relative;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 1px solid rgba(200, 210, 222, 0.3);
  border-radius: 50%;
  background: rgba(246, 248, 250, 0.95);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(3, 7, 14, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.murugobot:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(3, 7, 14, 0.6);
}
.murugobot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Rebuilt eyes — overlay elements sized/positioned over the gif's visor.
   Percentages are relative to the 92px button and were tuned against the
   500×500 source image.

   .bot-eye is an opaque "socket" patch that covers the gif's original
   (larger) eyes; the visible white eyeball inside is half that size. */
.bot-eye {
  position: absolute;
  width: 15.5%;
  height: 15.5%;
  border-radius: 50%;
  background: #AFC7F3;             /* matches the visor interior */
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot-eye-left  { left: 36.2%; top: 48.4%; }
.bot-eye-right { left: 55.8%; top: 48.0%; }

.bot-eyeball {
  width: 50%;                      /* eyes reduced by 50% */
  height: 50%;
  border-radius: 50%;
  background: #FDFEFE;
  border: 1px solid rgba(60, 90, 200, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-pupil {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: #3D63D8;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 30, 0.4);
  transition: transform 0.08s linear; /* smooths the cursor following */
  will-change: transform;
}

.murugobot-bubble {
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--glass-dense);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-size: 0.84rem;
  box-shadow: 0 10px 26px rgba(3, 7, 14, 0.5);
}

/* ---------- chip hover cursor hint ---------- */
/* Applied to <body> by interact.js when the pointer is over a chip
   (and not over an interactive element). */
body.chip-hover { cursor: pointer; }

/* ---------- responsive simplification ---------- */

@media (max-width: 860px) {
  .brand-sub { display: none; }
  .project { flex-direction: column; }
  .panel-wide, .panel-mid { max-width: none; }
  .gallery-strip img { height: 210px; }
  .murugobot { width: 72px; height: 72px; }
  .murugobot-wrap { right: 12px; bottom: 12px; }
  .motion-toggle .motion-label { display: none; }
  .motion-toggle { padding: 11px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .press-card a, .murugobot, .bot-pupil { transition: none; }
}