@font-face {
  font-family: "Funnel Display";
  src: url("assets/fonts/FunnelDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Display";
  src: url("assets/fonts/FunnelDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Display";
  src: url("assets/fonts/FunnelDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Display";
  src: url("assets/fonts/FunnelDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --moss: #264500;
  --axis: #82b86b;
  --veil: #a2bdad;
  --core: #90377c;
  --method: #262400;
  --nova: #7a9a45;
  --spore: #849c96;
  --bloom: #4e3b45;
  --stem: #170e00;
  --pulse: #618b39;
  --glass: #94777c;
  --cell: #4d003c;

  --ink: #17161a;
  --ink-soft: #575861;
  --paper: #e9eeec;
  --line: rgba(24, 22, 30, 0.12);
  --radius-xl: 0px;
  --radius-lg: 0px;
  --shadow: 0 20px 46px rgba(24, 20, 34, 0.12);
  --max-width: 1160px;
  --topbar-offset: max(1.55rem, calc(env(safe-area-inset-top) + 1.55rem));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: "Funnel Display", "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  overflow-x: hidden;
}

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

.bg-layer {
  --water-x: 0px;
  --water-y: 0px;
  --water-rot: 0deg;
  --water-scale: 0;
  --water-a-x: 0%;
  --water-a-y: 0%;
  --water-b-x: 100%;
  --water-b-y: 100%;
  --water-c-x: 50%;
  --water-c-y: 50%;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(130% 120% at 8% -12%, rgba(162, 189, 173, 0.24) 0%, rgba(162, 189, 173, 0) 62%),
    radial-gradient(120% 130% at 94% 118%, rgba(148, 119, 124, 0.2) 0%, rgba(148, 119, 124, 0) 66%);
}

.bg-layer::before,
.bg-layer::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.bg-layer::before {
  background:
    radial-gradient(34% 28% at 16% 25%, rgba(130, 184, 107, 0.2) 0%, rgba(130, 184, 107, 0) 100%),
    radial-gradient(40% 33% at 78% 74%, rgba(132, 156, 150, 0.22) 0%, rgba(132, 156, 150, 0) 100%),
    radial-gradient(31% 24% at 48% 58%, rgba(148, 119, 124, 0.18) 0%, rgba(148, 119, 124, 0) 100%),
    radial-gradient(28% 22% at 87% 18%, rgba(97, 139, 57, 0.14) 0%, rgba(97, 139, 57, 0) 100%);
  filter: blur(54px) saturate(108%);
  opacity: 0.72;
  transform: translate3d(var(--water-x), var(--water-y), 0)
    scale(calc(1.08 + var(--water-scale)))
    rotate(var(--water-rot));
  animation: waterDrift 32s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.bg-layer::after {
  background:
    repeating-radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.16) 0 1.2px, transparent 1.4px 24px),
    repeating-radial-gradient(circle at 82% 72%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.2px 22px),
    linear-gradient(128deg, rgba(148, 119, 124, 0.12) 0%, rgba(132, 156, 150, 0.1) 42%, rgba(130, 184, 107, 0.12) 100%);
  mix-blend-mode: soft-light;
  filter: blur(12px) saturate(112%);
  opacity: 0.5;
  transform: translate3d(calc(var(--water-x) * -0.52), calc(var(--water-y) * -0.48), 0)
    scale(calc(1.16 + (var(--water-scale) * 0.72)));
  background-position:
    var(--water-a-x) var(--water-a-y),
    var(--water-b-x) var(--water-b-y),
    var(--water-c-x) var(--water-c-y);
  animation: waterCaustics 26s linear infinite;
  will-change: transform, background-position;
}

.bio-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.24;
  filter: saturate(112%);
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
}

.bg-shape-a {
  width: 44rem;
  height: 44rem;
  top: -18rem;
  left: -8rem;
  background: var(--veil);
  animation: bgBlobA 34s ease-in-out infinite alternate;
}

.bg-shape-b {
  width: 34rem;
  height: 34rem;
  right: -5rem;
  bottom: -10rem;
  background: var(--glass);
  animation: bgBlobB 30s ease-in-out infinite alternate;
}

.container {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
}

.topbar {
  position: fixed;
  top: var(--topbar-offset);
  left: 0;
  right: 0;
  z-index: 300;
  padding-top: 0;
}

main {
  padding-top: calc(9.6rem + var(--topbar-offset));
  background: #fff;
}

.topbar-inner {
  min-height: 124px;
  padding: 0.55rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  border-radius: 0;
  border: 1px solid rgba(121, 134, 128, 0.28);
  background: linear-gradient(130deg, rgba(246, 248, 247, 0.72) 0%, rgba(238, 242, 240, 0.6) 100%);
  box-shadow: 0 10px 30px rgba(30, 34, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  overflow: visible;
  transition:
    min-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.34s ease,
    background 0.34s ease;
}

.brand {
  display: block;
}

.logo-liquid {
  --mx: 50%;
  --my: 50%;
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
  --pulse: 0;
  --film-x: 50%;
  --film-y: 50%;
  --film-tilt: 0deg;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  min-width: 392px;
  padding: 0.45rem 0.8rem;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition:
    min-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    min-width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.logo-liquid::before {
  content: none;
}

.logo-liquid::after {
  content: none;
}

.logo-glyph {
  position: relative;
  display: block;
  z-index: 3;
  width: 290px;
  height: 96px;
  -webkit-mask-image: url("assets/brand/logo-white-cropped.png");
  mask-image: url("assets/brand/logo-white-cropped.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  overflow: hidden;
  transition:
    width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.34s ease;
}

.logo-glyph::before {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(170px 130px at var(--mx) var(--my), rgba(97, 139, 57, 0.96) 0%, rgba(97, 139, 57, 0.45) 34%, transparent 62%),
    radial-gradient(220px 180px at calc(var(--mx) - 26%) calc(var(--my) + 24%), rgba(77, 0, 60, 0.9) 0%, rgba(77, 0, 60, 0.38) 34%, transparent 64%),
    radial-gradient(205px 160px at calc(var(--mx) + 28%) calc(var(--my) - 22%), rgba(38, 69, 0, 0.88) 0%, rgba(38, 69, 0, 0.42) 36%, transparent 64%),
    radial-gradient(240px 190px at calc(var(--mx) + 34%) calc(var(--my) + 26%), rgba(132, 156, 150, 0.95) 0%, rgba(132, 156, 150, 0.38) 34%, transparent 64%),
    conic-gradient(from calc(var(--rot) + 22deg) at var(--mx) var(--my), rgba(130, 184, 107, 0.24) 0deg, rgba(132, 156, 150, 0.22) 110deg, rgba(77, 0, 60, 0.24) 220deg, rgba(38, 69, 0, 0.22) 360deg),
    linear-gradient(130deg, rgba(44, 48, 44, 0.88) 0%, rgba(78, 103, 79, 0.83) 46%, rgba(67, 54, 69, 0.84) 100%);
  transform: translate3d(var(--dx), var(--dy), 0) scale(calc(1.06 + var(--pulse))) rotate(var(--rot));
  filter: saturate(1.28) contrast(1.14) brightness(1.01);
  opacity: 0.88;
  will-change: transform, filter;
  animation: liquidShift 16s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

.logo-glyph::after {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    linear-gradient(calc(105deg + var(--film-tilt)), rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 30%, transparent 63%),
    radial-gradient(170px 95px at var(--film-x) var(--film-y), rgba(255, 255, 255, 0.32), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.72;
  transform: translate3d(calc(var(--dx) * -0.28), calc(var(--dy) * -0.2), 0);
  animation: filmShimmer 7.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.nav a {
  color: rgba(33, 37, 40, 0.92);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease, font-size 0.3s ease;
}

.nav a:hover {
  color: var(--core);
}

.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(24, 22, 30, 0.24);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 6px 18px rgba(40, 34, 50, 0.1);
  border-radius: 0;
  overflow: hidden;
}

.lang-btn {
  border: 0;
  background: transparent;
  color: rgba(27, 24, 33, 0.82);
  padding: 0.5rem 0.86rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: padding 0.3s ease, font-size 0.3s ease, background 0.3s ease, color 0.3s ease;
}

body.is-scrolled .topbar-inner {
  min-height: 72px;
  padding: 0.18rem 0.58rem;
  border-radius: 0;
  background: linear-gradient(130deg, rgba(246, 248, 247, 0.78) 0%, rgba(238, 242, 240, 0.66) 100%);
  box-shadow: 0 6px 16px rgba(30, 34, 35, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.is-scrolled .logo-liquid {
  min-height: 54px;
  min-width: 236px;
  padding: 0.12rem 0.34rem;
}

body.is-scrolled .logo-glyph {
  width: 170px;
  height: 56px;
}

body.is-scrolled .nav a {
  font-size: 0.92rem;
}

body.is-scrolled .lang-btn {
  font-size: 0.78rem;
  padding: 0.33rem 0.62rem;
}

.lang-btn.is-active {
  color: var(--ink);
  background: #fff;
}

.hero {
  padding-top: 1.3rem;
  padding-bottom: 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.hero-copy,
.hero-panel {
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.hero-copy {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  color: #fff;
  border: 0;
  background: linear-gradient(145deg, rgba(118, 141, 136, 0.78) 0%, rgba(112, 83, 97, 0.74) 100%);
}

.glass-card {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.02) 100%);
  pointer-events: none;
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -24px 48px rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.glass-card-light {
  border-radius: var(--radius-xl);
  border: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.75) 0%, rgba(234, 241, 240, 0.64) 100%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(9px) saturate(130%);
  -webkit-backdrop-filter: blur(9px) saturate(130%);
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}

h1,
h2 {
  margin: 0.55rem 0 0;
  line-height: 1.07;
  font-family: "Funnel Display", "Segoe UI", sans-serif;
  font-weight: 800;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  max-width: 14ch;
}

h2 {
  font-size: clamp(1.5rem, 3.1vw, 2.4rem);
}

h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
}

.lead {
  margin-top: 0.95rem;
  max-width: 60ch;
  color: #2e2f35;
}

.hero-cta {
  margin-top: 1.3rem;
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0.78rem 1.2rem;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(140deg, var(--core) 0%, var(--bloom) 100%);
  box-shadow: 0 12px 30px rgba(78, 59, 69, 0.24);
}

.btn-secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.84);
  border-color: var(--line);
}

.hero-badges {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero-badges li {
  padding: 0.45rem 0.7rem;
  border-radius: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 600;
}

.panel-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero-panel p {
  margin-top: 0.8rem;
  color: rgba(255, 255, 255, 0.96);
}

.living-capsule-wrap {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
}

.bio-lab-wrap {
  margin-top: 1.45rem;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.bioreactor {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.56), rgba(132, 156, 150, 0.2) 52%, rgba(77, 0, 60, 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 14px 38px rgba(255, 255, 255, 0.32), 0 20px 42px rgba(17, 11, 18, 0.36);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.bioreactor-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, rgba(130, 184, 107, 0.9) 55%, rgba(38, 69, 0, 0.4));
  box-shadow: 0 0 18px rgba(130, 184, 107, 0.64);
  animation: corePulse 3s ease-in-out infinite;
}

.bioreactor-net {
  position: absolute;
  inset: 0;
}

.bioreactor-net path {
  stroke: rgba(230, 247, 238, 0.72);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: netFlow 8s linear infinite;
}

.bioreactor-net path:nth-child(2) {
  animation-delay: -2s;
}

.bioreactor-net path:nth-child(3) {
  animation-delay: -4s;
}

.bioreactor-net path:nth-child(4) {
  animation-delay: -6s;
}

.node {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #d4f2e0 45%, rgba(130, 184, 107, 0.36) 100%);
  box-shadow: 0 0 10px rgba(162, 189, 173, 0.6);
  animation: nodePulse 2.6s ease-in-out infinite;
}

.node-1 {
  left: 18%;
  top: 24%;
}

.node-2 {
  left: 44%;
  top: 14%;
  animation-delay: -0.3s;
}

.node-3 {
  left: 72%;
  top: 24%;
  animation-delay: -0.8s;
}

.node-4 {
  left: 16%;
  top: 58%;
  animation-delay: -1.2s;
}

.node-5 {
  left: 44%;
  top: 50%;
  animation-delay: -0.4s;
}

.node-6 {
  left: 74%;
  top: 60%;
  animation-delay: -1.5s;
}

.node-7 {
  left: 28%;
  top: 78%;
  animation-delay: -1.8s;
}

.node-8 {
  left: 60%;
  top: 80%;
  animation-delay: -0.6s;
}

.living-capsule {
  position: relative;
  width: 96px;
  aspect-ratio: 10 / 16;
  border-radius: 42% 42% 36% 36% / 30% 30% 58% 58%;
  border: 1px solid rgba(255, 255, 255, 0.54);
  background: linear-gradient(180deg, rgba(224, 236, 236, 0.36) 0%, rgba(168, 197, 192, 0.2) 45%, rgba(148, 119, 124, 0.2) 100%);
  box-shadow: inset 0 14px 28px rgba(255, 255, 255, 0.24), 0 10px 24px rgba(18, 12, 20, 0.25);
  overflow: hidden;
}

.capsule-neck {
  position: absolute;
  top: -12px;
  left: 33%;
  width: 34%;
  height: 16px;
  border-radius: 8px 8px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(241, 245, 247, 0.33);
}

.cell-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.92) 0%, rgba(164, 207, 211, 0.42) 55%, rgba(132, 156, 150, 0.14) 100%);
  animation: cellFloat 8s ease-in-out infinite;
}

.cell-dot-1 {
  width: 14px;
  height: 14px;
  top: 34%;
  left: 22%;
  animation-delay: -0.8s;
}

.cell-dot-2 {
  width: 11px;
  height: 11px;
  top: 56%;
  left: 56%;
  animation-delay: -2.2s;
}

.cell-dot-3 {
  width: 9px;
  height: 9px;
  top: 47%;
  left: 34%;
  animation-delay: -3.3s;
}

.cell-dot-4 {
  width: 16px;
  height: 16px;
  top: 70%;
  left: 30%;
  animation-delay: -1.1s;
}

.cell-dot-5 {
  width: 8px;
  height: 8px;
  top: 28%;
  left: 62%;
  animation-delay: -2.8s;
}

.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 1px solid rgba(230, 248, 250, 0.62);
  border-radius: 50%;
  opacity: 0;
  animation: ripplePulse 5.8s ease-out infinite;
}

.ripple-2 {
  animation-delay: -2.9s;
}

.living-caption {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.84);
  max-width: 33ch;
}

.section {
  padding: 3.15rem 0;
}

.section-plain {
  background: #fff;
}

.section-band {
  background: linear-gradient(180deg, #f7f9f8 0%, #f2f5f4 100%);
  border-top: 0;
  border-bottom: 0;
}

#about.section-band {
  background-image: url("assets/about/base-marca-29.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#purpose.section-plain {
  background: #a7bcae;
}

#science.section-plain {
  background: #4e3b44;
}

#about .section-head .eyebrow,
#about .section-head h2 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#science .section-head .eyebrow,
#science .section-head h2,
#science .section-head p:not(.eyebrow) {
  color: #fff;
}

.section-head {
  max-width: 74ch;
}

.section-head.compact {
  max-width: 64ch;
}

.section-head p:not(.eyebrow) {
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
}

.cards-2 {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.card {
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  border: 0;
  box-shadow: var(--shadow);
}

.card p {
  margin-top: 0.7rem;
}

.card ul {
  margin: 0.8rem 0 0;
  padding-left: 1rem;
}

.card li + li {
  margin-top: 0.35rem;
}

.card-veil {
  background: linear-gradient(152deg, #ffffff 0%, rgba(162, 189, 173, 0.34) 100%);
  color: #111;
}

.card-spore {
  color: #111;
  background: linear-gradient(152deg, #ffffff 0%, rgba(162, 189, 173, 0.34) 100%);
}

.card-spore p,
.card-spore li {
  color: #111;
}

.values-shell {
  margin-top: 0.9rem;
  padding: 1.5rem;
}

#values .section-head,
#team .section-head {
  text-align: left;
}

#about .section-head,
#about .section-head.compact,
#values .section-head,
#values .section-head.compact,
#team .section-head,
#team .section-head.compact {
  max-width: 100%;
}

.values-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.value-card {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border: 0;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(16, 12, 22, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.value-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(260px 180px at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 38%, transparent 78%);
  opacity: 0.32;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.value-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 0;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(16, 12, 22, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.value-card:hover::before {
  opacity: 0.5;
}

.value-title,
.value-description {
  position: relative;
  z-index: 1;
}

.value-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62.4%;
  aspect-ratio: 1 / 1;
  padding: 1rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  z-index: 3;
  overflow: hidden;
}

.value-moss .value-content {
  background: linear-gradient(0deg, rgba(22, 14, 2, 0.9) 0%, rgba(38, 36, 5, 0.72) 48%, rgba(45, 68, 15, 0.03) 100%);
}

.value-axis .value-content {
  background: linear-gradient(0deg, rgba(97, 139, 57, 0.9) 0%, rgba(104, 118, 123, 0.74) 52%, rgba(142, 183, 115, 0.03) 100%);
}

.value-spore .value-content {
  background: linear-gradient(0deg, rgba(104, 118, 123, 0.9) 0%, rgba(137, 155, 150, 0.72) 50%, rgba(167, 188, 174, 0.03) 100%);
}

.value-core .value-content {
  background: linear-gradient(0deg, rgba(78, 59, 68, 0.9) 0%, rgba(70, 8, 58, 0.72) 48%, rgba(133, 61, 121, 0.03) 100%);
}

.value-title {
  margin: 0;
  font-size: 1.86rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(10, 10, 14, 0.42);
}

.value-description {
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(10, 10, 14, 0.38);
}

.value-moss {
  background-image:
    linear-gradient(145deg, rgba(24, 44, 10, 0.76) 0%, rgba(33, 57, 18, 0.62) 48%, rgba(55, 79, 43, 0.5) 100%),
    url("assets/values/value-moss.jpg");
}

.value-axis {
  background-image:
    linear-gradient(145deg, rgba(20, 60, 60, 0.72) 0%, rgba(33, 90, 88, 0.56) 52%, rgba(33, 57, 56, 0.48) 100%),
    url("assets/values/value-axis.jpg");
}

.value-spore {
  background-image:
    linear-gradient(145deg, rgba(21, 38, 44, 0.72) 0%, rgba(51, 78, 87, 0.54) 52%, rgba(84, 83, 107, 0.44) 100%),
    url("assets/values/value-spore.jpg");
}

.value-core {
  background-image:
    linear-gradient(145deg, rgba(33, 18, 50, 0.8) 0%, rgba(67, 35, 75, 0.66) 50%, rgba(109, 52, 95, 0.5) 100%),
    url("assets/values/value-core.jpg");
}

.science-shell {
  border-radius: var(--radius-xl);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.science-shell .section-head,
.science-shell .section-head.compact {
  max-width: 100%;
}

.science-shell .section-head p:not(.eyebrow) {
  max-width: 100%;
}

.science-steps {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.science-steps article {
  border: 0;
  border-radius: 0;
  padding: 1rem;
  background: linear-gradient(145deg, #fff 0%, #f2f6f4 100%);
}

.science-steps .step-index {
  position: relative;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--core);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  animation: none;
  isolation: isolate;
  perspective: 7rem;
  transform-style: preserve-3d;
}

.step-number {
  position: relative;
  z-index: 3;
}

.atom-orbit {
  --orbit-z: 0deg;
  --orbit-x: 68deg;
  --orbit-y: 0deg;
  --counter-x: -68deg;
  --counter-y: 0deg;
  --orbit-speed: 4.6s;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(112, 120, 118, 0.26);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(24, 22, 30, 0.12);
  pointer-events: none;
  transform: translate(-50%, -50%) rotateZ(var(--orbit-z)) rotateY(var(--orbit-y)) rotateX(var(--orbit-x));
  transform-origin: center;
  transform-style: preserve-3d;
}

.orbit-a {
  --orbit-z: 0deg;
  --orbit-x: 70deg;
  --orbit-y: 0deg;
  --counter-x: -70deg;
  --counter-y: 0deg;
  --orbit-speed: 4.2s;
  z-index: 4;
}

.orbit-b {
  --orbit-z: 62deg;
  --orbit-x: 64deg;
  --orbit-y: 18deg;
  --counter-x: -64deg;
  --counter-y: -18deg;
  --orbit-speed: 5.1s;
  border-color: rgba(112, 120, 118, 0.22);
  z-index: 1;
}

.orbit-c {
  --orbit-z: 124deg;
  --orbit-x: 72deg;
  --orbit-y: -18deg;
  --counter-x: -72deg;
  --counter-y: 18deg;
  --orbit-speed: 4.7s;
  border-color: rgba(112, 120, 118, 0.22);
  z-index: 4;
}

.atom-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.32rem;
  height: 0.32rem;
  margin: -0.16rem 0 0 -0.16rem;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.54) 16%, transparent 31%),
    radial-gradient(circle at 35% 32%, #c678b3 0%, var(--core) 48%, #4d003c 100%);
  box-shadow:
    inset -0.06rem -0.08rem 0.12rem rgba(20, 6, 18, 0.44),
    inset 0.04rem 0.04rem 0.08rem rgba(255, 255, 255, 0.45),
    0 0.08rem 0.16rem rgba(24, 22, 30, 0.22),
    0 0 0.42rem rgba(144, 55, 124, 0.42);
  z-index: 5;
  animation: atomBallA 4.2s linear infinite;
}

.ball-b {
  background:
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.52) 16%, transparent 31%),
    radial-gradient(circle at 35% 32%, #a8cf72 0%, var(--pulse) 48%, #264500 100%);
  box-shadow:
    inset -0.06rem -0.08rem 0.12rem rgba(18, 32, 4, 0.42),
    inset 0.04rem 0.04rem 0.08rem rgba(255, 255, 255, 0.42),
    0 0.08rem 0.16rem rgba(24, 22, 30, 0.2),
    0 0 0.42rem rgba(97, 139, 57, 0.4);
  animation: atomBallB 5.1s linear infinite;
}

.ball-c {
  background:
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.52) 16%, transparent 31%),
    radial-gradient(circle at 35% 32%, #b9cbc6 0%, var(--spore) 48%, #4e3b45 100%);
  box-shadow:
    inset -0.06rem -0.08rem 0.12rem rgba(24, 24, 28, 0.4),
    inset 0.04rem 0.04rem 0.08rem rgba(255, 255, 255, 0.42),
    0 0.08rem 0.16rem rgba(24, 22, 30, 0.2),
    0 0 0.42rem rgba(132, 156, 150, 0.44);
  animation: atomBallC 4.7s linear infinite;
}

.science-steps h3 {
  margin-top: 0.65rem;
}

.science-steps p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

.purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.purpose-card {
  position: relative;
  padding: 1.6rem;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.purpose-card p {
  margin-top: 0.8rem;
  color: var(--ink-soft);
}

.purpose-card::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(320px 180px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.16) 34%, transparent 72%);
  opacity: 0.22;
  transition: opacity 0.24s ease;
  z-index: 0;
  pointer-events: none;
}

.purpose-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg, transparent 16%, rgba(255, 255, 255, 0.26) 48%, transparent 82%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
  z-index: 0;
  pointer-events: none;
}

.purpose-card > * {
  position: relative;
  z-index: 1;
}

.purpose-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 20, 34, 0.14);
}

.purpose-card:hover::before {
  opacity: 0.46;
}

.purpose-card:hover::after {
  transform: translateX(130%);
}

.lines-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.line-card {
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.line-pharma {
  background: linear-gradient(150deg, rgba(38, 69, 0, 0.92) 0%, rgba(122, 154, 69, 0.9) 100%);
  color: #fff;
}

.line-nutra {
  background: linear-gradient(150deg, rgba(144, 55, 124, 0.92) 0%, rgba(77, 0, 60, 0.9) 100%);
  color: #fff;
}

.line-card p {
  margin-top: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
}

.team-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.team-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 0;
  padding: 1.1rem;
  background: linear-gradient(145deg, #fff 0%, rgba(162, 189, 173, 0.27) 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(130, 184, 107, 0.12), rgba(148, 119, 124, 0.12));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.team-card:hover::before {
  opacity: 1;
}

.team-card p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

.team-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.team-meta h3 {
  margin: 0;
}

.team-role-row {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.22rem;
}

.team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.22rem;
  height: 1.22rem;
  color: rgba(12, 88, 159, 0.94);
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.team-linkedin svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.team-linkedin:hover {
  color: #0a66c2;
  transform: translateY(-1px);
  opacity: 1;
}

.team-photo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(77, 0, 60, 0.12);
  flex-shrink: 0;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transform-origin: center;
}

.team-role {
  margin: 0;
  font-weight: 600;
  color: #22252c;
}

.team-exp {
  margin-top: 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.contact-banner {
  border-radius: var(--radius-xl);
  padding: 1.8rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  align-items: center;
  color: #fff;
  border: 0;
  background: linear-gradient(140deg, rgba(132, 156, 150, 0.62) 0%, rgba(77, 0, 60, 0.55) 100%);
  box-shadow: var(--shadow);
}

.contact-banner p {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
}

.contact-actions {
  display: flex;
  justify-content: flex-end;
  padding-left: 1rem;
}

.btn-contact {
  color: #fff;
  background: linear-gradient(140deg, var(--core) 0%, var(--cell) 100%);
}

.footer {
  padding: 2.2rem 0 1.8rem;
}

.footer-inner {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  display: grid;
  gap: 0.45rem;
}

.footer-inner img {
  width: min(320px, 72vw);
  height: auto;
}

.footer-inner p,
.footer-inner small {
  margin: 0;
  color: var(--ink-soft);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 0.25rem;
}

.footer-legal a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 22, 30, 0.2);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--core);
  border-color: var(--core);
}

.section-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.section-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1081px) {
  :root {
    --shadow: 0 14px 32px rgba(24, 20, 34, 0.1);
  }

  main {
    padding-top: calc(10.4rem + var(--topbar-offset));
  }

  .hero {
    padding-top: 2rem;
    padding-bottom: 2.75rem;
  }

  .section {
    padding: 4.25rem 0;
  }

  .section-head {
    max-width: 82ch;
  }

  .section-head.compact {
    max-width: 74ch;
  }

  .hero-grid {
    gap: 1.5rem;
  }

  .hero-copy,
  .hero-panel {
    padding: 2.35rem;
  }

  .hero-copy {
    padding: 0;
  }

  .science-shell {
    padding: 0;
  }

  .cards-2 {
    margin-top: 1.35rem;
    gap: 1.35rem;
  }

  .card {
    padding: 1.75rem;
  }

  .purpose-grid {
    gap: 1.35rem;
  }

  .purpose-card {
    padding: 2rem;
  }

  .values-shell {
    padding: 2rem;
  }

  .values-grid {
    margin-top: 1.25rem;
    gap: 1.15rem;
  }

  .value-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  .value-content {
    width: 64%;
    padding: 1.2rem 1.2rem 1.3rem;
  }

  .science-shell {
    padding: 0;
  }

  .science-steps {
    margin-top: 1.2rem;
    gap: 1.05rem;
  }

  .science-steps article {
    padding: 1.2rem;
  }

  .team-grid {
    margin-top: 1.25rem;
    gap: 1.05rem;
  }

  .team-card {
    padding: 1.35rem;
  }

  .contact-banner {
    padding: 2.2rem;
    gap: 1.45rem;
  }

  .footer {
    padding: 3rem 0 2rem;
  }
}

@keyframes liquidShift {
  0% {
    transform: translate3d(var(--dx), var(--dy), 0) scale(calc(1.05 + var(--pulse))) rotate(calc(var(--rot) - 1.2deg));
  }
  19% {
    transform: translate3d(calc(var(--dx) + 2px), calc(var(--dy) - 1px), 0) scale(calc(1.08 + var(--pulse))) rotate(calc(var(--rot) + 0.8deg));
  }
  43% {
    transform: translate3d(calc(var(--dx) - 1px), calc(var(--dy) + 3px), 0) scale(calc(1.11 + var(--pulse))) rotate(calc(var(--rot) - 0.6deg));
  }
  68% {
    transform: translate3d(calc(var(--dx) + 3px), calc(var(--dy) + 1px), 0) scale(calc(1.07 + var(--pulse))) rotate(calc(var(--rot) + 1.1deg));
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), 0) scale(calc(1.05 + var(--pulse))) rotate(calc(var(--rot) - 1.2deg));
  }
}

@keyframes waterDrift {
  0% {
    transform: translate3d(-3%, -1.5%, 0) scale(1.08) rotate(-1.4deg);
    opacity: 0.66;
  }
  50% {
    transform: translate3d(1.4%, 1.1%, 0) scale(1.14) rotate(0.8deg);
    opacity: 0.76;
  }
  100% {
    transform: translate3d(3.2%, -1.1%, 0) scale(1.1) rotate(-0.6deg);
    opacity: 0.68;
  }
}

@keyframes waterCaustics {
  0% {
    background-position:
      0% 0%,
      100% 100%,
      50% 50%;
    transform: scale(1.14) translate3d(0, 0, 0);
  }
  50% {
    background-position:
      38% 26%,
      60% 72%,
      45% 54%;
    transform: scale(1.2) translate3d(-1.5%, 1.3%, 0);
  }
  100% {
    background-position:
      74% 58%,
      22% 16%,
      55% 47%;
    transform: scale(1.16) translate3d(1.5%, -1.2%, 0);
  }
}

@keyframes bgBlobA {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, -4%, 0) scale(1.09);
  }
}

@keyframes bgBlobB {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-4%, 3%, 0) scale(1.07);
  }
}

@keyframes filmShimmer {
  0% {
    opacity: 0.86;
    transform: translate3d(calc(var(--dx) * -0.2), calc(var(--dy) * -0.1), 0);
  }
  33% {
    opacity: 0.6;
    transform: translate3d(calc(var(--dx) * -0.34), calc(var(--dy) * -0.28), 0);
  }
  71% {
    opacity: 0.74;
    transform: translate3d(calc(var(--dx) * -0.14), calc(var(--dy) * -0.22), 0);
  }
  100% {
    opacity: 0.86;
    transform: translate3d(calc(var(--dx) * -0.2), calc(var(--dy) * -0.1), 0);
  }
}

@keyframes cellFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1px, -10px, 0) scale(1.08);
  }
}

@keyframes netFlow {
  0% {
    stroke-dashoffset: 180;
  }
  100% {
    stroke-dashoffset: -180;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

@keyframes corePulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.12);
  }
}

@keyframes ripplePulse {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  25% {
    opacity: 0.65;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

@keyframes stepBacteriaPulse {
  0%,
  100% {
    transform: scale(1);
    filter: saturate(102%) brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: saturate(118%) brightness(1.06);
  }
}

@keyframes atomBallA {
  0% {
    transform: translate(1.36rem, 0) scale(1.18);
    opacity: 1;
    filter: brightness(1.12);
    z-index: 6;
  }
  25% {
    transform: translate(0, 0.42rem) scale(0.9);
    opacity: 0.78;
    filter: brightness(0.98);
    z-index: 4;
  }
  50% {
    transform: translate(-1.36rem, 0) scale(0.52);
    opacity: 0.36;
    filter: brightness(0.82);
    z-index: 1;
  }
  75% {
    transform: translate(0, -0.42rem) scale(0.92);
    opacity: 0.8;
    filter: brightness(1);
    z-index: 4;
  }
  100% {
    transform: translate(1.36rem, 0) scale(1.18);
    opacity: 1;
    filter: brightness(1.12);
    z-index: 6;
  }
}

@keyframes atomBallB {
  0% {
    transform: translate(0.72rem, -1.04rem) scale(1.12);
    opacity: 1;
    filter: brightness(1.1);
    z-index: 6;
  }
  25% {
    transform: translate(0.52rem, 0.38rem) scale(0.86);
    opacity: 0.72;
    filter: brightness(0.96);
    z-index: 4;
  }
  50% {
    transform: translate(-0.72rem, 1.04rem) scale(0.44);
    opacity: 0.34;
    filter: brightness(0.82);
    z-index: 1;
  }
  75% {
    transform: translate(-0.52rem, -0.38rem) scale(0.88);
    opacity: 0.76;
    filter: brightness(1);
    z-index: 4;
  }
  100% {
    transform: translate(0.72rem, -1.04rem) scale(1.12);
    opacity: 1;
    filter: brightness(1.1);
    z-index: 6;
  }
}

@keyframes atomBallC {
  0% {
    transform: translate(-0.82rem, -0.96rem) scale(0.4);
    opacity: 0.34;
    filter: brightness(0.82);
    z-index: 1;
  }
  25% {
    transform: translate(0.46rem, -0.5rem) scale(0.88);
    opacity: 0.74;
    filter: brightness(0.98);
    z-index: 4;
  }
  50% {
    transform: translate(0.82rem, 0.96rem) scale(1.22);
    opacity: 1;
    filter: brightness(1.12);
    z-index: 6;
  }
  75% {
    transform: translate(-0.46rem, 0.5rem) scale(0.86);
    opacity: 0.72;
    filter: brightness(0.96);
    z-index: 4;
  }
  100% {
    transform: translate(-0.82rem, -0.96rem) scale(0.4);
    opacity: 0.34;
    filter: brightness(0.82);
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-layer::before,
  .bg-layer::after,
  .bg-shape {
    animation: none;
  }

  .cell-dot,
  .ripple,
  .bioreactor-core,
  .bioreactor-net path,
  .node,
  .atom-orbit,
  .atom-ball {
    animation: none;
  }

  .section-fade {
    transition: none;
  }

  .value-card {
    transition: none;
  }
}

@media (max-width: 1080px) {
  .nav {
    display: none;
  }

  .hero-grid,
  .purpose-grid,
  .lines-grid,
  .contact-banner,
  .cards-2 {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    justify-content: flex-start;
    padding-left: 0;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .science-steps,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .topbar-inner {
    min-height: 108px;
    border-radius: 0;
    padding: 0.45rem 0.8rem;
  }

  .logo-liquid {
    min-width: 316px;
    min-height: 90px;
    border-radius: 0;
  }

  .logo-glyph {
    width: 235px;
    height: 78px;
  }

  body.is-scrolled .topbar-inner {
    min-height: 70px;
    padding: 0.16rem 0.52rem;
  }

  body.is-scrolled .logo-liquid {
    min-width: 212px;
    min-height: 52px;
  }

  body.is-scrolled .logo-glyph {
    width: 160px;
    height: 52px;
  }

  .lang-btn {
    font-size: 0.84rem;
  }

  .bioreactor {
    width: 168px;
    height: 168px;
  }

  main {
    padding-top: calc(9.1rem + var(--topbar-offset));
  }

  .section {
    padding: 2.2rem 0;
  }
}

@media (max-width: 640px) {
  :root {
    --topbar-offset: max(0.92rem, calc(env(safe-area-inset-top) + 0.92rem));
  }

  .topbar {
    top: var(--topbar-offset);
    padding-top: 0;
  }

  .topbar-inner {
    grid-template-columns: 1fr auto;
    align-items: start;
    min-height: 84px;
    gap: 0.45rem;
    padding: 0.35rem 0.58rem;
    border-radius: 0;
  }

  .brand {
    grid-column: 1;
    justify-self: start;
    align-self: center;
  }

  .lang-switch {
    grid-column: 2;
    justify-self: end;
    align-self: start;
    width: auto;
    min-width: 92px;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    border-color: rgba(24, 22, 30, 0.2);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 3px 10px rgba(34, 30, 42, 0.08);
  }

  .logo-liquid {
    width: clamp(162px, 57vw, 220px);
    min-width: 0;
    min-height: 62px;
    border-radius: 0;
    padding: 0.2rem 0.32rem;
  }

  .logo-glyph {
    width: clamp(142px, 50vw, 188px);
    height: 52px;
  }

  body.is-scrolled .topbar-inner {
    min-height: 58px;
    padding: 0.12rem 0.4rem;
  }

  body.is-scrolled .logo-liquid {
    width: clamp(142px, 50vw, 190px);
    min-width: 0;
    min-height: 46px;
    padding: 0.08rem 0.26rem;
  }

  body.is-scrolled .logo-glyph {
    width: clamp(124px, 44vw, 164px);
    height: 40px;
  }

  .lang-btn {
    min-width: 46px;
    text-align: center;
    font-size: 0.76rem;
    padding: 0.28rem 0.34rem;
  }

  body.is-scrolled .lang-btn {
    min-width: 42px;
    font-size: 0.7rem;
    padding: 0.22rem 0.28rem;
  }

  .bioreactor {
    width: 152px;
    height: 152px;
  }

  .living-caption {
    font-size: 0.88rem;
  }

  .hero-copy,
  .hero-panel,
  .science-shell,
  .purpose-card,
  .line-card,
  .team-card,
  .contact-banner,
  .card,
  .values-shell {
    padding: 1.2rem;
  }

  .hero-copy {
    padding: 0;
  }

  .science-shell {
    padding: 0;
  }

  .section {
    padding: 1.6rem 0;
  }

  .value-content {
    width: 76%;
    padding: 0.8rem 0.8rem 0.9rem;
  }

  .value-title {
    font-size: 1.44rem;
  }

  .value-description {
    font-size: 0.8rem;
    line-height: 1.28;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  main {
    padding-top: calc(8.2rem + var(--topbar-offset));
  }
}