/* ═══════════════════════════════════════════════════════════
   ALEEFY — sticker-sheet design system
   Palette is strictly the three brand colors + tints of them:
   ink #2b2b2b · paper #FFFFFF · green #00A86B
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #2b2b2b;
  --paper: #FFFFFF;
  --green: #00A86B;

  /* tints/shades of the three brand colors only */
  --green-deep: #007A4E;
  --mint: rgba(0, 168, 107, 0.08);
  --mint-strong: rgba(0, 168, 107, 0.16);
  /* opaque twin of --mint: safe for hovers that sit on dark backgrounds */
  --mint-solid: #E2F4EC;
  --ink-soft: rgba(43, 43, 43, 0.62);

  --font-display: 'Baloo 2', 'Baloo Bhaijaan 2', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Rubik', 'Segoe UI', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius: 22px;
  --border: 3px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);

  --paw-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cellipse%20cx='50'%20cy='68'%20rx='25'%20ry='20'/%3E%3Cellipse%20cx='20'%20cy='42'%20rx='11'%20ry='14'/%3E%3Cellipse%20cx='41'%20cy='29'%20rx='12'%20ry='15'/%3E%3Cellipse%20cx='63'%20cy='29'%20rx='12'%20ry='15'/%3E%3Cellipse%20cx='83'%20cy='42'%20rx='11'%20ry='14'/%3E%3C/svg%3E");
}

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* the default iOS/Chrome tap flash paints a blue rectangle over anything
     with a click handler (the mascot, buttons, chips). every interactive
     element already has its own :active/:hover feedback, so kill the flash. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; letter-spacing: 0; }

h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.22rem; font-weight: 700; }

p { margin: 0 0 1em; }

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

::selection { background: var(--green); color: var(--paper); }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.container { width: min(1140px, 92%); margin-inline: auto; }

.section { padding-block: clamp(72px, 9vw, 120px); }

section[id] { scroll-margin-top: 100px; }

.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 56ch; }

/* ── eyebrow labels ───────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--mint);
  border: 2px solid var(--green);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 0 0 18px;
}

[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 0.95rem; }

.eyebrow-dark { background: rgba(255, 255, 255, 0.08); color: var(--paper); border-color: var(--green); }

/* ── buttons: squishy stickers ────────────────────────── */
.btn {
  --mx: 0px; --my: 0px; --px: 0px; --py: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 14px 28px;
  border: var(--border);
  border-radius: 16px;
  cursor: pointer;
  /* uses the `translate` property (not `transform: translate(...)`) so it
     composes with .reveal's `transform: translateY(...)` instead of losing
     to it — that's why the vets CTA didn't feel the magnet the way the
     hero CTA did */
  translate: calc(var(--mx) + var(--px)) calc(var(--my) + var(--py));
  box-shadow: var(--shadow-sm);
  transition: translate 180ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 140ms ease;
  will-change: translate;
  white-space: nowrap;
}

.btn:active { --px: 4px; --py: 4px; box-shadow: 1px 1px 0 var(--ink); }

.btn-primary { background: var(--green); color: var(--paper); }
.btn-ghost   { background: var(--paper); color: var(--ink); }
.btn-light   { background: var(--paper); color: var(--ink); }
.btn-outline { background: transparent; color: var(--paper); border-color: var(--paper); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--green-deep); }
  /* opaque tint: a translucent one would let dark panels bleed through */
  .btn-ghost:hover, .btn-light:hover { background: var(--mint-solid); color: var(--ink); }
  .btn-outline:hover { background: rgba(255, 255, 255, 0.14); }
}

.btn-sm { padding: 10px 20px; font-size: 0.94rem; box-shadow: 4px 4px 0 var(--ink); }
.btn-lg { padding: 17px 38px; font-size: 1.14rem; }

[dir="rtl"] .btn { box-shadow: -5px 5px 0 var(--ink); }
[dir="rtl"] .btn:active { --px: -4px; box-shadow: -1px 1px 0 var(--ink); }
[dir="rtl"] .btn-sm { box-shadow: -4px 4px 0 var(--ink); }

/* ── nav ──────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-top: 14px;
  transition: transform 380ms var(--ease-out);
  will-change: transform;
}

/* slides up out of the way while reading down, returns on the way back up */
.nav.nav-hidden { transform: translateY(calc(-100% - 16px)); }

.nav-inner {
  width: min(1140px, 94%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--paper);
  border: var(--border);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 10px 16px;
  transition: box-shadow 200ms var(--ease-out);
}

[dir="rtl"] .nav-inner { box-shadow: -6px 6px 0 var(--ink); }

.nav.scrolled .nav-inner { box-shadow: 3px 3px 0 var(--ink); }
[dir="rtl"] .nav.scrolled .nav-inner { box-shadow: -3px 3px 0 var(--ink); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { border-radius: 10px; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }

.nav-links { display: flex; gap: 26px; margin-inline-start: auto; }

.nav-links a {
  font-weight: 500;
  font-size: 0.97rem;
  position: relative;
  transition: color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--green-deep); }
}

.nav-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.nav-links + .nav-actions { margin-inline-start: 0; }

/* an <a> so each language is a real, crawlable URL — styled as a button */
.lang-btn {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 140ms ease, transform 120ms var(--ease-out);
}

.lang-btn:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .lang-btn:hover { background: var(--mint); }
}

/* ── hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: clamp(130px, 17vh, 180px);
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  font-weight: 800;
}

.hero-title .hl { position: relative; display: inline-block; white-space: nowrap; }

.hero-title .hl::after {
  content: "";
  position: absolute;
  inset-inline: -0.08em;
  bottom: 0.04em;
  height: 0.38em;
  background: var(--green);
  border-radius: 8px;
  z-index: -1;
  transform: rotate(-1.2deg) scaleX(0);
  transform-origin: left center;
  animation: hl-swipe 550ms var(--ease-out) 600ms forwards;
}

[dir="rtl"] .hero-title .hl::after { transform-origin: right center; }

@keyframes hl-swipe { to { transform: rotate(-1.2deg) scaleX(1); } }

.hero-sub { font-size: 1.16rem; color: var(--ink-soft); max-width: 46ch; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }

.hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 0;
  margin: 34px 0 0;
}

.hero-stats li { display: flex; flex-direction: column; }

.hero-stats strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--green-deep);
  line-height: 1.1;
}

.hero-stats span { font-size: 0.86rem; color: var(--ink-soft); }

/* the stage: mascot / Higgsfield video frame */
.hero-stage-wrap { position: relative; }

.stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border: var(--border);
  border-radius: 36px;
  box-shadow: 9px 9px 0 var(--green);
  background:
    radial-gradient(circle at 50% 42%, var(--mint-strong), transparent 62%),
    var(--paper);
  overflow: hidden;
}

[dir="rtl"] .stage { box-shadow: -9px 9px 0 var(--green); }

.mascot {
  width: 82%;
  height: 82%;
  margin: 9% auto 0;
  animation: floaty 3.6s ease-in-out infinite;
  transition: opacity 300ms ease;
  cursor: pointer;
}

.stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.stage.has-video .stage-video { opacity: 1; }
.stage.has-video .mascot { opacity: 0; }

/* mascot anatomy */
.m-toe   { fill: var(--green); animation: toe-bounce 3.6s ease-in-out infinite; }
.t1 { animation-delay: 0s; } .t2 { animation-delay: 0.12s; }
.t3 { animation-delay: 0.24s; } .t4 { animation-delay: 0.36s; }
.m-head  { fill: var(--ink); }
.m-heart { fill: var(--green); transform-box: fill-box; transform-origin: center; animation: heartbeat 5.2s ease-in-out infinite; }
.m-white { fill: var(--paper); }
.m-pupil { fill: var(--ink); }
.m-beak  { fill: var(--green); }

.m-eye { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease-out; }
.mascot.blink .m-eye { transform: scaleY(0.06); }

.m-all { transform-box: fill-box; transform-origin: 50% 58%; }
.mascot.boop .m-all { animation: boop 520ms var(--ease-pop); }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes toe-bounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

@keyframes heartbeat {
  0%, 6%, 100% { transform: scale(1); }
  2%           { transform: scale(1.09); }
  4%           { transform: scale(1.02); }
}

@keyframes boop {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.09, 0.88); }
  60%  { transform: scale(0.94, 1.06); }
  100% { transform: scale(1, 1); }
}

/* floating chips around the stage */
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--paper);
  border: var(--border);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  animation: chip-float 4.2s ease-in-out infinite;
  z-index: 2;
}

[dir="rtl"] .chip { box-shadow: -4px 4px 0 var(--ink); }

.chip-1 { top: -16px; inset-inline-start: -14px; animation-delay: 0s; }
.chip-2 { bottom: 16%; inset-inline-end: -22px; animation-delay: 1.3s; }
.chip-3 { bottom: -18px; inset-inline-start: 12%; animation-delay: 2.4s; }

/* Arabic-only: "موعد التنظيف يوم الجمعة" is noticeably wider than
   "Grooming on Friday", so its box reaches across into the mascot's
   beak when anchored at the middle-left slot. Lift it into the empty
   area above the toes; chip-1 sits opposite it on the top-right, and
   the layout still feels balanced. */
[dir="rtl"] .chip-2 { top: 12%; bottom: auto; }

@keyframes chip-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1.4deg); }
}

/* ambient background paws (masked, brand green) */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.float-paw {
  position: absolute;
  font-size: 0;
  background: var(--green);
  opacity: 0.10;
  -webkit-mask-image: var(--paw-mask);
  mask-image: var(--paw-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: drift 11s ease-in-out infinite alternate;
}

.fp-1 { width: 120px; height: 120px; top: 12%; left: 4%;  rotate: -18deg; }
.fp-2 { width: 70px;  height: 70px;  top: 64%; left: 9%;  rotate: 14deg;  animation-delay: 1.5s; }
.fp-3 { width: 95px;  height: 95px;  top: 8%;  right: 8%; rotate: 22deg;  animation-delay: 3s; }
.fp-4 { width: 60px;  height: 60px;  top: 46%; right: 3%; rotate: -10deg; animation-delay: 4.5s; }
.fp-5 { width: 85px;  height: 85px;  bottom: 4%; right: 30%; rotate: 8deg; animation-delay: 2s; }

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 0 -22px; }
}

/* ── marquee ──────────────────────────────────────────── */
.marquee {
  background: var(--green);
  color: var(--paper);
  border-top: var(--border);
  border-bottom: var(--border);
  overflow: hidden;
  transform: rotate(-1.4deg) scale(1.03);
  margin-block: 28px 8px;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: mq 30s linear infinite;
  /* iOS Safari sometimes evicts the compositor layer when the tab is
     backgrounded; will-change + translate3d keeps it on the GPU so it
     doesn't come back with the text faded out */
  will-change: transform;
  backface-visibility: hidden;
}

[dir="rtl"] .marquee-track { animation-direction: reverse; }

.marquee-group {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 14px 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  white-space: nowrap;
}

.marquee-group i { font-style: normal; font-size: 0.95rem; }

@keyframes mq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── issues / about ───────────────────────────────────── */
.issues-grid,
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.issues-cards,
.why-cards { display: grid; gap: 20px; }

.swap-card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

[dir="rtl"] .swap-card { box-shadow: -5px 5px 0 var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .swap-card:hover { transform: translate(-3px, -3px) rotate(-0.5deg); box-shadow: 8px 8px 0 var(--ink); }
  [dir="rtl"] .swap-card:hover { transform: translate(3px, -3px) rotate(0.5deg); box-shadow: -8px 8px 0 var(--ink); }
}

.swap-card .old {
  margin: 0 0 8px;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1.5px;
}

.swap-card .new {
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.swap-card .check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  background: var(--green);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  transform: translateY(3px);
}

/* ── features ─────────────────────────────────────────── */
.features { background: var(--mint); border-block: var(--border); }

.section-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .lead { margin-inline: auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.feature-card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px 26px 22px;
  transform: perspective(750px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

[dir="rtl"] .feature-card { box-shadow: -5px 5px 0 var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover { --ty: -6px; box-shadow: 9px 9px 0 var(--ink); }
  [dir="rtl"] .feature-card:hover { box-shadow: -9px 9px 0 var(--ink); }
}

.feature-card p { margin: 0; color: var(--ink-soft); font-size: 0.99rem; }

.f-icon {
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  background: var(--mint);
  border: var(--border);
  border-radius: 20px;
  margin-bottom: 18px;
  transition: transform 220ms var(--ease-pop);
}

.f-icon svg { width: 44px; height: 44px; }

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover .f-icon { transform: rotate(-6deg) scale(1.07); }
}

/* ── vets (dark panel) ────────────────────────────────── */
.vets-panel {
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 40px;
  box-shadow: 12px 12px 0 var(--green);
  padding: clamp(36px, 5vw, 68px);
}

[dir="rtl"] .vets-panel { box-shadow: -12px 12px 0 var(--green); }

.vets-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.vets-copy .lead { color: rgba(255, 255, 255, 0.72); }

.vet-benefits { list-style: none; padding: 0; margin: 30px 0 34px; display: grid; gap: 22px; }

.vet-benefits li { display: flex; gap: 16px; align-items: flex-start; }

.vet-benefits h3 { margin-bottom: 4px; color: var(--paper); }

.vet-benefits p { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.97rem; }

.paw-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--green);
  border: 3px solid var(--paper);
  border-radius: 15px;
  font-size: 1.15rem;
  rotate: -4deg;
}

/* portal mockup */
.vets-mock { position: relative; }

.mock-card {
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--green);
  padding: 24px;
  rotate: 2deg;
  transition: rotate 250ms var(--ease-out);
}

[dir="rtl"] .mock-card { box-shadow: -8px 8px 0 var(--green); rotate: -2deg; }

@media (hover: hover) and (pointer: fine) {
  .vets-mock:hover .mock-card { rotate: 0deg; }
}

.mock-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

.mock-avatar {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-size: 1.5rem;
  background: var(--mint-strong);
  border: var(--border);
  border-radius: 16px;
}

.mock-title { display: flex; flex-direction: column; line-height: 1.25; }
.mock-title strong { font-family: var(--font-display); font-size: 1.15rem; }
.mock-title small { color: var(--ink-soft); font-size: 0.85rem; }

.mock-id {
  margin-inline-start: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-deep);
  background: var(--mint);
  border: 2px solid var(--green);
  border-radius: 999px;
  padding: 4px 10px;
}

.mock-rows { display: grid; gap: 10px; }

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 500;
  font-size: 0.96rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.tag-done { background: var(--green); color: var(--paper); border: 2px solid var(--ink); }
.tag-due  { background: var(--paper); color: var(--ink); border: 2px dashed var(--ink); }

.tick, .tag i { font-style: normal; display: inline-block; }

#vetMock .tick { transform: scale(0); }
#vetMock.play .mock-row:nth-child(1) .tick { animation: pop-in 400ms var(--ease-pop) 200ms forwards; }
#vetMock.play .mock-row:nth-child(2) .tick { animation: pop-in 400ms var(--ease-pop) 500ms forwards; }

.mock-sent {
  margin-top: 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--green-deep);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms var(--ease-out) 900ms, transform 350ms var(--ease-out) 900ms;
}

#vetMock.play .mock-sent { opacity: 1; transform: translateY(0); }

.mock-stat {
  position: absolute;
  bottom: -22px;
  inset-inline-end: -10px;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  border: var(--border);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--paper);
  padding: 10px 18px;
  rotate: -3deg;
}

[dir="rtl"] .mock-stat { box-shadow: -4px 4px 0 var(--paper); rotate: 3deg; }

@keyframes pop-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── community ────────────────────────────────────────── */
.community {
  background-image: radial-gradient(var(--mint-strong) 2.2px, transparent 2.8px);
  background-size: 30px 30px;
}

.community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.post-card {
  justify-self: center;
  width: min(400px, 100%);
  background: var(--paper);
  border: var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 18px;
  rotate: 1.6deg;
  transition: rotate 250ms var(--ease-out);
}

[dir="rtl"] .post-card { box-shadow: -7px 7px 0 var(--ink); rotate: -1.6deg; }

@media (hover: hover) and (pointer: fine) {
  .post-card:hover { rotate: 0deg; }
}

.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.post-avatar {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  font-size: 1.3rem;
  background: var(--mint-strong);
  border: var(--border);
  border-radius: 50%;
}

.post-title { display: flex; flex-direction: column; line-height: 1.25; }
.post-title small { color: var(--ink-soft); font-size: 0.82rem; }

.post-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background-color: var(--mint);
  background-image: radial-gradient(var(--mint-strong) 2px, transparent 2.5px);
  background-size: 24px 24px;
  border: var(--border);
  border-radius: 18px;
}

.post-photo span { font-size: 5rem; animation: floaty 3.2s ease-in-out infinite; }

.post-caption { margin: 14px 4px 12px; font-size: 0.98rem; }

.post-actions { display: flex; align-items: center; gap: 18px; }

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 140ms ease, transform 120ms var(--ease-out);
}

.like-btn:active { transform: scale(0.93); }

.like-btn.liked { background: var(--mint-strong); }

.like-btn.liked .like-heart { animation: boop 450ms var(--ease-pop); display: inline-block; }

.post-comment { font-weight: 500; font-size: 0.92rem; color: var(--ink-soft); }

/* ── footer ───────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--paper);
  border-radius: 36px 36px 0 0;
  margin-top: 30px;
  padding: 62px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 44px 36px;
  align-items: start;
}

.footer-brand-row { display: flex; align-items: center; gap: 10px; }
.footer-brand-row img { border-radius: 9px; }
.footer-brand p { margin: 14px 0 16px; color: rgba(255, 255, 255, 0.66); font-size: 0.98rem; max-width: 34ch; }

.footer-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--paper);
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  transition: color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-mail:hover { color: var(--green); }
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 18px;
}

[dir="rtl"] .footer-col h4 { letter-spacing: 0; }

.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  transition: color 140ms ease, transform 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { color: var(--green); transform: translateX(3px); }
  [dir="rtl"] .footer-col a:hover { transform: translateX(-3px); }
}

.socials { display: flex; gap: 12px; }

.social {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.24);
  color: var(--paper);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-pop), color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .social:hover {
    background: var(--green);
    border-color: var(--green);
    /* ink icons on green read cleanly (5.3:1); white on green sits at
       ~3:1 and the little strokes read as "washed out" against the fill */
    color: var(--ink);
    transform: translateY(-3px) rotate(-3deg);
  }
}

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

.footer-base p { margin: 0; }

/* ── toast ────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 26px;
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  max-width: min(90vw, 480px);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: 0.95rem;
  border: 3px solid var(--green);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--green);
  padding: 14px 22px;
  text-align: center;
  z-index: 90;
  opacity: 0;
  transform: translateY(84px);
  transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-pop);
  pointer-events: none;
}

.toast.show { opacity: 1; transform: translateY(0); }

/* ── paw click-stamps & confetti ──────────────────────── */
.paw-stamp {
  position: fixed;
  width: 34px; height: 34px;
  background: var(--green);
  -webkit-mask-image: var(--paw-mask);
  mask-image: var(--paw-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 80;
  rotate: var(--rot, 0deg);
  animation: stamp 650ms ease-out forwards;
}

@keyframes stamp {
  0%   { transform: scale(0.3); opacity: 0.9; }
  45%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}

.confetti {
  position: fixed;
  font-size: 1.35rem;
  pointer-events: none;
  z-index: 95;
  animation: confetti-fall var(--dur, 1200ms) var(--ease-io) forwards;
}

@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 1; }
  15%  { transform: translate(calc(var(--tx) * 0.4), -70px) rotate(calc(var(--rot) * 0.4)) scale(1.1); }
  100% { transform: translate(var(--tx), 240px) rotate(var(--rot)) scale(0.9); opacity: 0; }
}

/* ── scroll reveal (only hides content when JS is running) ── */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}

html.js .reveal.in { opacity: 1; transform: translateY(0); }

/* ── journey timeline ─────────────────────────────────── */
.journey {
  position: relative;
  background:
    radial-gradient(circle at 12% 24%, rgba(0, 168, 107, 0.06), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(0, 168, 107, 0.05), transparent 40%),
    var(--paper);
}

.journey-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  position: relative;
  counter-reset: journey;
}

/* the dashed connecting line runs behind all steps */
.journey-track::before {
  content: "";
  position: absolute;
  top: 40px;
  inset-inline-start: 6%;
  width: 88%;
  height: 3px;
  background-image: linear-gradient(90deg, var(--green) 60%, transparent 60%);
  background-size: 14px 3px;
  background-repeat: repeat-x;
  z-index: 0;
  opacity: 0.35;
}

.journey-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  z-index: 1;
}

.journey-step .js-icon {
  display: grid;
  place-items: center;
  width: 80px; height: 80px;
  background: var(--paper);
  border: var(--border);
  border-radius: 24px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 260ms var(--ease-pop), box-shadow 220ms var(--ease-out), background-color 220ms ease;
}

[dir="rtl"] .journey-step .js-icon { box-shadow: -4px 4px 0 var(--ink); }

.journey-step:last-child .js-icon {
  background: var(--green);
}

.journey-step:last-child .js-icon svg path { fill: var(--paper); }

.journey-step .js-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
  max-width: 14ch;
}

@media (hover: hover) and (pointer: fine) {
  .journey-step:hover .js-icon {
    transform: translate(-2px, -4px) rotate(-3deg);
    box-shadow: 7px 8px 0 var(--ink);
    background: var(--mint);
  }
  [dir="rtl"] .journey-step:hover .js-icon {
    transform: translate(2px, -4px) rotate(3deg);
    box-shadow: -7px 8px 0 var(--ink);
  }
}

@media (max-width: 900px) {
  .journey-track {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 380px;
    margin-inline: auto;
  }
  .journey-track::before {
    top: 31px;
    inset-inline-start: 30px;   /* dead centre of the 62px icons */
    width: 3px;
    height: calc(100% - 62px);
    background-image: linear-gradient(180deg, var(--green) 60%, transparent 60%);
    background-size: 3px 14px;
    background-repeat: repeat-y;
  }
  .journey-step {
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 20px;
  }
  .journey-step .js-icon {
    width: 62px; height: 62px;
    border-radius: 20px;
    flex: none;
  }
  .journey-step .js-label {
    max-width: none;
    text-align: start;
  }
}

/* ── ecosystem ────────────────────────────────────────── */
.ecosystem {
  background-color: var(--mint);
  background-image: radial-gradient(rgba(0, 168, 107, 0.18) 2px, transparent 2.5px);
  background-size: 28px 28px;
  border-block: var(--border);
}

.eco-stage {
  position: relative;
  aspect-ratio: 800 / 520;
  max-width: 900px;
  margin: 0 auto;
}

.eco-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.eco-line {
  fill: none;
  stroke: var(--green-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 12;
  opacity: 0;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1400ms var(--ease-out), opacity 500ms ease;
}

.eco-stage.in .eco-line { stroke-dashoffset: 0; opacity: 0.75; }
.eco-stage.in .eco-line:nth-child(1) { transition-delay: 100ms; }
.eco-stage.in .eco-line:nth-child(2) { transition-delay: 220ms; }
.eco-stage.in .eco-line:nth-child(3) { transition-delay: 340ms; }
.eco-stage.in .eco-line:nth-child(4) { transition-delay: 460ms; }

.eco-hub {
  position: absolute;
  top: 50%;
  /* physical `left` on purpose: inset-inline-start flips in RTL but the
     -50% translate does not, which pushed the hub off centre in Arabic */
  left: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: var(--border);
  border-radius: 30px;
  box-shadow: 8px 8px 0 var(--green);
  padding: 22px 30px;
  z-index: 2;
  opacity: 0;
  transform: scale(0.85) translate(0, 0);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-pop);
}

.eco-hub::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 2.5px solid var(--green);
  border-radius: 42px;
  opacity: 0;
  transition: opacity 600ms ease 900ms;
  animation: eco-pulse 3.6s var(--ease-out) infinite;
  pointer-events: none;
}

.eco-stage.in .eco-hub::before { opacity: 0.4; }

@keyframes eco-pulse {
  0%   { transform: scale(1); opacity: 0.4; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

[dir="rtl"] .eco-hub { box-shadow: -8px 8px 0 var(--green); }

.eco-stage.in .eco-hub {
  opacity: 1;
  transform: scale(1);
}

.eco-hub img { border-radius: 12px; }

.eco-hub .brand-word { font-size: 1.28rem; }

.eco-node {
  position: absolute;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--paper);
  border: var(--border);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px 20px 14px 14px;
  max-width: 230px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-pop), box-shadow 220ms var(--ease-out);
  z-index: 2;
}

[dir="rtl"] .eco-node { box-shadow: -5px 5px 0 var(--ink); padding: 14px 14px 14px 20px; }

.eco-stage.in .eco-node { opacity: 1; transform: translateY(0); }

.eco-stage.in .eco-node.eco-tl { transition-delay: 620ms; }
.eco-stage.in .eco-node.eco-tr { transition-delay: 720ms; }
.eco-stage.in .eco-node.eco-bl { transition-delay: 820ms; }
.eco-stage.in .eco-node.eco-br { transition-delay: 920ms; }

.eco-node.eco-tl { top: 6%;  inset-inline-start: 2%; }
.eco-node.eco-tr { top: 6%;  inset-inline-end: 2%; }
.eco-node.eco-bl { bottom: 6%; inset-inline-start: 2%; }
.eco-node.eco-br { bottom: 6%; inset-inline-end: 2%; }

.eco-node-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  font-size: 1.35rem;
  background: var(--mint-strong);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  flex: none;
}

.eco-node h3 {
  margin: 0 0 2px;
  font-size: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
}

.eco-node p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .eco-node:hover { transform: translate(-2px, -3px); box-shadow: 8px 8px 0 var(--ink); }
  [dir="rtl"] .eco-node:hover { transform: translate(2px, -3px); box-shadow: -8px 8px 0 var(--ink); }
}

@media (max-width: 780px) {
  .eco-stage {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px 0;
    max-width: 420px;
  }
  .eco-lines { display: none; }
  .eco-hub {
    position: static;
    translate: none;
    justify-self: center;
    order: 0;
    padding: 18px 26px;
  }
  .eco-node {
    position: static;
    max-width: none;
    opacity: 1;
    transform: none;
    transition: box-shadow 200ms var(--ease-out);
  }
  .eco-node.eco-tl { order: -2; }
  .eco-node.eco-tr { order: -1; }
  .eco-node.eco-bl { order: 1; }
  .eco-node.eco-br { order: 2; }
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage-wrap { max-width: 480px; margin-inline: auto; width: 100%; margin-top: 16px; }
  .issues-grid, .why-grid, .vets-grid, .community-grid { grid-template-columns: 1fr; }
  .post-card { justify-self: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-links + .nav-actions { margin-inline-start: auto; }
  .hero { padding-top: 118px; }
  .hero-title { font-size: clamp(2.15rem, 9vw, 2.8rem); }

  /* the headline is free to wrap here, so the highlighter follows every
     line instead of a single bar that would run off the screen */
  .hero-title .hl {
    display: inline;
    white-space: normal;
    background-image: linear-gradient(to top, var(--green) 0.32em, transparent 0.32em);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: hl-grow 550ms var(--ease-out) 600ms forwards;
  }
  .hero-title .hl::after { display: none; }
  [dir="rtl"] .hero-title .hl { background-position: 100% 0; }

  .chip { font-size: 0.8rem; padding: 7px 12px; }
  .chip-2 { inset-inline-end: -6px; }
  .marquee-group { font-size: 1rem; gap: 20px; }
  .vets-panel { border-radius: 30px; box-shadow: 8px 8px 0 var(--green); }
  [dir="rtl"] .vets-panel { box-shadow: -8px 8px 0 var(--green); }
  .mock-stat { position: static; display: inline-block; margin-top: 26px; }
}

@keyframes hl-grow { to { background-size: 100% 100%; } }

@media (max-width: 560px) {
  /* keep the whole nav bar on one comfortable line */
  .nav { padding-top: 10px; }
  .nav-inner { gap: 10px; padding: 8px 12px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  [dir="rtl"] .nav-inner { box-shadow: -4px 4px 0 var(--ink); }
  .nav.scrolled .nav-inner { box-shadow: 2px 2px 0 var(--ink); }
  [dir="rtl"] .nav.scrolled .nav-inner { box-shadow: -2px 2px 0 var(--ink); }
  .brand { gap: 8px; }
  .brand-logo { width: 32px; height: 32px; }
  .brand-word { font-size: 1.15rem; }
  .lang-btn { padding: 7px 11px; font-size: 0.88rem; border-radius: 10px; }
  .nav .btn-sm { padding: 9px 14px; font-size: 0.88rem; box-shadow: 3px 3px 0 var(--ink); }
  [dir="rtl"] .nav .btn-sm { box-shadow: -3px 3px 0 var(--ink); }

  .hero { padding-top: 104px; }
  .stage { border-radius: 28px; box-shadow: 7px 7px 0 var(--green); }
  [dir="rtl"] .stage { box-shadow: -7px 7px 0 var(--green); }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: auto; }
  .footer { border-radius: 28px 28px 0 0; }
}

@media (max-width: 430px) {
  .btn { padding: 13px 20px; font-size: 0.96rem; }
  .hero-ctas { gap: 12px; }
  .hero-stats { gap: 10px 22px; }
  .swap-card { padding: 18px 18px; }
  .feature-card { padding: 24px 20px 20px; }
  .f-icon { width: 62px; height: 62px; border-radius: 18px; margin-bottom: 14px; }
  .f-icon svg { width: 38px; height: 38px; }
  .eco-node { padding: 12px 16px 12px 12px; }
  [dir="rtl"] .eco-node { padding: 12px 12px 12px 16px; }
}

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

  .mascot, .m-toe, .m-heart, .chip, .float-paw, .marquee-track, .post-photo span {
    animation: none !important;
  }

  html.js .reveal { transform: none; transition: opacity 300ms ease; }

  .hero-title .hl::after { animation: none; transform: rotate(-1.2deg) scaleX(1); }
  .hero-title .hl { animation: none; background-size: 100% 100%; }

  .nav { transition: none; }

  .feature-card, .swap-card, .btn { transition-property: background-color, color, box-shadow; }
}

/* ── dark mode ──────────────────────────────────────────
   Auto-detected via prefers-color-scheme: dark; no toggle. Palette
   locked to the same three brand colors (green, white, dark grey)
   so the character of the design stays intact.

   Strategy: flip --paper and --ink at :root so most rules invert
   automatically. Then handle the specific cases where naive
   inversion breaks the design:
   - SVG icon fills: keep whites white so bodies pop, only flip the
     small dark bits and line-only strokes.
   - Elements with green backgrounds: force text to stay white.
   - Vets panel and footer: locally re-scope --paper/--ink so their
     "dark card" identity survives and the hardcoded rgba(255,255,255)
     tints inside stay on the dark bg they were designed for.
   - Mascot: lock the head/eye palette to the light-mode look and
     add a green outline + glow for definition against the dark stage. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #2b2b2b;
    --ink: #FFFFFF;
    --ink-soft: rgba(255, 255, 255, 0.62);
    --mint-solid: rgba(0, 168, 107, 0.22);
    /* --mint and --mint-strong stay translucent; they read correctly
       against whatever local background they end up over */
  }

  /* SVG icon rules — the goal is to preserve the sticker-sheet look:
     white icon bodies should stay white so they pop against the dark
     card (same silhouette as light mode), and only the dark bits need
     to become visible against the new dark bg.

     - Dark FILLS (bell clapper, journey-icon eyes, small solid dots) flip
       to white so they don't disappear into the card.
     - Dark STROKES on paths with a fill stay dark: they sit ON the white/
       green fill, defining the shape from the inside (the outer half
       harmlessly blends with the dark card).
     - Dark STROKES on line-only paths (bell handle, marketplace bag
       handle, stethoscope arms) flip to white so they stay visible
       against the dark card where they extend beyond any fill.
     - White strokes and green stay as-is. */
  svg [fill="#2b2b2b"] { fill: var(--ink); }
  svg [fill="none"][stroke="#2b2b2b"],
  svg [stroke="#2b2b2b"]:not([fill]) {
    stroke: var(--ink);
  }

  /* Anywhere the brand green is a background, text must stay white —
     pure inversion would flip color to dark grey, which is not legible. */
  ::selection,
  .btn-primary,
  .marquee,
  .swap-card .check,
  .tag-done,
  .mock-stat {
    color: #FFFFFF;
  }
  .journey-step:last-child .js-icon svg path { fill: #FFFFFF; }

  /* Eyebrow badge — dark-green text on translucent green over the dark
     bg drops below the readable-contrast line. Brighten to accent green. */
  .eyebrow { color: var(--green); }

  /* Vets panel and footer keep the "dark section on the page" pattern
     from light mode. By re-scoping --paper and --ink to their light
     values here, every child that uses those variables — mock card,
     ghost button, mock id pill, paw-check — picks up the correct
     colors automatically, and the hardcoded rgba(255,255,255,X) tints
     inside stay on a dark background where they belong. */
  .vets-panel, .footer {
    --paper: #FFFFFF;
    --ink: #2b2b2b;
    --ink-soft: rgba(43, 43, 43, 0.62);
  }
  /* Re-assert eyebrow-dark's white text so the general .eyebrow override
     above doesn't clobber it (it lives inside the still-dark vets panel). */
  .eyebrow-dark { color: var(--paper); }

  /* Mascot — keep the head dark so the mascot's identity carries through
     to dark mode. Two effects give it presence against the dark stage:
     a moderate green stroke on the head circle, and a drop-shadow glow
     on the parent SVG that surrounds the whole silhouette (head + paw)
     with a soft brand-green aura. Eyes stay locked to their light-mode
     palette so the character reads the same. */
  .mascot  { filter: drop-shadow(0 4px 14px rgba(0, 168, 107, 0.70)); }
  .m-head  {
    fill: #2b2b2b;
    stroke: var(--green);
    stroke-width: 8;
  }
  .m-white { fill: #FFFFFF; }
  .m-pupil { fill: #2b2b2b; }

  /* Eco-lines connect the hub to nodes and were tinted --green-deep
     (#007A4E) for a subtle look on white. On the dark bg the deeper
     shade drops below readable — swap in the accent green. */
  .eco-line { stroke: var(--green); }
}