/**
 * AspireNexa — "lively lab" visual effects.
 * Hand-written plain CSS (NOT part of the compiled Tailwind build in
 * style.css, so a Tailwind rebuild never overwrites it).
 *
 * Provides:
 *   1. A soft, brand-consistent page background wash.
 *   2. An animated (slowly flowing) gradient hero panel.
 *   3. The sky-blue → azure navigation bar.
 *   4. Glossy "glass" service cards with an animated shine sweep.
 *   5. Gradient CTA buttons.
 *
 * Palette (from tailwind.config.js): navy #0d1b3e, blue #2563ff, teal #0ea5a3.
 */

:root {
  --lab-navy: #0d1b3e;
  --lab-blue: #2563ff;
  --lab-teal: #0ea5a3;
}

/* ------------------------------------------------------------------ */
/* 1. Page background — plain white.                                   */
/*    Colour now lives on the CARDS and SECTIONS, not the whole page,  */
/*    so content reads cleanly (no more full-page teal wash).          */
/* ------------------------------------------------------------------ */
html { background-color: #ffffff; }
body { background-color: #ffffff; }

/* The [hidden] attribute MUST win. Tailwind's display utilities (.flex,
   .grid, .block …) otherwise override the UA `[hidden]{display:none}` on
   equal specificity — which left the contact form's error bar and the
   "Thank you" panel visible even though they carry the hidden attribute. */
[hidden] { display: none !important; }

/* Contact phone row — plain CSS so it doesn't depend on Tailwind's
   w-24/flex-1/min-w-0 being present in the pre-built style.css. */
.phone-code { width: 6rem; flex: 0 0 6rem; }
.phone-num  { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ */
/* 2. Animated gradient hero panel — navy → blue → teal, slowly         */
/*    flowing/shading (tanuh.ai style). Same colours, now alive.        */
/* ------------------------------------------------------------------ */
/* Dark base so the moving colour blobs above it glow and read clearly. */
.hero-gradient {
  position: relative;
  isolation: isolate;          /* keeps blob blending inside the hero */
  overflow: hidden;
  background: linear-gradient(135deg, #061029 0%, #0b1f4d 48%, #0a3260 100%);
  background-size: 200% 200%;
  animation: heroFlow 20s ease-in-out infinite alternate;
}

@keyframes heroFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ------------------------------------------------------------------ */
/* Inner-page hero — light blue band + blue gradient headline.         */
/* No breadcrumb. Padding-top clears the fixed navbar.                 */
/* ------------------------------------------------------------------ */
.hero-light {
  /* Dark band using the landing page's own navy → blue → teal palette (the
     same colours the animated hero runs through, just held still).
     Top padding must clear the 80px fixed navbar. */
  background: linear-gradient(120deg, #061029 0%, #0b1f4d 34%, #14407f 66%, #0f6a80 100%);
  padding-top: 6.25rem;
  padding-bottom: 1.75rem;
}
@media (min-width: 1024px) {
  .hero-light { padding-top: 7rem; padding-bottom: 2rem; }
}

/* Frosted pill, readable on the dark band. */
.hero-light__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  padding: .4rem 1rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* White headline on the dark band. */
.hero-light__title {
  margin-top: .85rem;
  /* Sized to sit on ONE line on desktop. `nowrap` only above 1024px so
     narrow screens can still wrap instead of overflowing. */
  font-size: clamp(1.35rem, 2.35vw, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #ffffff;
}
@media (min-width: 1024px) {
  .hero-light__title { white-space: nowrap; }
}

.hero-light__intro {
  margin-top: .7rem;
  max-width: 44rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* Toggled by main.js once the hero leaves the viewport — stops all
   compositing work for the blurred layers while they can't be seen. */
.hero-gradient.fx-paused,
.hero-gradient.fx-paused .hero-aurora {
  animation-play-state: paused;
}
/* Release the promoted compositor layers too, so they stop consuming
   GPU memory while paused. */
.hero-gradient.fx-paused .hero-aurora { will-change: auto; }

/* Aurora ribbons: long, soft, heavily-blurred bands of light that sweep
   corner-to-corner while rotating and stretching — the northern-lights look.
   Each has its own colour, path, rotation and duration, so the bands cross
   and re-arrange continuously instead of moving as one block. */
.hero-aurora {
  position: absolute;
  z-index: -1;
  width: 58vw;
  height: 26vh;
  border-radius: 50%;
  /* blur(80px) over ~160% of the viewport was very GPU-heavy. 44px across 3
     ribbons looks the same and composites far more cheaply.
     `mix-blend-mode: screen` was also dropped — it forced the compositor to
     blend each blurred layer against the backdrop on every frame. Plain
     opacity over the navy base gives a near-identical glow for much less. */
  filter: blur(44px);
  pointer-events: none;
  will-change: transform;
}
.hero-aurora--1 {
  top: -14%; left: -24%;
  background: #22d3ee; opacity: .50;
  animation: auroraA 24s ease-in-out infinite;
}
.hero-aurora--2 {
  top: 8%; right: -28%;
  background: #2563ff; opacity: .58;
  animation: auroraB 31s ease-in-out infinite;
}
.hero-aurora--3 {
  bottom: -22%; left: -12%;
  background: #0ea5a3; opacity: .48;
  animation: auroraC 27s ease-in-out infinite;
}
/* Ribbons 4 & 5 removed — 3 bands read the same but halve the composite cost. */

/* Each band travels across the hero and back, rotating as it goes. */
@keyframes auroraA {
  0%   { transform: translate(0, 0)          rotate(-20deg) scale(1); }
  50%  { transform: translate(62vw, 42vh)    rotate(26deg)  scale(1.35); }
  100% { transform: translate(0, 0)          rotate(-20deg) scale(1); }
}
@keyframes auroraB {
  0%   { transform: translate(0, 0)          rotate(16deg)  scale(1); }
  50%  { transform: translate(-72vw, 32vh)   rotate(-22deg) scale(1.28); }
  100% { transform: translate(0, 0)          rotate(16deg)  scale(1); }
}
@keyframes auroraC {
  0%   { transform: translate(0, 0)          rotate(10deg)  scale(1); }
  50%  { transform: translate(58vw, -46vh)   rotate(-26deg) scale(1.32); }
  100% { transform: translate(0, 0)          rotate(10deg)  scale(1); }
}

/* Faint white grid over the gradient (replaces the dark grid). */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
}
/* The highlighted word in the headline. */
.hero-accent { color: #8ff3e6; }

/* ------------------------------------------------------------------ */
/* 3. Navigation bar — sky-blue → azure gradient.                      */
/* ------------------------------------------------------------------ */
/* Two-state navbar (Yenepoya pattern):
   • At the top  — transparent, links only, floating over the hero.
   • On scroll   — condenses into the navy → blue gradient bar + CTA.
   The header is `fixed` so the transparent state overlays the hero;
   .hero-gradient carries matching top padding to compensate. */
/* Always-on navy → blue gradient bar. (No transparent-at-top state: the
   bar looks identical whether or not the page is scrolled.) */
.nav-gradient {
  /* Positioned here in plain CSS: Tailwind's `.fixed` utility isn't in the
     pre-built style.css (only `.sticky` was compiled), so relying on the
     class left the header static and pushed the hero down. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: linear-gradient(90deg, #061029 0%, #0b1f4d 42%, #12306e 72%, #1d4ed8 100%);
  box-shadow: 0 10px 30px -12px rgba(6, 16, 41, 0.55);
}

/* CTA is always visible on desktop (hidden on mobile — the drawer has it). */
.nav-cta { display: none; }
@media (min-width: 1024px) {
  .nav-cta { display: block; }
}

/* Mobile drawer keeps a solid navy panel regardless of scroll state. */
.nav-drawer {
  background: linear-gradient(160deg, #061029 0%, #0b1f4d 55%, #12306e 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Clear the fixed header. */
.hero-gradient { padding-top: 4rem; }
@media (min-width: 1024px) { .hero-gradient { padding-top: 5rem; } }

/* "Avg. turnaround" chip. Sits just BELOW the visual card — the old
   -bottom-5/-left-5 placement overlapped the stats row and clipped the
   "Publications" label. Hidden on the narrowest screens. */
.hero-badge { display: none; }
@media (min-width: 640px) {
  .hero-badge {
    display: block;
    position: absolute;
    left: 0;
    bottom: -3.25rem;
  }
}

/* Nav link colours in plain CSS. Tailwind's text-white/85 and bg-white/20
   are NOT in the pre-built style.css, so the links fell back to inherited
   dark ink and were invisible on the navy bar. */
.nav-gradient a,
.nav-gradient button,
.nav-drawer a { color: rgba(255, 255, 255, 0.88); }
.nav-gradient nav ul a:hover,
.nav-drawer a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
}
.nav-gradient nav ul a[aria-current="page"],
.nav-drawer a[aria-current="page"] {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.20);
}
/* The white pill CTA keeps its blue label. */
.nav-gradient a.bg-white { color: #2563ff; }
.nav-gradient a.bg-white:hover { color: #1b3fd6; background-color: #fff; }

/* Two-tone wordmark on the blue nav (plain CSS: Tailwind arbitrary values
   like text-[#0b1736] don't exist in the pre-built style.css). */
.logo-accent { color: #5eead4; }

/* Brand lockup: logo mark + wordmark. */
.brand-link { display: inline-flex; align-items: center; gap: .55rem; }
.brand-icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.brand-icon-btn:hover { transform: scale(1.05); }
.logo-wordmark { display: inline-flex; align-items: center; text-decoration: none; transition: opacity 0.15s ease; }
.logo-wordmark:hover { opacity: 0.9; }
.brand-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: .7rem;
  box-shadow: 0 4px 12px -4px rgba(2, 132, 199, .55);
}
@media (min-width: 1024px) {
  .brand-mark { width: 2.25rem; height: 2.25rem; }
}

/* Brand icon mark — SVG logo (research + impact theme). */
.brand-icon-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: .7rem;
  box-shadow: 0 4px 12px -4px rgba(2, 132, 199, .55);
}
@media (min-width: 1024px) {
  .brand-icon-mark { width: 2.25rem; height: 2.25rem; }
}

/* Brand image chip — white rounded background for the logo image on the nav bar. */
.brand-img-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: .65rem;
  padding: .35rem;
}
@media (min-width: 1024px) {
  .brand-img-chip { width: 2.75rem; height: 2.75rem; }
}

@keyframes navFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ------------------------------------------------------------------ */
/* 4. Glossy "glass" cards.                                            */
/* ------------------------------------------------------------------ */
.glass-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Translucent gradient (no backdrop-filter blur — that forces an
     expensive per-frame re-blur over the animated background and janks
     scrolling, especially on mobile). Sheen + shine below sell the gloss. */
  /* Clean white card with a clearly visible azure border. */
  background: linear-gradient(160deg, #ffffff 0%, #f6fbff 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.42);   /* sky/azure edge */
  box-shadow:
    0 12px 30px -14px rgba(13, 27, 62, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

/* Top-edge sheen — the "glass" highlight. */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Diagonal shine that sweeps across on hover. */
.glass-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  transition: left .7s ease;
}

.glass-card:hover,
.glass-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(2, 132, 199, 0.75);
  box-shadow:
    0 26px 50px -22px rgba(14, 165, 233, 0.45),
    0 0 0 1.5px rgba(56, 189, 248, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.glass-card:hover::after,
.glass-card:focus-visible::after {
  left: 120%;
}

/* Card body sits above the sheen/shine pseudo-elements. */
.glass-card > * { position: relative; z-index: 3; }

/* Icon tiles. The gradient is defined here in plain CSS rather than with
   Tailwind gradient-stop utilities: those only exist if they were present at
   build time, and some combos (e.g. from-accent + to-primary) were never
   compiled — which rendered the tile with NO background, making the white
   icon invisible. This guarantees a visible tile everywhere. */
.lab-icon-tile {
  background-image: linear-gradient(135deg, #2563ff 0%, #4f8cff 48%, #0ea5a3 100%);
  color: #fff;
}
.lab-icon-tile svg { color: #fff; }

/* Animated gradient icon tile inside a glass card. */
.glass-card .lab-icon-tile {
  background-size: 200% 200%;
  animation: labTile 8s ease infinite;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 255, 0.55);
}
.glass-card:hover .lab-icon-tile {
  animation-duration: 3s;
}
@keyframes labTile {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ------------------------------------------------------------------ */
/* Global section rhythm — the stock py-20/lg:py-28 made every page    */
/* far taller than it needed to be. The attribute selector outranks    */
/* Tailwind's .py-* utilities without needing !important.              */
/* ------------------------------------------------------------------ */
main section[class*="py-"] {
  padding-top: 1.9rem;
  padding-bottom: 1.9rem;
}

/* The landing hero's padding lives on an inner div, so the rule above
   doesn't reach it — tighten it here so more of the page is visible. */
.hero-gradient > .container-px[class*="py-"] {
  padding-top: 2.75rem;
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  .hero-gradient > .container-px[class*="py-"] {
    padding-top: 3.25rem;
    padding-bottom: 3.5rem;
  }
}
@media (min-width: 1024px) {
  main section[class*="py-"] {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
/* Trim the gap between a section heading and the content below it. */
main section [class*="mt-14"],
main section [class*="mt-12"] { margin-top: 1.6rem; }
/* Trailing "see more" buttons etc. sat on a big mt-10. */
main section [class*="mt-10"] { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ */
/* CTA card — trimmed down from the original oversized block.          */
/* Padding set here in plain CSS because Tailwind's py-10 / lg:py-12   */
/* aren't in the pre-built style.css (the card lost ALL padding).      */
/* ------------------------------------------------------------------ */
.cta-card { padding: 2.75rem 1.75rem; }
@media (min-width: 1024px) {
  .cta-card { padding: 3.25rem 3.5rem; }
}

/* ------------------------------------------------------------------ */
/* Pricing cards — bordered, with a bold gradient header band.         */
/* ------------------------------------------------------------------ */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.34);
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px -18px rgba(2, 132, 199, 0.40);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(2, 132, 199, 0.65);
  box-shadow: 0 24px 44px -20px rgba(2, 132, 199, 0.48);
}
.price-card.is-featured {
  border-color: #0d9488;
  box-shadow: 0 18px 38px -18px rgba(13, 148, 136, 0.50);
}

.price-card__head {
  padding: 1.15rem 1.5rem;
  background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 60%, #0ea5a3 100%);
  color: #fff;
}
.price-card.is-featured .price-card__head {
  background: linear-gradient(90deg, #0b1f4d 0%, #0369a1 55%, #0d9488 100%);
}
.price-card__name {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: #fff;
}
.price-card__tagline {
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.price-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

/* Ribbon sits in its own strip ABOVE the header so it can't overlap the
   title. Non-featured cards get a matching spacer so all four headers
   stay on the same line. */
.price-card__flag,
.price-card:not(.is-featured)::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  flex: 0 0 auto;
}
/* No fill — the words themselves carry the colour. */
.price-card__flag {
  background: transparent;
  color: #0d9488;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.price-card:not(.is-featured)::before { background: #ffffff; }

.price-card__cta {
  margin-top: 1.5rem;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  font-weight: 700;
  border: 1.5px solid rgba(14, 165, 233, 0.55);
  color: #0284c7;
  background: #fff;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.price-card__cta:hover {
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9 60%, #0ea5a3);
  border-color: transparent;
  color: #fff;
}
.price-card.is-featured .price-card__cta {
  background: linear-gradient(90deg, #0369a1, #0d9488);
  border-color: transparent;
  color: #fff;
}
.price-card.is-featured .price-card__cta:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------------ */
/* Panel card — bordered block with a gradient header (webinars etc.). */
/* ------------------------------------------------------------------ */
.panel-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.34);
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px -18px rgba(2, 132, 199, 0.40);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.panel-card:hover {
  transform: translateY(-4px);
  border-color: rgba(2, 132, 199, 0.62);
  box-shadow: 0 22px 40px -20px rgba(2, 132, 199, 0.46);
}
.panel-card__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 60%, #0ea5a3 100%);
}
.panel-card__icon {
  display: grid;
  place-items: center;
  height: 2.4rem;
  width: 2.4rem;
  flex: 0 0 auto;
  border-radius: .8rem;
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.panel-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.panel-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Services page — framed service title + bordered detail cards.       */
/* ------------------------------------------------------------------ */

/* Icon sits INLINE, to the left of the badge + title (not on its own row). */
.svc-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.svc-head__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(2, 132, 199, 0.55);
}
.svc-head__text { min-width: 0; }
.svc-head__badge {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 60%, #0ea5a3 100%);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.svc-head__title {
  margin-top: .4rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #0b1f4d;
}
.svc-head__rule {
  display: block;
  width: 3rem;
  height: .25rem;
  margin-top: .55rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9 55%, #0ea5a3);
}

/* Detail cards with a clear border and a distinct gradient header. */
.mini-card {
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.38);
  border-radius: 1rem;
  box-shadow: 0 10px 26px -18px rgba(2, 132, 199, 0.40);
}
.mini-card__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .7rem 1.1rem;
  background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 60%, #0ea5a3 100%);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mini-card__body {
  padding: 1.1rem;
  margin: 0;
  list-style: none;
}
.mini-card__num {
  display: grid;
  place-items: center;
  height: 1.35rem;
  width: 1.35rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Stats band — navy → blue gradient (was flat bright blue).           */
/* ------------------------------------------------------------------ */
.stats-band {
  background: linear-gradient(120deg, #061029 0%, #0b1f4d 38%, #12306e 68%, #1d4ed8 100%);
}

/* ------------------------------------------------------------------ */
/* Science backdrop — honeycomb texture + outlined lab glyphs, in a    */
/* mild blue wash that matches the landing page.                       */
/* ------------------------------------------------------------------ */
.sci-section {
  background: linear-gradient(135deg, #f7fbfe 0%, #f2f9fd 45%, #f5f9ff 100%);
}

.sci-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Honeycomb texture — kept very faint so text stays crisp. */
.sci-deco__hex {
  position: absolute;
  inset: 0;
  color: #0284c7;
  opacity: 0.07;
}

/* Accent hexagons + lab glyphs, anchored to the right like the reference. */
.sci-deco__icons {
  position: absolute;
  top: 50%;
  right: -2rem;
  transform: translateY(-50%);
  width: min(46rem, 62%);
  height: auto;
  color: #0369a1;
  opacity: 0.09;
}

/* Molecule/hexagon clusters anchored to the left and right edges. */
.sci-deco__cluster {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Capped so the hexagons stay a compact edge motif rather than blowing up
     into giant outlines across the whole section. */
  height: min(60%, 20rem);
  width: auto;
  color: #0369a1;
  opacity: 0.15;
}
.sci-deco__cluster--left  { left: -1rem; }
.sci-deco__cluster--right { right: -1rem; transform: translateY(-50%) scaleX(-1); }

@media (max-width: 1024px) {
  .sci-deco__icons { opacity: 0.10; right: -6rem; width: 38rem; }
  .sci-deco__cluster { opacity: 0.14; }
}
@media (max-width: 640px) {
  .sci-deco__icons { display: none; }
  .sci-deco__hex { opacity: 0.10; }
  .sci-deco__cluster { opacity: 0.10; height: 70%; }
}

/* ------------------------------------------------------------------ */
/* FAQ — two-column grid with a "paint" fill animation on the cards.   */
/* ------------------------------------------------------------------ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  /* start (not stretch) so an expanded card doesn't drag its row-mate
     to the same height, leaving an odd tall empty box beside it */
  align-items: start;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}

.faq-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.28);
  border-radius: 1rem;
  box-shadow: 0 10px 26px -18px rgba(2, 132, 199, 0.35);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* 1. Paint stroke down the left edge — grows top→bottom. */
.faq-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 1;
  background: linear-gradient(180deg, #1d4ed8, #0ea5e9 55%, #0ea5a3);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* 2. Tinted wash sweeping left→right behind the content. */
.faq-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(29, 78, 216, 0.09), rgba(14, 165, 233, 0.07) 55%, rgba(14, 165, 163, 0.06));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.faq-card:hover,
.faq-card:focus-within,
.faq-card.is-open {
  transform: translateY(-3px);
  border-color: rgba(2, 132, 199, 0.60);
  box-shadow: 0 20px 36px -20px rgba(2, 132, 199, 0.45);
}
.faq-card:hover::before,
.faq-card:focus-within::before,
.faq-card.is-open::before { transform: scaleY(1); }

.faq-card:hover::after,
.faq-card:focus-within::after,
.faq-card.is-open::after { transform: scaleX(1); }

.faq-card__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  text-align: left;
  cursor: pointer;
}
.faq-card__q {
  font-size: .975rem;
  font-weight: 700;
  line-height: 1.4;
  color: #0b1f4d;
}
.faq-card__a {
  padding: 0 1.35rem 1.25rem;
  font-size: .8125rem;
  line-height: 1.65;
  color: #6b7794;
}

@media (prefers-reduced-motion: reduce) {
  .faq-card,
  .faq-card::before,
  .faq-card::after { transition: none !important; }
  .faq-card:hover { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Colourful gradient-header card: full-width gradient band with a      */
/* circular badge overlapping it, centred content beneath.              */
/* ------------------------------------------------------------------ */
.grad-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.28);
  border-radius: 1.25rem;
  padding: 1.75rem;
  padding-top: 7.6rem;          /* clears the band + overlapping badge */
  box-shadow: 0 12px 30px -18px rgba(2, 132, 199, 0.40);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.grad-card:hover {
  transform: translateY(-6px);
  border-color: rgba(2, 132, 199, 0.65);
  box-shadow: 0 24px 44px -20px rgba(2, 132, 199, 0.50);
}

.grad-card__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 55%, #0ea5a3 100%);
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.grad-card__badge {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 9999px;
  background: #ffffff;
  color: #0369a1;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 22px -12px rgba(2, 132, 199, 0.55);
}

.grad-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0b1f4d;
}

/* Small gradient divider, echoing the reference. */
.grad-card__rule {
  display: block;
  width: 2.75rem;
  height: .25rem;
  margin: .7rem auto .1rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9 55%, #0ea5a3);
}

.grad-card__text {
  margin-top: .5rem;
  flex: 1;
  font-size: .875rem;
  line-height: 1.6;
  color: #6b7794;
}

.grad-card__link {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: #0284c7;
  transition: color .2s ease;
}
.grad-card:hover .grad-card__link { color: #0d9488; }

@media (prefers-reduced-motion: reduce) {
  .grad-card { transition: none !important; }
  .grad-card:hover { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Trust pillars — ringed medallions, no card box. Used for the        */
/* "Trusted by researchers" section (parallel qualities, not steps).    */
/* ------------------------------------------------------------------ */
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 .75rem;
}

/* Gradient ring around a white disc — the "circle around content". */
.trust-item__ring {
  display: grid;
  place-items: center;
  height: 5.5rem;
  width: 5.5rem;
  padding: 3px;                       /* ring thickness */
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 55%, #0ea5a3 100%);
  box-shadow: 0 12px 26px -14px rgba(2, 132, 199, 0.55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.trust-item__disc {
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #ffffff;
  color: #0369a1;
  transition: background-color .3s ease, color .3s ease;
}
.trust-item:hover .trust-item__ring {
  transform: translateY(-5px);
  box-shadow: 0 20px 34px -14px rgba(2, 132, 199, 0.65);
}
/* On hover the disc fills with the gradient and the icon flips white. */
.trust-item:hover .trust-item__disc {
  background: transparent;
  color: #ffffff;
}

.trust-item__title {
  margin-top: 1.1rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  color: #0b1f4d;
}
.trust-item__text {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #6b7794;
  max-width: 17rem;
}

@media (prefers-reduced-motion: reduce) {
  .trust-item__ring, .trust-item__disc { transition: none !important; }
  .trust-item:hover .trust-item__ring { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Plain card (inner pages) — no coloured band. The colour lives in the */
/* TITLE only; the card itself stays clean white.                       */
/* ------------------------------------------------------------------ */
.plain-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.26);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 10px 26px -18px rgba(2, 132, 199, 0.32);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.plain-card:hover {
  transform: translateY(-4px);
  border-color: rgba(2, 132, 199, 0.55);
  box-shadow: 0 20px 38px -20px rgba(2, 132, 199, 0.42);
}

.plain-card__icon {
  display: grid;
  place-items: center;
  height: 3rem;
  width: 3rem;
  border-radius: .9rem;
  background: rgba(14, 165, 233, 0.10);
  color: #0369a1;
}

/* Coloured + bolder title — the only accent on these cards. */
.plain-card__title {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: #0284c7;
}

.plain-card__text {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #6b7794;
}

@media (prefers-reduced-motion: reduce) {
  .plain-card { transition: none !important; }
  .plain-card:hover { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* "Business-card" style panel: a coloured corner block with a curved   */
/* swoosh cut into it, over a white body. Palette = blue → sky → teal.  */
/* ------------------------------------------------------------------ */
.swoosh-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.32);
  border-radius: 1.25rem;
  padding: 1.75rem;
  padding-top: 5.9rem;            /* clears the coloured band */
  box-shadow: 0 12px 30px -18px rgba(2, 132, 199, 0.40);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.swoosh-card:hover {
  transform: translateY(-6px);
  border-color: rgba(2, 132, 199, 0.70);
  box-shadow: 0 22px 42px -20px rgba(2, 132, 199, 0.50);
}

/* The coloured corner block. The large bottom-left radius creates the
   curved "swoosh" sweeping into the white area. */
.swoosh-band {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 6.25rem;
  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 55%, #0ea5a3 100%);
  border-bottom-left-radius: 5rem;
  z-index: 0;
}

/* Matching accent strip along the bottom-left. */
.swoosh-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: .4rem;
  background: linear-gradient(90deg, #0ea5a3 0%, #0ea5e9 100%);
  border-top-right-radius: 1rem;
}

/* Logo-style badge sitting on the white side, mirroring the reference. */
.swoosh-icon {
  position: absolute;
  top: 1.55rem;
  left: 1.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 3.25rem;
  width: 3.25rem;
  border-radius: 9999px;
  background: #ffffff;
  color: #0369a1;
  border: 1.5px solid rgba(14, 165, 233, 0.40);
  box-shadow: 0 8px 18px -10px rgba(2, 132, 199, 0.45);
}

.swoosh-title {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0b1f4d;
}
.swoosh-text {
  position: relative;
  z-index: 1;
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #6b7794;
}

@media (prefers-reduced-motion: reduce) {
  .swoosh-card { transition: none !important; }
  .swoosh-card:hover { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Process flow — serpentine: gradient icon circles on a connector line, */
/* left→right on the top row, U-turn on the right, right→left below.     */
/* Stacks into a vertical timeline under 1024px.                         */
/* ------------------------------------------------------------------ */
.proc-flow {
  --icon: 5rem;            /* circle diameter                */
  --icon-c: 2.5rem;        /* circle centre from row top     */
  /* Row height is fixed so the U-turn geometry stays exact. Measured
     tallest node content is ~189px, so 12.5rem (200px) fits it with a
     small buffer — 15rem was leaving ~51px of dead space per row. */
  --row-h: 12.5rem;
  --row-gap: 1.25rem;
  --line: #0ea5e9;
  position: relative;
}

.proc-flow__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--per-row, 3), 1fr);
  gap: 2rem;
  min-height: var(--row-h);
}
.proc-flow__row + .proc-flow__row { margin-top: var(--row-gap); }
/* Second row runs right→left so the flow continues under the U-turn. */
.proc-flow__row--rev { direction: rtl; }
.proc-flow__row--rev > * { direction: ltr; }

/* Reserve a gutter on each side so the U-turn curves OUTSIDE the columns
   — otherwise its vertical run cuts straight through the step text. */
.proc-flow { padding: 0 var(--turn-w, 3.5rem); }

/* Horizontal connector, pinned to the circle centres. Runs from the first
   circle's centre out to the gutter, where it meets the curve. */
.proc-flow__row::before {
  content: "";
  position: absolute;
  left: calc(100% / var(--per-row, 3) / 2);
  right: 0;
  top: var(--icon-c);
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  z-index: 0;
}

/* The U-turn joining the two rows, sitting in the right-hand gutter. */
.proc-flow__turn {
  position: absolute;
  right: .25rem;
  top: var(--icon-c);
  width: calc(var(--turn-w, 3.5rem) - .25rem);
  height: calc(var(--row-h) + var(--row-gap));
  border: 3px solid var(--line);
  border-left: 0;
  border-radius: 0 3.25rem 3.25rem 0;
  z-index: 0;
}

.proc-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 .5rem;
}

.proc-node__dot {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--icon);
  width: var(--icon);
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 10px 24px -12px rgba(6, 16, 41, .55);
  outline: 6px solid #ffffff;   /* masks the line behind the circle */
  transition: transform .3s ease, box-shadow .3s ease;
}
.proc-node:hover .proc-node__dot {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -14px rgba(6, 16, 41, .6);
}

/* Small step-number badge. */
.proc-node__num {
  position: absolute;
  right: -.35rem;
  bottom: -.35rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .35rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: #fff;
  color: var(--c1);
  border: 2px solid var(--c1);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}

/* Colour progression navy → blue → sky → teal. */
.proc-flow .proc-node:nth-child(1) { --c1: #0b1f4d; --c2: #16357a; }
.proc-flow .proc-node:nth-child(2) { --c1: #12306e; --c2: #1c4bb8; }
.proc-flow .proc-node:nth-child(3) { --c1: #1d4ed8; --c2: #3b7ae8; }
.proc-flow__row--rev .proc-node:nth-child(1) { --c1: #0369a1; --c2: #0ea5e9; }
.proc-flow__row--rev .proc-node:nth-child(2) { --c1: #0284c7; --c2: #38bdf8; }
.proc-flow__row--rev .proc-node:nth-child(3) { --c1: #0d9488; --c2: #19b8a6; }

.proc-node__title {
  margin-top: 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0b1f4d;
}
.proc-node__text {
  margin-top: .45rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: #6b7794;
  max-width: 22rem;      /* wider now the flow spans the full container */
}

/* Vertical timeline below 1024px — no curve, no overlap risk. */
@media (max-width: 1023px) {
  .proc-flow { padding: 0; }
  .proc-flow__turn { display: none; }
  .proc-flow__row {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    min-height: 0;
    direction: ltr;
  }
  .proc-flow__row + .proc-flow__row { margin-top: 2.25rem; }
  .proc-flow__row::before {
    left: 1.6rem;
    right: auto;
    top: 1rem;
    bottom: 1rem;
    height: auto;
    width: 3px;
  }
  /* Grid so the title stacks ABOVE the description beside the dot,
     instead of all three sitting in one row. */
  .proc-node {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.15rem;
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .proc-node__dot {
    --icon: 3.25rem;
    grid-column: 1;
    grid-row: 1 / span 2;
    outline-width: 5px;
  }
  .proc-node__title { grid-column: 2; grid-row: 1; margin-top: .2rem; }
  .proc-node__text  { grid-column: 2; grid-row: 2; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .proc-node__dot { transition: none !important; }
  .proc-node:hover .proc-node__dot { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Swipeable card carousel (native scroll-snap — no library needed).   */
/* Shows 3 slides on desktop, 2 on tablet, 1 on mobile.                */
/* ------------------------------------------------------------------ */
.swiper { position: relative; }

.swiper-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 0.75rem;
  /* hide the scrollbar but keep it scrollable/swipeable */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.swiper-track::-webkit-scrollbar { display: none; }
.swiper-track:focus-visible { outline: 2px solid rgba(14, 165, 233, .6); outline-offset: 4px; border-radius: 1rem; }

.swiper-slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
  min-width: 0;
}
.swiper-slide > a { height: 100%; }

@media (min-width: 640px) {
  .swiper-slide { flex-basis: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
  .swiper-slide { flex-basis: calc(33.3333% - 1rem); }
}

/* Arrow buttons */
.swiper-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 9999px;
  background: #ffffff;
  color: #0b1f4d;
  border: 1.5px solid rgba(14, 165, 233, 0.45);
  box-shadow: 0 10px 24px -12px rgba(2, 132, 199, 0.5);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}
.swiper-btn:hover { background: #0ea5e9; color: #fff; transform: translateY(-50%) scale(1.06); }
.swiper-btn[disabled] { opacity: .35; cursor: default; }
.swiper-btn[disabled]:hover { background: #fff; color: #0b1f4d; transform: translateY(-50%); }
.swiper-prev { left: -1.25rem; }
.swiper-next { right: -1.25rem; }
@media (min-width: 1024px) {
  .swiper-btn { display: grid; }
}

/* Progress dots */
.swiper-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.swiper-dots button {
  height: .5rem;
  width: .5rem;
  border-radius: 9999px;
  background: rgba(2, 132, 199, .25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}
.swiper-dots button.is-active {
  width: 1.5rem;
  background: #0ea5e9;
}

/* Simple bordered info card — white panel, clearly defined azure border.
   (The previous border-primary/10 was only 10% opacity, so it read as
   borderless.) Plain CSS so it can't be lost to the Tailwind build. */
.info-card {
  background: #ffffff;
  border: 1.5px solid rgba(14, 165, 233, 0.38);
  box-shadow: 0 10px 26px -16px rgba(2, 132, 199, 0.35);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(2, 132, 199, 0.70);
  box-shadow: 0 20px 38px -20px rgba(2, 132, 199, 0.45);
}

/* Soft azure section band — subtle colour at SECTION level (the page itself
   stays white). Alternating sections keep the page from feeling flat. */
.lab-section {
  position: relative;
  background: linear-gradient(180deg, #f6fbff 0%, #eaf4ff 100%) !important;
}

/* Plain `bg-surface` sections get the same gentle azure tint. */
main section.bg-surface {
  background: linear-gradient(180deg, #f6fbff 0%, #eef6ff 100%) !important;
}

/* ------------------------------------------------------------------ */
/* 5. Gradient CTA buttons — blue→teal mix, bolder border & shade.     */
/*    Applied via the .btn-grad class (added in button() + navbar CTA).*/
/* ------------------------------------------------------------------ */
.btn-grad {
  background-image: linear-gradient(120deg, #1b3fd6 0%, #2563ff 42%, #1f9fce 100%);
  background-size: 160% 160%;
  background-position: 0% 50%;
  border: 1.5px solid rgba(37, 99, 255, 0.65);
  color: #fff !important;
  box-shadow:
    0 12px 26px -10px rgba(37, 99, 255, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: background-position .5s ease, box-shadow .3s ease, transform .2s ease, border-color .3s ease;
}
.btn-grad:hover,
.btn-grad:focus-visible {
  background-position: 100% 50%;
  border-color: rgba(14, 165, 163, 0.85);
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px -10px rgba(37, 99, 255, 0.70),
    0 0 0 3px rgba(37, 99, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .btn-grad { transition: none !important; }
  .btn-grad:hover, .btn-grad:focus-visible { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Accessibility: honour reduced-motion — kill all movement.          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient,
  .hero-aurora,
  .nav-gradient,
  .glass-card,
  .glass-card::after,
  .glass-card .lab-icon-tile {
    animation: none !important;
    transition: none !important;
  }
}