/* ============================================================
   Beezbiotech — Science Light theme
   Brand: FutureBrand 2024 · Font substitute: Manrope (Avantt)
   ============================================================ */

:root{
  /* Ink (deep blue-violet) */
  --ink:        #0E1336;
  --ink-2:      #232a63;
  --ink-soft:   #5b6391;
  --ink-fixed:  #0E1336;   /* footer / ink-band surface — never flips in dark mode */

  /* Science Light gradient family */
  --blue:        #4f93f4;
  --blue-bright: #6fb7ff;
  --blue-deep:   #2f6fe0;
  --periwinkle:  #becaff;
  --lilac:       #cbb6f4;
  --lilac-soft:  #e7dcfb;

  /* Surfaces */
  --paper: #fbfbfe;
  --white: #ffffff;
  --mist:  #eef1fb;
  --mist-2:#e3e8f8;
  --line:  rgba(14,19,54,.10);
  --line-2:rgba(14,19,54,.06);

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 18px;

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--periwinkle); color:var(--ink); }

/* ---------- Type scale ---------- */
.display{
  font-weight:200;
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
h2.section-title{
  font-weight:250;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.06;
  letter-spacing:-.025em;
}
h3{ font-weight:600; letter-spacing:-.01em; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.32rem); color:var(--ink-soft); font-weight:400; }
.eyebrow{
  font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-deep);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--blue); display:inline-block; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ padding-block:clamp(64px,9vw,128px); position:relative; }
.center{ text-align:center; }
.muted{ color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:.96rem; letter-spacing:.005em;
  padding:.82em 1.5em; border-radius:100px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 10px 30px -12px rgba(14,19,54,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(47,111,224,.6); background:var(--blue-deep); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -16px rgba(0,0,0,.4); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  padding:10px var(--pad);
  background:rgba(251,251,254,.78);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line-2);
}
.nav-logo img{ height:26px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav-links a.link{
  font-size:.95rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:4px 0; transition:color .3s;
}
.nav-links a.link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--blue-deep); transition:width .35s var(--ease);
}
.nav-links a.link:hover{ color:var(--ink); }
.nav-links a.link:hover::after,
.nav-links a.link.active::after{ width:100%; }
.nav-links a.link.active{ color:var(--ink); }
.nav-cta{ font-size:.9rem; padding:.62em 1.15em; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; border-radius:2px; }

@media (max-width:860px){
  .nav-toggle{ display:block; z-index:101; }
  .nav-links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:26px;
    background:rgba(251,251,254,.96); backdrop-filter:blur(18px);
    transform:translateY(-100%); transition:transform .5s var(--ease); pointer-events:none;
  }
  .nav-links.open{ transform:translateY(0); pointer-events:auto; }
  .nav-links a.link{ font-size:1.3rem; }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:120px; padding-bottom:80px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(203,182,244,.42), transparent 55%),
    radial-gradient(120% 120% at 8% 100%, rgba(111,183,255,.34), transparent 52%),
    linear-gradient(180deg, #fff, var(--paper));
}
#flow{ position:absolute; inset:0; width:100%; height:100%; z-index:1; cursor:crosshair; }
.hero .wrap{ pointer-events:none; }
.hero .wrap a, .hero .wrap button, .hero .wrap .btn{ pointer-events:auto; }
.flow-hint{
  position:absolute; left:50%; bottom:84px; transform:translateX(-50%);
  z-index:3; display:flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:500; color:var(--ink-soft);
  background:rgba(255,255,255,.66); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:100px; padding:.5em 1.05em;
  box-shadow:0 8px 24px -16px rgba(14,19,54,.5);
  transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none;
}
.flow-hint .hdot{ width:7px; height:7px; border-radius:50%; background:var(--blue-deep); animation:pulse 1.8s var(--ease) infinite; }
.flow-hint.dim{ opacity:.55; }
.flow-hint.gone{ opacity:0; transform:translateX(-50%) translateY(8px); }
@media (max-width:600px){ .flow-hint{ bottom:70px; font-size:.74rem; } }
.hero .wrap{ position:relative; z-index:2; width:100%; }
.hero-inner{ max-width:760px; }
.hero .display{ margin:.34em 0 .5em; }
.hero .display .grad{
  background:linear-gradient(100deg, var(--blue-deep), var(--lilac) 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2em; }
.scroll-hint{
  position:absolute; left:var(--pad); bottom:30px; z-index:2;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:10px;
}
.scroll-hint .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; transform:scale(.7);} 50%{ opacity:1; transform:scale(1);} }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ---------- Mission band ---------- */
.band-ink{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(79,147,244,.28), transparent 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(203,182,244,.22), transparent 60%),
    var(--ink-fixed);
  color:#fff; overflow:hidden;
}
.band-ink .eyebrow{ color:var(--blue-bright); }
.band-ink .eyebrow::before{ background:var(--blue-bright); }
.band-ink .muted, .band-ink .lede{ color:rgba(255,255,255,.72); }
.mission-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:center; }
.mission-grid h2{ font-weight:250; font-size:clamp(2rem,4.2vw,3.3rem); letter-spacing:-.025em; line-height:1.08; }
.mission-stat{
  border-left:1px solid rgba(255,255,255,.18); padding-left:30px;
}
.mission-stat .big{
  font-weight:200; font-size:clamp(4rem,11vw,8rem); line-height:.9;
  background:linear-gradient(120deg,#fff,var(--blue-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mission-stat .sub{ font-size:.95rem; color:rgba(255,255,255,.66); margin-top:.4em; max-width:24ch; }
@media (max-width:760px){ .mission-grid{ grid-template-columns:1fr; } .mission-stat{ border-left:0; border-top:1px solid rgba(255,255,255,.18); padding:24px 0 0; } }

/* ---------- Pillars / feature grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:54px; }
@media (max-width:860px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-4{ grid-template-columns:1fr; } }
.grid-3.flow-steps{ grid-template-columns:repeat(4,1fr); position:relative; }
.grid-3.flow-steps::before{
  content:""; position:absolute; top:43px; left:6%; right:6%; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 10%, var(--line-2) 90%, transparent);
  z-index:0; pointer-events:none;
}
.grid-3.flow-steps .card{ position:relative; z-index:1; }
@media (max-width:1020px){ .grid-3.flow-steps{ grid-template-columns:repeat(2,1fr); } .grid-3.flow-steps::before{ display:none; } }
.step-duration{ width:50%; margin:14px auto 0 25%; display:flex; flex-direction:column; align-items:center; }
.step-duration .sd-bracket{ width:100%; height:12px; border:1.5px solid var(--blue-deep); border-top:none; border-radius:0 0 8px 8px; opacity:.55; }
.step-duration .sd-pill{ margin-top:6px; background:var(--mist); padding:.3em 1em; font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--blue-deep); border-radius:100px; }
@media (max-width:1020px){ .step-duration{ display:none; } }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 30px; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(14,19,54,.32); border-color:transparent; }
.card .ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(140deg, var(--mist), var(--mist-2));
  color:var(--blue-deep);
}
.card h3{ font-size:1.22rem; margin-bottom:.5em; }
.card p{ color:var(--ink-soft); font-size:.98rem; }
.card .seq{ position:absolute; top:22px; right:26px; font-size:.78rem; font-weight:700; color:var(--mist-2); letter-spacing:.1em; }

/* Pillar photo accent — layered behind existing .ic/h3/p/.seq children.
   Background images are set via dedicated modifier classes (not inline
   custom-property url()s) — a relative url() inside a custom property is
   resolved against the stylesheet that consumes it via var(), not the HTML
   page, which 404s here since styles.css lives one level deeper than the
   page. Authoring the url() directly in this file keeps the relative path
   unambiguous. */
.card.pillar{ background:none; z-index:0; appearance:none; -webkit-appearance:none; font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer; }
.card.pillar::before,
.card.pillar::after{ content:""; position:absolute; inset:0; z-index:-1; }
.card.pillar::before{
  background-size:cover;
  background-position:center;
  opacity:.22; transform:scale(1.04);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.card.pillar::after{
  background:linear-gradient(155deg, var(--white) 38%, transparent 88%);
}
.card.pillar:hover::before{ opacity:.36; transform:scale(1); }

.pillar-blooming::before{ background-image:url('../img/pillar-blooming.jpg'); background-position:75% 35%; }
.pillar-science::before{ background-image:url('../img/pillar-science.jpg'); background-position:25% 45%; }
.pillar-human::before{ background-image:url('../img/pillar-human.jpg'); background-position:center 65%; }
.pillar-nature::before{ background-image:url('../img/pillar-nature.jpg'); background-position:70% 50%; }

/* ---------- Vision pillars — tap a pillar to re-theme the section ---------- */
.pillars-vision{ --pa:var(--blue-deep); --pa-soft:var(--periwinkle); }
.pillars-vision[data-pillar="blooming"]{ --pa:#e07f4e; --pa-soft:#ffd8bf; }
.pillars-vision[data-pillar="science"]{  --pa:#3f86e6; --pa-soft:#c2dbff; }
.pillars-vision[data-pillar="human"]{    --pa:#4f9d5b; --pa-soft:#cdeb9a; }
.pillars-vision[data-pillar="nature"]{   --pa:#1f9e83; --pa-soft:#bfe3b3; }
.pillars-vision::before{
  content:""; position:absolute; inset:0 0 auto 0; height:72%; z-index:0; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%, color-mix(in srgb, var(--pa) 13%, transparent), transparent 72%);
  transition:background .6s var(--ease);
}
.pillars-vision .wrap{ position:relative; z-index:1; }
.pillars-vision .sec-head .eyebrow{ color:var(--pa); transition:color .5s var(--ease); }
.pillars-vision .sec-head .eyebrow::before{ background:var(--pa); transition:background .5s var(--ease); }
.pillar-hint{ margin-top:1.1em; font-size:.9rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.55em; }
.pillar-hint .tap{ width:8px; height:8px; border-radius:50%; background:var(--pa); animation:pulse 2.2s var(--ease) infinite; transition:background .5s var(--ease); }
.card.pillar:focus-visible{ outline:2px solid var(--pa); outline-offset:3px; }
.card.pillar.is-active{ border-color:color-mix(in srgb, var(--pa) 55%, var(--line)); box-shadow:0 22px 46px -26px color-mix(in srgb, var(--pa) 55%, transparent); }
.card.pillar.is-active::before{ opacity:.5; transform:scale(1); }
.card.pillar.is-active::after{ background:linear-gradient(155deg, color-mix(in srgb, var(--pa-soft) 60%, var(--white)) 26%, transparent 90%); }
.card.pillar .ic{ transition:background .5s var(--ease), color .5s var(--ease); }
.card.pillar.is-active .ic{ background:linear-gradient(140deg, var(--pa-soft), color-mix(in srgb, var(--pa-soft) 50%, var(--white))); color:color-mix(in srgb, var(--pa) 78%, #000); }

/* ---------- Section header ---------- */
.sec-head{ max-width:680px; }
.sec-head .lede{ margin-top:1em; }
.sec-head.center{ margin-inline:auto; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.split.rev .split-media{ order:2; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split.rev .split-media{ order:0; } }
.split ul.ticks{ list-style:none; margin-top:1.6em; display:grid; gap:14px; }
.split ul.ticks li{ display:flex; gap:13px; align-items:flex-start; font-size:1rem; color:var(--ink); }
.split ul.ticks li svg{ flex:none; margin-top:3px; color:var(--blue-deep); }
.split ul.ticks li span small{ display:block; color:var(--ink-soft); font-size:.9rem; margin-top:2px; }

/* Device visual (microfluidic) */
.device{
  aspect-ratio:1/1; border-radius:24px; position:relative; overflow:hidden;
  background:
    radial-gradient(70% 70% at 78% 22%, rgba(203,182,244,.55), transparent 60%),
    radial-gradient(80% 80% at 20% 90%, rgba(111,183,255,.5), transparent 60%),
    linear-gradient(160deg,#fff, var(--mist));
  border:1px solid var(--line);
}
.device canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- Location map (Team · Where we build) ---------- */
.map-embed{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 24px 54px -30px rgba(14,19,54,.5); }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }
.map-embed .pin{ position:absolute; left:14px; top:14px; max-width:74%; display:flex; gap:11px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:0 12px 30px -18px rgba(14,19,54,.6); }
@media (max-width:520px){ .map-embed .pin{ max-width:none; right:14px; } }
.map-embed .pin svg{ flex:none; color:var(--blue-deep); margin-top:2px; }
.map-embed .pin .addr-t{ color:var(--ink-soft); font-size:.85rem; line-height:1.5; }
.map-embed .pin .addr-t strong{ display:block; color:var(--ink); font-weight:700; font-size:.92rem; }
.map-embed .pin .addr-t a{ display:inline-block; margin-top:.3em; color:var(--blue-deep); font-weight:600; }

/* Real EVA device photo (replaces the abstract canvas in specific panels) */
.eva-shot{ display:flex; align-items:center; justify-content:center; }
.eva-shot .eva-img{
  width:72%; max-width:340px; height:auto;
  filter:drop-shadow(0 20px 34px rgba(14,19,54,.35));
  animation:eva-float 6s ease-in-out infinite;
}
@keyframes eva-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.eva-callout{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  padding:.5em .95em; border-radius:100px; border:1px solid var(--line);
  box-shadow:0 10px 26px -16px rgba(14,19,54,.4); white-space:nowrap;
}
.eva-callout .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-deep); flex:none; }
.eva-callout--puck{ top:16%; right:6%; }
.eva-callout--chip{ top:36%; left:4%; }
@media (max-width:520px){
  .eva-callout{ font-size:.72rem; padding:.42em .8em; }
  .eva-callout--puck{ right:2%; }
  .eva-callout--chip{ left:2%; }
}

/* ---------- Metrics strip ---------- */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:54px; }
@media (max-width:760px){ .metrics{ grid-template-columns:repeat(2,1fr); } }
.metric{ background:var(--white); padding:34px 26px; }
.metric .n{ font-weight:200; font-size:clamp(2.6rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1; color:var(--ink); }
.metric .n .u{ font-size:.42em; vertical-align:.7em; color:var(--blue-deep); font-weight:600; margin-left:.1em; }
.metric .l{ margin-top:.7em; font-size:.86rem; color:var(--ink-soft); }
.metric.qual{ display:flex; flex-direction:column; justify-content:center; }
.metric.qual .trend{
  display:inline-flex; align-items:center; gap:.5em; flex-wrap:wrap;
  font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--blue-deep);
}
.metric.qual .trend svg{ width:20px; height:20px; flex:none; }
.metric.qual .trend .vs{ font-weight:500; font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- Projects ---------- */
.proj-list{ display:grid; gap:0; margin-top:40px; border-top:1px solid var(--line); }
.proj{
  display:grid; grid-template-columns:64px 1.3fr 1fr auto; gap:24px; align-items:center;
  padding:30px 8px; border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), padding-left .4s var(--ease);
}
.proj:hover{ background:linear-gradient(90deg, var(--mist), transparent 70%); padding-left:18px; }
.proj .pn{ font-weight:200; font-size:1.7rem; color:var(--blue-deep); letter-spacing:-.02em; }
.proj h3{ font-size:1.25rem; }
.proj .pd{ color:var(--ink-soft); font-size:.96rem; }
.proj .tag{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.45em .9em; border-radius:100px; white-space:nowrap;
}
.tag.live{ background:rgba(79,147,244,.12); color:var(--blue-deep); }
.tag.dev{ background:rgba(203,182,244,.22); color:#6a4fb0; }
.tag.soon{ background:var(--mist); color:var(--ink-soft); }
@media (max-width:760px){ .proj{ grid-template-columns:46px 1fr; row-gap:8px; } .proj .pd{ grid-column:2; } .proj .tag{ grid-column:2; justify-self:start; } }

.proj-list.timeline{ position:relative; padding-left:26px; }
.proj-list.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line); }
.proj-list.timeline .proj{ position:relative; }
.proj-list.timeline .proj::before{ content:""; position:absolute; left:-26px; top:38px; width:9px; height:9px; border-radius:50%; background:var(--ink-soft); }
.proj-list.timeline .proj:has(.tag.live)::before{ background:var(--blue-deep); }
.proj-list.timeline .proj:has(.tag.dev)::before{ background:#6a4fb0; }
.tag.done{ background:#1f9e83; color:#04231c; }

/* ---------- Scientific figure plate (keeps labelled diagrams legible in both themes) ---------- */
.figure{ margin:44px 0 0; }
.figure .plate{ background:#fff; border:1px solid rgba(14,19,54,.10); border-radius:var(--r); padding:clamp(18px,3vw,32px); box-shadow:0 24px 56px -36px rgba(14,19,54,.45); }
.figure .plate img{ width:100%; height:auto; display:block; }
.figure figcaption{ margin-top:15px; font-size:.85rem; color:var(--ink-soft); text-align:center; max-width:74ch; margin-inline:auto; }

/* ---------- Natural cues (Projects concept) ---------- */
.cues{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
@media (max-width:860px){ .cues{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .cues{ grid-template-columns:1fr; } }
.cue{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:24px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.cue:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(14,19,54,.3); }
.cue .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:15px; background:linear-gradient(140deg,var(--mist),var(--mist-2)); color:var(--blue-deep); }
.cue h4{ font-size:1.05rem; margin-bottom:.3em; }
.cue p{ color:var(--ink-soft); font-size:.9rem; line-height:1.55; }
:root[data-theme="dark"] .cue .ic{ background:linear-gradient(140deg,#171d42,#222a5e); color:var(--blue-bright); }

/* ---------- Project cards (rich) ---------- */
.proj-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:46px; }
@media (max-width:760px){ .proj-cards{ grid-template-columns:1fr; } }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 30px 30px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.pcard:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -30px rgba(14,19,54,.34); border-color:transparent; }
.pcard:has(.tag.done){ background:linear-gradient(160deg, rgba(63,134,230,.13), rgba(63,134,230,.03) 70%), var(--white); }
:root[data-theme="dark"] .pcard:has(.tag.done){ background:linear-gradient(160deg, rgba(63,134,230,.20), rgba(63,134,230,.05) 70%), var(--white); }
.pcard .pmeta{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.pcard .pno{ font-weight:200; font-size:2.3rem; line-height:1; color:var(--blue-deep); letter-spacing:-.03em; }
.pcard .pyears{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pcard .tag{ margin-left:auto; }
.pcard h3{ font-size:1.28rem; margin-bottom:.15em; letter-spacing:-.01em; }
.pcard .funder{ font-size:.85rem; color:var(--blue-deep); font-weight:600; margin-bottom:1em; }
.pcard p{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.pcard .cbadges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:20px; }
.pcard .cb{ font-size:.72rem; font-weight:600; letter-spacing:.02em; padding:.42em .85em; border-radius:100px; background:var(--mist); color:var(--blue-deep); }
:root[data-theme="dark"] .pcard .cb{ background:#171d42; color:var(--blue-bright); }
.pteam{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.pteam-person{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.pteam-person img{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:top center; flex:none; filter:grayscale(.25); transition:filter .35s var(--ease), transform .35s var(--ease); }
.pteam-person:hover img{ filter:grayscale(0); transform:scale(1.08); }
.pteam-person span{ font-size:.8rem; line-height:1.3; color:var(--ink); font-weight:600; transition:color .3s; }
.pteam-person:hover span{ color:var(--blue-deep); }
.pteam-person span small{ display:block; font-size:.71rem; color:var(--ink-soft); font-weight:500; }
.pteam-initials{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--mist); color:var(--ink-soft); font-size:.72rem; font-weight:700; }

/* ---------- History timeline (vertical milestone list) ---------- */
.history-timeline{ position:relative; margin-top:54px; padding-left:34px; }
.history-timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background:var(--line); }
.history-item{ position:relative; padding-bottom:44px; }
.history-item:last-child{ padding-bottom:0; }
.history-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--blue-deep); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line);
}
.history-item .yr{ font-weight:200; font-size:1.6rem; color:var(--blue-deep); letter-spacing:-.02em; display:block; margin-bottom:.2em; }
.history-item h3{ font-size:1.15rem; margin-bottom:.35em; }
.history-item p{ color:var(--ink-soft); font-size:.98rem; max-width:60ch; }
/* a single sperm's position on the timeline rail tracks scroll progress (see
   main.js) and eases toward the nearest year marker instead of looping on a
   fixed timer, so it "swims in place" wherever you stop scrolling */
.timeline-swimmer{
  position:absolute; left:9px; top:0; width:22px; height:30px; margin-left:-11px; z-index:2;
  pointer-events:none; color:#6a4fb0;
  transition:top .4s var(--ease);
  animation:tl-wobble 3.4s ease-in-out infinite;
}
:root[data-theme="dark"] .timeline-swimmer{ color:var(--lilac); }
.timeline-swimmer svg{ display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 2px 4px rgba(14,19,54,.25)); }
.timeline-swimmer .tail{ transform-origin:12px 18px; animation:tl-beat .62s ease-in-out infinite; }
.timeline-swimmer.at-marker svg{ filter:drop-shadow(0 2px 4px rgba(14,19,54,.25)) drop-shadow(0 0 9px rgba(79,147,244,.6)); }
.timeline-swimmer.at-marker .tail{ animation-duration:.4s; }
@keyframes tl-beat{ 0%,100%{ transform:rotate(-10deg); } 50%{ transform:rotate(10deg); } }
@keyframes tl-wobble{ 0%,100%{ transform:translateX(-5px); } 50%{ transform:translateX(5px); } }
@media (prefers-reduced-motion:reduce){ .timeline-swimmer{ display:none; } }

/* ---------- Ecosystem partner grid ---------- */
.eco-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
@media (max-width:860px){ .eco-grid{ grid-template-columns:repeat(2,1fr); } }
.eco-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; text-align:center; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.eco-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -26px rgba(14,19,54,.3); }
/* every logo sits on a fixed white plate so coloured, dark and light marks all
   stay legible in both light and dark mode (never invert a third-party mark) */
.eco-card img{
  display:block; width:100%; height:80px; object-fit:contain;
  background:#fff; border:1px solid rgba(14,19,54,.07); border-radius:12px;
  padding:16px 18px; margin:0 0 15px;
  transition:transform .5s var(--ease);
}
.eco-card:hover img{ transform:scale(1.03); }
.eco-card p{ font-size:.82rem; color:var(--ink-soft); line-height:1.5; }

/* ---------- Press link grid ---------- */
.press-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
@media (max-width:860px){ .press-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .press-grid{ grid-template-columns:1fr; } }
.press-card{ display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.press-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -26px rgba(14,19,54,.3); border-color:transparent; }
.press-card .src{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep); }
.press-card p{ margin-top:.5em; font-size:.94rem; color:var(--ink); }
.press-card .go{ margin-top:.8em; font-size:.82rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }

/* ---------- Knowledge accordion (native <details>, no JS) ---------- */
.k-list{ margin-top:54px; display:grid; gap:16px; }
.k-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:box-shadow .4s var(--ease), border-color .4s; }
.k-item:not([open]):hover{ box-shadow:0 18px 40px -28px rgba(14,19,54,.3); border-color:transparent; }
.k-item summary{ list-style:none; cursor:pointer; padding:26px 30px; display:flex; align-items:center; gap:18px; transition:background .35s var(--ease); }
.k-item summary::-webkit-details-marker{ display:none; }
.k-item summary:hover{ background:var(--mist); }
.k-item summary:active .ic{ transform:scale(.94); }
.k-item .ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg, var(--mist), var(--mist-2)); color:var(--blue-deep);
  transition:transform .3s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.k-item[open] .ic{ background:linear-gradient(140deg, var(--periwinkle), var(--lilac-soft)); color:var(--blue-deep); }
.k-item .head-text{ flex:1; }
.k-item h3{ font-size:1.15rem; }
.k-item .tag2min{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3em; display:inline-block; }
.k-item .chev{ transition:transform .45s var(--ease); color:var(--ink-soft); flex:none; }
.k-item[open] .chev{ transform:rotate(180deg); }
/* Smooth expand/collapse for native <details> via the grid-rows technique:
   the UA stylesheet forces display:none on closed detail content, so
   .k-body must force its own display back on to stay animatable. */
.k-item .k-body{
  display:grid !important; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease);
  color:var(--ink-soft); font-size:.98rem; line-height:1.7;
}
.k-item[open] .k-body{ grid-template-rows:1fr; }
.k-body-in{ overflow:hidden; min-height:0; padding:0 30px 30px; }
.k-body p{ margin-bottom:1em; }
.k-body p:last-child{ margin-bottom:0; }
.k-figure{ margin:22px 0; display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.k-figure .fi{ text-align:center; }
.k-figure .fi .ic{ width:56px; height:56px; margin:0 auto 8px; }
.k-figure .fi span{ font-size:.78rem; color:var(--ink-soft); }
/* grouped knowledge topics + in-body science figures */
.k-group{ margin-top:44px; }
.k-group:first-of-type{ margin-top:54px; }
.k-group > .grp{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.k-group > .grp::after{ content:""; flex:1; height:1px; background:var(--line); }
.k-group .k-list{ margin-top:0; }
.k-body .figure{ margin:20px 0 8px; }
.k-body .figure .plate{ padding:clamp(14px,2.4vw,26px); }

/* ---------- Bespoke, themed, animated science illustrations ---------- */
.figure.sci{ margin:22px 0 8px; }
.figure.sci .sci-stage{
  position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  padding:clamp(18px,3vw,34px);
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(111,183,255,.12), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, rgba(203,182,244,.14), transparent 58%),
    var(--white);
}
.sci-stage svg{ display:block; width:100%; height:auto; overflow:visible; }
.sci-label{ fill:var(--ink); font-family:var(--font); font-weight:600; font-size:13px; }
.sci-sub{ fill:var(--ink-soft); font-family:var(--font); font-weight:500; font-size:11px; }
.sci-lead{ stroke:var(--ink-soft); stroke-width:1; opacity:.45; fill:none; }
.sci-struct{ stroke:var(--ink); stroke-width:1.6; fill:none; opacity:.85; }
.sci-tube{ fill:var(--mist); stroke:var(--ink-soft); stroke-width:1.4; opacity:.9; }
.sci-cell{ fill:#5b9bf6; }
.sci-cell2{ fill:#b79cec; }
.sci-cell-weak{ fill:#aeb6cf; }
.sci-flag{ stroke:#5b9bf6; stroke-width:1.8; fill:none; stroke-linecap:round; }
.sci-flag2{ stroke:#b79cec; stroke-width:1.8; fill:none; stroke-linecap:round; }
.sci-flag-weak{ stroke:#aeb6cf; stroke-width:1.8; fill:none; stroke-linecap:round; }
.sci-warm{ fill:#f0a06a; }
.sci-flow{ stroke:var(--blue); stroke-width:1.6; fill:none; stroke-linecap:round; opacity:.5; stroke-dasharray:2 9; }
/* motion */
@keyframes sci-beat{ 0%{ transform:rotate(-7deg) } 38%{ transform:rotate(8deg) } 60%{ transform:rotate(5deg) } 100%{ transform:rotate(-7deg) } }
@keyframes sci-flow-drift{ to{ stroke-dashoffset:-44 } }
@keyframes sci-swim{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@keyframes sci-rise{ 0%{ transform:translateY(6px); opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ transform:translateY(-118px); opacity:0 } }
@keyframes sci-pulse{ 0%,100%{ opacity:.35; r:5 } 50%{ opacity:.9; r:7 } }
@keyframes sci-target-pulse{ 0%,100%{ transform:scale(1); opacity:.4 } 50%{ transform:scale(1.2); opacity:.75 } }
.sci-target-pulse{ transform-box:fill-box; transform-origin:center; animation:sci-target-pulse 2.4s cubic-bezier(.34,1.56,.64,1) infinite; }
.sci-beat{ transform-box:fill-box; transform-origin:right center; animation:sci-beat 1.05s cubic-bezier(.4,0,.2,1) infinite; }
.sci-flow.anim{ animation:sci-flow-drift 2.4s linear infinite; }
.sci-swimmer{ offset-rotate:auto; animation:sci-swim var(--dur,10s) linear infinite; animation-delay:var(--dly,0s); }
.sci-riser{ transform-box:view-box; animation:sci-rise var(--dur,7s) ease-in-out infinite; animation-delay:var(--dly,0s); }
@keyframes sci-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.sci-bob{ transform-box:view-box; animation:sci-bob 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .sci-stage *{ animation:none !important; } }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px; }
@media (max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr; } }
.member{ }
.member .photo{
  aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; position:relative;
  background:linear-gradient(160deg,var(--mist),var(--mist-2));
  display:grid; place-items:center;
}
.member .photo img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s var(--ease), filter .8s; filter:grayscale(.15); }
.member:hover .photo img{ transform:scale(1.04); filter:grayscale(0); }
.member .initials{ font-weight:200; font-size:3rem; color:var(--ink-soft); letter-spacing:.04em; }
.member .photo::after{ content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(transparent, rgba(14,19,54,.04)); }
.member h3{ margin-top:18px; font-size:1.15rem; }
.member .role{ color:var(--blue-deep); font-size:.9rem; font-weight:600; }
.member p{ color:var(--ink-soft); font-size:.92rem; margin-top:.6em; }

/* ---------- Profile / LinkedIn link row (member cards + detail pages) ---------- */
.profile-links{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:.8em; }
.profile-links a{ display:inline-flex; align-items:center; gap:5px; font-size:.85rem; font-weight:600; color:var(--blue-deep); text-decoration:none; transition:color .3s; }
.profile-links a:hover{ color:var(--ink); }

/* ---------- Advisors & associates — smaller circular avatars ---------- */
.advisor-group{ margin-top:44px; }
.advisor-group .grp{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px; display:flex; align-items:center; gap:14px; }
.advisor-group .grp::after{ content:""; flex:1; height:1px; background:var(--line); }
.advisor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px; }
@media (max-width:860px){ .advisor-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .advisor-grid{ grid-template-columns:repeat(2,1fr); } }
.advisor{ text-align:center; }
.advisor .ava{ width:104px; height:104px; border-radius:50%; overflow:hidden; margin:0 auto 15px; position:relative;
  background:linear-gradient(160deg,var(--mist),var(--mist-2)); box-shadow:0 12px 28px -16px rgba(14,19,54,.45); }
.advisor .ava img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.25); transition:transform .6s var(--ease), filter .6s var(--ease); }
.advisor:hover .ava img{ transform:scale(1.06); filter:grayscale(0); }
.advisor h4{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.advisor .role{ color:var(--blue-deep); font-size:.82rem; font-weight:600; margin-top:.25em; }
.advisor p{ color:var(--ink-soft); font-size:.85rem; margin-top:.55em; line-height:1.5; }
.advisor .profile-links{ justify-content:center; margin-top:.55em; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band .display{ font-size:clamp(2.2rem,5vw,4rem); margin-bottom:.4em; }
.cta-band .hero-actions{ justify-content:center; }

/* ---------- Footer ---------- */
.foot{ background:var(--ink-fixed); color:rgba(255,255,255,.7); padding-block:64px 36px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start; }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr; gap:32px; } }
.foot-logo img{ height:26px; margin-bottom:18px; }
.foot p.addr{ font-size:.92rem; line-height:1.7; max-width:30ch; }
.foot .col h4{ color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; font-weight:700; }
.foot .col a{ display:block; font-size:.94rem; padding:5px 0; color:rgba(255,255,255,.66); transition:color .3s; }
.foot .col a:hover{ color:#fff; }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:rgba(255,255,255,.5); }

/* ---------- Page hero (interior) ---------- */
.page-hero{ padding-top:160px; padding-bottom:30px;
  background:radial-gradient(110% 120% at 92% 0%, rgba(203,182,244,.3), transparent 55%), linear-gradient(180deg,#fff,var(--paper)); }
.page-hero .display{ font-size:clamp(2.4rem,5.5vw,4.4rem); margin:.3em 0; }
/* Science-pillar tone — carries the same #3f86e6 hue used when "Science" is
   tapped on the homepage vision pillars onto the two pages built entirely
   on that pillar's content (Projects, Knowledge) */
.page-hero.page-hero--science{
  background-image:
    radial-gradient(120% 120% at 92% 0%, rgba(63,134,230,.20), transparent 55%),
    radial-gradient(90% 90% at 6% 100%, rgba(194,219,255,.45), transparent 60%),
    linear-gradient(180deg,#fff,var(--paper));
}
.page-hero.page-hero--team{
  background-image:
    linear-gradient(180deg, rgba(251,251,254,.88), var(--paper) 78%),
    radial-gradient(110% 120% at 92% 0%, rgba(203,182,244,.22), transparent 55%),
    url('../img/pillar-human.jpg');
  background-size:auto, auto, cover;
  background-position:0 0, 0 0, top right;
  background-repeat:no-repeat;
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   DARK MODE  ·  toggle via [data-theme="dark"] on <html>
   ============================================================ */
.nav-logo .logo-on-dark{ display:none; }
:root[data-theme="dark"] .nav-logo .logo-on-light{ display:none; }
:root[data-theme="dark"] .nav-logo .logo-on-dark{ display:block; }

.theme-toggle{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:color .3s, border-color .3s, transform .3s, background .3s;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ic-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .ic-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .ic-moon{ display:none; }

:root[data-theme="dark"]{
  --ink:#eef1fb;
  --ink-2:#c7cdf0;
  --ink-soft:#9aa2c9;
  --blue-deep: #6fb7ff;   /* was #2f6fe0 — under 4.5:1 as small/bold text on dark surfaces */
  --paper:#080b20;
  --white:#121733;     /* card / surface */
  --mist:#0e1330;
  --mist-2:#1b2147;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
}
:root[data-theme="dark"] body{ background:var(--paper); }
:root[data-theme="dark"] .nav.scrolled{ background:rgba(10,14,36,.8); box-shadow:0 1px 0 var(--line-2); }
:root[data-theme="dark"] .nav-toggle span{ background:var(--ink); }
@media (max-width:860px){ :root[data-theme="dark"] .nav-links{ background:rgba(8,11,32,.97); } }

:root[data-theme="dark"] .hero{
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(149,120,222,.22), transparent 55%),
    radial-gradient(120% 120% at 8% 100%, rgba(79,147,244,.18), transparent 52%),
    linear-gradient(180deg,#0c1130,#080b20);
}
:root[data-theme="dark"] .page-hero{
  background:radial-gradient(110% 120% at 92% 0%, rgba(149,120,222,.18), transparent 55%), linear-gradient(180deg,#0c1130,#080b20);
}
:root[data-theme="dark"] .page-hero.page-hero--science{
  background-image:
    radial-gradient(120% 120% at 92% 0%, rgba(63,134,230,.26), transparent 55%),
    radial-gradient(90% 90% at 6% 100%, rgba(194,219,255,.09), transparent 60%),
    linear-gradient(180deg,#0c1130,#080b20);
}
:root[data-theme="dark"] .page-hero.page-hero--team{
  background-image:
    linear-gradient(180deg, rgba(8,11,32,.90), var(--paper) 78%),
    radial-gradient(110% 120% at 92% 0%, rgba(149,120,222,.18), transparent 55%),
    url('../img/pillar-human.jpg');
}
:root[data-theme="dark"] .device{
  background:
    radial-gradient(70% 70% at 78% 22%, rgba(149,120,222,.30), transparent 60%),
    radial-gradient(80% 80% at 20% 90%, rgba(79,147,244,.28), transparent 60%),
    linear-gradient(160deg,#11173a,#0c1130);
}
:root[data-theme="dark"] .member .photo{ background:linear-gradient(160deg,#141a3d,#1b2147); }
:root[data-theme="dark"] .profile-links a{ color:var(--blue-bright); }
:root[data-theme="dark"] .profile-links a:hover{ color:#fff; }
:root[data-theme="dark"] .flow-hint{ background:rgba(18,23,51,.72); color:var(--ink-soft); border-color:var(--line); }
:root[data-theme="dark"] .card .ic{ background:linear-gradient(140deg,#171d42,#222a5e); color:var(--blue-bright); }
:root[data-theme="dark"] .eva-callout{ background:rgba(18,23,51,.88); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .tag.dev{ background:rgba(203,182,244,.28); color:#c9b8f5; }
:root[data-theme="dark"] .metric.qual .trend{ color:var(--blue-bright); }

/* keep button contrast correct in dark mode */
:root[data-theme="dark"] .btn-primary{ background:#2f6fe0; color:#fff; }
:root[data-theme="dark"] .btn-primary:hover{ background:var(--blue); }
.btn-light{ color:#0E1336; }   /* always dark text on the white pill (sits on dark bands) */