/* =============================================================
   BioDevs – Main stylesheet
   Order: reset → base → layout → header → hero → sections
          → components → footer → utilities → responsive
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-blue-600); outline-offset: 3px; border-radius: 4px; }

/* ---------- Base typography ---------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--c-ink); line-height: var(--lh-tight); font-weight: 700; }
h2 { font-size: var(--fs-h2); letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
p  { color: var(--c-body); }
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.accent-teal { color: var(--c-teal-600); }
.accent-blue { color: var(--c-blue-600); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-8); }
.section--alt { background: var(--c-surface); }
.section__head { max-width: var(--maxw-text); margin-bottom: var(--sp-5); }
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-teal-600); margin-bottom: var(--sp-2);
}
.lead { font-size: var(--fs-lead); color: var(--c-muted); line-height: var(--lh-snug); }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100;
  display: flex; align-items: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-sm);
}
.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-3); }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--c-ink); letter-spacing: -.01em; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand b { font-weight: 700; }
.brand .gradient-text { font-weight: 700; }

.nav__links { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.8rem); list-style: none; }
.nav__links a { font-size: .95rem; font-weight: 500; color: var(--c-body); padding: .4rem .2rem; position: relative; transition: color .25s var(--ease); }
.nav__links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); border-radius: 2px; }
.nav__links a:hover { color: var(--c-ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: .8rem; }

/* Language toggle – split circle (FR flag left, UK flag right) */
.lang-circle { position: relative; display: inline-flex; width: 26px; height: 26px; padding: 0; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid var(--c-line); background: var(--c-bg); box-shadow: var(--sh-sm); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .9s var(--ease); }
.lang-circle:hover { transform: translateY(-1px) scale(1.05); box-shadow: var(--sh-md, 0 6px 16px rgba(2,32,71,.18)); }
.lang-circle__half { position: relative; width: 50%; height: 100%; overflow: hidden; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.lang-circle__half svg { width: 100%; height: 100%; display: block; }
/* dim whichever side is NOT the active language */
.lang-circle.is-en .lang-circle__fr,
.lang-circle.is-fr .lang-circle__uk { filter: grayscale(1); opacity: .35; }
/* thin centre divider */
.lang-circle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-.5px); background: rgba(255,255,255,.65); z-index: 2; pointer-events: none; }

/* Language-switch fade: quick fade-out, slower fade-in with the new language */
main, .site-footer, .nav__links, .nav__actions .btn { transition: opacity .9s var(--ease); }
body.lang-switching main,
body.lang-switching .site-footer,
body.lang-switching .nav__links,
body.lang-switching .nav__actions .btn,
body.lang-switching .lang-circle { opacity: 0; transition: opacity .3s var(--ease); }

/* Mobile nav toggle */
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.nav__burger span { width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .98rem; padding: .8rem 1.5rem; border-radius: var(--r-pill); border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease); white-space: nowrap; }
.btn svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.btn--primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 8px 22px rgba(37,99,235,.28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,99,235,.36); }
.btn--primary:hover svg { transform: translateX(3px); }
.btn--ghost { background: var(--c-bg); color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-teal-600); color: var(--c-teal-600); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--header-h) + var(--sp-7)); padding-bottom: var(--sp-7); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--c-bg); }
.hero__bg::before { /* soft brand blobs */
  content:""; position:absolute; inset:-20% -10% auto -10%; height: 70%; z-index: 0;
  background:
    radial-gradient(40% 55% at 18% 25%, rgba(8,145,178,.16), transparent 70%),
    radial-gradient(45% 60% at 82% 15%, rgba(37,99,235,.16), transparent 70%);
  filter: blur(8px);
}
.hero__bg::after { /* subtle grid */
  content:""; position:absolute; inset:0; z-index: 1;
  background-image: linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 56px 56px; opacity:.28;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 35%, #000 30%, transparent 80%);
          mask-image: radial-gradient(75% 60% at 50% 35%, #000 30%, transparent 80%);
}
.hero__net { /* animated data-network canvas */
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 40%, #000 45%, transparent 92%);
          mask-image: radial-gradient(80% 75% at 50% 40%, #000 45%, transparent 92%);
}
.hero__inner { max-width: 880px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600;
  letter-spacing: -.005em;
  color: var(--c-teal-600); background: var(--c-white); border: 1px solid var(--c-line);
  padding: .6rem 1.25rem; border-radius: var(--r-pill); box-shadow: var(--sh-sm); margin-bottom: var(--sp-3);
}
.hero__badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-cyan-400); box-shadow: 0 0 0 4px rgba(34,211,238,.18); flex: none; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.03em; color: var(--c-ink); margin-bottom: var(--sp-3); }
.hero__lead { font-size: var(--fs-lead); color: var(--c-muted); max-width: 620px; margin-bottom: var(--sp-4); line-height: var(--lh-snug); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero__note { margin-top: var(--sp-4); color: var(--c-muted); font-size: var(--fs-small); max-width: 520px; line-height: var(--lh-snug); }

/* Hero two-column layout */
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: center; }
.hero__grid .hero__inner { max-width: 620px; }
.hero__viz { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-3); }
.pipe { width: 100%; height: auto; display: block; }

/* ---------- Pipeline animation ---------- */
.pipe__rail, .pipe__link { stroke: var(--c-line); stroke-width: 2; }
.pipe__card { fill: var(--c-bg); stroke: var(--c-line); stroke-width: 1; }
.pipe__label { fill: var(--c-ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.pipe__pulse { fill: #0e7490; animation: pulseStep 6.4s var(--ease) infinite; }
.pipe__node { fill: #fff; stroke: var(--nc, var(--c-teal-600)); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: nodeFlash 6.4s linear var(--d, 0s) infinite; }

/* Stage 1 – specimen under a scanner: cell -> organ -> animal */
.vf { stroke: var(--c-teal-600); stroke-width: 2; fill: none; stroke-linecap: round; }
.spec-cell, .spec-brain, .spec-mouse { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spec-cell  { stroke: var(--c-teal-600); animation: sp1 9.6s ease-in-out infinite; }
.spec-brain { stroke: var(--c-teal-600); animation: sp2 9.6s ease-in-out infinite; }
.spec-mouse { stroke: var(--c-blue-600); animation: sp3 9.6s ease-in-out infinite; }
.spec-cell .nuc { fill: var(--c-teal-600); stroke: none; }
.spec-mouse .eye { fill: var(--c-blue-600); stroke: none; }
.scan2 { stroke: var(--c-cyan-400); stroke-width: 2.5; stroke-linecap: round; animation: scanY 9.6s ease-in-out infinite; }

/* Stage 2 – data: ripple (centre) -> fill & clear (reverse) -> diagonal -> column sweep */
.data .cell { fill: var(--c-teal-600); opacity: .16; animation-duration: 12s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.data .cell:nth-of-type(1){animation-name:dc1;fill:#0e7490} .data .cell:nth-of-type(2){animation-name:dc2;fill:#11729b} .data .cell:nth-of-type(3){animation-name:dc3;fill:#1470a7}
.data .cell:nth-of-type(4){animation-name:dc4;fill:#176eb2} .data .cell:nth-of-type(5){animation-name:dc5;fill:#1a6cbe} .data .cell:nth-of-type(6){animation-name:dc6;fill:#1c69c9}
.data .cell:nth-of-type(7){animation-name:dc7;fill:#1f67d4} .data .cell:nth-of-type(8){animation-name:dc8;fill:#2265e0} .data .cell:nth-of-type(9){animation-name:dc9;fill:#2563eb}

/* Stage 3 – bars up & down, then scatter + regression, then fade */
.axis { stroke: var(--c-line); stroke-width: 2; stroke-linecap: round; }
.fig-bars { animation: figBars 9.6s ease-in-out infinite; }
.fig-reg  { animation: figReg 9.6s ease-in-out infinite; }
.bar { fill: var(--c-blue-500); transform-box: fill-box; transform-origin: 50% 100%; animation: barCycle 9.6s ease-in-out infinite; }
.bar:nth-of-type(2){animation-delay:.12s} .bar:nth-of-type(3){animation-delay:.24s} .bar:nth-of-type(4){animation-delay:.36s}
.dot { fill: var(--c-teal-600); transform-box: fill-box; transform-origin: center; animation: dotPop 9.6s ease-in-out infinite; }
.dot:nth-of-type(1){fill:#0e7490}
.dot:nth-of-type(2){fill:#1371a2;animation-delay:.15s} .dot:nth-of-type(3){fill:#176db4;animation-delay:.3s} .dot:nth-of-type(4){fill:#1c6ac7;animation-delay:.45s} .dot:nth-of-type(5){fill:#2066d9;animation-delay:.6s} .dot:nth-of-type(6){fill:#2563eb;animation-delay:.75s}
.reg { fill: none; stroke: var(--c-blue-600); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 170; animation: drawReg 9.6s ease-in-out infinite; }

/* Stage 4 – two distributions + p-value */
.mean { stroke: var(--c-muted); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0; animation: meanFade 6.4s ease-in-out infinite; }
.gaussA { fill: none; stroke: var(--c-teal-600); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 210; animation: drawCurve 6.4s ease-in-out infinite; }
.gaussB { fill: none; stroke: var(--c-blue-600); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 210; animation: drawCurve 6.4s ease-in-out infinite; animation-delay: .35s; }
.sig { fill: none; stroke: var(--c-muted); stroke-width: 1.4; opacity: 0; animation: fadeSig 6.4s ease-in-out infinite; }
.pval { fill: var(--c-ink); font-family: var(--font-body); font-size: 12px; font-weight: 600; text-anchor: middle; opacity: 0; animation: fadeSig 6.4s ease-in-out infinite; }

@keyframes pulseStep {
  0%{transform:translateY(0);fill:#0e7490;opacity:0}
  4%{opacity:1}
  20%{transform:translateY(0);fill:#0e7490}
  27%{transform:translateY(96px);fill:#166eae}
  45%{transform:translateY(96px);fill:#166eae}
  52%{transform:translateY(192px);fill:#1d69cd}
  70%{transform:translateY(192px);fill:#1d69cd}
  77%{transform:translateY(288px);fill:#2563eb}
  93%{transform:translateY(288px);fill:#2563eb;opacity:1}
  98%{transform:translateY(288px);opacity:0}
  100%{transform:translateY(0);fill:#0e7490;opacity:0}
}
@keyframes nodeFlash { 0%,2%{fill:#fff;transform:scale(1)} 6%{fill:var(--nc);transform:scale(1.5)} 14%{fill:var(--nc)} 26%,100%{fill:#fff;transform:scale(1)} }
/* Scan bar – three synced passes (one per specimen). The bar descends,
   reaches the bottom and disappears; only then does the organism swap. */
@keyframes scanY {
  0%    { transform: translateY(0);    opacity: 0; }
  2%    { opacity: .9; }
  18%   { transform: translateY(44px); opacity: .9; }
  23%   { transform: translateY(44px); opacity: 0; }
  33.3% { transform: translateY(0);    opacity: 0; }
  35.3% { opacity: .9; }
  51.6% { transform: translateY(44px); opacity: .9; }
  56.6% { transform: translateY(44px); opacity: 0; }
  66.6% { transform: translateY(0);    opacity: 0; }
  68.6% { opacity: .9; }
  84.9% { transform: translateY(44px); opacity: .9; }
  89.9% { transform: translateY(44px); opacity: 0; }
  100%  { transform: translateY(0);    opacity: 0; }
}
/* Specimens swap only in the rest-beats between scans, with a pause between each */
@keyframes sp1 { 0%{opacity:1} 24%{opacity:1} 29%{opacity:0} 95%{opacity:0} 100%{opacity:1} }
@keyframes sp2 { 0%{opacity:0} 29%{opacity:0} 34%{opacity:1} 57%{opacity:1} 62%{opacity:0} 100%{opacity:0} }
@keyframes sp3 { 0%{opacity:0} 62%{opacity:0} 67%{opacity:1} 90%{opacity:1} 95%{opacity:0} 100%{opacity:0} }
@keyframes dc1 { 0%,9%{opacity:.12} 11%{opacity:.7} 13.5%,37%{opacity:.12} 39%,46%{opacity:.7} 49%,51%{opacity:.12} 53%{opacity:.7} 55.5%,76%{opacity:.12} 78%{opacity:.7} 80.5%,100%{opacity:.12} }
@keyframes dc2 { 0%,5%{opacity:.12} 7%{opacity:.7} 9.5%,35.5%{opacity:.12} 37.5%,46%{opacity:.7} 49%,54%{opacity:.12} 56%{opacity:.7} 58.5%,81%{opacity:.12} 83%{opacity:.7} 85.5%,100%{opacity:.12} }
@keyframes dc3 { 0%,9%{opacity:.12} 11%{opacity:.7} 13.5%,34%{opacity:.12} 36%,46%{opacity:.7} 49%,57%{opacity:.12} 59%{opacity:.7} 61.5%,86%{opacity:.12} 88%{opacity:.7} 90.5%,100%{opacity:.12} }
@keyframes dc4 { 0%,5%{opacity:.12} 7%{opacity:.7} 9.5%,32.5%{opacity:.12} 34.5%,46%{opacity:.7} 49%,54%{opacity:.12} 56%{opacity:.7} 58.5%,76%{opacity:.12} 78%{opacity:.7} 80.5%,100%{opacity:.12} }
@keyframes dc5 { 0%,1%{opacity:.12} 3%{opacity:.7} 5.5%,31%{opacity:.12} 33%,46%{opacity:.7} 49%,57%{opacity:.12} 59%{opacity:.7} 61.5%,81%{opacity:.12} 83%{opacity:.7} 85.5%,100%{opacity:.12} }
@keyframes dc6 { 0%,5%{opacity:.12} 7%{opacity:.7} 9.5%,29.5%{opacity:.12} 31.5%,46%{opacity:.7} 49%,60%{opacity:.12} 62%{opacity:.7} 64.5%,86%{opacity:.12} 88%{opacity:.7} 90.5%,100%{opacity:.12} }
@keyframes dc7 { 0%,9%{opacity:.12} 11%{opacity:.7} 13.5%,28%{opacity:.12} 30%,46%{opacity:.7} 49%,57%{opacity:.12} 59%{opacity:.7} 61.5%,76%{opacity:.12} 78%{opacity:.7} 80.5%,100%{opacity:.12} }
@keyframes dc8 { 0%,5%{opacity:.12} 7%{opacity:.7} 9.5%,26.5%{opacity:.12} 28.5%,46%{opacity:.7} 49%,60%{opacity:.12} 62%{opacity:.7} 64.5%,81%{opacity:.12} 83%{opacity:.7} 85.5%,100%{opacity:.12} }
@keyframes dc9 { 0%,9%{opacity:.12} 11%{opacity:.7} 13.5%,25%{opacity:.12} 27%,46%{opacity:.7} 49%,63%{opacity:.12} 65%{opacity:.7} 67.5%,86%{opacity:.12} 88%{opacity:.7} 90.5%,100%{opacity:.12} }
@keyframes meanFade  { 0%,6%{opacity:0} 14%{opacity:.7} 84%{opacity:.7} 96%,100%{opacity:0} }
@keyframes barCycle { 0%{transform:scaleY(.06)} 18%{transform:scaleY(1)} 30%{transform:scaleY(1)} 42%{transform:scaleY(.06)} 100%{transform:scaleY(.06)} }
@keyframes figBars { 0%,40%{opacity:1} 47%,100%{opacity:0} }
@keyframes figReg  { 0%,42%{opacity:0} 50%{opacity:1} 88%{opacity:1} 95%,100%{opacity:0} }
@keyframes dotPop  { 0%,44%{transform:scale(0)} 54%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes drawReg { 0%,56%{stroke-dashoffset:170} 78%,100%{stroke-dashoffset:0} }
@keyframes drawCurve{ 0%{stroke-dashoffset:210;opacity:0} 8%{opacity:1} 55%{stroke-dashoffset:0} 84%{stroke-dashoffset:0;opacity:1} 96%{opacity:0} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes fadeSig { 0%,45%{opacity:0} 70%{opacity:1} 84%{opacity:1} 96%,100%{opacity:0} }

/* ---------- Services grid: balanced rows (3 then 2), centered ---------- */
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.services-grid .card { flex: 0 1 calc((100% - 2 * var(--sp-3)) / 3); min-width: 248px; }

/* ---------- Outcomes & author (Why us) ---------- */
.outcomes { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; max-width: 760px; }
.row-break { flex-basis: 100%; height: 0; }
.outcome { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--c-ink); background: var(--brand-gradient-soft); border: 1px solid var(--c-line); padding: .55rem 1.05rem; border-radius: var(--r-pill); }
.outcome svg { width: 18px; height: 18px; color: var(--c-teal-600); }
.why-impact { display: flex; gap: 1rem; align-items: center; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--brand-gradient-soft); border: 1px solid var(--c-line); border-radius: var(--r-lg); max-width: 760px; }
.why-impact svg { width: 30px; height: 30px; flex: none; color: var(--c-teal-600); }
.why-impact p { color: var(--c-ink); font-size: 1.02rem; line-height: var(--lh-snug); }
.author { display: flex; gap: 1rem; align-items: center; margin-top: var(--sp-5); padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); max-width: 720px; }
.author__avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.author__name { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); margin-bottom: .2rem; }
.author__desc { color: var(--c-muted); font-size: .95rem; }
.author__links { display: flex; gap: .6rem; margin-top: .7rem; }
.author__links a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-muted); transition: transform .25s var(--ease), color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.author__links a:hover { color: #fff; background: var(--brand-gradient); border-color: transparent; transform: translateY(-2px); }
.author__links svg { width: 18px; height: 18px; }

/* ---------- Services grid ---------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-gradient-soft); color: var(--c-teal-600); margin-bottom: var(--sp-2); }
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--c-muted); font-size: .98rem; }

/* ---------- Case study (tabbed) ---------- */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
.case__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--c-line); background: #000; transition: height .5s var(--ease); }
/* height is set explicitly by JS (overrides aspect-ratio); panels overlay & cross-fade */
.case__media.is-measured { aspect-ratio: auto; }
.case__panel { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.case__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.case__panel video, .case__panel img { display: block; width: 100%; height: 100%; object-fit: contain; }

.tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--sp-3); }
.tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-muted); font-family: var(--font-display); font-weight: 600; font-size: .92rem; transition: transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.tab__logo { width: 24px; height: 24px; object-fit: contain; }
.tab:hover { border-color: var(--c-teal-600); color: var(--c-ink); transform: translateY(-2px); }
.tab.is-active { background: var(--brand-gradient-soft); border-color: transparent; color: var(--c-ink); box-shadow: var(--sh-sm); }

.case__info { display: none; }
.case__info.is-active { display: block; animation: fadeInfo .45s var(--ease); }
.case__info p { color: var(--c-body); }
.case__papers { font-size: var(--fs-small); color: var(--c-muted); font-weight: 600; margin-top: var(--sp-2); margin-bottom: .2rem; }
.case__cta, .case__paper { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-teal-600); font-family: var(--font-display); font-weight: 600; transition: color .25s var(--ease); }
.case__cta { margin-top: var(--sp-2); }
.case__paper { margin-top: .45rem; }
.case__cta svg, .case__paper svg { width: 1em; height: 1em; }
.case__cta:hover, .case__paper:hover { color: var(--c-blue-600); }
@keyframes fadeInfo { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--sp-2); }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); }
.field input, .field textarea { font: inherit; padding: .75rem .9rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-ink); color: #c6d2dd; padding-block: var(--sp-6) var(--sp-4); }
.site-footer a { color: #c6d2dd; transition: color .25s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); font-size: var(--fs-small); color: #8aa0b3; }

/* ---------- Scroll-reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .18s; }
[data-reveal][data-delay="2"] { transition-delay: .36s; }
[data-reveal][data-delay="3"] { transition-delay: .54s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .case, .contact { grid-template-columns: 1fr; }
  .case__media { order: -1; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero__viz { width: 100%; max-width: 460px; }
}
@media (max-width: 720px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__burger { display: flex; }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    padding: var(--sp-3) var(--gutter); border-bottom: 1px solid var(--c-line); box-shadow: var(--sh-md);
  }
  .grid--3 { grid-template-columns: 1fr; }
  .section { padding-block: var(--sp-6); }
}